|
80 | 80 | <div class="w-full h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden"> |
81 | 81 | <div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div> |
82 | 82 | </div> |
| 83 | + |
| 84 | + {# Per-game high score mini-strip (hidden on xs) #} |
| 85 | + <div class="hidden md:flex items-center gap-3 mt-1.5"> |
| 86 | + <span class="text-[7px] font-mono text-[var(--text-muted)] uppercase tracking-widest opacity-60">HS:</span> |
| 87 | + <span class="text-[7px] font-mono font-bold text-[var(--text-muted)]">👾 <span id="hs-si" class="text-accent">—</span></span> |
| 88 | + <span class="text-[7px] font-mono font-bold text-[var(--text-muted)]">⌨️ <span id="hs-cb" class="text-accent">—</span></span> |
| 89 | + <span class="text-[7px] font-mono font-bold text-[var(--text-muted)]">⚔️ <span id="hs-dd" class="text-accent">—</span></span> |
| 90 | + </div> |
83 | 91 | </div> |
84 | 92 |
|
85 | 93 | <div class="w-px h-6 md:h-8 bg-[var(--border-color)] ml-1"></div> |
86 | 94 |
|
87 | 95 | <button onclick="toggleTheme()" class="text-base md:text-lg p-1 md:p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-all" id="theme-icon"> |
88 | 96 | 🌙 |
89 | 97 | </button> |
| 98 | + |
| 99 | + {# Achievement badges — shown when earned, read from localStorage #} |
| 100 | + <div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1"> |
| 101 | + </div> |
90 | 102 | </div> |
91 | 103 | </div> |
| 104 | + |
| 105 | +<script> |
| 106 | +(function refreshGameStats() { |
| 107 | + // High scores |
| 108 | + var hs = { |
| 109 | + "hs-si": localStorage.getItem("hs_space-invaders"), |
| 110 | + "hs-cb": localStorage.getItem("hs_code-breaker"), |
| 111 | + "hs-dd": localStorage.getItem("hs_dev-duel"), |
| 112 | + }; |
| 113 | + Object.keys(hs).forEach(function (id) { |
| 114 | + var el = document.getElementById(id); |
| 115 | + if (el && hs[id]) el.textContent = hs[id]; |
| 116 | + }); |
| 117 | +
|
| 118 | + // Achievement badges |
| 119 | + var badgeContainer = document.getElementById("achievement-badges"); |
| 120 | + if (!badgeContainer) return; |
| 121 | + var earned = {}; |
| 122 | + try { earned = JSON.parse(localStorage.getItem("gameAchievements") || "{}"); } catch (_) {} |
| 123 | + var icons = { first_blood: "🩸", code_wizard: "🧙", duelist: "⚔️" }; |
| 124 | + var labels = { first_blood: "First Blood", code_wizard: "Code Wizard", duelist: "Duelist" }; |
| 125 | + Object.keys(icons).forEach(function (id) { |
| 126 | + if (earned[id]) { |
| 127 | + var badge = document.createElement("span"); |
| 128 | + badge.title = labels[id]; |
| 129 | + badge.className = "text-sm cursor-help"; |
| 130 | + badge.textContent = icons[id]; |
| 131 | + badgeContainer.appendChild(badge); |
| 132 | + } |
| 133 | + }); |
| 134 | +})(); |
| 135 | +</script> |
0 commit comments