Large board perf: depth cap, gate mobility bonus, skip threat markers when disabled, scrollable game board

Author: Swon404

src/components/Board.tsx

@@ -95,7 +95,9 @@ export function Board({ flipped = false }: Props) {
     mode.kind === "two-player" &&
     !store.settings.autoFlip &&
     store.settings.rotateBlackPiecesFixedBoard;
+  const showThreats = store.settings.showThreats;
   const legalCaptureTargets = useMemo(() => {
+    if (!showThreats) return { w: new Set<string>(), b: new Set<string>() };
     const whiteTargets = new Set(
       allLegalMoves({ ...state, turn: "w" })
         .filter((move) => Boolean(move.captured))
@@ -107,7 +109,7 @@ export function Board({ flipped = false }: Props) {
         .map((move) => squareKey(move.to))
     );
     return { w: whiteTargets, b: blackTargets };
-  }, [state]);
+  }, [state, showThreats]);
 
   useLayoutEffect(() => {
     const current = state.history[state.history.length - 1];
@@ -157,7 +159,9 @@ export function Board({ flipped = false }: Props) {
         className={`board board-theme-${theme} piece-set-${pieceSet} anim-speed-${animationSpeed}`}
         style={{
           aspectRatio: `${fileCount} / ${rankCount}`,
-          ["--square-font-size" as string]: `${squareFontSize}px`
+          ["--square-font-size" as string]: `${squareFontSize}px`,
+          ["--file-count" as string]: fileCount,
+          ["--rank-count" as string]: rankCount,
         }}
       >
         {ranks.map((r) => (

src/engine/bot.ts

@@ -19,9 +19,13 @@ function materialScore(state: GameState, color: "w" | "b"): number {
     const v = p.type === "X1" ? customPieceValueForDef(state, p) : (VALUES[p.type] ?? 0);
     s += (p.color === color ? 1 : -1) * v;
   }
-  // Slight mobility bonus
-  const moves = allLegalMoves(state).length;
-  s += (state.turn === color ? moves : -moves) * 2;
+  // Mobility bonus: reward having more legal moves than the opponent.
+  // Only compute this at the leaf level; skip for large boards to keep it fast.
+  const boardArea = boardWidth(state) * boardHeight(state);
+  if (boardArea <= 100) {
+    const moves = allLegalMoves(state).length;
+    s += (state.turn === color ? moves : -moves) * 2;
+  }
   return s;
 }
 
@@ -115,7 +119,9 @@ export async function chooseBotMove(state: GameState, level: number, opts?: BotO
   // Level 6+: deterministic minimax fallback if external engine is unavailable.
   const blunderChanceByLevel: Record<number, number> = { 1: 0.8, 2: 0.5, 3: 0.15, 4: 0.03 };
   const blunderChance = blunderChanceByLevel[normalizedLevel] ?? 0;
-  const depth = normalizedLevel <= 2 ? 1 : normalizedLevel <= 4 ? 2 : normalizedLevel <= 8 ? 3 : 4;
+  const boardArea = boardWidth(state) * boardHeight(state);
+  const depthCap = boardArea > 200 ? 1 : boardArea > 100 ? 2 : 4;
+  const depth = Math.min(depthCap, normalizedLevel <= 2 ? 1 : normalizedLevel <= 4 ? 2 : normalizedLevel <= 8 ? 3 : 4);
 
   if (rng() < blunderChance) {
     const captures = moves.filter((m) => m.captured);

src/styles.css

@@ -182,14 +182,24 @@ section label { display: block; margin: 6px 0; }
   flex-direction: column;
   width: 100%;
   max-width: 560px;
-  aspect-ratio: 1 / 1;
   margin: 12px auto;
   border: 2px solid #111;
   border-radius: 8px;
   overflow: hidden;
   user-select: none;
 }
 .board-row { display: flex; flex: 1; }
+/* On mobile, force a minimum 40px cell so large boards scroll rather than squish */
+@media (max-width: 640px) {
+  .board {
+    min-width: calc(var(--file-count, 8) * 40px);
+    min-height: calc(var(--rank-count, 8) * 40px);
+    width: calc(var(--file-count, 8) * 40px);
+    max-width: none;
+  }
+  .board-row { flex: none; height: 40px; }
+  .square { flex: none; width: 40px; height: 40px; }
+}
 .square {
   flex: 1;
   position: relative;
@@ -1159,7 +1169,11 @@ section label { display: block; margin: 6px 0; }
 .puzzle-controls { margin: 10px 0; justify-content: space-between; }
 .topbar .muted { color: #94a3b8; font-size: 0.9rem; }
 
-.board-wrap { position: relative; }
+.board-wrap {
+  position: relative;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
 .pause-overlay {
   position: absolute; inset: 0;
   display: flex; align-items: center; justify-content: center;