kaltaquise-gamification/kidney_lab/js/intro.js

/**
 * 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 };
})();