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

ui: replace emoji playback icons with SVG, restyle pressure controls

Browse Source 
- All 5 playback buttons now use inline SVG triangles/bars — no more
  emoji rendering on iOS/Android
- Pause icon in togglePlay() also switches to SVG
- Radio mode toggle becomes a segmented pill control (own row, full width)
- Piece/Board checkboxes each get their own tap-friendly row (min 2.5rem tall)
This commit is contained in:
Michael Pilosov 2026-06-25 19:00:50 +00:00
parent b2432305b5
commit 1c04782db5
3 changed files with 78 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -263,9 +263,12 @@
} }
// --- Playback --- // --- Playback ---
const ICON_PLAY = '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg>';
const ICON_PAUSE = '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="2" width="4" height="12"/><rect x="9" y="2" width="4" height="12"/></svg>';
function togglePlay() { function togglePlay() {
playing = !playing; playing = !playing;
document.getElementById("btn-play").innerHTML = playing ? "&#9646;&#9646;" : "&#9654;"; document.getElementById("btn-play").innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
if (playing) { if (playing) {
playTimer = setInterval(() => { playTimer = setInterval(() => {
if (currentIndex >= gameData.frames.length - 1) { if (currentIndex >= gameData.frames.length - 1) {

36
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="/static/style.css?v=21"> <link rel="stylesheet" href="/static/style.css?v=22">
<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>
@ -26,17 +26,31 @@
<div class="playback"> <div class="playback">
<input type="range" id="slider" min="0" max="0" value="0"> <input type="range" id="slider" min="0" max="0" value="0">
<div class="playback-buttons"> <div class="playback-buttons">
<button id="btn-start" title="Start">&#9198;</button> <button id="btn-start" title="Start"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="14,2 6,8 14,14"/></svg></button>
<button id="btn-prev" title="Back">&#9664;</button> <button id="btn-prev" title="Back"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="13,2 3,8 13,14"/></svg></button>
<button id="btn-play" title="Play/Pause">&#9654;</button> <button id="btn-play" title="Play/Pause"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
<button id="btn-next" title="Forward">&#9654;</button> <button id="btn-next" title="Forward"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
<button id="btn-end" title="End">&#9197;</button> <button id="btn-end" title="End"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="2,2 10,8 2,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
</div> </div>
<div class="pressure-mode"> <div class="pressure-mode">
<label><input type="radio" name="pmode" value="equal" checked> Equal weight</label> <div class="pmode-toggle">
<label><input type="radio" name="pmode" value="weighted"> Piece value</label> <label class="pmode-opt">
<label><input type="checkbox" id="toggle-pieces" checked> Pieces</label> <input type="radio" name="pmode" value="equal" checked>
<label><input type="checkbox" id="toggle-board"> Board</label> <span>Equal</span>
</label>
<label class="pmode-opt">
<input type="radio" name="pmode" value="weighted">
<span>Piece value</span>
</label>
</div>
<label class="toggle-row">
<input type="checkbox" id="toggle-pieces" checked>
<span>Pieces</span>
</label>
<label class="toggle-row">
<input type="checkbox" id="toggle-board">
<span>Board</span>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -110,6 +124,6 @@
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script> <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
<script src="/static/gif.js"></script> <script src="/static/gif.js"></script>
<script src="/static/app.js?v=21"></script> <script src="/static/app.js?v=22"></script>
</body> </body>
</html> </html>

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

@ -137,18 +137,61 @@ main {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.playback-buttons button:hover { background: var(--move-active); } .playback-buttons button:hover { background: var(--move-active); }
#btn-next { transform: scaleX(1); }
.pressure-mode { .pressure-mode {
display: flex; display: flex;
gap: 1rem; flex-direction: column;
justify-content: center; gap: 0.4rem;
font-size: 0.8rem; }
color: var(--fg2);
.pmode-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.pmode-opt {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0.55rem 0.4rem;
font-size: 0.85rem;
color: var(--fg2);
transition: background 0.12s, color 0.12s;
border-right: 1px solid var(--border);
}
.pmode-opt:last-child { border-right: none; }
.pmode-opt input { display: none; }
.pmode-opt:has(input:checked) {
background: var(--accent);
color: var(--bg);
}
.toggle-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
cursor: pointer;
font-size: 0.85rem;
color: var(--fg2);
min-height: 2.5rem;
border: 1px solid var(--border);
border-radius: 6px;
}
.toggle-row input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: var(--accent);
flex-shrink: 0;
} }
.pressure-mode label { cursor: pointer; }
/* --- Game selector --- */ /* --- Game selector --- */
.game-selector { .game-selector {