"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)
  disp.replaceChildren(clone)
};

const doDistance = (clone, value) => {
  clone.querySelector(".distance").setAttribute("data-value", value);
  [...clone.querySelectorAll(".distance .sakura")].map((n, i) => {
    if (i < value) {
      n.checked = true
    } else {
      n.checked = false
    }
  })

}

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()