// quixo-board.jsx — the playable board screen.
//
// The hardest UX moment in Quixo is that a move has two halves: pick UP a
// cube, then push it back IN. We split the turn into two visually distinct
// beats so it's impossible to miss which beat we're on:
//
// BEAT A — "pick" : every cube you may take glows faintly at the edge.
// BEAT B — "push" : the picked cube lifts, arrows sprout at the legal
// entry ends of its row and column. Tap an arrow to
// push; tap the cube again to put it down.
//
// The edges of the board carry per-line tally chips (the assist): a line
// with three-plus of one symbol and none of the other shows its count —
// filled and pulsing when it's one push from five.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const E = window.QuixoEngine;
const Cube = window.QuixoCube;
// ── Board geometry (px) — shared by cells, arrows, chips, win overlay ──
const OUT = 290; // outer wooden frame
const FR = 8; // frame padding
const PAD = 7; // playing-surface padding
const GAP = 4; // cell gap
const CELL = (OUT - 2 * FR - 2 * PAD - 4 * GAP) / 5; // 48.8
const STEP = CELL + GAP; // 52.8
const centerOf = (k) => FR + PAD + k * STEP + CELL / 2;
// ─────────────────────────────────────────────────────────────
// Small atoms
// ─────────────────────────────────────────────────────────────
function Avatar({ kind, theme, thinking = false, size = 36 }) {
const isAI = kind === 'ai';
return (
);
}
// ─────────────────────────────────────────────────────────────
// Turn bar — the most important affordance in the game.
// (The Quixo analogue of Quarto's held-piece bar.)
// ─────────────────────────────────────────────────────────────
function TurnBar({ state, theme, symbols, selected, aiThinking }) {
const { phase, current } = state;
const youPick = phase === 'play' && current === 'you' && selected == null;
const youPush = phase === 'play' && current === 'you' && selected != null;
const aiTurn = phase === 'play' && current === 'ai';
const ended = phase === 'ended';
const lost = ended && state.winner === 'ai';
const wonGame = ended && state.winner === 'you';
const drawn = ended && state.winner === 'draw';
const attr = E.lineName(state.winLine);
let title, sub, tone;
if (youPick) { title = 'Take a cube'; sub = 'Any edge cube that is blank or a cross'; tone = 'accent'; }
else if (youPush) { title = 'Now push it back in'; sub = 'Tap an arrow · tap the cube again to cancel'; tone = 'accent'; }
else if (aiTurn) { title = 'Pavlov is moving'; sub = 'He plays the circles'; tone = 'neutral'; }
else if (lost) { title = 'You\u2019ve lost'; sub = state.winLine ? `Five circles along ${attr}` : 'You conceded the match'; tone = 'danger'; }
else if (wonGame) { title = 'Quixo \u2014 you won'; sub = `Five crosses along ${attr} in ${state.moveCount} moves`; tone = 'win'; }
else if (drawn) { title = 'Drawn game'; sub = 'Neither side could line up five'; tone = 'neutral'; }
else { title = 'Quixo'; sub = ''; tone = 'neutral'; }
const accent = tone === 'accent';
const toneGlow = tone === 'danger' ? `${theme.danger}66` : theme.accentGlow;
const endMarker = lost ? '\u2715' : wonGame ? '\u2726' : '\u2013';
// The slot shows the cube in play: your cross (lifted while picking a
// push), Pavlov's circle while he thinks.
const slotCube = ended ? null : (current === 'you' ? 'you' : 'ai');
return (
);
})}
{/* Winning line highlight */}
{winLine && (
)}
{/* assist: a pulsing guide line through any line one push from five —
gold when it's yours to complete, red when it's Pavlov's threat */}
{assists && !winLine && selected == null && (
)}
);
}
// Row chips down the right edge, column chips along the bottom — shown when
// a line has 3+ of one symbol and none of the other. Filled + pulsing when
// one push from five. Diagonal chips sit on the two right corners.
function LineChips({ lineInfo, theme, ended }) {
if (ended) return null;
const chip = (info, key, style) => {
const yours = info.you > 0 && info.ai === 0 && info.you >= 2;
const theirs = info.ai > 0 && info.you === 0 && info.ai >= 2;
if (!yours && !theirs) return null;
const n = yours ? info.you : info.ai;
const hot = info.hotYou || info.hotAi;
const color = yours ? theme.accent : theme.danger;
return (