WIP custom game designer and custom pieces

Author: Swon404

RedGD.png

@@ -8,6 +8,8 @@ import { LeaderboardScreen } from "./screens/LeaderboardScreen";
 import { SettingsScreen } from "./screens/SettingsScreen";
 import { LearnScreen } from "./screens/LearnScreen";
 import { PuzzlesScreen } from "./screens/PuzzlesScreen";
+import { PieceDesignerScreen } from "./screens/PieceDesignerScreen";
+import { BoardDesignerScreen } from "./screens/BoardDesignerScreen";
 
 export default function App() {
   return (
@@ -22,6 +24,8 @@ export default function App() {
           <Route path="/leaderboard" element={<LeaderboardScreen />} />
           <Route path="/learn" element={<LearnScreen />} />
           <Route path="/settings" element={<SettingsScreen />} />
+          <Route path="/piece-designer" element={<PieceDesignerScreen />} />
+          <Route path="/board-designer" element={<BoardDesignerScreen />} />
         </Routes>
       </HashRouter>
     </GameProvider>

src/App.tsx

@@ -2,7 +2,7 @@ import {
   createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState
 } from "react";
 import {
-  Color, GameState, Move, PieceType, Square, initialState, pieceAt
+  Color, CustomPieceDef, GameState, Move, PieceType, Square, cloneState, initialState, pieceAt, positionKey
 } from "./engine/board";
 import {
   forfeitMove, gameResult, inCheck, legalMovesFrom, makeMove
@@ -18,7 +18,7 @@ import {
 } from "./engine/performance";
 import { playSound } from "./engine/sound";
 import {
-  load, Profile, recordResult, saveActiveGame, Settings, Store, updateSettings,
+  load, Profile, recordResult, saveActiveGame, SavedBoardLayout, SavedCustomGame, Settings, Store, updateSettings,
   createProfile, deleteProfile, renameProfile,
   loadActiveSession, saveActiveSession, clearActiveSession,
   recordPuzzleSolved as storeRecordPuzzleSolved,
@@ -28,7 +28,8 @@ import {
 type Mode =
   | { kind: "two-player" }
   | { kind: "bot"; level: number }
-  | { kind: "portal"; opponent: "two-player" | { kind: "bot"; level: number }; creator: PieceType; portalMax?: number };
+  | { kind: "portal"; opponent: "two-player" | { kind: "bot"; level: number }; creator: PieceType; portalMax?: number }
+  | { kind: "custom"; customPiece?: CustomPieceDef; opponent: "two-player" | { kind: "bot"; level: number } };
 export interface Players { w: string; b: string; }
 
 interface RatedMoveFeedback extends MoveFeedback {
@@ -65,6 +66,8 @@ interface PlayerGamePerformance extends GamePerformanceSummary {
 
 interface NewGameOptions {
   timerSeconds?: number;
+  boardLayout?: SavedBoardLayout | null;
+  customGame?: SavedCustomGame | null;
 }
 
 /** Build the initial state for Portal Chess (creator-type portals). */
@@ -76,6 +79,72 @@ function portalInitialState(creator: PieceType, portalMax = 2): GameState {
   return s;
 }
 
+/** Build an initial state from a saved board layout or custom game (white mirrored to black). */
+function customBoardState(layout: SavedBoardLayout | SavedCustomGame): GameState {
+  const empty: (import("./engine/board").Piece | null)[][] =
+    Array.from({ length: 8 }, () => Array(8).fill(null));
+  const customPieces = "customPieces" in layout && Array.isArray(layout.customPieces)
+    ? Object.fromEntries(layout.customPieces.map((piece) => [piece.id, piece.def]))
+    : undefined;
+  const legacyCustomId = "legacy-x1";
+  for (const square of layout.squares) {
+    const { rank, file, type } = square;
+    if (rank < 0 || rank > 3 || file < 0 || file > 7) continue;
+    const customId =
+      type === "X1"
+        ? (("customPieceId" in square && square.customPieceId) || (("customPieceDef" in layout && layout.customPieceDef) ? legacyCustomId : undefined))
+        : undefined;
+    empty[rank][file] = { type, color: "w", customId };
+    empty[7 - rank][file] = { type, color: "b", customId };
+  }
+  const wKok = empty[0][4]?.type === "K" && empty[0][4]?.color === "w";
+  const bKok = empty[7][4]?.type === "K" && empty[7][4]?.color === "b";
+  const state: GameState = {
+    board: empty,
+    turn: "w",
+    castling: {
+      wK: wKok && empty[0][7]?.type === "R",
+      wQ: wKok && empty[0][0]?.type === "R",
+      bK: bKok && empty[7][7]?.type === "R",
+      bQ: bKok && empty[7][0]?.type === "R"
+    },
+    enPassant: null,
+    halfmove: 0,
+    fullmove: 1,
+    history: [],
+    forfeits: [],
+    positionKeys: []
+  };
+  if (customPieces && Object.keys(customPieces).length > 0) {
+    state.customPieces = customPieces;
+  } else if ("customPieceDef" in layout && layout.customPieceDef) {
+    state.customPiece = layout.customPieceDef;
+    state.customPieces = { [legacyCustomId]: layout.customPieceDef };
+  }
+  state.positionKeys.push(positionKey(state));
+  return state;
+}
+
+/** Swap all instances of `replaces` on the board to X1 and attach the def. */
+function withCustomPiece(state: GameState, def: CustomPieceDef, replaces: PieceType): GameState {
+  const ns = cloneState(state);
+  const legacyCustomId = "legacy-x1";
+  ns.customPiece = def;
+  ns.customPieces = { [legacyCustomId]: def };
+  ns.replaces = replaces;
+  for (let r = 0; r < 8; r++) {
+    for (let f = 0; f < 8; f++) {
+      const p = ns.board[r][f];
+      if (p && p.type === replaces) {
+        ns.board[r][f] = { type: "X1", color: p.color, customId: legacyCustomId };
+      }
+    }
+  }
+  // Recompute positionKey after board change
+  ns.positionKeys = [positionKey(ns)];
+  return ns;
+}
+
 interface GameCtx {
   store: Store;
   activeProfile: Profile | null;
@@ -122,12 +191,15 @@ interface GameCtx {
   updateSetting<K extends keyof Settings>(key: K, value: Settings[K]): void;
 }
 
-/** Returns the bot level if the mode is bot-driven (incl. portal+bot), else null. */
+/** Returns the bot level if the mode is bot-driven (incl. portal+bot, custom+bot), else null. */
 function botLevelOf(m: Mode): number | null {
   if (m.kind === "bot") return m.level;
   if (m.kind === "portal" && typeof m.opponent !== "string" && m.opponent.kind === "bot") {
     return m.opponent.level;
   }
+  if (m.kind === "custom" && typeof m.opponent !== "string" && m.opponent.kind === "bot") {
+    return m.opponent.level;
+  }
   return null;
 }
 
@@ -414,7 +486,8 @@ export function GameProvider({ children }: { children: ReactNode }) {
               ? 600
               : 400;
         const t0 = performance.now();
-        const move = await chooseBotMove(state, lvl, { allowExternal: mode.kind === "bot" });
+        const hasCustomPieces = Boolean(state.customPiece || (state.customPieces && Object.keys(state.customPieces).length > 0));
+        const move = await chooseBotMove(state, lvl, { allowExternal: mode.kind === "bot" && !hasCustomPieces });
         const elapsed = performance.now() - t0;
         if (elapsed < minThinkMs) {
           await new Promise((r) => setTimeout(r, minThinkMs - elapsed));
@@ -650,9 +723,36 @@ export function GameProvider({ children }: { children: ReactNode }) {
         ? `Bot Lv ${m.level}`
         : m.kind === "portal" && typeof m.opponent !== "string" && m.opponent.kind === "bot"
           ? `Bot Lv ${m.opponent.level}`
-          : "Player 2";
+          : m.kind === "custom" && typeof m.opponent !== "string" && m.opponent.kind === "bot"
+            ? `Bot Lv ${m.opponent.level}`
+            : "Player 2";
     setPlayers({ w: p?.w ?? defaultW, b: p?.b ?? defaultB });
-    const fresh = m.kind === "portal" ? portalInitialState(m.creator, m.portalMax ?? 2) : initialState();
+    // Build initial board state
+    let base: GameState;
+    if (opts?.customGame) {
+      base = customBoardState(opts.customGame);
+      if (m.kind === "portal") {
+        base.portals = { w: [], b: [], max: m.portalMax ?? 2 };
+        base.portalCreators = { w: m.creator, b: m.creator };
+        base.portalAdjacencyRule = false;
+      }
+    } else if (opts?.boardLayout) {
+      base = customBoardState(opts.boardLayout);
+      // Portal mode with custom layout: add portal fields
+      if (m.kind === "portal") {
+        base.portals = { w: [], b: [], max: m.portalMax ?? 2 };
+        base.portalCreators = { w: m.creator, b: m.creator };
+        base.portalAdjacencyRule = false;
+      }
+    } else if (m.kind === "portal") {
+      base = portalInitialState(m.creator, m.portalMax ?? 2);
+    } else {
+      base = initialState();
+    }
+    // For custom mode, X1 pieces are already on the board from the designer
+    const fresh = m.kind === "custom" && !opts?.customGame
+      ? withCustomPiece(base, m.customPiece!, (m as any).replaces ?? "N")
+      : base;
     dispatch({ type: "new", initial: fresh });
     setSelected(null);
     setPaused(false);
@@ -733,14 +833,14 @@ export function GameProvider({ children }: { children: ReactNode }) {
   }, [store]);
 
   const updateSetting = useCallback(<K extends keyof Settings>(key: K, value: Settings[K]) => {
-    const updated = cloneStore(store);
+    const updated = cloneStore(storeRef.current);
     updateSettings(updated, { [key]: value } as Partial<Settings>);
     setStore(updated);
     // Keep ref in sync immediately so any synchronous code that runs right
     // after this (e.g. New Game screen's Start button: updateSetting → newGame)
     // sees the freshest settings.
     storeRef.current = updated;
-  }, [store]);
+  }, []);
 
   const recordPuzzleSolved = useCallback((puzzleId: string) => {
     if (!activeProfile) return;
@@ -802,6 +902,10 @@ function isHumanControlledColor(mode: Mode, color: Color): boolean {
     if (typeof mode.opponent === "string") return true;
     return color === "w";
   }
+  if (mode.kind === "custom") {
+    if (mode.opponent === "two-player") return true;
+    return color === "w";
+  }
   return true;
 }
 

src/GameContext.tsx

@@ -3,6 +3,7 @@ import { Move, Piece as PieceT, Square, squareName } from "../engine/board";
 import { allLegalMoves, findKing, inCheck } from "../engine/rules";
 import { playSound } from "../engine/sound";
 import { useGame } from "../GameContext";
+import { customPieceDefFor } from "../engine/board";
 import { Piece } from "./Piece";
 
 function isLegalTarget(legal: Move[], sq: Square): Move | undefined {
@@ -238,6 +239,7 @@ export function Board({ flipped = false }: Props) {
                         type={lastMove.captured}
                         set={pieceSet}
                         rotate={rotateBlackForFixedBoard && capturedColor === "b"}
+                        customPieceDef={undefined}
                       />
                     </span>
                   )}
@@ -256,6 +258,7 @@ export function Board({ flipped = false }: Props) {
                         type={piece.type}
                         set={pieceSet}
                         rotate={rotateBlackForFixedBoard && piece.color === "b"}
+                        customPieceDef={customPieceDefFor(state, piece)}
                       />
                     </span>
                   )}

src/components/Board.tsx

@@ -1,4 +1,4 @@
-import type { Color, PieceType } from "../engine/board";
+import type { AnimalId, Color, CustomPieceDef, PieceType } from "../engine/board";
 import type { PieceSet } from "../engine/storage";
 import { PieceSVG } from "./PieceSVG";
 
@@ -7,15 +7,87 @@ const GLYPH: Record<string, string> = {
   bK: "\u265A", bQ: "\u265B", bR: "\u265C", bB: "\u265D", bN: "\u265E", bP: "\u265F"
 };
 
+const ANIMAL_EMOJI: Record<string, string> = {
+  camel: "🐪", cat: "🐱", trex: "🦖", dog: "🐶",
+  dragon: "🐉", lion: "🦁", eagle: "🦅", wolf: "🐺",
+  frog: "🐸", unicorn: "🦄"
+};
+
+function GDYellowIcon() {
+  return (
+    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true">
+      <rect width="40" height="40" fill="#E8A000" rx="3"/>
+      <rect x="2" y="2" width="22" height="22" fill="#FFCC00" opacity="0.45"/>
+      <rect x="5" y="10" width="11" height="9" fill="#111"/>
+      <rect x="6" y="11" width="9" height="7" fill="#00D8E8"/>
+      <rect x="24" y="10" width="11" height="9" fill="#111"/>
+      <rect x="25" y="11" width="9" height="7" fill="#00D8E8"/>
+      <rect x="5" y="24" width="30" height="9" fill="#111"/>
+      <rect x="6" y="25" width="28" height="7" fill="#00D8E8"/>
+    </svg>
+  );
+}
+
+function GDRedIcon() {
+  return (
+    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true">
+      <rect width="40" height="40" fill="#CC1111" rx="3"/>
+      <rect x="1" y="1" width="38" height="38" fill="none" stroke="#111" strokeWidth="2"/>
+      <circle cx="13" cy="14" r="7" fill="#111"/>
+      <circle cx="13" cy="14" r="5" fill="#FFE800"/>
+      <circle cx="27" cy="14" r="7" fill="#111"/>
+      <circle cx="27" cy="14" r="5" fill="#FFE800"/>
+      <rect x="2" y="23" width="36" height="5" fill="#111"/>
+      <rect x="3" y="24" width="7" height="3" fill="#FFE800"/>
+      <rect x="12" y="24" width="6" height="3" fill="#FFE800"/>
+      <rect x="22" y="24" width="6" height="3" fill="#FFE800"/>
+      <rect x="30" y="24" width="7" height="3" fill="#FFE800"/>
+      <rect x="2" y="28" width="11" height="10" fill="#111" rx="1"/>
+      <rect x="3" y="29" width="9" height="8" fill="#CC1111"/>
+      <rect x="27" y="28" width="11" height="10" fill="#111" rx="1"/>
+      <rect x="28" y="29" width="9" height="8" fill="#CC1111"/>
+    </svg>
+  );
+}
+
+function CreeperIcon() {
+  return (
+    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true">
+      <rect width="40" height="40" fill="#55BB44"/>
+      <rect x="6" y="8" width="9" height="10" fill="#111"/>
+      <rect x="25" y="8" width="9" height="10" fill="#111"/>
+      <rect x="15" y="18" width="10" height="7" fill="#111"/>
+      <rect x="9" y="25" width="6" height="10" fill="#111"/>
+      <rect x="25" y="25" width="6" height="10" fill="#111"/>
+      <rect x="15" y="28" width="10" height="7" fill="#111"/>
+    </svg>
+  );
+}
+
+function CustomPieceIcon({ animal }: { animal?: AnimalId }) {
+  if (animal === "gd-yellow") return <GDYellowIcon />;
+  if (animal === "gd-red") return <GDRedIcon />;
+  if (animal === "creeper") return <CreeperIcon />;
+  return <span style={{ fontSize: "0.9em", lineHeight: 1 }}>{ANIMAL_EMOJI[animal ?? ""] ?? "?"}</span>;
+}
+
 interface Props {
   color: Color;
   type: PieceType;
   set: PieceSet;
   rotate?: boolean;
+  customPieceDef?: CustomPieceDef;
 }
 
-export function Piece({ color, type, set, rotate = false }: Props) {
+export function Piece({ color, type, set, rotate = false, customPieceDef }: Props) {
   const faceClass = rotate ? "piece-face-180" : "";
+  if (type === "X1") {
+    return (
+      <span className={`piece-custom piece-${color} ${faceClass}`}>
+        <CustomPieceIcon animal={customPieceDef?.animal} />
+      </span>
+    );
+  }
   if (set === "classic") {
     return (
       <span className={`piece-glyph piece-${color} ${faceClass}`}>

src/components/Piece.tsx

@@ -62,7 +62,10 @@ function makeStore(): Store {
       explodeOnCapture: false,
       portalCreatorDefault: "N",
       portalOpponentDefault: "bot",
-      portalMaxDefault: 2
+      portalMaxDefault: 2,
+      savedCustomPieces: [],
+      savedBoardLayouts: [],
+      savedCustomGames: []
     },
     savedGames: {}
   };