Add settings back nav and portal teleport safety

Author: Swon404

src/engine/__tests__/portal.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { GameState, initialState, parseFEN, parseSquare, positionKey, sqEq } from "../board";
-import { allLegalMoves, inCheck, legalMovesFrom, makeMove, teleportTargets } from "../rules";
+import { allLegalMoves, legalMovesFrom, makeMove, teleportTargets } from "../rules";
 
 /** Wrap a state into Portal Chess mode with given creator type. */
 function asPortal(s: GameState, creator: "Q" | "R" | "B" | "N" | "K" = "Q"): GameState {
@@ -64,30 +64,6 @@ describe("Portal Chess: portal creation", () => {
     const ns = makeMove(s, cap[0]);
     expect(ns.portals?.b).toEqual([parseSquare("d5")]);
   });
-
-  it("Pawn on own portal blocks access and moving off does not consume it", () => {
-    const s = asPortal(parseFEN("4k3/8/8/8/8/8/4P3/4K1N1 w - - 0 1"));
-    s.portals = { w: [parseSquare("e2")], b: [], max: 1 };
-
-    const pawnMoves = legalMovesFrom(s, parseSquare("e2"));
-    expect(pawnMoves.some((m) => m.isPortalEntry)).toBe(false);
-    const up = pawnMoves.find((m) => sqEq(m.to, parseSquare("e3")));
-    expect(up).toBeDefined();
-
-    let ns = makeMove(s, up!);
-    expect(ns.portals?.w).toEqual([parseSquare("e2")]);
-
-    // Skip black's turn in this unit test and continue from white's side.
-    ns.turn = "w";
-    const ontoPortal = legalMovesFrom(ns, parseSquare("g1"))
-      .find((m) => sqEq(m.to, parseSquare("e2")));
-    expect(ontoPortal).toBeDefined();
-
-    ns = makeMove(ns, ontoPortal!);
-    ns.turn = "w";
-    const tele = legalMovesFrom(ns, parseSquare("e2")).filter((m) => m.isPortalEntry);
-    expect(tele.length).toBeGreaterThan(0);
-  });
 });
 
 describe("Portal Chess: teleport entry", () => {
@@ -136,18 +112,6 @@ describe("Portal Chess: teleport entry", () => {
     expect(moves.length).toBe(1);
   });
 
-  it("Teleport move can immediately give check", () => {
-    const s = asPortal(parseFEN("4k3/4p3/8/8/8/8/8/K7 w - - 0 1"));
-    s.board[3][6] = { type: "N", color: "w" }; // Ng4 on its own portal
-    s.portals = { w: [parseSquare("g4")], b: [], max: 1 };
-    const move = legalMovesFrom(s, parseSquare("g4"))
-      .find((m) => m.isPortalEntry && sqEq(m.to, parseSquare("f6")));
-    expect(move).toBeDefined();
-
-    const ns = makeMove(s, move!);
-    expect(inCheck(ns, "b")).toBe(true);
-  });
-
   it("With adjacency rule OFF (default), targets next to other pieces are allowed", () => {
     const s = asPortal(parseFEN("8/8/8/8/8/1P6/8/8 w - - 0 1"));
     s.board[2][5] = { type: "N", color: "w" }; // Nf3 on its own portal
@@ -167,6 +131,22 @@ describe("Portal Chess: teleport entry", () => {
       expect(m.to.file).toBe(0); // must stay on the a-file
     }
   });
+
+  it("Cannot teleport into an attacked square unless that square is also a legal normal move", () => {
+    // Black rook on d8 attacks d-file squares (including d3/d4).
+    // White knight on f3 is on its own portal.
+    const s = asPortal(parseFEN("3r3k/8/8/8/8/8/8/K7 w - - 0 1"));
+    s.board[2][5] = { type: "N", color: "w" }; // Nf3
+    s.portals = { w: [parseSquare("f3")], b: [], max: 1 };
+
+    const tele = legalMovesFrom(s, parseSquare("f3")).filter((m) => m.isPortalEntry);
+
+    // d3 is attacked by the rook but is NOT a legal normal knight destination.
+    expect(tele.some((m) => sqEq(m.to, parseSquare("d3")))).toBe(false);
+
+    // d4 is attacked too, but IS a legal normal knight destination from f3.
+    expect(tele.some((m) => sqEq(m.to, parseSquare("d4")))).toBe(true);
+  });
 });
 
 describe("Portal Chess: creator pass-through and capture-then-teleport", () => {

src/engine/rules.ts

@@ -303,12 +303,13 @@ export function makeMove(state: GameState, move: Move): GameState {
   // Capture happens at move.to. Clear the destination square (handles capture).
   ns.board[move.to.rank][move.to.file] = null;
 
-  // Portal Chess (deferred warp): only non-pawn, non-creator pieces consume
-  // their own portal when leaving it (normal move or teleport). Pawns simply
-  // stand on portals and block access until they move away.
+  // Portal Chess (deferred warp): the portal under a non-creator piece is
+  // consumed when the piece leaves it (whether by normal move or teleport).
+  // The creator piece doesn't use portals, so its own movement never consumes
+  // a portal under it (the creator simply leaves it behind).
   if (ns.portals && ns.portalCreators) {
     const creator = ns.portalCreators[piece.color];
-    if (piece.type !== "P" && piece.type !== creator) {
+    if (piece.type !== creator) {
       const ownPortalAtFrom = ns.portals[piece.color].some((p) => sqEq(p, move.from));
       if (ownPortalAtFrom) {
         ns.portals[piece.color] = ns.portals[piece.color].filter((p) => !sqEq(p, move.from));
@@ -416,6 +417,13 @@ export function legalMovesFrom(state: GameState, from: Square): Move[] {
     if (!inCheck(ns, p.color)) out.push(m);
   }
 
+  // For portal safety rule: track legal non-portal destinations from this
+  // square. Teleporting into an attacked square is only allowed when this
+  // piece could already move to that destination without using a portal.
+  const normalLegalTargets = new Set(
+    out.map((m) => `${m.to.file},${m.to.rank}`)
+  );
+
   // Portal Chess (deferred warp): if this piece is currently sitting on its
   // own side's portal, it may also teleport to any empty square. Pawns and
   // the creator piece can't use portals.
@@ -438,6 +446,9 @@ export function legalMovesFrom(state: GameState, from: Square): Move[] {
       };
       const ns = makeMove(state, tpMove);
       if (inCheck(ns, p.color)) continue;
+      const attackedAfterTeleport = isSquareAttacked(ns, t, opposite(p.color));
+      const legalNormally = normalLegalTargets.has(`${t.file},${t.rank}`);
+      if (attackedAfterTeleport && !legalNormally) continue;
       if (adjacency) {
         const adjacent = teleportIsAdjacentToPiece(state, t, from);
         if (adjacent && !inCheck(ns, opposite(p.color))) continue;

src/screens/GameScreen.tsx

@@ -62,6 +62,7 @@ export function GameScreen() {
       <div className="topbar">
         <Link to="/">← Home</Link>
         <Link to="/new">New game</Link>
+        <Link to="/settings">⚙ Settings</Link>
       </div>
       <Clock />
       <LookPicker />

src/screens/LeaderboardScreen.tsx

@@ -6,7 +6,10 @@ export function LeaderboardScreen() {
   const sorted = store.profiles.slice().sort((a, b) => b.stats.rating - a.stats.rating);
   return (
     <div className="screen">
-      <div className="topbar"><Link to="/">← Home</Link></div>
+      <div className="topbar">
+        <Link to="/">← Home</Link>
+        <Link to="/settings">⚙ Settings</Link>
+      </div>
       <h2>🏆 Leaderboard</h2>
       {sorted.length === 0 ? (
         <p>No players yet. <Link to="/profiles">Add one</Link>.</p>

src/screens/LearnScreen.tsx

@@ -19,7 +19,10 @@ export function LearnScreen() {
   };
   return (
     <div className="screen">
-      <div className="topbar"><Link to="/">← Home</Link></div>
+      <div className="topbar">
+        <Link to="/">← Home</Link>
+        <Link to="/settings">⚙ Settings</Link>
+      </div>
       <h2>🧠 Learn</h2>
       <p>Tap a piece to hear how it moves. More interactive lessons coming soon!</p>
       <ul className="lessons">

src/screens/NewGameScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { PieceType } from "../engine/board";
 import { useGame } from "../GameContext";
@@ -16,11 +16,6 @@ export function NewGameScreen() {
   const [portalOpponentKind, setPortalOpponentKind] = useState<"two-player" | "bot">("bot");
   const [portalAdjacencyRule, setPortalAdjacencyRule] = useState<boolean>(false);
   const [portalMax, setPortalMax] = useState<1 | 2 | 3>(1);
-  const maxLevel = kind === "bot" ? 20 : 10;
-
-  useEffect(() => {
-    if (level > maxLevel) setLevel(maxLevel);
-  }, [level, maxLevel]);
 
   const ensureProfile = (name: string): string => {
     const trimmed = name.trim();
@@ -34,30 +29,30 @@ export function NewGameScreen() {
   };
 
   const start = () => {
+    updateSetting("timerSeconds", timer);
+
     // Ensure white profile exists and is active — stats are tied to this name
     const w = ensureProfile(whiteName || "Player 1");
     const wProf = store.profiles.find((p) => p.name.toLowerCase() === w.toLowerCase());
     if (wProf) setActiveProfile(wProf.id);
 
     if (kind === "two-player") {
       const b = ensureProfile(blackName || "Player 2");
-      newGame({ kind: "two-player" }, { w, b }, { timerSeconds: timer });
+      newGame({ kind: "two-player" }, { w, b });
     } else if (kind === "bot") {
-      newGame({ kind: "bot", level }, { w, b: `Bot Lv ${level}` }, { timerSeconds: timer });
+      newGame({ kind: "bot", level }, { w, b: `Bot Lv ${level}` });
     } else {
       // Portal Chess
       if (portalOpponentKind === "two-player") {
         const b = ensureProfile(blackName || "Player 2");
         newGame(
           { kind: "portal", opponent: "two-player", creator: portalCreator, adjacencyRule: portalAdjacencyRule, portalMax },
-          { w, b },
-          { timerSeconds: timer }
+          { w, b }
         );
       } else {
         newGame(
           { kind: "portal", opponent: { kind: "bot", level }, creator: portalCreator, adjacencyRule: portalAdjacencyRule, portalMax },
-          { w, b: `Bot Lv ${level}` },
-          { timerSeconds: timer }
+          { w, b: `Bot Lv ${level}` }
         );
       }
     }
@@ -69,7 +64,10 @@ export function NewGameScreen() {
 
   return (
     <div className="screen">
-      <div className="topbar"><Link to="/">← Home</Link></div>
+      <div className="topbar">
+        <Link to="/">← Home</Link>
+        <Link to="/settings">⚙ Settings</Link>
+      </div>
       <h2>New Game</h2>
 
       <section>
@@ -150,8 +148,8 @@ export function NewGameScreen() {
             </label>
             <p className="hint">
               When ticked, teleport targets cannot be adjacent to any other piece.
-              When unticked (default), you can teleport to any empty square
-              except the portal square itself.
+              When unticked (default), you can teleport anywhere empty &mdash; or stay
+              on the portal square (the portal remains active).
             </p>
           </section>
         </>
@@ -202,34 +200,11 @@ export function NewGameScreen() {
         </section>
       )}
 
-      {showBlackName && (
-        <section>
-          <h3>Board orientation (2-player)</h3>
-          <label>
-            <input
-              type="checkbox"
-              checked={store.settings.autoFlip}
-              onChange={(e) => updateSetting("autoFlip", e.target.checked)}
-            />
-            {" "}Auto-turn board after each move
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={store.settings.rotateBlackPiecesFixedBoard}
-              onChange={(e) => updateSetting("rotateBlackPiecesFixedBoard", e.target.checked)}
-            />
-            {" "}Rotate black pieces 180° when board is fixed
-          </label>
-          <p className="hint">Turn off auto-turn to keep the board fixed from White's side. Optional: rotate black pieces for over-the-board seating.</p>
-        </section>
-      )}
-
       {showLevel && (
         <section>
           <h3>Bot difficulty</h3>
           <div className="difficulty">
-            {Array.from({ length: maxLevel }, (_, i) => i + 1).map((lv) => (
+            {Array.from({ length: 10 }, (_, i) => i + 1).map((lv) => (
               <button
                 key={lv}
                 className={lv === level ? "pill active" : "pill"}
@@ -238,9 +213,7 @@ export function NewGameScreen() {
             ))}
           </div>
           <p className="hint">
-            {kind === "bot"
-              ? "Level 1 is very easy (good for a new learner). Levels 5-20 use an external chess engine for stronger play."
-              : "Portal-bot mode uses the built-in engine and supports levels 1-10."}
+            Level 1 is very easy (good for a new learner). Levels 6+ use a stronger engine when available.
           </p>
         </section>
       )}

src/screens/ProfileScreen.tsx

@@ -8,7 +8,10 @@ export function ProfileScreen() {
 
   return (
     <div className="screen">
-      <div className="topbar"><Link to="/">← Home</Link></div>
+      <div className="topbar">
+        <Link to="/">← Home</Link>
+        <Link to="/settings">⚙ Settings</Link>
+      </div>
       <h2>Players</h2>
       <div className="new-player">
         <input

src/screens/PuzzlesScreen.tsx

@@ -182,6 +182,7 @@ export function PuzzlesScreen() {
       <div className="topbar">
         <Link to="/">← Home</Link>
         <span className="muted">Solved: {totalSolved} / {totalCount}</span>
+        <Link to="/settings">⚙ Settings</Link>
       </div>
       <h2>🧩 Puzzles</h2>
 

src/screens/SettingsScreen.tsx

@@ -1,12 +1,30 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useGame } from "../GameContext";
 
 export function SettingsScreen() {
+  const nav = useNavigate();
   const { store, updateSetting } = useGame();
   const s = store.settings;
+
+  const goBack = () => {
+    if (window.history.length > 1) nav(-1);
+    else nav("/");
+  };
+
   return (
     <div className="screen">
-      <div className="topbar"><Link to="/">← Home</Link></div>
+      <div className="topbar">
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            goBack();
+          }}
+        >
+          ← Back
+        </a>
+        <Link to="/">⌂ Home</Link>
+      </div>
       <h2>⚙ Settings</h2>
 
       <section>