JoshHeaps.Net/Controllers/ChessController.cs

@@ -176,33 +176,7 @@ public class ChessController(
         if (!_games.TryGetValue(gameId, out var gameState))
             return NotFound("Game not found");
 
-        var response = new
+        return Ok(gameState.ToDto());
-        {
-            gameState.GameId,
-            CurrentPlayer = gameState.CurrentPlayer.ToString(),
-            gameState.IsCheck,
-            gameState.IsCheckmate,
-            gameState.IsStalemate,
-            gameState.IsThreefoldRepetition,
-            EnPassantTarget = gameState.EnPassantTarget?.ToString() ?? null,
-            gameState.WhiteCanCastleKingside,
-            gameState.WhiteCanCastleQueenside,
-            gameState.BlackCanCastleKingside,
-            gameState.BlackCanCastleQueenside,
-            Pieces = gameState.Pieces
-                .Where(p => p.Position.Row >= 0)
-                .Select(p => new {
-                    p.Id,
-                    p.Type,
-                    p.Color,
-                    p.Position.Row,
-                    p.Position.Col,
-                    p.HasMoved
-                }),
-            gameState.MoveHistory
-        };
-
-        return Ok(response);
     }
 
     /// <summary>
@@ -210,7 +184,7 @@ public class ChessController(
     /// The test passes a JSON body with a MoveDto.
     /// </summary>
     [HttpPost("move")]
-    public ActionResult MakeMove([FromBody] MoveDto moveDto)
+    public async Task<ActionResult> MakeMove([FromBody] MoveDto moveDto)
     {
         if (!_games.TryGetValue(moveDto.GameId, out var gameState))
             return NotFound("Game not found");
@@ -245,10 +219,18 @@ public class ChessController(
         else
             ScheduleRemoveGame(gameState.GameId, _multiplayerGameTimeout);
 
+        var state = gameState.ToDto();
+
+        // Broadcast the move (with the full resulting state) to everyone watching this
+        // game. The mover also receives this echo but drops it via the version guard,
+        // since it already rendered the same state from this response.
+        await chessHub.Clients.Group(gameState.GameId.ToString())
+            .SendAsync("ReceiveMoveUpdate", gameState.GameId.ToString(), moveDto, result, state);
+
         if (!isGameOver && gameState.IsVsComputer && gameState.Computer is not null)
             queue.Queue(() => orchestrator.PlayAsync(gameState, gameState.Computer!));
 
-        return Ok(result);
+        return Ok(new { result, state });
     }
 
     /// <summary>

JoshHeaps.Net/Hubs/ChessHub.cs

@@ -1,5 +1,4 @@
-using JoshHeaps.Net.Models;
+using Microsoft.AspNetCore.SignalR;
-using Microsoft.AspNetCore.SignalR;
 
 namespace JoshHeaps.Net.Hubs;
 
@@ -11,11 +10,6 @@ public class ChessHub : Hub
         await Groups.AddToGroupAsync(Context.ConnectionId, gameId);
     }
 
-    public async Task MoveMade(string gameId, MoveDto moveDto, MoveResultDto moveResult)
-    {
-        await Clients.OthersInGroup(gameId).SendAsync("ReceiveMoveUpdate", gameId, moveDto, moveResult);
-    }
-
     public async Task LeaveWebsocketGroup(string gameId)
     {
         Console.WriteLine($"❌ Leaving group {gameId}");

JoshHeaps.Net/Models/GameStateDto.cs

@@ -0,0 +1,61 @@
+using System.Linq;
+
+namespace JoshHeaps.Net.Models;
+
+/// <summary>
+/// A single piece as sent to the client. Captured pieces keep their original
+/// type and color; their position is meaningless and omitted.
+/// </summary>
+public record ChessPieceDto(string Id, PieceType Type, PieceColor Color, int Row, int Col, bool HasMoved);
+
+/// <summary>
+/// The full board state pushed to clients. The same shape is returned by the
+/// state endpoint, the move endpoint, and every SignalR move broadcast, so the
+/// client always renders from one authoritative payload instead of re-fetching.
+/// </summary>
+public record GameStateDto(
+    Guid GameId,
+    string CurrentPlayer,
+    bool IsCheck,
+    bool IsCheckmate,
+    bool IsStalemate,
+    bool IsThreefoldRepetition,
+    string? EnPassantTarget,
+    bool WhiteCanCastleKingside,
+    bool WhiteCanCastleQueenside,
+    bool BlackCanCastleKingside,
+    bool BlackCanCastleQueenside,
+    IReadOnlyList<ChessPieceDto> Pieces,
+    IReadOnlyList<ChessPieceDto> CapturedPieces,
+    IReadOnlyList<string> MoveHistory,
+    // Moves in standard algebraic notation, for the move-list panel.
+    IReadOnlyList<string> SanHistory,
+    // Monotonic ply counter the client uses to drop stale or echoed updates.
+    int Version);
+
+public static class GameStateMapper
+{
+    public static GameStateDto ToDto(this GameState gameState) => new(
+        gameState.GameId,
+        gameState.CurrentPlayer.ToString(),
+        gameState.IsCheck,
+        gameState.IsCheckmate,
+        gameState.IsStalemate,
+        gameState.IsThreefoldRepetition,
+        gameState.EnPassantTarget?.ToString(),
+        gameState.WhiteCanCastleKingside,
+        gameState.WhiteCanCastleQueenside,
+        gameState.BlackCanCastleKingside,
+        gameState.BlackCanCastleQueenside,
+        gameState.Pieces
+            .Where(p => p.Position.Row >= 0)
+            .Select(p => new ChessPieceDto(p.Id, p.Type, p.Color, p.Position.Row, p.Position.Col, p.HasMoved))
+            .ToList(),
+        gameState.Pieces
+            .Where(p => p.Position.Row < 0)
+            .Select(p => new ChessPieceDto(p.Id, p.Type, p.Color, p.Position.Row, p.Position.Col, p.HasMoved))
+            .ToList(),
+        gameState.MoveHistory,
+        gameState.SanHistory,
+        gameState.MoveHistory.Count);
+}

JoshHeaps.Net/Pages/Chess.cshtml

@@ -6,7 +6,14 @@
 }
 
 <div id="chessContainer">
-    <div id="boardContainer">
+    <section id="boardArea">
+        <div class="playerBar" id="topPlayerBar">
+            <span class="playerDot black"></span>
+            <span class="playerName">Opponent</span>
+            <div class="capturedTray" id="captured-top"></div>
+            <span class="advantage" id="advantage-top"></span>
+        </div>
+
         <div id="chessBoard">
             <!-- Placeholder squares -->
             @for (int i = 0; i < 64; i++)
@@ -14,18 +21,41 @@
                 <div id="square-@i" class="chessSquare @( (i + i / 8) % 2 == 0 ? "light" : "dark" )"></div>
             }
         </div>
-    </div>
 
-    <div id="textContainer" class="sideContent">
+        <div class="playerBar" id="bottomPlayerBar">
+            <span class="playerDot white"></span>
+            <span class="playerName">You</span>
+            <div class="capturedTray" id="captured-bottom"></div>
+            <span class="advantage" id="advantage-bottom"></span>
+        </div>
+    </section>
+
+    <aside id="gamePanel">
+        <header class="panelHeader">
+            <span class="panelLogo">&#9822;</span>
             <h1>Chess</h1>
-        <p>Click a button to start a game :)</p>
+            <button id="menuClose" class="iconBtn" aria-label="Close menu" onclick="closeMenu()">&times;</button>
+        </header>
+
+        <div id="moveList">
+            <p class="movePlaceholder">Moves will appear here once a game begins.</p>
         </div>
 
-    <div id="buttonContainer" class="sideContent">
+        <div id="statusLine">Start a game to play.</div>
-        <button id="startGameBtn" onclick="startNewGame()">Start New Game</button>
+
-        <button id="startCPUGame" onclick="startCPUGame()">Vs CPU</button>
+        <div id="panelButtons">
-        <button id="copyPgnBtn" onclick="copyPgn()" style="display: none">Copy PGN</button>
+            <button id="startGameBtn" class="btn btn-primary" onclick="startNewGame()">New Game</button>
-        <a id="watchLink" href="/watch">Watch other games →</a>
+            <button id="startCPUGame" class="btn btn-secondary" onclick="startCPUGame()">Play vs CPU</button>
+            <button id="copyPgnBtn" class="btn btn-ghost" onclick="copyPgn()" style="display: none">Copy PGN</button>
+            <a id="watchLink" href="/watch">Watch other games &rarr;</a>
+        </div>
+    </aside>
+
+    <div id="menuBackdrop" onclick="closeMenu()"></div>
+
+    <div id="mobileBar">
+        <span id="mobileStatus">Start a game to play.</span>
+        <button id="menuToggle" class="btn btn-primary" onclick="toggleMenu()">Menu</button>
     </div>
 </div>
 
@@ -61,17 +91,20 @@
 
 @section Scripts {
     <script src="~/js/signalr/signalr.min.js"></script>
-    <script src="~/js/ChessScripts/GameState.js"></script>
+    <script src="~/js/ChessScripts/GameState.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessUtils.js"></script>
+    <script src="~/js/ChessScripts/ChessUtils.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessAPI.js"></script>
+    <script src="~/js/ChessScripts/ChessAPI.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessSignalR.js"></script>
+    <script src="~/js/ChessScripts/ChessSignalR.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessInteractions.js"></script>
+    <script src="~/js/ChessScripts/ChessInteractions.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessBoard.js"></script>
+    <script src="~/js/ChessScripts/ChessBoard.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/ChessModals.js"></script>
+    <script src="~/js/ChessScripts/ChessModals.js?v=@ViewData["cssVersion"]"></script>
-    <script src="~/js/ChessScripts/chessMain.js"></script>
+    <script src="~/js/ChessScripts/chessMain.js?v=@ViewData["cssVersion"]"></script>
 }
 
 @section Styles {
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="~/css/chess/game.css?v=@ViewData["cssVersion"]" />
     <link rel="stylesheet" href="~/css/chess/site.css?v=@ViewData["cssVersion"]" />
 }

JoshHeaps.Net/Pages/_Layout.cshtml

@@ -1,6 +1,6 @@
 @{
     Layout = null;
-    ViewData["cssVersion"] = "1.0.5"; // <--- change this once to bust cache
+    ViewData["cssVersion"] = "1.0.7"; // <--- change this once to bust cache
 }
 
 <!DOCTYPE html>

JoshHeaps.Net/Services/Implementations/ComputerMoveOrchestrator.cs

@@ -26,7 +26,7 @@ public sealed class ComputerMoveOrchestrator(
         var result = chessService.MakeMove(state, move);
 
         await chessHub.Clients.Group(state.GameId.ToString())
-            .SendAsync("ReceiveMoveUpdate", state.GameId.ToString(), move, result);
+            .SendAsync("ReceiveMoveUpdate", state.GameId.ToString(), move, result, state.ToDto());
 
         return (move, result);
     }

JoshHeaps.Net/wwwroot/css/chess/game.css

@@ -1,12 +1,4 @@
-#boardContainer {
+#chessBoard {
-    position: relative;
-    width: fit-content;
-    margin: 2vw auto;
-}
-
-#chessBoard {
-    width: 60vw;
-    height: 60vw;
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     grid-template-rows: repeat(8, 1fr);

JoshHeaps.Net/wwwroot/css/chess/site.css

@@ -1,159 +1,429 @@
-html, body {
+:root {
-    background-color: #2b2c30;
+    --bg: #2b2c30;
-    color: #d6d6d6;
+    --panel: #21232a;
-    cursor: default;
+    --panel-row: rgba(255, 255, 255, 0.035);
+    --bar: #1e2026;
+    --accent: #8cd5ed;
+    --accent-ink: #10222a;
+    --text: #d6d6d6;
+    --muted: #8b8f99;
+    --line: #34373f;
+    --bar-h: clamp(34px, 5.5vh, 50px);
+    --radius: 12px;
+    --font: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
+}
+
+html, body {
     height: 100%;
     margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font);
+    cursor: default;
+    /* The chess page is a fixed, single-screen app: never scroll. */
+    overflow: hidden;
 }
 
-#startGameBtn {
+main {
-    background-color: #8cd5ed;
+    height: 100%;
-    color: #262626;
-    border-radius: 30px;
-    border: 0px;
-    cursor: pointer;
-    order: 1;
-    padding: 2vh;
-    margin: 2vh;
 }
 
-#startCPUGame {
+/* ---- Layout ------------------------------------------------------------ */
-    background-color: #8cd5ed;
+
-    color: #262626;
+/* Portrait / narrow: board on top, panel stacked below. */
-    border-radius: 30px;
+#chessContainer {
-    border: 0px;
+    height: 100vh;
-    cursor: pointer;
+    height: 100dvh;
-    order: 1;
+    box-sizing: border-box;
-    padding: 2vh;
+    display: flex;
-    margin: 2vh;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(8px, 1.6vh, 16px);
+    padding: clamp(10px, 2vh, 20px);
+    overflow: hidden;
 }
 
-#copyPgnBtn {
+#boardArea {
-    background-color: #8cd5ed;
+    display: flex;
-    color: #262626;
+    flex-direction: column;
-    border-radius: 30px;
+    gap: 6px;
-    border: 0px;
+    flex: 0 0 auto;
+    width: min(94vw, 56vh);
+}
+
+#chessBoard {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
+}
+
+#gamePanel {
+    width: min(94vw, 56vh);
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--panel);
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+}
+
+/* Landscape / wide: board left, game panel right (chess.com style). */
+@media (min-aspect-ratio: 1/1) {
+    #chessContainer {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: clamp(16px, 3vw, 48px);
+        padding: clamp(12px, 3vh, 28px);
+    }
+
+    #boardArea {
+        width: auto;
+        height: 100%;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+
+    #chessBoard {
+        width: min(72vh, 54vw);
+        height: min(72vh, 54vw);
+    }
+
+    .playerBar {
+        width: min(72vh, 54vw);
+    }
+
+    #gamePanel {
+        width: clamp(300px, 26vw, 380px);
+        height: min(86vh, 100%);
+        align-self: center;
+    }
+}
+
+/* ---- Player bars ------------------------------------------------------- */
+
+.playerBar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    height: var(--bar-h);
+    padding: 0 12px;
+    background: var(--bar);
+    border-radius: 8px;
+}
+
+.playerDot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+}
+
+.playerDot.white {
+    background: #ededed;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
+}
+
+.playerDot.black {
+    background: #2c2c2c;
+    box-shadow: 0 0 0 1px #565656 inset;
+}
+
+.playerName {
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.capturedTray {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.capturedPiece {
+    height: clamp(15px, calc(var(--bar-h) * 0.58), 26px);
+    width: auto;
+    margin-right: -5px;
+}
+
+.advantage {
+    margin-left: auto;
+    font-weight: 700;
+    color: var(--accent);
+    white-space: nowrap;
+}
+
+/* ---- Game panel -------------------------------------------------------- */
+
+.panelHeader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--line);
+    flex: 0 0 auto;
+}
+
+.panelLogo {
+    font-size: 1.5rem;
+    color: var(--accent);
+    line-height: 1;
+}
+
+.panelHeader h1 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+}
+
+#moveList {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px 0;
+}
+
+.movePlaceholder {
+    margin: 0;
+    padding: 18px 16px;
+    color: var(--muted);
+    font-size: 0.95rem;
+}
+
+.moveRow {
+    display: grid;
+    grid-template-columns: 2.4em 1fr 1fr;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 14px;
+    font-size: 0.98rem;
+}
+
+.moveRow:nth-child(odd) {
+    background: var(--panel-row);
+}
+
+.moveNum {
+    color: var(--muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.moveSan {
+    padding: 2px 7px;
+    border-radius: 5px;
+}
+
+.moveSan.latest {
+    background: var(--accent);
+    color: var(--accent-ink);
+    font-weight: 600;
+}
+
+#statusLine {
+    flex: 0 0 auto;
+    padding: 12px 16px;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-weight: 500;
+}
+
+#statusLine.alert {
+    color: var(--accent);
+    font-weight: 700;
+}
+
+#panelButtons {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px 16px 16px;
+    border-top: 1px solid var(--line);
+}
+
+.btn {
+    font-family: inherit;
+    font-weight: 600;
+    font-size: clamp(0.92rem, 1vw, 1.05rem);
+    border: 0;
+    border-radius: 8px;
+    padding: clamp(10px, 1.4vh, 14px) 16px;
     cursor: pointer;
-    order: 1;
+    transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
-    padding: 2vh;
+}
-    margin: 2vh;
+
+.btn:active {
+    transform: translateY(1px);
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: var(--accent-ink);
+}
+
+.btn-primary:hover {
+    filter: brightness(1.08);
+}
+
+.btn-secondary {
+    background: #363a44;
+    color: var(--text);
+}
+
+.btn-secondary:hover {
+    background: #424752;
+}
+
+.btn-ghost {
+    background: transparent;
+    color: var(--accent);
+    border: 1px solid var(--line);
+}
+
+.btn-ghost:hover {
+    background: #2a2e37;
 }
 
 #watchLink {
-    color: #8cd5ed;
+    color: var(--muted);
     text-decoration: none;
-    margin: 2vh;
+    text-align: center;
-    order: 2;
+    font-size: 0.9rem;
+    margin-top: 2px;
 }
 
 #watchLink:hover {
-    text-decoration: underline;
+    color: var(--accent);
 }
 
+/* ---- Mobile chrome (hidden on desktop) --------------------------------- */
+
+.iconBtn {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    font-size: 1.7rem;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+}
+
+.iconBtn:hover {
+    color: var(--accent);
+}
+
+#menuClose {
+    margin-left: auto;
+}
+
+/* Default (tablet/desktop): no mobile bar, menu button, or sheet chrome. */
+#mobileBar,
+#menuBackdrop,
+#menuClose {
+    display: none;
+}
+
+/* ---- Phone layout ------------------------------------------------------ */
+/* The full panel doesn't fit alongside a usable board on a phone, so we show
+   the board + a slim status/menu bar, and tuck the move list and secondary
+   actions into a slide-up sheet. The page itself still never scrolls. */
+@media (max-width: 640px) {
     #chessContainer {
-    display: flex;
         flex-direction: column;
-    align-items: center;
+        justify-content: flex-start;
-    justify-content: space-evenly;
+        gap: 8px;
-    height: 100vh;
+        padding: 8px;
-    box-sizing: border-box;
-    padding: 5vw;
     }
 
-#chessBoard {
+    #boardArea {
-    aspect-ratio: 1 / 1;
+        width: min(94vw, 60vh);
-    width: 90vw; /* use the smaller of width or height */
+        flex: 0 0 auto;
+    }
+
+    .playerBar {
+        width: 100%;
+    }
+
+    /* Right rail becomes a hidden bottom sheet, revealed by the Menu button. */
+    #gamePanel {
+        display: none;
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: auto;
+        width: 100%;
         height: auto;
-    max-height: 90vw;
+        max-height: 85dvh;
+        border-radius: 16px 16px 0 0;
+        z-index: 60;
+        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
     }
 
-#boardContainer {
+    body.menu-open #gamePanel {
-    align-content: center;
-    flex-grow: 1;
-}
-
-.sideContent {
         display: flex;
-    flex-direction: column;
-    align-content: center;
-    justify-content: center;
-    text-align: center;
     }
 
-#textContainer {
+    /* The slim bar already shows status, so hide the sheet's inline copy. */
-    flex-direction: column;
+    #gamePanel #statusLine {
-    order: -1;
+        display: none;
-    flex-shrink: 1;
-    font-size: large;
-    margin: 5vw;
     }
 
-#buttonContainer {
+    #menuClose {
-    flex-grow: 3;
+        display: block;
     }
 
-/* Put UI to left/right when screen is short */
+    #menuBackdrop {
-@media (min-aspect-ratio: 1/1) {
+        position: fixed;
-    #chessContainer {
+        inset: 0;
-        display: grid;
+        background: rgba(0, 0, 0, 0.55);
-        grid-template-columns: auto, auto;
+        z-index: 55;
-        grid-template-rows: auto, auto;
-        align-items: center;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        padding: 0;
     }
 
-    .sideContent {
+    body.menu-open #menuBackdrop {
+        display: block;
+    }
+
+    #mobileBar {
         display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 0;
         align-items: center;
-        text-align: center;
+        gap: 10px;
-        padding: min(5vw, 5vh);
+        width: min(94vw, 60vh);
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        background: var(--panel);
+        border-radius: 10px;
+        padding: 8px 10px;
     }
 
-    #boardContainer {
+    #mobileStatus {
-        grid-row: 1 / span 2;
+        flex: 1;
-        grid-column: 1;
+        min-width: 0;
+        color: var(--muted);
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    #textContainer {
+    #mobileStatus.alert {
-        grid-row: 1;
+        color: var(--accent);
-        grid-column: 2;
-        text-align: center;
-        font-size: x-large;
     }
 
-    #buttonContainer {
+    #mobileBar #menuToggle {
-        grid-row: 2;
+        flex: 0 0 auto;
-        grid-column: 2;
+        padding: 10px 20px;
-        text-align: left;
-        align-self: start;
-    }
-
-    #startGameBtn {
-        padding: 1vw;
-        font-size: large;
-    }
-
-    #startCPUGame {
-        padding: 1vw;
-        margin: 1vw;
-        font-size: large;
-    }
-
-    #chessBoard {
-        aspect-ratio: 1 / 1;
-        flex-shrink: 1;
-        width: min(90vh, 90vw);
-        max-height: 90vh;
-    }
-
-    #difficultyButtonContainer {
-        grid-template-columns: repeat(10, 1fr);
     }
 }

JoshHeaps.Net/wwwroot/js/ChessScripts/ChessAPI.js

@@ -46,13 +46,15 @@ const ChessAPI = {
             throw new Error(message || "Invalid move or not your turn.");
         }
 
-        const result = await response.json();
+        // The move endpoint returns both the move result and the full resulting
+        // board state, so the caller can render without a follow-up fetch.
+        const data = await response.json();
 
-        if (!result.success) {
+        if (!data.result.success) {
-            throw new Error(result.message || "Invalid move or not your turn.");
+            throw new Error(data.result.message || "Invalid move or not your turn.");
         }
 
-        return result;
+        return data;
     },
 
     async handleMove(targetRow, targetCol) {
@@ -85,16 +87,14 @@ const ChessAPI = {
         GameState.setPreviousMove([GameState.selectedPiece.row, GameState.selectedPiece.col], [targetRow, targetCol]);
 
         try {
-            const moveResult = await this.makeMove(moveDto);
+            const { result, state } = await this.makeMove(moveDto);
 
-            const updatedGame = await this.getGameState(GameState.currentGameId);
+            ChessBoard.renderState(state);
-            ChessBoard.renderPieces(updatedGame.pieces);
 
             GameState.clearSelection();
             ChessInteractions.clearHighlights();
 
-            await ChessSignalR.notifyMoveMade(moveDto, moveResult);
+            this.alertGameStatusChange(result);
-            this.alertGameStatusChange(moveResult);
 
         } catch (error) {
             alert("❌ " + error.message);

JoshHeaps.Net/wwwroot/js/ChessScripts/ChessBoard.js

@@ -1,4 +1,91 @@
+// Material value per piece type, indexed by PieceType (0=Pawn .. 5=King).
+const PIECE_VALUES = [1, 5, 3, 3, 9, 0];
+
 const ChessBoard = {
+    // Render from a full game-state payload (the shape returned by the move/state
+    // endpoints and pushed over SignalR). Ignores state older than what's already
+    // shown, so a slow initial fetch can't clobber a move that arrived first.
+    renderState(state) {
+        if (!state || !GameState.shouldApply(state.version)) return;
+        this.renderPieces(state.pieces);
+        this.renderCapturedTrays(state.pieces, state.capturedPieces);
+        this.renderMoveList(state.sanHistory);
+        this.renderStatus(state);
+        GameState.setVersion(state.version);
+    },
+
+    // Two-column numbered move list (white move, black move), latest highlighted.
+    renderMoveList(sanHistory) {
+        const list = document.getElementById("moveList");
+        if (!list) return;
+
+        const san = sanHistory ?? [];
+
+        if (san.length === 0) {
+            list.innerHTML = '<p class="movePlaceholder">Moves will appear here once a game begins.</p>';
+            return;
+        }
+
+        list.innerHTML = "";
+
+        for (let i = 0; i < san.length; i += 2) {
+            const row = document.createElement("div");
+            row.className = "moveRow";
+
+            const num = document.createElement("span");
+            num.className = "moveNum";
+            num.textContent = `${i / 2 + 1}.`;
+            row.appendChild(num);
+
+            row.appendChild(this.moveCell(san[i], i === san.length - 1));
+
+            if (i + 1 < san.length)
+                row.appendChild(this.moveCell(san[i + 1], i + 1 === san.length - 1));
+
+            list.appendChild(row);
+        }
+
+        list.scrollTop = list.scrollHeight;
+    },
+
+    moveCell(san, isLatest) {
+        const cell = document.createElement("span");
+        cell.className = isLatest ? "moveSan latest" : "moveSan";
+        cell.textContent = san;
+        return cell;
+    },
+
+    renderStatus(state) {
+        let text;
+        let alert = false;
+
+        if (state.isCheckmate) {
+            const winner = state.currentPlayer === "White" ? "Black" : "White";
+            text = `Checkmate — ${winner} wins`;
+            alert = true;
+        } else if (state.isStalemate) {
+            text = "Draw — stalemate";
+            alert = true;
+        } else if (state.isThreefoldRepetition) {
+            text = "Draw — threefold repetition";
+            alert = true;
+        } else {
+            text = `${state.currentPlayer} to move`;
+            if (state.isCheck) {
+                text += " — check";
+                alert = true;
+            }
+        }
+
+        // Mirror to both the desktop panel status and the mobile bar status.
+        ["statusLine", "mobileStatus"].forEach(id => {
+            const el = document.getElementById(id);
+            if (!el) return;
+            el.textContent = text;
+            el.classList.toggle("alert", alert);
+        });
+    },
+
     renderPieces(pieces) {
         this.clearAllSquares();
         this.renderCoordinateLabels();
@@ -7,6 +94,48 @@ const ChessBoard = {
         this.highlightPreviousMove();
     },
 
+    // Show each side's captured pieces and the leading side's material advantage,
+    // arranged so the current player's tray sits below the board.
+    renderCapturedTrays(activePieces, capturedPieces) {
+        const captured = capturedPieces ?? [];
+
+        // A captured piece's color is the side that lost it, so White's haul is the
+        // captured Black pieces, and vice versa.
+        const whiteCaptured = captured.filter(p => p.color === 1);
+        const blackCaptured = captured.filter(p => p.color === 0);
+
+        // Net material from pieces still on the board, so promotions count correctly.
+        const advantage = (activePieces ?? []).reduce(
+            (sum, p) => sum + (p.color === 0 ? PIECE_VALUES[p.type] : -PIECE_VALUES[p.type]), 0);
+
+        const white = { captured: whiteCaptured, advantage: Math.max(advantage, 0) };
+        const black = { captured: blackCaptured, advantage: Math.max(-advantage, 0) };
+
+        const isWhite = GameState.currentPlayerIsWhite !== false;
+        this.fillCapturedTray("bottom", isWhite ? white : black);
+        this.fillCapturedTray("top", isWhite ? black : white);
+    },
+
+    fillCapturedTray(position, side) {
+        const tray = document.getElementById(`captured-${position}`);
+        const badge = document.getElementById(`advantage-${position}`);
+        if (!tray || !badge) return;
+
+        tray.innerHTML = "";
+        [...side.captured]
+            .sort((a, b) => PIECE_VALUES[a.type] - PIECE_VALUES[b.type])
+            .forEach(piece => {
+                const img = document.createElement("img");
+                img.src = ChessUtils.getPieceImageUrl(piece);
+                img.alt = piece.type;
+                img.className = "capturedPiece";
+                img.draggable = false;
+                tray.appendChild(img);
+            });
+
+        badge.textContent = side.advantage > 0 ? `+${side.advantage}` : "";
+    },
+
     clearAllSquares() {
         for (let i = 0; i < 64; i++) {
             const square = document.getElementById(`square-${i}`);

JoshHeaps.Net/wwwroot/js/ChessScripts/ChessSignalR.js

@@ -11,8 +11,8 @@ const ChessSignalR = {
             console.error("❌ SignalR connection closed:", err?.message);
         });
 
-        this.connection.on("ReceiveMoveUpdate", async (gameId, moveDto, moveResultDto) => {
+        this.connection.on("ReceiveMoveUpdate", async (gameId, moveDto, moveResultDto, state) => {
-            await this.handleMoveUpdate(gameId, moveDto, moveResultDto);
+            await this.handleMoveUpdate(gameId, moveDto, moveResultDto, state);
         });
 
         this.connection.on("ReceiveGameOver", async (gameId, winner, reason) => {
@@ -28,12 +28,14 @@ const ChessSignalR = {
         }
     },
 
-    async handleMoveUpdate(gameId, moveDto, moveResultDto) {
+    async handleMoveUpdate(gameId, moveDto, moveResultDto, state) {
         if (gameId !== GameState.currentGameId) return;
 
-        const gameState = await ChessAPI.getGameState(gameId);
+        // Drop the echo of our own move and any out-of-order delivery.
+        if (!GameState.shouldApply(state?.version)) return;
+
         GameState.setPreviousMove([moveDto.sourceRow, moveDto.sourceCol], [moveDto.targetRow, moveDto.targetCol]);
-        ChessBoard.renderPieces(gameState.pieces);
+        ChessBoard.renderState(state);
 
         ChessAPI.alertGameStatusChange(moveResultDto);
     },
@@ -50,12 +52,6 @@ const ChessSignalR = {
         await this.leaveGame();
     },
 
-    async notifyMoveMade(moveDto, moveResult) {
-        if (this.connection) {
-            await this.connection.invoke("MoveMade", GameState.currentGameId, moveDto, moveResult);
-        }
-    },
-
     async leaveGame() {
         if (this.connection) {
             await this.connection.invoke("LeaveWebsocketGroup", GameState.currentGameId);

JoshHeaps.Net/wwwroot/js/ChessScripts/GameState.js

@@ -6,6 +6,10 @@ const GameState = {
     legalMoves: [],
     previousMoveStart: null,
     previousMoveEnd: null,
+    // Highest ply (move count) already rendered. Lets us ignore stale or
+    // already-applied updates that arrive out of order, including the echo
+    // of our own move.
+    lastVersion: -1,
 
     reset() {
         this.currentGameId = null;
@@ -15,12 +19,22 @@ const GameState = {
         this.legalMoves = [];
         this.previousMoveStart = null;
         this.previousMoveEnd = null;
+        this.lastVersion = -1;
+    },
+
+    shouldApply(version) {
+        return typeof version !== "number" || version > this.lastVersion;
+    },
+
+    setVersion(version) {
+        if (typeof version === "number") this.lastVersion = version;
     },
 
     setGameInfo(gameId, playerId, isWhite) {
         this.currentGameId = gameId;
         this.currentPlayerId = playerId;
         this.currentPlayerIsWhite = isWhite;
+        this.lastVersion = -1;
     },
 
     setSelectedPiece(piece) {

JoshHeaps.Net/wwwroot/js/ChessScripts/Spectate.js

@@ -11,8 +11,8 @@ const Spectate = {
             .configureLogging(signalR.LogLevel.Warning)
             .build();
 
-        this.connection.on("ReceiveMoveUpdate", (gameId, moveDto) =>
+        this.connection.on("ReceiveMoveUpdate", (gameId, moveDto, _moveResult, state) =>
-            this.handleMoveUpdate(gameId, moveDto));
+            this.handleMoveUpdate(gameId, moveDto, state));
 
         this.connection.on("ReceiveGameOver", (gameId) => this.removeGame(gameId));
 
@@ -117,7 +117,10 @@ const Spectate = {
 
         if (!response.ok) return;
 
-        const state = await response.json();
+        this.renderFromState(gameId, await response.json());
+    },
+
+    renderFromState(gameId, state) {
         const result = this.resultTextFromState(state);
         const stored = this.games.get(gameId);
 
@@ -128,10 +131,13 @@ const Spectate = {
         this.setResult(gameId, result);
     },
 
-    async handleMoveUpdate(gameId, moveDto) {
+    async handleMoveUpdate(gameId, moveDto, state) {
         if (!this.games.has(gameId)) return;
 
-        await this.renderGame(gameId);
+        // Render from the pushed state; fall back to a fetch only if it's missing.
+        if (state) this.renderFromState(gameId, state);
+        else await this.renderGame(gameId);
+
         this.highlightMove(gameId, moveDto);
     },
 

JoshHeaps.Net/wwwroot/js/ChessScripts/chessMain.js

@@ -30,6 +30,18 @@ function resetCopyPgn() {
 window.copyPgn = copyPgn;
 window.showCopyPgn = showCopyPgn;
 
+// Mobile slide-up menu (move list + secondary actions).
+function toggleMenu() {
+    document.body.classList.toggle("menu-open");
+}
+
+function closeMenu() {
+    document.body.classList.remove("menu-open");
+}
+
+window.toggleMenu = toggleMenu;
+window.closeMenu = closeMenu;
+
 async function forfeitCurrentGame() {
     const gameId = ChessUtils.getCookie("chessGameId");
     const playerId = ChessUtils.getCookie("chessPlayerId");
@@ -44,6 +56,7 @@ async function forfeitCurrentGame() {
 }
 
 async function startNewGame() {
+    closeMenu();
     await ChessSignalR.stopConnection();
     await forfeitCurrentGame();
     resetCopyPgn();
@@ -63,7 +76,7 @@ async function startNewGame() {
         await ChessSignalR.setupConnection();
 
         const gameState = await ChessAPI.getGameState(gameData.gameId);
-        ChessBoard.renderPieces(gameState.pieces);
+        ChessBoard.renderState(gameState);
 
     } catch (error) {
         console.error("Failed to start new game:", error);
@@ -71,6 +84,7 @@ async function startNewGame() {
 }
 
 async function startCPUGame() {
+    closeMenu();
     await ChessSignalR.stopConnection();
     await forfeitCurrentGame();
     resetCopyPgn();
@@ -91,7 +105,7 @@ async function startCPUGame() {
         await ChessSignalR.setupConnection();
 
         const gameState = await ChessAPI.getGameState(gameData.gameId);
-        ChessBoard.renderPieces(gameState.pieces);
+        ChessBoard.renderState(gameState);
 
     } catch (error) {
         console.error("Failed to start CPU game:", error);
@@ -111,7 +125,7 @@ async function resumeSavedGame() {
             GameState.setGameInfo(savedGameId, savedPlayerId, savedPlayerIsWhite === "true");
 
             await ChessSignalR.setupConnection();
-            ChessBoard.renderPieces(gameState.pieces);
+            ChessBoard.renderState(gameState);
 
         } catch (err) {
             console.warn("Saved game not found or expired.", err);