El tablero: la legalidad la decide el navegador

import { Chess, type Square } from 'chess.js';

export type Color = 'w' | 'b';
export type Promotion = 'q' | 'r' | 'b' | 'n';

export interface Move {
  from: string;
  to: string;
  promotion?: Promotion;
}

/**
 * Immutable snapshot of a game. `history` is the SAN move list played from `start`, the FEN
 * the game began at (the initial position unless the state was built with `fromFen`).
 */
export interface GameState {
  start: string;
  fen: string;
  history: string[];
  turn: Color;
  over: boolean;
  result: string | null;
}

export const INITIAL_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';

function fromHistory(start: string, history: string[]): Chess {
  const chess = new Chess(start);
  for (const san of history) chess.move(san);
  return chess;
}

function fromState(state: GameState): Chess {
  return fromHistory(state.start, state.history);
}

function resultOf(chess: Chess): string | null {
  if (chess.isCheckmate()) return chess.turn() === 'w' ? '0-1' : '1-0';
  if (chess.isDraw()) return '1/2-1/2';
  return null;
}

function snapshot(chess: Chess, start: string): GameState {
  return {
    start,
    fen: chess.fen(),
    history: chess.history(),
    turn: chess.turn(),
    over: chess.isGameOver(),
    result: resultOf(chess),
  };
}

export function newGame(): GameState {
  return snapshot(new Chess(), INITIAL_FEN);
}

/** Builds a state from an arbitrary FEN (no history). Used by tests and future share links. */
export function fromFen(fen: string): GameState {
  const chess = new Chess(fen);
  return snapshot(chess, chess.fen());
}

/** Destination squares of every legal move from `from` (deduplicated across promotions). */
export function legalTargets(state: GameState, from: string): string[] {
  const chess = fromState(state);
  const moves = chess.moves({ square: from as Square, verbose: true });
  return [...new Set(moves.map((move) => move.to))];
}

/** True when moving `from` to `to` is a legal pawn move that reaches the last rank. */
export function needsPromotion(state: GameState, from: string, to: string): boolean {
  const chess = fromState(state);
  const moves = chess.moves({ square: from as Square, verbose: true });
  return moves.some((move) => move.to === to && move.promotion !== undefined);
}

/** Applies a move and returns the new state, or `null` when the move is illegal. */
export function applyMove(state: GameState, move: Move): GameState | null {
  const chess = fromState(state);
  try {
    chess.move({ from: move.from, to: move.to, promotion: move.promotion });
  } catch {
    return null;
  }
  return snapshot(chess, state.start);
}

/** True when the human has at least one ply of their own in `history` that undo can remove. */
export function canUndo(state: GameState, human: Color): boolean {
  return state.history.length >= (human === 'b' ? 2 : 1);
}

/**
 * Undoes moves until it is the human's turn again with at least one human move removed:
 * two plies when it is already the human's turn, one when the opponent is to move.
 * Returns `state` unchanged when the human has not moved yet (as black, the opponent's
 * opening ply stays on the board).
 */
export function undoPair(state: GameState, human: Color): GameState {
  if (!canUndo(state, human)) return state;
  const plies = state.turn === human ? 2 : 1;
  const history = state.history.slice(0, Math.max(0, state.history.length - plies));
  return snapshot(fromHistory(state.start, history), state.start);
}

const DEFAULT_HEADERS: Record<string, string> = {
  Event: 'Rukh demo',
  Site: 'https://rukh.borjaglez.com',
};

function today(): string {
  const now = new Date();
  const pad = (value: number) => String(value).padStart(2, '0');
  return `${now.getFullYear()}.${pad(now.getMonth() + 1)}.${pad(now.getDate())}`;
}

/** PGN export with the demo headers merged with `headers` (caller wins). */
export function toPgn(state: GameState, headers: Record<string, string>): string {
  const chess = fromState(state);
  const merged: Record<string, string> = {
    ...DEFAULT_HEADERS,
    Date: today(),
    ...headers,
    Result: headers.Result ?? state.result ?? '*',
  };
  for (const [key, value] of Object.entries(merged)) chess.setHeader(key, value);
  return chess.pgn();
}

import { Chess } from 'chess.js';
import type { Move } from './game';

export interface Opponent {
  id: string;
  label: string;
  pick(fen: string): Promise<Move>;
}

/** Mock opponent: the first legal move in chess.js `moves({ verbose: true })` order. */
export const firstLegalMove: Opponent = {
  id: 'mock',
  label: 'Primera jugada legal',
  async pick(fen) {
    const chess = new Chess(fen);
    const [move] = chess.moves({ verbose: true });
    if (!move) throw new Error('No legal moves in this position');
    return {
      from: move.from,
      to: move.to,
      promotion: move.promotion as Move['promotion'],
    };
  },
};

export type StageKind = 'mock';

export interface Stage {
  id: string;
  label: string;
  sizeMb: number;
  kind: StageKind;
}

/** Model stages available in the demo. P0 only ships the mock opponent. */
export const STAGES: Stage[] = [
  { id: 'mock', label: 'Primera jugada legal', sizeMb: 0, kind: 'mock' },
];

export function findStage(id: string): Stage | undefined {
  return STAGES.find((stage) => stage.id === id);
}

import type { Color } from './game';
import { findStage, STAGES } from './registry';

export interface Query {
  mock: boolean;
  stage: string;
  color: Color;
}

/**
 * Parses the page query string. `mock` is forced by `?mock=1` and is also true when the
 * requested stage is unknown or is itself a mock; in P0 every stage is a mock, so `mock`
 * is always true. `?color=b` makes the human play black.
 */
export function parseQuery(search: string): Query {
  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search);
  const requested = params.get('stage') ?? STAGES[0].id;
  const stage = findStage(requested);
  const mock = params.get('mock') === '1' || stage === undefined || stage.kind === 'mock';
  return {
    mock,
    stage: stage?.id ?? STAGES[0].id,
    color: params.get('color') === 'b' ? 'b' : 'w',
  };
}

import { computed, signal } from '@preact/signals';
import { useEffect } from 'preact/hooks';
import {
  applyMove,
  canUndo,
  newGame,
  toPgn,
  undoPair,
  type Color,
  type GameState,
  type Move,
} from '../lib/game';
import { firstLegalMove, type Opponent } from '../lib/opponent';
import { parseQuery } from '../lib/query';
import { STAGES } from '../lib/registry';
import Board from './Board';
import ModelPanel from './ModelPanel';
import MoveList from './MoveList';

const HUMAN_LABEL = 'Humano';

/** Game state lives in module-level signals so the three zones share one source of truth. */
const game = signal<GameState>(newGame());
const human = signal<Color>('w');
const stage = signal<string>(STAGES[0].id);
/** True while the opponent is thinking. */
const thinking = signal(false);
/** True while the board animates a turn: colour changes wait for it. */
const turning = signal(false);
const busy = computed(() => thinking.value || turning.value);

function opponentFor(): Opponent {
  // P0: every stage is the mock opponent.
  return firstLegalMove;
}

function opponentToMove(state: GameState): boolean {
  return !state.over && state.turn !== human.value;
}

async function settle() {
  const current = game.value;
  if (!opponentToMove(current) || thinking.value) return;
  thinking.value = true;
  try {
    const move = await opponentFor().pick(current.fen);
    // The position may have been reset (new game, colour change, undo) while the opponent
    // was thinking: drop the stale reply; the `finally` below re-schedules if needed.
    if (game.value.fen !== current.fen) return;
    const next = applyMove(current, move);
    if (next) game.value = next;
  } finally {
    thinking.value = false;
    // Re-run only when a newer position still waits for the opponent (no loop otherwise).
    if (game.value.fen !== current.fen && opponentToMove(game.value)) void settle();
  }
}

function playHuman(move: Move): boolean {
  const current = game.value;
  if (busy.value || current.over || current.turn !== human.value) return false;
  const next = applyMove(current, move);
  if (!next) return false;
  game.value = next;
  void settle();
  return true;
}

function startNewGame() {
  game.value = newGame();
  void settle();
}

function chooseColor(color: Color) {
  if (color === human.value || busy.value) return;
  human.value = color;
  startNewGame();
}

function undo() {
  if (busy.value || !canUndo(game.value, human.value)) return;
  game.value = undoPair(game.value, human.value);
  // As black, undo leaves the opponent to move: let it reply.
  void settle();
}

function stageLabel(): string {
  return STAGES.find((entry) => entry.id === stage.value)?.label ?? STAGES[0].label;
}

function exportPgn(): string {
  const white = human.value === 'w' ? HUMAN_LABEL : stageLabel();
  const black = human.value === 'b' ? HUMAN_LABEL : stageLabel();
  return toPgn(game.value, { White: white, Black: black });
}

export default function App() {
  useEffect(() => {
    const query = parseQuery(window.location.search);
    stage.value = query.stage;
    if (query.color !== human.value) {
      human.value = query.color;
    }
    void settle();
  }, []);

  return (
    <>
      <Board game={game} human={human} turning={turning} onMove={playHuman} />
      <aside class="panel" data-testid="panel" aria-label="Modelo y jugadas">
        <ModelPanel
          game={game}
          human={human}
          stage={stage}
          busy={busy}
          onStage={(id) => (stage.value = id)}
          onColor={chooseColor}
        />
        <MoveList
          game={game}
          human={human}
          busy={busy}
          onUndo={undo}
          onNewGame={startNewGame}
          onExport={exportPgn}
        />
      </aside>
    </>
  );
}

import { computed, effect, type Signal } from '@preact/signals';
import { useEffect, useRef } from 'preact/hooks';
import { legalTargets, needsPromotion, type Color, type GameState, type Move } from '../lib/game';

interface Props {
  game: Signal<GameState>;
  human: Signal<Color>;
  /** Set while the board animates an orientation change. */
  turning: Signal<boolean>;
  /** Applies the human move; returns false when it is rejected. */
  onMove: (move: Move) => boolean;
}

/**
 * cm-chessboard wrapper. The library is loaded on the client only (it touches the DOM at
 * import time), the sprites are served from /pieces and /extensions (copied by
 * scripts/copy-assets.mjs) and the theme lives in src/styles/board.css.
 */
export default function Board({ game, human, turning, onMove }: Props) {
  const container = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const element = container.current;
    if (!element) return;
    let disposed = false;
    let dispose: (() => void) | undefined;

    (async () => {
      const [
        { Chessboard, COLOR, INPUT_EVENT_TYPE },
        { Markers, MARKER_TYPE },
        { PromotionDialog },
        { Accessibility },
      ] = await Promise.all([
        import('cm-chessboard/src/Chessboard.js'),
        import('cm-chessboard/src/extensions/markers/Markers.js'),
        import('cm-chessboard/src/extensions/promotion-dialog/PromotionDialog.js'),
        import('cm-chessboard/src/extensions/accessibility/Accessibility.js'),
      ]);
      if (disposed) return;

      const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const board = new Chessboard(element, {
        position: game.value.fen,
        orientation: human.value === 'w' ? COLOR.white : COLOR.black,
        assetsUrl: '/',
        style: {
          cssClass: 'rukh',
          showCoordinates: true,
          borderType: 'none',
          pieces: { file: 'pieces/standard.svg' },
          animationDuration: reduced ? 0 : 150,
        },
        extensions: [
          { class: Markers, props: { autoMarkers: MARKER_TYPE.frame } },
          { class: PromotionDialog },
          {
            class: Accessibility,
            props: {
              brailleNotationInAlt: true,
              movePieceForm: false,
              boardAsTable: false,
              piecesAsList: false,
              visuallyHidden: true,
            },
          },
        ],
      });

      const clearTargets = () => board.removeMarkers(MARKER_TYPE.dot);

      const handler = (event: Parameters<Parameters<typeof board.enableMoveInput>[0]>[0]) => {
        const state = game.value;
        switch (event.type) {
          case INPUT_EVENT_TYPE.moveInputStarted: {
            if (state.over || state.turn !== human.value) return false;
            const targets = legalTargets(state, event.squareFrom);
            if (targets.length === 0) return false;
            clearTargets();
            for (const square of targets) board.addMarker(MARKER_TYPE.dot, square);
            return true;
          }
          case INPUT_EVENT_TYPE.validateMoveInput: {
            const from = event.squareFrom;
            const to = event.squareTo ?? '';
            if (needsPromotion(state, from, to)) {
              const color = state.turn === 'w' ? COLOR.white : COLOR.black;
              board.showPromotionDialog(to, color, (result) => {
                clearTargets();
                const piece = result.piece?.charAt(1) as Move['promotion'] | undefined;
                if (result.type === 'pieceSelected' && piece) {
                  if (!onMove({ from, to, promotion: piece }))
                    void board.setPosition(game.value.fen, false);
                } else {
                  void board.setPosition(game.value.fen, false);
                }
              });
              return true;
            }
            return onMove({ from, to });
          }
          case INPUT_EVENT_TYPE.moveInputCanceled:
          case INPUT_EVENT_TYPE.moveInputFinished:
            clearTargets();
            return true;
          default:
            return true;
        }
      };