49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
// file: Web/game-snake-poc/frontend/ts/main.ts
|
|
// version: 2
|
|
|
|
import ResizeObserver from "resize-observer-polyfill";
|
|
import "simplebar";
|
|
import { startGame } from "./game";
|
|
import { bindInputs } from "./input";
|
|
|
|
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
|
|
|
|
function requireElement<T extends Element>(selector: string): T {
|
|
const element = document.querySelector<T>(selector);
|
|
if (element === null) {
|
|
throw new Error(`Élément frontend requis absent : ${selector}`);
|
|
}
|
|
return element;
|
|
}
|
|
|
|
async function main(): Promise<void> {
|
|
const canvas = requireElement<HTMLCanvasElement>("#game");
|
|
const score = requireElement<HTMLOutputElement>("#score");
|
|
const length = requireElement<HTMLOutputElement>("#length");
|
|
const status = requireElement<HTMLSpanElement>("#runtime-status");
|
|
const error = requireElement<HTMLParagraphElement>("#startup-error");
|
|
const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>("[data-direction]"));
|
|
|
|
status.textContent = "Chargement WASM…";
|
|
const session = await startGame(canvas, score, length);
|
|
bindInputs(session, buttons);
|
|
status.className = "badge text-bg-success";
|
|
status.textContent = "Prêt";
|
|
error.hidden = true;
|
|
canvas.focus();
|
|
}
|
|
|
|
void main().catch(caughtError => {
|
|
const status = document.querySelector<HTMLSpanElement>("#runtime-status");
|
|
const error = document.querySelector<HTMLParagraphElement>("#startup-error");
|
|
const message = caughtError instanceof Error ? caughtError.message : String(caughtError);
|
|
if (status !== null) {
|
|
status.className = "badge text-bg-danger";
|
|
status.textContent = "Erreur";
|
|
}
|
|
if (error !== null) {
|
|
error.textContent = `Impossible de démarrer Snake : ${message}`;
|
|
error.hidden = false;
|
|
}
|
|
});
|