import "./style.css";
import { PERSONALITIES, getPersonality } from "./game/personalities";
import { PIECE_SETS } from "./board/pieces";
import { TIME_CONTROLS, timeControl } from "./game/clock";
import { loadPrefs, savePrefs } from "./util/storage";
import { fenFromUrl, routeFromUrl, goto } from "./util/url";
const app = document.querySelector("#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("[data-go]").forEach((b) => {
        b.onclick = () => goto(b.dataset.go);
    });
}
function renderSetup(startFen) {
    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("[data-back]").onclick = () => goto("home");
    pressGroup("#sides button", (b) => (side = b.dataset.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("#start").onclick = async () => {
        const base = (Number(app.querySelector("#cbase").value) || 5) * 60;
        const inc = Number(app.querySelector("#cinc").value) || 0;
        const text = app.querySelector("#load").value;
        prefs = { ...prefs, side, personality, clock: clockId, clockBase: base, clockInc: inc };
        savePrefs(prefs);
        const human = 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, onPick) {
    const buttons = app.querySelectorAll(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("[data-back]").onclick = () => goto("home");
    app.querySelectorAll("#sets button").forEach((b) => {
        b.onclick = () => {
            prefs = { ...prefs, pieceSet: b.dataset.set };
            savePrefs(prefs);
            app.querySelectorAll("#sets button").forEach((c) => c.setAttribute("aria-pressed", String(c === b)));
        };
    });
    app.querySelectorAll("[data-flag]").forEach((b) => {
        const key = b.dataset.flag;
        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>
        <a href="mailto:pablomurad@pm.me">pablomurad@pm.me</a>
      </div>
      <p class="kill">Kill the king — MMXXVI</p>
    </div>`;
    app.querySelector("[data-back]").onclick = () => goto("home");
}
main();