added sys digger

sys_digger/constants.js

@@ -1,5 +1,5 @@
 // ─── Game rules ──────────────────────────────────────────────────────────────
-const MAX_DOCKS        = 8;     // failed docks before game over
+const MAX_DOCKS        = 6;     // failed docks before game over
 const NUM_ANCHORS      = 6;     // anchor points around the central molecule
 const ANCHOR_RADIUS    = 120;   // px distance from center to anchor points
 const CLICK_RADIUS     = 38;    // px hit radius for clicking an anchor

sys_digger/game.js

@@ -79,6 +79,7 @@ function topScore() {
 let score         = 0;
 let docks         = 0;
 let gameOver      = false;
+let gameStarted   = false;
 let incomingAtoms = [];
 let anchorPoints  = [];
 let particles     = [];
@@ -177,19 +178,26 @@ function submitScore() {
 function restartGame() {
     score = docks = 0;
     gameOver      = false;
+    gameStarted   = false;
     incomingAtoms = [];
     particles     = [];
     clickEffects  = [];
     lastSpawn     = 0;
     spawnInterval = SPAWN_INTERVAL_START;
     document.getElementById('score').textContent       = 'Score: 0';
-    document.getElementById('docks-count').textContent = '0 / 8 docks';
+    document.getElementById('docks-count').textContent = `0 / ${MAX_DOCKS} docks`;
     document.getElementById('name-form').style.display = 'flex';
     document.getElementById('overlay').classList.remove('active');
+    document.getElementById('intro').classList.remove('hidden');
     initAnchors();
     updateCystinstein();
 }
 
+function startGame() {
+    gameStarted = true;
+    document.getElementById('intro').classList.add('hidden');
+}
+
 function updateHudBest(best) {
     document.getElementById('highscore').textContent = best !== null ? `Best: ${best}` : 'Best: —';
 }
@@ -203,7 +211,7 @@ document.getElementById('player-name').addEventListener('keydown', e => {
 function gameLoop(ts) {
     drawBackground();
 
-    if (!gameOver && ts - lastSpawn > spawnInterval) {
+    if (gameStarted && !gameOver && ts - lastSpawn > spawnInterval) {
         spawnAtom();
         lastSpawn     = ts;
         spawnInterval = Math.max(SPAWN_INTERVAL_MIN, spawnInterval - SPAWN_DIFFICULTY_STEP);
@@ -221,6 +229,9 @@ function gameLoop(ts) {
 }
 
 // ─── Boot ────────────────────────────────────────────────────────────────────
+// Fill dynamic value in intro text
+document.getElementById('intro').innerHTML =
+    document.getElementById('intro').innerHTML.replace('${MAX_DOCKS}', MAX_DOCKS);
 updateHudBest(topScore());
 initAnchors();
 updateCystinstein();

sys_digger/index.html

@@ -15,7 +15,7 @@
             font-family: 'Courier New', monospace;
             overflow: hidden;
         }
-        canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='12' fill='none' stroke='%2300ff88' stroke-width='1' opacity='0.45'/><circle cx='16' cy='16' r='6' fill='none' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='2' x2='16' y2='9' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='23' x2='16' y2='30' stroke='%2300ff88' stroke-width='1.5'/><line x1='2' y1='16' x2='9' y2='16' stroke='%2300ff88' stroke-width='1.5'/><line x1='23' y1='16' x2='30' y2='16' stroke='%2300ff88' stroke-width='1.5'/><circle cx='16' cy='16' r='1.5' fill='%2300ff88'/></svg>") 16 16, crosshair; }
+        canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g transform='translate(16,16) rotate(-45)'><path d='M 0 -5 L -6 -5 A 5 5 0 0 0 -6 5 L 0 5 Z' fill='%23ff4444'/><path d='M 0 -5 L 6 -5 A 5 5 0 0 1 6 5 L 0 5 Z' fill='%23f5f5f5'/><path d='M -6 -5 L 6 -5 A 5 5 0 0 1 6 5 L -6 5 A 5 5 0 0 0 -6 -5 Z' fill='none' stroke='%23222222' stroke-width='1.2'/><line x1='0' y1='-5' x2='0' y2='5' stroke='%23555555' stroke-width='0.8'/></g></svg>") 16 16, auto; }
 
         #score {
             position: absolute;
@@ -60,6 +60,83 @@
             margin-top: 6px;
         }
 
+        /* ── Intro screen ── */
+        #intro {
+            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;
+        }
+        #intro.hidden { display: none; }
+
+        #intro h1 {
+            font-size: 64px;
+            letter-spacing: 8px;
+            color: #00ff88;
+            text-shadow: 0 0 30px #00ff88, 0 0 60px #00ff8855;
+            margin-bottom: 6px;
+            animation: flicker 2s infinite alternate;
+        }
+        #intro .subtitle {
+            font-size: 15px;
+            letter-spacing: 4px;
+            color: #00ccff;
+            text-shadow: 0 0 10px #00ccff;
+            margin-bottom: 40px;
+            text-transform: uppercase;
+        }
+        #intro .instructions {
+            max-width: 480px;
+            margin-bottom: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+        #intro .instruction-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 8px;
+            padding: 12px 18px;
+            text-align: left;
+        }
+        #intro .instruction-icon {
+            font-size: 26px;
+            flex-shrink: 0;
+            width: 36px;
+            text-align: center;
+        }
+        #intro .instruction-text {
+            font-size: 13px;
+            color: #aaa;
+            line-height: 1.5;
+        }
+        #intro .instruction-text strong { color: #fff; }
+        #start-btn {
+            padding: 16px 52px;
+            font-size: 20px;
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            background: #00ff88;
+            color: #000;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            letter-spacing: 2px;
+            transition: background 0.2s, transform 0.1s;
+        }
+        #start-btn:hover { background: #00cc66; transform: scale(1.04); }
+
         /* ── Game-over overlay ── */
         #overlay {
             display: none;
@@ -197,12 +274,41 @@
 <div id="cystinstein-area">
     <div id="cystinstein-label">CYSTINSTEIN</div>
     <canvas id="cystinstein-canvas" width="130" height="130"></canvas>
-    <div id="docks-count">0 / 8 docks</div>
+    <div id="docks-count">0 / 6 docks</div>
 </div>
 
 <div id="score">Score: 0</div>
 <div id="highscore">Best: —</div>
 
+<div id="intro">
+    <h1>SYS DIGGER</h1>
+    <div class="subtitle">Protect the atom</div>
+
+    <div class="instructions">
+        <div class="instruction-row">
+            <div class="instruction-icon">⚛</div>
+            <div class="instruction-text">
+                A molecule sits at the center of the screen with <strong>anchor points</strong> around it.
+            </div>
+        </div>
+        <div class="instruction-row">
+            <div class="instruction-icon">💊</div>
+            <div class="instruction-text">
+                <strong>Click the glowing red anchor</strong> when an atom approaches to block the connection.
+            </div>
+        </div>
+        <div class="instruction-row">
+            <div class="instruction-icon">🧫</div>
+            <div class="instruction-text">
+                Each missed dock grows the <strong>Cystinstein</strong> in the top-left.
+                Allow <strong>${MAX_DOCKS} docks</strong> and it's fully formed — game over.
+            </div>
+        </div>
+    </div>
+
+    <button id="start-btn" onclick="startGame()">START</button>
+</div>
+
 <div id="overlay">
     <h1>CYSTINSTEIN FORMED!</h1>
     <p id="final-score"></p>