Improve game safeguards and settings feedback

Author: Swon404

src/GameContext.tsx

@@ -87,6 +87,15 @@ function botLevelOf(m: Mode): number | null {
   return null;
 }
 
+function triggerHaptics(enabled: boolean, pattern: number | number[]) {
+  if (!enabled || typeof navigator === "undefined" || typeof navigator.vibrate !== "function") return;
+  try {
+    navigator.vibrate(pattern);
+  } catch {
+    // Ignore unsupported or blocked vibration requests.
+  }
+}
+
 const Ctx = createContext<GameCtx | null>(null);
 
 export function useGame(): GameCtx {
@@ -189,6 +198,32 @@ export function GameProvider({ children }: { children: ReactNode }) {
     soundedLenRef.current = state.history.length;
   }, [state, result, mode, store.settings.sound, store.settings.explodeOnCapture]);
 
+  const hapticsLenRef = useRef<number>(state.history.length);
+  useEffect(() => {
+    if (!store.settings.haptics) {
+      hapticsLenRef.current = state.history.length;
+      return;
+    }
+    if (state.history.length > hapticsLenRef.current) {
+      const lastMove = state.history[state.history.length - 1];
+      const isCheck = result.kind === "ongoing" && isInCheckNow(state);
+      if (result.kind === "checkmate") {
+        triggerHaptics(true, [60, 40, 90]);
+      } else if (result.kind !== "ongoing") {
+        triggerHaptics(true, [45, 30, 45]);
+      } else if (isCheck) {
+        triggerHaptics(true, [35, 25, 55]);
+      } else if (lastMove?.captured) {
+        triggerHaptics(true, 45);
+      } else if (lastMove?.isPortalEntry) {
+        triggerHaptics(true, [18, 20, 18]);
+      } else {
+        triggerHaptics(true, 20);
+      }
+    }
+    hapticsLenRef.current = state.history.length;
+  }, [state, result, store.settings.haptics]);
+
   // Persist active session so a refresh / PWA relaunch resumes the game.
   useEffect(() => {
     if (result.kind !== "ongoing") {
@@ -372,6 +407,14 @@ export function GameProvider({ children }: { children: ReactNode }) {
   }, [mode]);
 
   const newGame = useCallback((m: Mode, p?: Partial<Players>, opts?: NewGameOptions) => {
+    if (
+      result.kind === "ongoing" &&
+      state.history.length > 0 &&
+      typeof window !== "undefined" &&
+      !window.confirm("Start a new game? Your current game will be replaced.")
+    ) {
+      return;
+    }
     clearActiveSession();
     noTimerRef.current = false;
     if (opts?.timerSeconds !== undefined && opts.timerSeconds !== storeRef.current.settings.timerSeconds) {
@@ -400,7 +443,7 @@ export function GameProvider({ children }: { children: ReactNode }) {
     // instead of the stale closure-captured one.
     const t = opts?.timerSeconds ?? storeRef.current.settings.timerSeconds;
     setTimeLeft(t > 0 ? t : Infinity);
-  }, [activeProfile]);
+  }, [activeProfile, result.kind, state.history.length]);
 
   const forfeit = useCallback(() => dispatch({ type: "forfeit" }), []);
 

src/components/Board.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, useLayoutEffect, useState } from "react";
 import { Move, Piece as PieceT, Square, squareName } from "../engine/board";
-import { findKing, inCheck } from "../engine/rules";
+import { findKing, inCheck, isSquareAttacked } from "../engine/rules";
 import { playSound } from "../engine/sound";
 import { useGame } from "../GameContext";
 import { Piece } from "./Piece";
@@ -149,6 +149,10 @@ export function Board({ flipped = false }: Props) {
               const isHintTo = hint && hint.to.file === f && hint.to.rank === r;
               const isPortalW = wPortals.some((p) => p.file === f && p.rank === r);
               const isPortalB = bPortals.some((p) => p.file === f && p.rank === r);
+              const isThreatened =
+                !!piece &&
+                store.settings.showThreats &&
+                isSquareAttacked(state, sq, piece.color === "w" ? "b" : "w");
               const slideEnd = lastMove?.portalTo ?? lastMove?.to;
               const isSlideDestination =
                 !!slideEnd && slideEnd.file === f && slideEnd.rank === r;
@@ -207,6 +211,7 @@ export function Board({ flipped = false }: Props) {
                       aria-hidden="true"
                     />
                   )}
+                  {isThreatened && <span className="threat-marker" aria-hidden="true">!</span>}
                   {showCapturedGhost && lastMove?.captured && (
                     <span className="captured-ghost" aria-hidden="true">
                       <Piece

src/engine/__tests__/perft.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
-import { initialState } from "../board";
-import { allLegalMoves, makeMove } from "../rules";
+import { initialState, parseFEN } from "../board";
+import { allLegalMoves, gameResult, makeMove } from "../rules";
 
 function perft(state: ReturnType<typeof initialState>, depth: number): number {
   if (depth === 0) return 1;
@@ -22,3 +22,11 @@ describe("perft from initial position", () => {
     expect(perft(initialState(), 3)).toBe(8902);
   });
 });
+
+describe("game results", () => {
+  it("detects stalemate when side to move has no legal moves and is not in check", () => {
+    const state = parseFEN("7k/5Q2/6K1/8/8/8/8/8 b - - 0 1");
+    expect(allLegalMoves(state)).toHaveLength(0);
+    expect(gameResult(state)).toEqual({ kind: "stalemate" });
+  });
+});

src/screens/SettingsScreen.tsx

@@ -90,10 +90,10 @@ export function SettingsScreen() {
       <section>
         <h3>Toggles</h3>
         <label><input type="checkbox" checked={s.sound} onChange={(e) => updateSetting("sound", e.target.checked)} /> Sound effects</label>
-        <label><input type="checkbox" checked={s.haptics} onChange={(e) => updateSetting("haptics", e.target.checked)} /> Haptics (iPhone)</label>
+        <label><input type="checkbox" checked={s.haptics} onChange={(e) => updateSetting("haptics", e.target.checked)} /> Vibration feedback (supported devices)</label>
         <label><input type="checkbox" checked={s.autoFlip} onChange={(e) => updateSetting("autoFlip", e.target.checked)} /> Auto-flip board in 2-player mode</label>
         <label><input type="checkbox" checked={s.rotateBlackPiecesFixedBoard} onChange={(e) => updateSetting("rotateBlackPiecesFixedBoard", e.target.checked)} /> Rotate black pieces 180° on fixed 2-player board</label>
-        <label><input type="checkbox" checked={s.showThreats} onChange={(e) => updateSetting("showThreats", e.target.checked)} /> Show threatened pieces (learn mode)</label>
+        <label><input type="checkbox" checked={s.showThreats} onChange={(e) => updateSetting("showThreats", e.target.checked)} /> Show threatened pieces</label>
         <label><input type="checkbox" checked={s.explodeOnCapture} onChange={(e) => updateSetting("explodeOnCapture", e.target.checked)} /> 💥 Explode pieces on capture</label>
       </section>
     </div>

src/styles.css

@@ -310,6 +310,25 @@ section label { display: block; margin: 6px 0; }
 }
 @keyframes hint-spin { to { transform: rotate(360deg); } }
 
+.threat-marker {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 4;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: rgba(245, 158, 11, 0.95);
+  color: #111827;
+  font-size: 0.7rem;
+  font-weight: 800;
+  line-height: 18px;
+  text-align: center;
+  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.55);
+  pointer-events: none;
+}
+
 /* Promotion picker */
 .promo-picker h3 { margin: 0 0 12px; }
 .promo-buttons {