emchess

import "./style.css";
import type { Color } from "./game/state";
import { PERSONALITIES, getPersonality } from "./game/personalities";
import { PIECE_SETS } from "./board/pieces";
import { TIME_CONTROLS, timeControl } from "./game/clock";
import { loadPrefs, savePrefs, type Prefs } from "./util/storage";
import { fenFromUrl, routeFromUrl, goto } from "./util/url";

const app = document.querySelector<HTMLDivElement>("#app")!;
let prefs = loadPrefs();

function main() {
  window.addEventListener("hashchange", render);
  render();
}

function render() {
  prefs = loadPrefs();
  const route = routeFromUrl();
  const startFen = fenFromUrl();
  if (route === "play" || startFen) return renderSetup(startFen);
  if (route === "settings") return renderSettings();
  if (route === "about") return renderAbout();
  renderHome();
}

function renderHome() {
  app.innerHTML = `
    <div class="home">
      <pre class="logo" aria-label="Emchess">███████╗███╗   ███╗ ██████╗██╗  ██╗███████╗███████╗███████╗
██╔════╝████╗ ████║██╔════╝██║  ██║██╔════╝██╔════╝██╔════╝
█████╗  ██╔████╔██║██║     ███████║█████╗  ███████╗███████╗
██╔══╝  ██║╚██╔╝██║██║     ██╔══██║██╔══╝  ╚════██║╚════██║
███████╗██║ ╚═╝ ██║╚██████╗██║  ██║███████╗███████║███████║
╚══════╝╚═╝     ╚═╝ ╚═════╝╚═╝  ╚═╝╚══════╝╚══════╝╚══════╝</pre>
      <p class="kicker">a quiet game of kings</p>
      <nav class="menu">
        <button data-go="play">play</button>
        <button data-go="settings">settings</button>
        <button data-go="about">about</button>
      </nav>
    </div>`;
  app.querySelectorAll<HTMLButtonElement>("[data-go]").forEach((b) => {
    b.onclick = () => goto(b.dataset.go!);
  });
}

function renderSetup(startFen: string | null) {
  let side = prefs.side;
  let personality = prefs.personality;
  let clockId = prefs.clock;

  const opponentRows = PERSONALITIES.map(
    (p) => `
    <button class="row" data-id="${p.id}" aria-pressed="${p.id === personality}">
      <span class="cur"> </span>
      <span class="face">${p.face}</span>
      <span class="name">${p.name}</span>
      <span class="blurb">${p.blurb}</span>
      <span class="leader"></span>
    </button>`
  ).join("");

  const timeButtons = [...TIME_CONTROLS, { id: "custom", label: "custom" }]
    .map((t) => `<button data-tc="${t.id}" aria-pressed="${t.id === clockId}">${t.label}</button>`)
    .join("");

  app.innerHTML = `
    <div class="topbar">
      <h2>new game</h2>
      <button class="back" data-back>← menu</button>
    </div>
    <div class="setup">
      <div class="field">
        <label>your side</label>
        <div class="toggle" id="sides">
          <button data-side="w" aria-pressed="${side === "w"}">white</button>
          <button data-side="b" aria-pressed="${side === "b"}">black</button>
          <button data-side="random" aria-pressed="${side === "random"}">random</button>
        </div>
      </div>
      <div class="field">
        <label>opponent</label>
        <div class="pick" id="opps">${opponentRows}</div>
      </div>
      <div class="field">
        <label>time</label>
        <div class="toggle" id="times">${timeButtons}</div>
        <div class="custom ${clockId === "custom" ? "" : "hidden"}" id="custom">
          <label>min <input id="cbase" type="number" min="1" max="180" value="${Math.round(prefs.clockBase / 60)}"></label>
          <label>+sec <input id="cinc" type="number" min="0" max="60" value="${prefs.clockInc}"></label>
        </div>
      </div>
      <div class="field">
        <label>start from (optional)</label>
        <textarea id="load" class="load" rows="2" placeholder="Paste a FEN or PGN">${startFen ?? ""}</textarea>
        <div class="soft" id="loaderr"></div>
      </div>
      <button class="start" id="start">start</button>
    </div>`;

  app.querySelector<HTMLButtonElement>("[data-back]")!.onclick = () => goto("home");

  pressGroup("#sides button", (b) => (side = b.dataset.side as Prefs["side"]));
  pressGroup("#opps .row", (b) => (personality = b.dataset.id!));
  pressGroup("#times button", (b) => {
    clockId = b.dataset.tc!;
    app.querySelector("#custom")!.classList.toggle("hidden", clockId !== "custom");
  });

  app.querySelector<HTMLButtonElement>("#start")!.onclick = async () => {
    const base = (Number((app.querySelector("#cbase") as HTMLInputElement).value) || 5) * 60;
    const inc = Number((app.querySelector("#cinc") as HTMLInputElement).value) || 0;
    const text = (app.querySelector("#load") as HTMLTextAreaElement).value;
    prefs = { ...prefs, side, personality, clock: clockId, clockBase: base, clockInc: inc };
    savePrefs(prefs);
    const human: Color = side === "random" ? (Math.random() < 0.5 ? "w" : "b") : side;
    const tc = timeControl(clockId, { base, inc });
    const { startGame } = await import("./play");
    const err = await startGame(human, getPersonality(personality), tc, text);
    if (err) {
      const box = app.querySelector("#loaderr");
      if (box) box.textContent = err;
    }
  };
}

function pressGroup(selector: string, onPick: (b: HTMLButtonElement) => void) {
  const buttons = app.querySelectorAll<HTMLButtonElement>(selector);
  buttons.forEach((b) => {
    b.onclick = () => {
      onPick(b);
      buttons.forEach((c) => c.setAttribute("aria-pressed", String(c === b)));
    };
  });
}

function renderSettings() {
  const setRows = PIECE_SETS.map(
    (s) => `<button data-set="${s.id}" aria-pressed="${s.id === prefs.pieceSet}">${s.name.toLowerCase()}</button>`
  ).join("");

  app.innerHTML = `
    <div class="topbar">
      <h2>settings</h2>
      <button class="back" data-back>← menu</button>
    </div>
    <div class="setup">
      <div class="field">
        <label>pieces</label>
        <div class="toggle" id="sets">${setRows}</div>
      </div>
      <div class="field">
        <label>board</label>
        <div class="toggle">
          <button data-flag="coords" aria-pressed="${prefs.coords}">coordinates</button>
          <button data-flag="sound" aria-pressed="${prefs.sound}">sound</button>
          <button data-flag="reactions" aria-pressed="${prefs.reactions}">reactions</button>
        </div>
      </div>
      <div class="field">
        <label>coach by default</label>
        <div class="toggle">
          <button data-flag="threats" aria-pressed="${prefs.threats}">threats</button>
          <button data-flag="blunder" aria-pressed="${prefs.blunder}">blunder warning</button>
        </div>
      </div>
    </div>`;

  app.querySelector<HTMLButtonElement>("[data-back]")!.onclick = () => goto("home");

  app.querySelectorAll<HTMLButtonElement>("#sets button").forEach((b) => {
    b.onclick = () => {
      prefs = { ...prefs, pieceSet: b.dataset.set as Prefs["pieceSet"] };
      savePrefs(prefs);
      app.querySelectorAll("#sets button").forEach((c) => c.setAttribute("aria-pressed", String(c === b)));
    };
  });

  app.querySelectorAll<HTMLButtonElement>("[data-flag]").forEach((b) => {
    const key = b.dataset.flag as keyof Prefs;
    b.onclick = () => {
      prefs = { ...prefs, [key]: !prefs[key] };
      savePrefs(prefs);
      b.setAttribute("aria-pressed", String(prefs[key]));
    };
  });
}

function renderAbout() {
  app.innerHTML = `
    <div class="topbar">
      <h2>about</h2>
      <button class="back" data-back>← menu</button>
    </div>
    <div class="about">
      <p>Emchess is a small chess game you play in your browser. No accounts, no ads, nothing to install. Just a board, a good opponent, and some quiet.</p>
      <div class="card">
        Emchess<br>
        Created by Pablo Murad<br>
        pablomurad[at]pm[dot]me
      </div>
      <p class="kill">Kill the king — MMXXVI</p>
    </div>`;
  app.querySelector<HTMLButtonElement>("[data-back]")!.onclick = () => goto("home");
}

main();