// file: Web/game-snake-poc/frontend/ts/main.ts
// version: 1

import { startGame } from "./game";
import { bindInputs } from "./input";

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;
    }
});