169 lines
No EOL
7.4 KiB
HTML
169 lines
No EOL
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Pokémon or Military?</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Starfield -->
|
|
<canvas id="starfield"></canvas>
|
|
|
|
<!-- ─── PIXEL ART SOLDIERS — fond décoratif ─── -->
|
|
<div id="soldiers-layer" aria-hidden="true">
|
|
<div class="px-soldier px-soldier-1"><div class="px-sprite"></div><div class="px-bullet"></div></div>
|
|
<div class="px-soldier px-soldier-2"><div class="px-sprite"></div><div class="px-bullet"></div></div>
|
|
<div class="px-soldier px-soldier-3"><div class="px-sprite"></div><div class="px-bullet"></div></div>
|
|
<div class="px-soldier px-soldier-4"><div class="px-sprite"></div><div class="px-bullet"></div></div>
|
|
<div class="px-soldier px-soldier-5"><div class="px-sprite"></div><div class="px-bullet"></div></div>
|
|
</div>
|
|
|
|
<div id="flash"></div>
|
|
<div class="progress" id="progress"></div>
|
|
|
|
<header id="header" style="display:none">
|
|
<button class="btn-back-menu" onclick="goMenu()">← Menu</button>
|
|
<div class="header-right">
|
|
<div class="lives" id="lives"></div>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<span class="stat-val" id="s-correct" style="color:var(--correct)">0</span>
|
|
<span class="stat-lbl">Correct</span>
|
|
</div>
|
|
<div class="stat-sep"></div>
|
|
<div class="stat">
|
|
<span class="stat-val" id="s-wrong" style="color:var(--wrong)">0</span>
|
|
<span class="stat-lbl">Wrong</span>
|
|
</div>
|
|
<div class="stat-sep"></div>
|
|
<div class="streak-widget" id="streak-widget">
|
|
<span class="streak-flame" id="streak-flame"></span>
|
|
<span class="streak-val" id="s-streak">0</span>
|
|
<span class="streak-lbl">Streak</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══ MENU ═══ -->
|
|
<div class="screen active" id="menu">
|
|
<div class="menu-header">
|
|
<h1>Pokémon or Military?</h1>
|
|
<div class="menu-tagline">
|
|
<span>96 names</span>
|
|
<span class="menu-tagline-dot"></span>
|
|
<span>Can you tell them apart?</span>
|
|
</div>
|
|
</div>
|
|
<div class="mode-cards">
|
|
<button class="mode-card infinite" onclick="startGame('infinite')">
|
|
<div class="mode-icon">∞</div>
|
|
<div class="mode-info">
|
|
<div class="mode-name">Infinite</div>
|
|
<div class="mode-desc">Go through all 96 cards with no penalty.<br>Perfect for learning.</div>
|
|
</div>
|
|
<div class="mode-badge badge-inf">Chill</div>
|
|
</button>
|
|
<button class="mode-card survival" onclick="startGame('survival')">
|
|
<div class="mode-icon">❤️</div>
|
|
<div class="mode-info">
|
|
<div class="mode-name">Survival</div>
|
|
<div class="mode-desc">3 lives. One wrong answer costs a life.<br>Lose them all — game over.</div>
|
|
</div>
|
|
<div class="mode-badge badge-surv">Hard</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ GAME ═══ -->
|
|
<div class="screen" id="game">
|
|
<div class="scene">
|
|
<div class="card-behind-2"></div>
|
|
<div class="card-behind"></div>
|
|
<div class="card" id="card">
|
|
<div class="card-camo" id="camo"></div>
|
|
<div class="card-poke-tint" id="poke-tint"></div>
|
|
<div class="stamp stamp-mil" id="stamp-mil">Military Op</div>
|
|
<div class="stamp stamp-poke" id="stamp-poke">Pokémon TCG</div>
|
|
<div class="swipe-hint-left" id="hint-left"><span class="swipe-arrow">← Military</span></div>
|
|
<div class="swipe-hint-right" id="hint-right"><span class="swipe-arrow">Pokémon →</span></div>
|
|
<div class="card-watermark">?</div>
|
|
<div class="card-index" id="card-index">01 / 96</div>
|
|
<div class="card-name" id="card-name">—</div>
|
|
<div class="card-sub">What is this?</div>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn btn-mil" onclick="guess('Military')">
|
|
<div class="btn-mil-inner">
|
|
<div class="mil-top">🪖</div>
|
|
<div class="mil-band"></div>
|
|
<div class="mil-bot">Military</div>
|
|
</div>
|
|
</button>
|
|
<button class="btn btn-poke" onclick="guess('Pokemon')">
|
|
<div class="btn-poke-inner">
|
|
<div class="pb-half-top">Pokémon</div>
|
|
<div class="pb-band"></div>
|
|
<div class="pb-half-bot">TCG</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="hint" id="hint">96 cards remaining · ← → arrow keys</div>
|
|
</div>
|
|
|
|
<!-- ═══ RESULT ═══ -->
|
|
<div class="screen" id="result">
|
|
<div class="result-mode-badge" id="r-mode-badge"></div>
|
|
<div class="result-label">Final Score</div>
|
|
<div class="result-score" id="r-score">0</div>
|
|
<div class="result-sub" id="r-sub">—</div>
|
|
<div class="result-grid">
|
|
<div class="rg-tile"><span class="rg-val" id="r-correct" style="color:var(--correct)">0</span><span class="rg-lbl">Correct</span></div>
|
|
<div class="rg-tile"><span class="rg-val" id="r-wrong" style="color:var(--wrong)">0</span><span class="rg-lbl">Wrong</span></div>
|
|
<div class="rg-tile"><span class="rg-val" id="r-mil">0</span><span class="rg-lbl">Military Found</span></div>
|
|
<div class="rg-tile"><span class="rg-val" id="r-poke" style="color:#cc1a1a">0</span><span class="rg-lbl">Pokémon Found</span></div>
|
|
</div>
|
|
<div class="result-btns">
|
|
<button class="btn-replay" onclick="replayMode()">Play Again</button>
|
|
<button class="btn-menu" onclick="goMenu()">← Menu</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ GAME OVER OVERLAY ═══ -->
|
|
<div id="gameover-overlay">
|
|
<div class="go-icon">💀</div>
|
|
<div class="go-title">Game Over</div>
|
|
<div class="go-sub">All lives lost</div>
|
|
</div>
|
|
|
|
<!-- ═══ REVEAL POPUP ═══ -->
|
|
<div class="reveal" id="reveal">
|
|
<span class="reveal-tag" id="rev-tag"></span>
|
|
<span class="reveal-name" id="rev-name"></span>
|
|
<span class="reveal-desc" id="rev-desc"></span>
|
|
</div>
|
|
|
|
<!-- GitHub -->
|
|
<div id="theme-toggle">
|
|
<button class="tt-btn" data-theme="day">☀</button>
|
|
<button class="tt-btn" data-theme="sunset">🌅</button>
|
|
<button class="tt-btn" data-theme="night">🌙</button>
|
|
<button class="tt-btn active" data-theme="auto">Auto</button>
|
|
</div>
|
|
|
|
<a id="gh-link" href="https://github.com/mathieuviart/PokemonTCGSetOrMilitaryIntervention" target="_blank" rel="noopener"
|
|
style="position:fixed;bottom:20px;right:24px;display:flex;align-items:center;gap:7px;color:#aaa;text-decoration:none;font-family:'Geist Mono',monospace;font-size:0.58rem;letter-spacing:0.08em;opacity:0.5;transition:opacity 0.2s;z-index:50;"
|
|
onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.5'">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
|
|
</svg>
|
|
mathieuviart
|
|
</a>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |