Skip to content

Commit

Permalink
Merge pull request #25 from TitanPlayz100/pixi-test
Browse files Browse the repository at this point in the history
Overhauled Rendering With PIXI.js
  • Loading branch information
TitanPlayz100 authored Oct 29, 2024
2 parents 9fb625c + e015130 commit b906e69
Show file tree
Hide file tree
Showing 35 changed files with 4,143 additions and 4,099 deletions.
15 changes: 5 additions & 10 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ name: 'Publish Tauri App'
on:
workflow_dispatch:

# This workflow will trigger on each push to the `release` branch to create or update a GitHub release, build your app, and upload the artifacts to the release.

jobs:
publish-tauri:
permissions:
Expand All @@ -17,7 +15,7 @@ jobs:
# args: '--target aarch64-apple-darwin'
#- platform: 'macos-latest' # for Intel based macs.
# args: '--target x86_64-apple-darwin'
- platform: 'ubuntu-22.04' # for Tauri v1 you could replace this with ubuntu-20.04.
- platform: 'ubuntu-20.04'
args: ''
- platform: 'windows-latest'
args: ''
Expand All @@ -34,32 +32,29 @@ jobs:
- name: install Rust stable
uses: dtolnay/rust-toolchain@stable
with:
# Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}

- name: install dependencies (ubuntu only)
if: matrix.platform == 'ubuntu-22.04' # This must match the platform value defined above.
if: matrix.platform == 'ubuntu-20.04'
run: |
sudo apt-get update
sudo apt-get install -y libwebkit2gtk-4.0-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
# webkitgtk 4.0 is for Tauri v1 - webkitgtk 4.1 is for Tauri v2.
# You can remove the one that doesn't apply to your app to speed up the workflow a bit.

sudo apt-get install -y libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
- run: |
mkdir -p tauri/src
cp index.html tauri/src/
cp -r assets/ tauri/src/
cp -r styles/ tauri/src/
cp -r src/ tauri/src/
cp -r lib/ tauri/src/
cd tauri
npm install
- uses: tauri-apps/tauri-action@v0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
tagName: app-v__VERSION__ # automatically replaces \_\_VERSION\_\_ with the app version
releaseName: 'App v__VERSION__'
releaseBody: 'See the assets to download this version and install.'
releaseDraft: true
Expand Down
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.vscode/
package-lock.json
Cargo.lock
README.md
*.d.ts
jsconfig.json
112 changes: 62 additions & 50 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,62 @@
# Teti README

Hosted on github pages [here](https://titanplayz100.github.io/teti/)

The info page can be found [here](https://titanplayz100.github.io/teti/info.html)

> [!WARNING]
> Firefox is not supported (due to import assertions)
## Desktop App
### NEW!

Releases are now run through a workflow. They are **up to date** and contain all the latest features.

App build using Tauri, feel free to open issues and PRs.

## Data Formats (for my convenience)
### Gamemode Structure (gamemodes.json)
```js
gamemodes = {
"gamemode_name": {
settings: {}, // settings that override the default * settings
displayName: "", // name shown on gamemode selection
objectiveText: "", // subtext displayed on right side
goalStat: "", // stat being tracked (valid property in stats class)
target: "", // target (valid target in settings)
result: "", // displayed as result (another valid stat in stats class)

// TO BE ADDED LATER
music: "", // custom song that can play
compmusic: "", // custom song that played on pb pace
startBoard: "", // starting board, tetrio map format
effects: [], // custom background / effects
}
}
```

Add functionality mainly in `features/modes.js`.
You can modify existing modules as well from other files

### Adding Audio (sfxlist.json)
```json
{
{
"name": "<name used in code>",
"path": "assets/sfx/<file path / name>.<ext>"
}
}
```
Use with `this.game.sounds.playSound(<name>)`
# Teti README

Hosted on github pages [here](https://titanplayz100.github.io/teti/)

The info page can be found [here](https://titanplayz100.github.io/teti/info.html)

> [!WARNING]
> Firefox is not supported (due to import assertions)
## Desktop App
Releases are now run through a workflow. They are **up to date** and contain all the latest features.

App build using Tauri, feel free to open issues and PRs.

## Data Formats (for my convenience)
### Gamemode Structure (gamemodes.json)
```js
gamemodes = {
"gamemode_name": {
settings: {}, // settings that override the default * settings
displayName: "", // name shown on gamemode selection
objectiveText: "", // subtext displayed on right side
goalStat: "", // stat being tracked (valid property in stats class)
target: "", // target (valid target in settings)
result: "", // displayed as result (another valid stat in stats class)

// TO BE ADDED LATER
music: "", // custom song that can play
compmusic: "", // custom song that played on pb pace
startBoard: "", // starting board, tetrio map format
effects: [], // custom background / effects
}
}
```

Add functionality mainly in `features/modes.js`.
You can modify existing modules as well from other files

### Adding Audio (sfxlist.json)
```json
{
{
"name": "<name used in code>",
"path": "assets/sfx/<file path / name>.<ext>"
}
}
```
Use with `this.game.sounds.playSound(<name>)`


## Types for PIXIjs
Workaround to use types when using pixijs imported through script tag:
- download [pixi.js.d.ts](https://github.com/pixijs/pixijs/releases) from pixijs repo and place file in /src
- setup jsconfig.json to automatically detect pixi.js.d.ts for types

```json
{
"typeAcquisition": {
"include": ["pixi.js.d.ts"]
}
}
```
1 change: 1 addition & 0 deletions assets/icons/play.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/icons/reset.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/particle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 22 additions & 52 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,71 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>teti</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./assets/titanicon.ico">
<title>teti</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/boards.css">
<link rel="stylesheet" href="./styles/menus.css">
<link rel="stylesheet" href="./styles/miscmenus.css">
<link rel="stylesheet" href="./styles/settings.css">
<link rel="preload" href="./styles/menus.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="./styles/miscmenus.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="./styles/settings.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script defer src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/gsap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/PixiPlugin.min.js"></script>
<script defer src="./src/main.js" type="module"></script>
</head>
<body id="body">
<!-- BOARD -->
<div id="board">
<div id="backboard"></div>
<!-- todo move to pixi -->
<p class="text" id="warningText">⚠ GO DOWN</p>

<div id="backborder"></div>
<div id="dangerOverlay"></div>
<button id="openSettingsButton" onclick="modal.openModal('settingsPanel')">
<img src="./assets/icons/settings.svg">
</button>
<button id="editButton" onclick="modal.openModal('editMenu')">
<img src="./assets/icons/edit.svg">
</button>

<canvas id="next" onclick="modal.openModal('queueModify')"></canvas>
<canvas id="hold" onclick="modal.openModal('queueModify')"></canvas>
<canvas id="playingfield"></canvas>
<p class="text" id="timeLeftText">60S LEFT</p>
<div id="clickareas"></div>

<progress id="garbageQueue" max="40" value="0"></progress>
<progress id="lockTimer" max="100" value="50"></progress>
<progress id="lockCounter" max="100" value="50"></progress>
<progress id="climbSpeedBar" max="100" value="0"></progress>

<div>
<p class="text nextText">Next</p>
<p class="text holdText">Hold</p>
<p class="actiontext" id="cleartext" style="top: 25%;"></p>
<p class="actiontext" id="combotext" style="top: 35%;"></p>
<p class="actiontext" id="btbtext" style="top: 40%;"></p>
<p class="actiontext" id="pctext" style="top: 50%;"></p>
<p class="actiontext" id="linessent" style="right: 120%; top: 17%;"></p>
<p class="statstext" id="stats1" style="bottom: 5%;"></p>
<p class="statstext" id="stats2" style="bottom: 15%;"></p>
<p class="statstext" id="stats3" style="bottom: 25%;"></p>
<p class="smalltext" id="smallStat1" style="bottom: 2.5%"></p>
<p class="smalltext" id="smallStat2" style="bottom: 12.5%"></p>
<p class="smalltext" id="smallStat3" style="bottom: 22.5%"></p>
<p class="smalltext" id="statName1" style="bottom: 0%;"></p>
<p class="smalltext" id="statName2" style="bottom: 10%;"></p>
<p class="smalltext" id="statName3" style="bottom: 20%;"></p>
<p class="text objectiveText" id="objective"></p>
<p class="smalltext" id="objectiveText" style="left: 110%; bottom: 14%;"></p>
<p class="smalltext" id="history" style="left: 110%; bottom: 0%; width: 10vw; display: none;">history: 0</p>
</div>

<div id="redochoices">
<button class="redochoice selected">1</button>
<button class="redochoice">2</button>
</div>
</div>

<!-- INFO OVERLAYS -->
<div id="splashScreen" onclick="finishLoad()">
<h1>Teti</h1>
Expand All @@ -75,9 +37,18 @@ <h1>Teti</h1>

<div id="nofocus">OUT OF FOCUS<span>Click To Return</span></div>

<div id="redochoices">
<p class="smalltext" id="history" style="font-size: 0.9em; color: var(--l-gray); width: 100%;">history: 0</p>
<button class="redochoice selected">1</button>
<button class="redochoice">2</button>
</div>

<!-- MAIN MENU -->
<dialog id="settingsPanel" class="dialog">
<!-- top row -->
<button id="closeSettings" class="settingPanelButton smallPanelButton" onclick="menu.toggleDialog()" title="Continue playing">
<img src="./assets/icons/play.svg" style="transform: translateY(-15%); height: 200%;">
</button>
<button id="handling" class="settingPanelButton smallPanelButton" onclick="modal.openModal('handlingDialog')" title="Change handling/tuning">
<img src="./assets/icons/handling.svg" style="transform: translateY(10%); height: 90%;">
</button>
Expand Down Expand Up @@ -146,17 +117,17 @@ <h1>Teti</h1>
<div class="settingRow"><p>Background URL/Hex</p> <input class="option textInput" type="text" id="background" /></div>
<div class="settingRow"><p>Block Skin URL/Name</p> <input class="option textInput" type="text" id="skin" list="options"/></div>
<div class="settingRow"><p>Board Opacity</p> <input class="option range" type="range" id="boardOpacity" min="0" max="100" step="1"/></div>
<div class="settingRow"><p>Board Size</p> <input class="option range" type="range" id="boardHeight" min="0" max="100" step="1" /></div>
<div class="settingRow"><p>Board Size</p> <input class="option range" type="range" id="boardHeight" min="0" max="130" step="1" /></div>
<div class="settingRow"><p>Board Bounciness</p> <input class="option range" type="range" id="boardBounce" min="-5" max="20" step="0.1" /></div>
<div class="settingRow"><p>Enable Grid</p> <input class="option check" type="checkbox" id="showGrid" /></div>
<div class="settingRow"><p>Grid opacity</p> <input class="option range" type="range" id="gridopacity" min="0" max="100" step="2" /></div>
<div class="settingRow"><p>Grid Type</p> <select class="option dropdown" id="gridType"></select></div>
<div class="settingRow"><p>Shadow opacity</p> <input class="option range" type="range" id="shadowOpacity" min="0" max="100" step="5" /></div>
<div class="settingRow"><p>Coloured Shadow</p> <input class="option check" type="checkbox" id="colouredShadow" /></div>
<div class="settingRow"><p>Coloured Borders</p> <input class="option check" type="checkbox" id="colouredQueues" /></div>
<div class="settingRow"><p>Rainbow effect on fast pace</p> <input class="option check" type="checkbox" id="rainbowPB" /></div>
<div class="settingRow"><p>Show Lock Bar</p> <input class="option check" type="checkbox" id="lockBar" /></div>
<div class="settingRow"><p>Show out of focus text</p> <input class="option check" type="checkbox" id="outoffocus" /></div>
<div class="settingRow"><p>Action Text</p> <input class="option check" type="checkbox" id="actionText" /></div>
<div class="settingRow"><p>Enable Particles</p> <input class="option check" type="checkbox" id="particles" /></div>
<div class="settingRow"><p>Particle Volume</p> <input class="option range" type="range" id="particleVolume" min="5" max="1000" step="5" /></div>
<div class="settingRow"><p>Particle Size</p> <input class="option range" type="range" id="particleSize" min="0.1" max="10" step="0.1" /></div>
Expand All @@ -183,7 +154,6 @@ <h1>Teti</h1>
<div class="settingRow"><p>Infinite Hold</p> <input class="option check" type="checkbox" id="infiniteHold" /></div>
<div class="settingRow"><p>Allow Queue Modification</p> <input class="option check" type="checkbox" id="allowQueueModify" /></div>
<div class="settingRow"><p>Line Clear Delay</p> <input class="option range" type="range" id="clearDelay" min="0" max="1000" step="5" /></div>
<div class="settingRow"><p>Line Clear Delay</p> <input class="option range" type="range" id="clearDelay" min="0" max="1000" step="5" /></div>
<div class="settingRow"><p>Allspin</p> <input class="option check" type="checkbox" id="allspin" /></div>
<div class="settingRow"><p>Allspin's are mini</p> <input class="option check" type="checkbox" id="allspinminis" /></div>
<div class="settingRow"><p>Allow history (undo/redo)</p> <input class="option check" type="checkbox" id="history" /></div>
Expand Down
Loading

0 comments on commit b906e69

Please sign in to comment.