Add spectator watch page, forfeit-on-new-game, CPU self-play, and threefold repetition

- /watch live feed of active games with click-to-fullscreen and per-game back button
- Starting a new game forfeits the in-progress game; opponent is flagged the winner
- Watch CPU vs CPU self-play games; results shown for ~30s before cleanup
- Detect threefold repetition in the C# rules layer and end the game as a draw

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

JoshHeaps.Net/Pages/Chess.cshtml

@@ -24,6 +24,7 @@
     <div id="buttonContainer" class="sideContent">
         <button id="startGameBtn" onclick="startNewGame()">Start New Game</button>
         <button id="startCPUGame" onclick="startCPUGame()">Vs CPU</button>
+        <a id="watchLink" href="/watch">Watch other games →</a>
     </div>
 </div>
 

JoshHeaps.Net/Pages/Index.cshtml

@@ -61,6 +61,7 @@
     <h2 class="section-title">Demos</h2>
     <div id="buttonWrapper">
         <button class="demoButton" onclick="window.location.href='/chess'">Play Chess</button>
+        <button class="demoButton" onclick="window.location.href='/watch'">Watch Live Chess</button>
         <button class="demoButton" onclick="window.location.href='/particles'">Particle Simulator</button>
         <button class="demoButton" onclick="window.location.href='/memorylane'">Memory Lane</button>
         <button class="demoButton" onclick="window.location.href='https://media.joshheaps.net'">Cloud Image Storage</button>

JoshHeaps.Net/Pages/Watch.cshtml

@@ -0,0 +1,34 @@
+@page
+@model JoshHeaps.Net.Pages.WatchModel
+@{
+    Layout = "_Layout";
+    ViewData["Title"] = "Watch Chess";
+}
+
+<div id="watchHeader">
+    <h1>Live Chess</h1>
+    <p id="watchStatus">Loading games…</p>
+    <div id="watchControls">
+        <label for="cpuDifficulty">Difficulty</label>
+        <select id="cpuDifficulty">
+            @for (int i = 1; i <= 20; i++)
+            {
+                <option value="@i" @(i == 4 ? "selected" : "")>@i</option>
+            }
+        </select>
+        <button id="startCpuVsCpu" onclick="Spectate.startCpuGame()">Watch CPU vs CPU</button>
+    </div>
+    <a id="backToPlay" href="/chess">← Play a game</a>
+</div>
+
+<div id="gamesFeed"></div>
+
+@section Scripts {
+    <script src="~/js/signalr/signalr.min.js"></script>
+    <script src="~/js/ChessScripts/Spectate.js"></script>
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/css/chess/game.css?v=@ViewData["cssVersion"]" />
+    <link rel="stylesheet" href="~/css/chess/spectate.css?v=@ViewData["cssVersion"]" />
+}

JoshHeaps.Net/Pages/Watch.cshtml.cs

@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace JoshHeaps.Net.Pages
+{
+    public class WatchModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}