"use strict";
const showGame = (g) => {
    const tmpl = document.querySelector("template#tmpl");
    const disp = document.querySelector("#game");
    const clone = document.importNode(tmpl.content, true);
    doDistance(clone, g.Distance.Value);
    doActions(clone, g.Actions);
    disp.replaceChildren(clone);
};

const doDistance = (clone, value) => {
    clone.querySelector("#distance").setAttribute("data-value", value);
    [...clone.querySelectorAll("#distance .content .sakura")].map((n, i) => {
        n.checked = i < value;
    });
    clone.querySelector("#distance .pool-value").innerText = value
};

const doActions = (g, actions) => {
    const actionList = g.querySelector(".actions");
    const actionTemplate = actionList.querySelector(".action").cloneNode(true);
    if (actions) {
        actionList.replaceChildren(
            ...actions.map((a, i) => {
                const newAction = actionTemplate.cloneNode(true);
                newAction.setAttribute("data-index", i);
                newAction.querySelector(".description").innerText = a.Description;
                return newAction;
            }),
        );
    } else {
        actionList.replaceChildren()
    }
};

const doAction = (idx) => {
    window.socket.send(String(idx))
}

const connect = (gameId) => {
    const connection = new WebSocket(`/api/game/${gameId}/connect`);
    window.socket = connection;
    connection.addEventListener("message", (ev) => {
        const game = JSON.parse(ev.data);
        console.debug(game);
        showGame(game);
        document.querySelector("#game-json").innerText = JSON.stringify(
            ev.data,
            null,
            2,
        );
    });
};

const init = () => {
    const id = window.location.hash.slice(1);
    connect(id);
};

init();