Files
Ferrous-Solitaire/solitaire_server/web/game.html
T
funman300 8d31a37a39
Build and Deploy / build-and-push (push) Successful in 4m10s
feat(web): add classic/dark card theme picker
- Reorganise card PNGs into assets/cards/faces/{classic,dark}/ and
  assets/cards/backs/{classic,dark}/
- Rasterise dark SVG theme alongside existing classic set
- Add "Dark / Classic" toggle button in the game HUD; persists to
  localStorage as fs_theme (defaults to classic)
- Preload both themes on page load so switching is instant

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-14 16:55:43 -07:00

65 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ferrous Solitaire — Play</title>
<link rel="stylesheet" href="/web/game.css">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u = "https://analytics.aleshym.co/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '1']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo -->
</head>
<body>
<header>
<div class="hud-left">
<a href="/" class="home-link" title="Home">&#8592;</a>
<span class="logo">Ferrous Solitaire</span>
<span id="hud-seed" class="muted"></span>
</div>
<div class="hud-center">
<span id="hud-score">Score: 0</span>
<span id="hud-moves">Moves: 0</span>
<span id="hud-timer">0:00</span>
<span id="hud-stock">Stock: 24</span>
</div>
<div class="hud-right">
<button id="btn-undo" title="Undo (Z)">↩ Undo</button>
<button id="btn-new" title="New game">↺ New</button>
<label class="toggle-label" title="Draw one or three cards">
<input type="checkbox" id="chk-draw3"> Draw 3
</label>
<button id="btn-theme" title="Switch card theme">Dark</button>
</div>
</header>
<main>
<section id="board">
<div id="card-area"></div>
</section>
</main>
<div id="win-overlay" class="hidden">
<div class="win-card">
<div class="win-title">You Won!</div>
<div id="win-score" class="win-score"></div>
<div id="win-moves" class="win-detail"></div>
<div id="win-time" class="win-detail"></div>
<button id="btn-win-new">Play Again ↺</button>
</div>
</div>
<script type="module" src="/web/game.js"></script>
</body>
</html>