A warioware-like browser game; Finals project
fork

Configure Feed

Select the types of activity you want to include in your feed.

๐ŸŽจ๐Ÿšง playing arround with promises

Signed-off-by: Xaiya Schumin <d.schumin@proton.me>

+66 -62
+16 -25
src/frontend/public/components/overlay/countdown/countdown.ts
··· 2 2 3 3 export default class CountdownComponent implements ComponentInterface { 4 4 element: HTMLElement | null 5 - count: number 6 5 speed: number 7 - counter: number | null 6 + 7 + private count: number 8 8 9 9 10 10 constructor( 11 - count: number = 100, 12 - speed: number = 0.1, 11 + speed: number, 13 12 element: HTMLElement | null = 14 13 document.querySelector('.overlay__countdown'), 15 14 ) { 15 + this.count = 100; 16 + 16 17 this.element = element; 17 - this.count = count; 18 18 this.speed = speed; 19 - this.counter = null; 20 19 } 21 20 22 - start(callback: () => void): void { 23 - console.log(this.count, this.counter) 24 - if (this.counter) return; 25 - let count: number = this.count; // save the count as an own value for just this function run 21 + start(): Promise<void> { 22 + return new Promise((res, rej) => { 23 + if (this.count >= 0) { 24 + if (this.element) 25 + this.element.style.width = `calc(${this.count}% - 40px)`; /* % of bar width + margin *2 TODO */ 26 26 27 - const fun: () => void = () => { 28 - if (this.element) this.element.style.width = `calc(${count}% - 40px)`; /* % of bar width + margin *2 TODO */ 29 - count = count - this.speed; 30 - 31 - if (count <= 0 && this.counter != null) { 32 - cancelAnimationFrame(this.counter); 33 - this.counter = null; 34 - 35 - callback(); 36 - return; 37 - } 38 - 39 - requestAnimationFrame(fun); 40 - } 27 + this.count = this.count - this.speed; 28 + } else res(); 41 29 42 - this.counter = requestAnimationFrame(fun); 30 + }) 43 31 } 44 32 33 + reset() { 34 + this.count = 100; 35 + } 45 36 }
+7 -26
src/frontend/public/components/overlay/indicator/indicator.ts
··· 1 1 import {ComponentInterface} from "../../component"; 2 - import CountdownComponent from "../countdown/countdown.js"; 3 - 4 - enum controls { /* TODO: move to game logic */ 5 - "mouse" = 0, 6 - "keyboard" = 1, 7 - "keyboard_mouse" = 2 8 - } 2 + import { controls } from "../../../controller/gameState.js"; 9 3 10 4 export default class IndicatorComponent implements ComponentInterface { 11 5 element: HTMLElement | null; 12 - countdown: CountdownComponent; 13 6 14 7 constructor( 15 - countdown = new CountdownComponent(), 16 8 element: HTMLElement | null = 17 9 document.querySelector('.overlay__indicator'), 18 10 ) { 19 11 this.element = element; 20 - this.countdown = countdown; 21 12 22 13 if (this.element && this.element.children) 23 14 this.element.children[0].innerHTML = controls.keyboard.toString(); /* TODO: change into game-state */ 24 15 } 25 16 26 - switch(callback: (r: unknown) => void): void { 27 - const fun: () => void = (): void => { 28 - if (!this.element) return; 29 - 30 - this.element.style.display = 31 - this.element.style.display == "block" ? "none" : "block"; 32 - } 33 - 34 - new Promise((res: (value: unknown) => void): void => { 35 - fun() 17 + switch(): Promise<void> { 18 + return new Promise((res, rej): void => { 19 + if (this.element) this.element.style.display = "block"; 36 20 37 21 setTimeout(() => { 38 - fun() 39 - res(undefined) 40 - }, 2000); 41 - }).then((r: unknown) => { 42 - console.log('then') 43 - callback(r) 22 + if (this.element) this.element.style.display = "none"; 23 + res(); 24 + }, 1000); 44 25 }) 45 26 } 46 27 }
+7 -10
src/frontend/public/components/overlay/overlay.ts
··· 6 6 indicator: IndicatorComponent; 7 7 8 8 constructor( 9 - countdown: CountdownComponent = new CountdownComponent(), 10 - indicator: IndicatorComponent = new IndicatorComponent(countdown), 9 + countdown: CountdownComponent = new CountdownComponent(0.1), // TODO 10 + indicator: IndicatorComponent = new IndicatorComponent(), 11 11 ) { 12 12 this.countdown = countdown; 13 13 this.indicator = indicator; 14 - 15 - this.init() 16 14 } 17 15 18 - init() { 19 - this.countdown.start(() => 20 - this.indicator.switch(r => { this.init() }) 21 - ) 16 + start() { 17 + /* load the overlay countdown and the game switch-indicator */ 18 + this.countdown.start() 19 + .then(this.indicator.switch.bind(this.indicator)) 20 + .then(this.countdown.reset.bind(this.countdown)) 22 21 } 23 22 } 24 - 25 - new Overlay();
+35
src/frontend/public/controller/gameState.ts
··· 1 + import Overlay from "../components/overlay/overlay.js"; 2 + import CountdownComponent from "../components/overlay/countdown/countdown.js"; 3 + import {start} from "node:repl"; 4 + 5 + export enum controls { 6 + "mouse" = 0, 7 + "keyboard" = 1, 8 + "keyboard_mouse" = 2 9 + } 10 + 11 + class GameState { 12 + overlay: Overlay 13 + speed: number 14 + 15 + constructor( 16 + speed = 0.1, 17 + overlay = new Overlay(new CountdownComponent(speed)), // TODO 18 + ) { 19 + this.speed = speed 20 + this.overlay = overlay; 21 + 22 + this.loop() 23 + } 24 + 25 + loop(): void { 26 + /* start the overlay */ 27 + this.overlay.start(); 28 + 29 + requestAnimationFrame(this.loop.bind(this)) 30 + } 31 + 32 + 33 + } 34 + 35 + new GameState();
+1 -1
src/frontend/views/scripts.ejs
··· 1 - <script type="module" src="/components/overlay/overlay.js"></script> 1 + <script type="module" src="/controller/gameState.js"></script>