changed all game references to exported instance, less oop and more j…

…s like, started adding readysetgo counter

README.md

@@ -53,7 +53,7 @@ You can modify existing modules as well from other files
     }
 }
 ```
-Use with `this.game.sounds.playSound(<name>)`
+Use with `Game.sounds.playSound(<name>)`
 
 
 ## Types for PIXIjs

index.html

@@ -168,6 +168,7 @@ <h1>Teti</h1>
             <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>
             <div class="settingRow"><p>Stride (better queue)</p> <input class="option check" type="checkbox" id="stride" /></div>
+            <!-- <div class="settingRow"><p>Use ready set go countdown</p> <input class="option check" type="checkbox" id="readysetgo" /></div> -->
             <div class="settingRow"><p>Randomiser</p> <select class="option dropdown" id="randomiser"></select></div>
             <div class="settingRow"><p>Kick Table</p> <select class="option dropdown" id="kicktable"></select></div>
             <div class="settingRow"><p>Sidebar Stats</p> 
@@ -299,9 +300,7 @@ <h3>Personal Bests</h3>
         <div class="settingsTop"><h2>REPLAYS<h2></div>
 
         <div class="settingsBox" style="align-items: center;">
-            <p>Replays are currently in beta</p>
-            <p>They probably are not able to be shared yet <br><i>(due to settings and fps related issues)</i></p>
-            <p>They may break from upcoming updates</p>
+            <p>Currently in beta, can change in the future</p>
             <div id="uploadReplay" class="closeDialogButton" onclick="document.getElementById('replayUpload').click()">
                 <input type="file" id="replayUpload" onchange="menu.uploadReplay(this)" hidden accept=".trf">
                 <p>Open Replay</p>

info.md

@@ -65,21 +65,17 @@ Skins from [YHF](https://you.have.fail/ed/at/tetrioplus/)
 - clean, modern, and animated menus
 - responsive design
 - touhou jazz music
-- Replays of games can be saved and viewed
+- Replays can be saved and viewed
 
 ## TODO list
-Things that I am working on based on other changes
-- ready set go start option
+Things that might be in progress
+- ready set go start option (working on)
 - rotation centres
 - bag seperators
 - gravity increase over time (and maybe fix softdrop)
 - fix rounding stuff with end screen
 - pro mode (large line count on board)
 
-Maybe:
-- change game class to be export modules instead
-    - remove all this.game references in replacement with just the instance being imported
-- make setting menus be json generated
 
 Zenith mode additions
 - add fatigue:
@@ -96,11 +92,17 @@ Zenith mode additions
     - attacks 8 or larger split using {!!} thing (0.5s gap)
 - option for expert mode style
 
+[Longterm ideas here](#feature-wishlist)
+
 ***
 
 ## Updates
+#### v1.4.2
+- Instead of using this.game, the Game instance is exported (less object oriented and more intuitive)
+- started adding ready set go option
+
 #### v1.4.1
-- replays save as milliseconds instead of frames => fps independant
+- replays save as milliseconds instead of frames
 - settings properly load from replays now
 
 ### v1.4.0 => REPLAYS
@@ -331,4 +333,5 @@ Future wants for game, kinda ordered by ease and desire for feature
     - leaderboards
     - connecting tetrio stats
 - touch settings
-- bot to play against
+- bot to play against
+- make setting menus be json generated

src/data/defaultSettings.json

@@ -46,7 +46,8 @@
         "backfireMulti": 1,
         "lookAheadPieces": 3,
         "raceTarget": 500,
-        "requiredAltitude": 1650
+        "requiredAltitude": 1650,
+        "readysetgo": false
     },
     "control": {
         "rightKey": "ArrowRight",

src/display/animations.js

@@ -1,15 +1,10 @@
-import { Game } from "../game.js";
+import { Game } from "../main.js";
 
 export class Animations {
     actionTexts = ["cleartext", "combotext", "btbtext", "spiketext", "pctext", "timelefttext"]
 
-    /**
-     * @param {Game} game 
-     */
-    constructor(game) {
-        this.game = game;
-        this.texts = game.pixi.texts;
-        this.pixi = game.pixi;
+    constructor() {
+        this.texts = Game.pixi.texts;
         gsap.registerPlugin(PixiPlugin); // gsap animation library
         PixiPlugin.registerPIXI(PIXI);
 
@@ -36,8 +31,8 @@ export class Animations {
         this.texts[type].animation.kill();
         const text = this.texts[type].sprite;
         text.text = message;
-        this.texts[type].animation = gsap.timeline({ onComplete: () => this.game.mechanics.spikeCounter = 0 })
-            .to(text, { duration: 0.2, pixi: { alpha: 1, x: - this.pixi.width * 1 / 10, scaleX: 1 }, ease: "power1.inOut" })
+        this.texts[type].animation = gsap.timeline({ onComplete: () => Game.mechanics.spikeCounter = 0 })
+            .to(text, { duration: 0.2, pixi: { alpha: 1, x: - Game.pixi.width * 1 / 10, scaleX: 1 }, ease: "power1.inOut" })
             .to(text, { duration: 2, pixi: { alpha: 1, scaleX: 1.1 } })
             .to(text, { duration: 0.2, pixi: { alpha: 0, x: 0 }, ease: "power1.inOut" })
     }
@@ -54,9 +49,9 @@ export class Animations {
     }
 
     spikeTextStyle() {
-        if (this.game.mechanics.spikeCounter >= 20) return { colour: "#fad9f7", power: 12 };
-        if (this.game.mechanics.spikeCounter >= 15) return { colour: "#7ac9fa", power: 8 };
-        if (this.game.mechanics.spikeCounter >= 10) return { colour: "#faa823", power: 4 };
+        if (Game.mechanics.spikeCounter >= 20) return { colour: "#fad9f7", power: 12 };
+        if (Game.mechanics.spikeCounter >= 15) return { colour: "#7ac9fa", power: 8 };
+        if (Game.mechanics.spikeCounter >= 10) return { colour: "#faa823", power: 4 };
         return { colour: "white", power: 1 };
     }
 
@@ -71,7 +66,7 @@ export class Animations {
     }
 
     showTimeLeftText(msg) {
-        const textContainer = this.pixi.app.stage.getChildByLabel("textContainer");
+        const textContainer = Game.pixi.app.stage.getChildByLabel("textContainer");
         this.texts.timelefttext.animation.kill();
         const text = this.texts.timelefttext.sprite;
         text.text = msg;
@@ -108,37 +103,37 @@ export class Animations {
 
     // reset
     resetAnimation() {
-        this.pixi.board.mask = this.pixi.resetMask;
-        this.pixi.board.addChild(this.pixi.resetMask);
-        this.pixi.board.addChild(this.pixi.resetTriangle);
-        this.game.stopGameTimers();
-        this.game.controls.resetting = true;
+        Game.pixi.board.mask = Game.pixi.resetMask;
+        Game.pixi.board.addChild(Game.pixi.resetMask);
+        Game.pixi.board.addChild(Game.pixi.resetTriangle);
+        Game.stopGameTimers();
+        Game.controls.resetting = true;
         const animateOpacity = () => {
             gsap.timeline()
-                .to(this.pixi.board, { duration: 0, pixi: { alpha: 0 } })
-                .to(this.pixi.board, { duration: 0.2, pixi: { alpha: 1 } })
+                .to(Game.pixi.board, { duration: 0, pixi: { alpha: 0 } })
+                .to(Game.pixi.board, { duration: 0.2, pixi: { alpha: 1 } })
         }
 
         gsap.timeline({ onComplete: () => { this.endResetAnimation(); animateOpacity(); } })
-            .to(this.pixi.resetMask, { duration: 0, pixi: { scale: 1 } })
-            .to(this.pixi.resetMask, { duration: 0.4, pixi: { scale: 0 }, ease: "power1.inOut", })
+            .to(Game.pixi.resetMask, { duration: 0, pixi: { scale: 1 } })
+            .to(Game.pixi.resetMask, { duration: 0.4, pixi: { scale: 0 }, ease: "power1.inOut", })
 
         gsap.timeline()
-            .to(this.pixi.resetTriangle, { duration: 0, pixi: { scale: 0 } })
-            .to(this.pixi.resetTriangle, { duration: 0.4, pixi: { scale: 9 }, ease: "power1.inOut", })
+            .to(Game.pixi.resetTriangle, { duration: 0, pixi: { scale: 0 } })
+            .to(Game.pixi.resetTriangle, { duration: 0.4, pixi: { scale: 9 }, ease: "power1.inOut", })
     }
 
     endResetAnimation() {
-        this.game.startGame();
-        this.game.controls.resetting = false;
-        this.pixi.board.mask = null;
-        this.pixi.board.removeChild(this.pixi.resetMask);
-        this.pixi.board.removeChild(this.pixi.resetTriangle);
+        Game.startGame();
+        Game.controls.resetting = false;
+        Game.pixi.board.mask = null;
+        Game.pixi.board.removeChild(Game.pixi.resetMask);
+        Game.pixi.board.removeChild(Game.pixi.resetTriangle);
     }
 
     toggleDangerBG(danger) {
-        gsap.to(this.pixi.boardDanger, { duration: 0.2, pixi: { alpha: danger ? 0.1 : 0 } });
-        gsap.to(this.pixi.border, { duration: 0.2, pixi: { tint: danger ? "red" : "none" } });
+        gsap.to(Game.pixi.boardDanger, { duration: 0.2, pixi: { alpha: danger ? 0.1 : 0 } });
+        gsap.to(Game.pixi.border, { duration: 0.2, pixi: { tint: danger ? "red" : "none" } });
     }
 
     flashWarning(inDanger) {

src/display/boardEffects.js

@@ -1,5 +1,5 @@
 import { pbTrackingStat } from "../data/data.js";
-import { Game } from "../game.js";
+import { Game } from "../main.js";
 
 export class BoardEffects {
     X = 0;
@@ -19,14 +19,6 @@ export class BoardEffects {
 
     divBoard = document.getElementById("board");
 
-    /**
-     * 
-     * @param {Game} game 
-     */
-    constructor(game) {
-        this.game = game;
-    }
-
     move(forceX, forceY) {
         this.dX += forceX;
         this.dY += forceY;
@@ -47,7 +39,7 @@ export class BoardEffects {
         this.Y = this.clamp(this.Y, 0.5);
 
         if (this.X != 0 || this.Y != 0) {
-            this.game.pixi.app.canvas.style.translate = `${this.X}px ${this.Y}px`
+            Game.pixi.app.canvas.style.translate = `${this.X}px ${this.Y}px`
         }
     }
 
@@ -62,7 +54,7 @@ export class BoardEffects {
         this.R = this.clamp(this.R, 0.1);
 
         if (this.R != 0) {
-            this.game.pixi.app.canvas.style.rotate = `${this.R}deg`
+            Game.pixi.app.canvas.style.rotate = `${this.R}deg`
         }
     }
 
@@ -72,31 +64,31 @@ export class BoardEffects {
     }
 
     rainbowBoard() {
-        const stats = this.game.stats;
-        const pbs = this.game.profilestats.personalBests;
-        const gamemode = this.game.settings.game.gamemode;
+        const stats = Game.stats;
+        const pbs = Game.profilestats.personalBests;
+        const gamemode = Game.settings.game.gamemode;
 
-        if (!this.game.settings.display.rainbowPB ||
-            !this.game.settings.game.competitiveMode ||
+        if (!Game.settings.display.rainbowPB ||
+            !Game.settings.game.competitiveMode ||
             stats.time < 0.5 || pbs[gamemode] == undefined) return;
         if (this.paceCooldown > 0) { this.paceCooldown--; return; }
 
-        const trackingStat = pbTrackingStat[this.game.modes.modeJSON.goalStat];
+        const trackingStat = pbTrackingStat[Game.modes.modeJSON.goalStat];
         const current = stats[trackingStat];
         const pbpace = pbs[gamemode].pbstats[trackingStat];
         if (current < pbpace && this.hasPace) {
-            this.game.sounds.playSound("pbend");
+            Game.sounds.playSound("pbend");
             this.toggleRainbow(false);
         } else if (current >= pbpace && !this.hasPace) {
-            this.game.sounds.playSound("pbstart");
+            Game.sounds.playSound("pbstart");
             this.toggleRainbow(true);
         }
 
-        this.paceCooldown = this.game.tickrate * 3;
+        this.paceCooldown = Game.tickrate * 3;
     }
 
     toggleRainbow(pace) {
-        this.game.animations.playRainbowAnimation(pace);
+        Game.animations.playRainbowAnimation(pace);
         this.hasPace = pace;
     }
 }

src/display/particles.js

@@ -1,4 +1,4 @@
-import { Game } from "../game.js";
+import { Game } from "../main.js";
 
 class Point {
     /** * @param {Particles} particleInstance */
@@ -21,8 +21,8 @@ class Point {
         this.twinkle = twinkle ?? false;
         this.twinkleTime = twinkleTime ?? this.life;
 
-        this.particle = particleInstance.game.pixi.addNewParticle(colour)
-        particleInstance.particles.push(this);
+        this.particle = Game.pixi.addNewParticle(colour)
+        Game.particles.particles.push(this);
     }
 
     draw() {
@@ -49,26 +49,19 @@ export class Particles {
     /** @type {Point[]} */
     particles = [];
 
-    /**
-     * @param {Game} game 
-     */
-    constructor(game) {
-        this.game = game;
-    }
-
     initBoard() {
-        this.container = this.game.pixi.particleContainer;
+        this.container = Game.pixi.particleContainer;
     }
 
     spawnParticles(posX, posY, type, pieceWidth = 1, cw = false, colour = "white") {
-        if (!this.game.settings.display.particles) return;
+        if (!Game.settings.display.particles) return;
 
-        const boardWidth = this.game.pixi.width;
-        const boardHeight = this.game.pixi.height * 2;
-        const minosize = this.game.pixi.minoSize;
+        const boardWidth = Game.pixi.width;
+        const boardHeight = Game.pixi.height * 2;
+        const minosize = Game.pixi.minoSize;
         const [x, y] = [posX * minosize, (40 - posY) * minosize];
-        this.volume = this.game.settings.display.particleVolume;
-        this.size = this.game.settings.display.particleSize;
+        this.volume = Game.settings.display.particleVolume;
+        this.size = Game.settings.display.particleSize;
         if (type == "drop") this.creatDropParticles(x, y, colour, minosize * pieceWidth, -boardHeight);
         if (type == "lock") this.createLockParticles(x, y, colour, minosize * pieceWidth, 10);
         if (type == "clear") this.createClearParticles(x, y, colour, boardWidth, -10);