Added kidney_labe and Cyste_kid

kidney_lab/js/intro.js

@@ -0,0 +1,140 @@
+/**
+ * intro.js
+ * Introduction screen — two-step flow:
+ *   Step 1: select 1 or 2 players
+ *   Step 2: enter name(s), then start
+ * Owns the #intro-screen element.
+ */
+
+const IntroScreen = (() => {
+
+  function show() {
+    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+    document.getElementById('intro-screen').classList.add('active');
+    renderStep1();
+  }
+
+  /* ── Shared header (logo + rules) ─────────────────────────── */
+  function headerHTML() {
+    return `
+      <div class="intro-logo">
+        <span class="logo-gw">GAME &amp; WATCH</span>
+        <span class="logo-title">KIDNEY LAB</span>
+        <span class="logo-model">MW-56</span>
+      </div>
+
+      <div class="intro-description">
+        <p>Help <strong>the Doctor</strong> collect kidneys from the supply belts
+           and deliver them to the laboratory for analysis.</p>
+        <p>Bring special medication to the patient to earn bonus points!</p>
+      </div>
+
+      <div class="intro-rules">
+        <table>
+          <tr><td>Kidney delivered to lab</td><td class="pts pos">+1 pt</td></tr>
+          <tr><td>Special med to patient</td><td class="pts pos">+5 pts</td></tr>
+          <tr><td>Kidney dropped</td><td class="pts neg">−1 pt</td></tr>
+          <tr><td>Special kidney dropped</td><td class="pts neg">−3 pts</td></tr>
+        </table>
+        <p class="rule-note">Carry up to <strong>5 kidneys</strong> · 1 in 7 chance is special · <strong>3 minutes</strong> on the clock</p>
+      </div>
+
+      <div class="intro-controls">
+        <p>Move with <kbd>↑↓←→</kbd> or <kbd>W A S D</kbd></p>
+        <p>Stand at <em>column&nbsp;0</em> (left) to collect · at <em>column&nbsp;3</em> (right) to deposit / pickup / deliver</p>
+      </div>
+    `;
+  }
+
+  /* ── Step 1: player count selection ───────────────────────── */
+  function renderStep1() {
+    const el = document.getElementById('intro-screen');
+    el.innerHTML = `
+      <div class="intro-inner">
+        ${headerHTML()}
+        <div class="player-select">
+          <p class="player-select-label">SELECT NUMBER OF PLAYERS</p>
+          <div class="player-select-btns">
+            <button class="btn-player-count" id="btn-1p">
+              <span class="pcount">1</span>
+              <span class="pcount-label">PLAYER</span>
+            </button>
+            <button class="btn-player-count" id="btn-2p">
+              <span class="pcount">2</span>
+              <span class="pcount-label">PLAYERS</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    el.querySelector('#btn-1p').addEventListener('click', () => renderStep2(1));
+    el.querySelector('#btn-2p').addEventListener('click', () => renderStep2(2));
+  }
+
+  /* ── Step 2: name entry ────────────────────────────────────── */
+  function renderStep2(playerCount) {
+    const el = document.getElementById('intro-screen');
+
+    const nameFields = playerCount === 2
+      ? `
+        <div class="name-row">
+          <label for="name-p1">Player 1 Name</label>
+          <input type="text" id="name-p1" maxlength="12"
+                 placeholder="DOCTOR" autocomplete="off" spellcheck="false"/>
+        </div>
+        <div class="name-row">
+          <label for="name-p2">Player 2 Name</label>
+          <input type="text" id="name-p2" maxlength="12"
+                 placeholder="NURSE" autocomplete="off" spellcheck="false"/>
+        </div>`
+      : `
+        <div class="name-row">
+          <label for="name-p1">Your Name</label>
+          <input type="text" id="name-p1" maxlength="12"
+                 placeholder="DOCTOR" autocomplete="off" spellcheck="false"/>
+        </div>`;
+
+    el.innerHTML = `
+      <div class="intro-inner">
+        ${headerHTML()}
+        <div class="intro-form">
+          <div class="mode-badge">${playerCount === 2 ? '2 PLAYER MODE' : '1 PLAYER MODE'}</div>
+          ${nameFields}
+          <div class="form-actions">
+            <button class="btn-secondary" id="back-btn">← BACK</button>
+            <button class="btn-primary"   id="start-btn">START GAME</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const p1Input = el.querySelector('#name-p1');
+    p1Input.focus();
+
+    el.querySelector('#back-btn').addEventListener('click', renderStep1);
+
+    el.querySelector('#start-btn').addEventListener('click', () => startGame(playerCount));
+
+    // Enter on last field starts game
+    const lastInput = el.querySelector(playerCount === 2 ? '#name-p2' : '#name-p1');
+    lastInput.addEventListener('keydown', e => {
+      if (e.key === 'Enter') startGame(playerCount);
+    });
+  }
+
+  /* ── Launch game ───────────────────────────────────────────── */
+  function startGame(playerCount) {
+    const el    = document.getElementById('intro-screen');
+    const name1 = (el.querySelector('#name-p1').value.trim() || 'DOCTOR').toUpperCase();
+    const name2 = playerCount === 2
+      ? ((el.querySelector('#name-p2').value.trim() || 'NURSE').toUpperCase())
+      : null;
+
+    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+    document.getElementById('game-screen').classList.add('active');
+    Game.init(name1, name2);
+  }
+
+  return { show };
+})();