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

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

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
</head>
<body>
@ -63,7 +63,10 @@
<button id="btn-upload" title="Upload PGN">PGN</button>
</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>
@ -78,8 +81,6 @@
<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>
</div>
<div class="status-bar" id="status-bar"></div>
</div>
</main>
@ -128,6 +129,6 @@
<script src="/chess.min.js"></script>
<script src="/gif.js"></script>
<script src="/engine.js"></script>
<script src="/app.js?v=24"></script>
<script src="/app.js?v=25"></script>
</body>
</html>

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

@ -235,12 +235,20 @@ main {
.game-selector button:hover,
.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 {
font-size: 0.8rem;
color: var(--fg2);
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
min-width: 0;
}
/* --- Move list --- */
@ -340,8 +348,8 @@ dialog select {
.status-bar {
font-size: 0.8rem;
color: var(--fg2);
padding: 0.4rem 0;
border-top: 1px solid var(--border);
white-space: nowrap;
text-align: right;
}
/* --- PGN Dialog --- */