sy_digger

sys_digger/index.html

@@ -137,6 +137,62 @@
         }
         #start-btn:hover { background: #00cc66; transform: scale(1.04); }
 
+        /* ── Attract / highscore screen ── */
+        #attract {
+            display: flex;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.92);
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            color: white;
+            text-align: center;
+            padding: 40px 20px;
+            z-index: 10;
+        }
+        #attract.hidden { display: none; }
+
+        #attract h2 {
+            font-size: 13px;
+            letter-spacing: 5px;
+            color: #ffcc00;
+            text-shadow: 0 0 12px #ffcc00;
+            margin-bottom: 6px;
+        }
+        #attract .attract-game-title {
+            font-size: 44px;
+            letter-spacing: 6px;
+            color: #00ff88;
+            text-shadow: 0 0 20px #00ff88;
+            margin-bottom: 32px;
+            animation: flicker 2s infinite alternate;
+        }
+        #attract-table {
+            width: 360px;
+            border-collapse: collapse;
+            font-size: 16px;
+            margin-bottom: 36px;
+        }
+        #attract-table th {
+            color: #555;
+            font-size: 11px;
+            letter-spacing: 1px;
+            padding: 4px 10px;
+            border-bottom: 1px solid #333;
+        }
+        #attract-table td { padding: 8px 10px; color: #ccc; border-bottom: 1px solid #1a1a2e; }
+        #attract-table tr.rank-1 td { color: #ffd700; font-size: 18px; }
+        #attract-table tr.rank-2 td { color: #c0c0c0; }
+        #attract-table tr.rank-3 td { color: #cd7f32; }
+        .attract-hint {
+            font-size: 13px;
+            color: #444;
+            letter-spacing: 2px;
+            animation: flicker 1.2s infinite alternate;
+        }
+
         /* ── Game-over overlay ── */
         #overlay {
             display: none;
@@ -309,6 +365,22 @@
     <button id="start-btn" onclick="startGame()">START</button>
 </div>
 
+<div id="attract" class="hidden">
+    <h2>HIGH SCORES</h2>
+    <div class="attract-game-title">SYS DIGGER</div>
+    <table id="attract-table">
+        <thead>
+            <tr>
+                <th class="rank-num">#</th>
+                <th style="text-align:left">Name</th>
+                <th style="text-align:right">Score</th>
+            </tr>
+        </thead>
+        <tbody id="attract-rows"></tbody>
+    </table>
+    <div class="attract-hint">— Press any key to continue —</div>
+</div>
+
 <div id="overlay">
     <h1>CYSTINSTEIN FORMED!</h1>
     <p id="final-score"></p>