mm/chess-pressure
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ui: default to a new game; clean placeholder game info; status beside info

Browse Source 
- Open on a fresh 'You vs Opponent' game instead of the Immortal Game.
- Hide chess.js Seven-Tag-Roster placeholders ("?", "????.??.??") so a new
  game reads just "You vs Opponent" rather than "You vs Opponent — ? — ????.??.??".
- Move the turn/move status onto the same row as the game info (top of the side
  panel) instead of below the move list.
This commit is contained in:
Michael Pilosov 2026-06-25 19:44:35 +00:00
parent ba1d993676
commit 1d9f9459df
3 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/chess_pressure/static/app.js
View File

@ -18,6 +18,7 @@
let legalMoves = []; // legal moves from selected square let legalMoves = []; // legal moves from selected square
const PLAY_SPEED = 800; // ms between auto-advance const PLAY_SPEED = 800; // ms between auto-advance
const NEW_GAME_PGN = '[White "You"]\n[Black "Opponent"]\n[Result "*"]\n\n*';
// --- Pressure colors --- // --- Pressure colors ---
function pressureColor(value, maxAbs) { function pressureColor(value, maxAbs) {
@ -241,10 +242,13 @@
return; return;
} }
const h = gameData.headers; const h = gameData.headers;
// chess.js fills the Seven Tag Roster with "?" / "????.??.??" placeholders;
// skip those so a fresh game just reads "You vs Opponent".
const real = (v) => v && v !== "?" && v !== "????.??.??";
const parts = []; const parts = [];
if (h.White) parts.push(`${h.White} vs ${h.Black || "?"}`); if (real(h.White) || real(h.Black)) parts.push(`${h.White || "?"} vs ${h.Black || "?"}`);
if (h.Event) parts.push(h.Event); if (real(h.Event)) parts.push(h.Event);
if (h.Date) parts.push(h.Date); if (real(h.Date)) parts.push(h.Date);
el.textContent = parts.join(" — "); el.textContent = parts.join(" — ");
} }
@ -489,11 +493,9 @@
const select = document.getElementById("game-select"); const select = document.getElementById("game-select");
populateGameSelect(); populateGameSelect();
// Load first game by default // Start on a fresh game so the player can begin immediately.
if (BUILTIN_GAMES.length) { loadPGN(NEW_GAME_PGN);
loadGame(BUILTIN_GAMES[0].id); select.value = "__new";
select.value = BUILTIN_GAMES[0].id;
}
// Show board after first render (prevents tan flash) // Show board after first render (prevents tan flash)
document.getElementById("board").classList.add("ready"); document.getElementById("board").classList.add("ready");
@ -502,7 +504,7 @@
select.addEventListener("change", (e) => { select.addEventListener("change", (e) => {
const v = e.target.value; const v = e.target.value;
if (v === "__new") { if (v === "__new") {
loadPGN('[White "You"]\n[Black "Opponent"]\n[Result "*"]\n\n*'); loadPGN(NEW_GAME_PGN);
} else if (v.startsWith("saved:")) { } else if (v.startsWith("saved:")) {
loadSaved(v.slice(6)); loadSaved(v.slice(6));
} else if (v) { } else if (v) {

11
src/chess_pressure/static/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Pressure</title> <title>Chess Pressure</title>
<link rel="stylesheet" href="/style.css?v=24"> <link rel="stylesheet" href="/style.css?v=25">
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css"> <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
</head> </head>
<body> <body>
@ -63,7 +63,10 @@
<button id="btn-upload" title="Upload PGN">PGN</button> <button id="btn-upload" title="Upload PGN">PGN</button>
</div> </div>
<div class="game-info" id="game-info"></div> <div class="game-meta">
<span class="game-info" id="game-info"></span>
<span class="status-bar" id="status-bar"></span>
</div>
<div class="move-list" id="move-list"></div> <div class="move-list" id="move-list"></div>
@ -78,8 +81,6 @@
<button id="btn-export" title="Export an animated GIF">Export GIF</button> <button id="btn-export" title="Export an animated GIF">Export GIF</button>
<button id="btn-delete-saved" class="danger" title="Delete this saved game" style="display:none">Delete</button> <button id="btn-delete-saved" class="danger" title="Delete this saved game" style="display:none">Delete</button>
</div> </div>
<div class="status-bar" id="status-bar"></div>
</div> </div>
</main> </main>
@ -128,6 +129,6 @@
<script src="/chess.min.js"></script> <script src="/chess.min.js"></script>
<script src="/gif.js"></script> <script src="/gif.js"></script>
<script src="/engine.js"></script> <script src="/engine.js"></script>
<script src="/app.js?v=24"></script> <script src="/app.js?v=25"></script>
</body> </body>
</html> </html>

18
src/chess_pressure/static/style.css
View File

@ -235,12 +235,20 @@ main {
.game-selector button:hover, .game-selector button:hover,
.fork-controls button:hover { background: var(--move-active); } .fork-controls button:hover { background: var(--move-active); }
/* --- Game info --- */ /* --- Game info + status (one row) --- */
.game-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
}
.game-info { .game-info {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--fg2); color: var(--fg2);
padding: 0.4rem 0; min-width: 0;
border-bottom: 1px solid var(--border);
} }
/* --- Move list --- */ /* --- Move list --- */
@ -340,8 +348,8 @@ dialog select {
.status-bar { .status-bar {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--fg2); color: var(--fg2);
padding: 0.4rem 0; white-space: nowrap;
border-top: 1px solid var(--border); text-align: right;
} }
/* --- PGN Dialog --- */ /* --- PGN Dialog --- */