🎨🚧 playing arround with promises

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

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

···
 
 export default class CountdownComponent implements ComponentInterface {
     element: HTMLElement | null
-    count: number
     speed: number
-    counter: number | null
+
+    private count: number
 
 
     constructor(
-        count: number = 100,
-        speed: number = 0.1,
+        speed: number,
         element: HTMLElement | null =
             document.querySelector('.overlay__countdown'),
     ) {
+        this.count = 100;
+
         this.element = element;
-        this.count = count;
         this.speed = speed;
-        this.counter = null;
     }
 
-    start(callback: () => void): void {
-        console.log(this.count, this.counter)
-        if (this.counter) return;
-        let count: number = this.count; // save the count as an own value for just this function run
+    start(): Promise<void> {
+        return new Promise((res, rej) => {
+            if (this.count >= 0) {
+                if (this.element)
+                    this.element.style.width = `calc(${this.count}% - 40px)`; /* % of bar width + margin *2 TODO */
 
-        const fun: () => void = () => {
-            if (this.element) this.element.style.width = `calc(${count}% - 40px)`; /* % of bar width + margin *2 TODO */
-            count = count - this.speed;
-
-            if (count <= 0 && this.counter != null) {
-                cancelAnimationFrame(this.counter);
-                this.counter = null;
-
-                callback();
-                return;
-            }
-
-            requestAnimationFrame(fun);
-        }
+                this.count = this.count - this.speed;
+            } else res();
 
-        this.counter = requestAnimationFrame(fun);
+        })
     }
 
+    reset() {
+        this.count = 100;
+    }
 }

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

···
 import {ComponentInterface} from "../../component";
-import CountdownComponent from "../countdown/countdown.js";
-
-enum controls { /* TODO: move to game logic */
-    "mouse" = 0,
-    "keyboard" = 1,
-    "keyboard_mouse" = 2
-}
+import { controls } from "../../../controller/gameState.js";
 
 export default class IndicatorComponent implements ComponentInterface {
     element: HTMLElement | null;
-    countdown: CountdownComponent;
 
     constructor(
-        countdown = new CountdownComponent(),
         element: HTMLElement | null =
             document.querySelector('.overlay__indicator'),
     ) {
         this.element = element;
-        this.countdown = countdown;
 
         if (this.element && this.element.children)
             this.element.children[0].innerHTML = controls.keyboard.toString(); /* TODO: change into game-state */
     }
 
-    switch(callback: (r: unknown) => void): void {
-        const fun: () => void = (): void => {
-            if (!this.element) return;
-
-            this.element.style.display =
-                this.element.style.display == "block" ? "none" : "block";
-        }
-
-        new Promise((res: (value: unknown) => void): void => {
-            fun()
+    switch(): Promise<void> {
+        return new Promise((res, rej): void => {
+            if (this.element) this.element.style.display = "block";
 
             setTimeout(() => {
-                fun()
-                res(undefined)
-            }, 2000);
-        }).then((r: unknown) => {
-            console.log('then')
-            callback(r)
+                if (this.element) this.element.style.display = "none";
+                res();
+            }, 1000);
         })
     }
 }

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

···
     indicator: IndicatorComponent;
 
     constructor(
-        countdown: CountdownComponent = new CountdownComponent(),
-        indicator: IndicatorComponent = new IndicatorComponent(countdown),
+        countdown: CountdownComponent = new CountdownComponent(0.1), // TODO
+        indicator: IndicatorComponent = new IndicatorComponent(),
     ) {
         this.countdown = countdown;
         this.indicator = indicator;
-
-        this.init()
     }
 
-    init() {
-        this.countdown.start(() =>
-            this.indicator.switch(r => { this.init() })
-        )
+    start() {
+        /* load the overlay countdown and the game switch-indicator */
+        this.countdown.start()
+            .then(this.indicator.switch.bind(this.indicator))
+            .then(this.countdown.reset.bind(this.countdown))
     }
 }
-
-new Overlay();

src/frontend/public/controller/gameState.ts

···
+import Overlay from "../components/overlay/overlay.js";
+import CountdownComponent from "../components/overlay/countdown/countdown.js";
+import {start} from "node:repl";
+
+export enum controls {
+    "mouse" = 0,
+    "keyboard" = 1,
+    "keyboard_mouse" = 2
+}
+
+class GameState {
+    overlay: Overlay
+    speed: number
+
+    constructor(
+        speed = 0.1,
+        overlay = new Overlay(new CountdownComponent(speed)), // TODO
+    ) {
+        this.speed = speed
+        this.overlay = overlay;
+
+        this.loop()
+    }
+
+    loop(): void {
+        /* start the overlay */
+        this.overlay.start();
+
+        requestAnimationFrame(this.loop.bind(this))
+    }
+
+
+}
+
+new GameState();

src/frontend/views/scripts.ejs

···
-<script type="module" src="/components/overlay/overlay.js"></script>
+<script type="module" src="/controller/gameState.js"></script>