✨ lottss of stuff, testing and including. Revamp of loop system and much more

Signed-off-by: Xaiya Schumin <[e-mail]>

package-lock.json

···
         "express": "^5.2.1"
       },
       "devDependencies": {
+        "@types/ejs": "^3.1.5",
         "@types/express": "^5.0.6",
         "@types/node": "^20.1.2",
         "typescript": "^5.0.4",
···
       "dependencies": {
         "@types/node": "*"
       }
+    },
+    "node_modules/@types/ejs": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
+      "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/express": {
       "version": "5.0.6",

package.json

···
   },
   "author": "xaiyadev",
   "devDependencies": {
+    "@types/ejs": "^3.1.5",
     "@types/express": "^5.0.6",
     "@types/node": "^20.1.2",
     "typescript": "^5.0.4",

src/frontend/public/components/overlay/indicator/indicator.ts

···
-import {ComponentInterface} from "../../component";
+import { ComponentInterface } from "../../component.js";
 import { controls } from "../../../controller/miniGame/miniGame.js";
 
 export default class IndicatorComponent implements ComponentInterface {
···
         this.element = element;
     }
 
-    switch(show: boolean, control?: controls) {
+    switch(show: boolean, control?: controls | null) {
         if (this.element) {
             if (control)
                 this.element.children[0].innerHTML = control.toString(); /* TODO: change into game-state */

src/frontend/public/controller/gameState.ts

···
 import Overlay from "../components/overlay/overlay.js";
-import CountdownComponent from "../components/overlay/countdown/countdown.js";
-import MiniGame from "./miniGame/miniGame.js";
+import MiniGameController from "./miniGame/miniGameController.js";
+import {miniGameInterface} from "./miniGame/miniGame";
 
 export enum loopStates {
     IN_GAME,
···
     private gameTime: number
 
     private overlay: Overlay
-    private miniGame: MiniGame
+    private miniGameController: MiniGameController
 
     constructor() {
-        this.speed = 1
+        this.speed = 0.5
         this.loopState = loopStates.RESET
 
         this.gameLoop = null
-        this.gameTime = 100; // the game-time will always go from 100 -> 0
+        this.gameTime = 100; // the game-time will always go from 100 -> 0 TODO: gametime is depend on the framreate of the screen
 
         this.overlay = new Overlay();
-        this.miniGame = new MiniGame();
+        this.miniGameController = new MiniGameController();
 
         this.init()
     }
···
     init() {
         this.pauseGameEvent();
 
-        this.miniGame.switchLoadedRandom();
+        this.miniGameController.switchLoadedRandom();
         this.loop();
     }
 
     loop(): void {
+        // check and define available micro-game
+        const miniGame: miniGameInterface | null = this.miniGameController.loaded;
+        if (!miniGame) throw new Error("No micro-game loaded !!")
 
-        if (this.gameTime >= 0) {
-            this.loopState = loopStates.IN_GAME
-            this.overlay.countdown.updateTime(this.gameTime)
+        // Game loop
+        if (this.gameTime >= 0) this.run(miniGame)
+        else if (this.gameTime >= -50) this.switch(miniGame);
+        else this.reset(miniGame)
 
-            if (this.miniGame.loaded) this.miniGame.loaded.run();
-            else console.error("No mini-game currently loaded")
 
+        // game timer and speed
+        this.gameTime -= this.speed;
+        this.gameLoop = requestAnimationFrame(this.loop.bind(this))
 
-            this.gameTime -= this.speed;
-        } else {
+    }
+
+    run(miniGame: miniGameInterface) {
+        if (this.loopState != loopStates.IN_GAME) {
+            this.loopState = loopStates.IN_GAME
+            miniGame.render();
+        }
 
-            // should only switch the game once, after entering switch mode
-            if (this.loopState !== loopStates.SWITCH)
-                this.miniGame.switchLoadedRandom();
+        this.overlay.countdown.updateTime(this.gameTime)
+        miniGame.loop();
+    }
 
-            if (this.gameTime >= -50) {
-                this.loopState = loopStates.SWITCH
+    switch(miniGame: miniGameInterface) {
+        // Stuff that happens the first time we enter the switch-state
+        if (this.loopState !== loopStates.SWITCH) {
+            this.loopState = loopStates.SWITCH
 
-                this.miniGame.loaded?.reset();
-                this.overlay.indicator.switch(true, this.miniGame.loaded?.control) // TODO: when pausing while having the indicator the indicator will despawn and pause at the new start of new game
+            this.miniGameController.switchLoadedRandom();
+        }
 
-                this.gameTime -= this.speed;
-            } else {
-                this.loopState = loopStates.RESET
+        // all the other fluff
+        this.overlay.indicator.switch(true, miniGame.control) // TODO: when pausing while having the indicator the indicator will despawn and pause at the new start of new game
+    }
 
-                this.overlay.indicator.switch(false)
-                this.reset()
-            }
+    reset(miniGame: miniGameInterface) {
+        if (this.loopState != loopStates.RESET) {
+            this.loopState = loopStates.RESET;
 
+            this.overlay.indicator.switch(false)
+            this.gameTime = 100;
+            miniGame.render();
         }
-
-        this.gameLoop = requestAnimationFrame(this.loop.bind(this))
     }
+
 
     pause() {
         if (this.gameLoop) {
···
             console.error("No Game is running!")
         }
     }
-
-    reset() {
-        this.gameTime = 100;
-    }
-
 
     private pauseGameEvent() {
         document.addEventListener("keydown", (e: KeyboardEvent) => {

src/frontend/public/controller/miniGame/maze/maze.ts

···
+import {BaseMiniGame, controls} from "../miniGame.js";
+
+export default class Maze extends BaseMiniGame {
+    constructor() {
+        super(controls.keyboard);
+    }
+
+    loop() {
+
+    }
+
+    finish() {
+
+    }
+
+}

src/frontend/public/controller/miniGame/miniGame.ts

···
-import Smash from "./smash.js";
+import ejs from "ejs";
 
 export enum controls {
     "mouse" = 0,
···
 }
 
 export interface miniGameInterface {
-    control: controls,
-    run(): void,
+    control: controls | null,
+    score: number,
+
+    loop(): void,
+    finish(): void,
+
+    render(): void,
+    unRender(): void,
+
     reset(): void, // TODO
 }
 
-export default class MiniGame {
-    games: miniGameInterface[]
-    loaded: miniGameInterface | null
+export class BaseMiniGame implements miniGameInterface {
+    control: controls | null;
+    score: number;
 
     constructor(
-        games = [
-            new Smash(),
-            new testMiniGame(),
-        ],
+        control: controls | null = null,
+        score: number = 0,
     ) {
-        this.games = games;
-        this.loaded = null;
+        this.control = control;
+        this.score = score;
     }
 
-    switchLoadedRandom(): miniGameInterface {
-        const selected: miniGameInterface = this.games[Math.floor(Math.random() * this.games.length)];
-
-        this.loaded = selected;
-        return selected;
+    loop(): void {
+        throw new Error("This is game is yet to be implemented");
     }
 
-    /*
-        - Switch Game (overlay?)
-        - Game Interface with default configurations
-        - Game Handlers (should export form here)
-     */
-
-}
+    render(): void {
+        // render .ejs file
+        let file = ejs.renderFile("./template.ejs", { })
 
+        console.log(file)
+    }
 
+    unRender() {
 
+    }
 
-export class testMiniGame implements miniGameInterface {
-    control: controls;
 
-    constructor() {
-        this.control = controls.keyboard_mouse;
+    finish(): void {
+        this.reset();
     }
 
-    run(): void {
 
+    reset(): void {
+        this.score = 0;
+        this.unRender();
     }
 
-    reset() {
-    }
+}
 
-}

src/frontend/public/controller/miniGame/miniGameController.ts

···
+import {controls, miniGameInterface} from "./miniGame.js";
+import Smash from "./smash.js";
+import Maze from "./maze/maze.js";
+
+export default class MiniGameController {
+    games: miniGameInterface[]
+    loaded: miniGameInterface | null
+
+    constructor(
+        games = [
+            new Smash(),
+        ],
+    ) {
+        this.games = games;
+        this.loaded = null;
+    }
+
+    switchLoadedRandom(): miniGameInterface {
+        // const selected: miniGameInterface = this.games[Math.floor(Math.random() * this.games.length)];
+        const selected = new Maze();
+
+        this.loaded = selected;
+        return selected;
+    }
+
+    /*
+        - Switch Game (overlay?)
+        - Game Interface with default configurations
+        - Game Handlers (should export form here)
+     */
+
+}

src/frontend/public/controller/miniGame/smash.ts

···
-import {controls, miniGameInterface} from "./miniGame.js";
+import {BaseMiniGame, controls} from "./miniGame.js";
 
-export default class Smash implements miniGameInterface {
-    control: controls;
-
-    amount: number
+export default class Smash extends BaseMiniGame {
 
     constructor() {
-        this.control = controls.keyboard;
+        super();
+    }
 
-        this.amount = 0;
+    loop() {
+        this.keyboardEvent();
+        console.log(this.score);
     }
 
-    run() {
-        // smash keyboard -> specific amounts of letters win
-        // theme?
+    render() {
 
-        this.keyboardEvent();
-        console.log(this.amount);
     }
 
-    reset() {
-        this.amount = 0;
+
+    finish() {
+
     }
 
     keyboardEvent() {
         document.addEventListener("keydown", (e: KeyboardEvent) => {
             if (e.key == "Escape") return; // Pausing the game shouldn't count for the score
-            this.amount++;
+            this.score++;
         })
     }
 

src/frontend/tsconfig.json

···
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "module": "es6",
-    "lib": [ "dom" ]
+    "lib": [ "dom", "es2016" ]
   },
 }