settings.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Settings – Fantasy Mini Games</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
</head>
<body>
  <div id="app" class="settings-app">
    <a href="index.html" class="btn-back">← Return to Tavern</a>
    <header>
      <h1>⚙️ Settings</h1>
      <p class="subtitle">Configure your adventure</p>
    </header>

    <div class="settings-section">
      <h2>👥 Number of Adventurers</h2>
      <div class="player-select-grid">
        <button class="player-btn" data-players="1">
          <span class="player-icon">🧙</span>
          <span>1 Player</span>
          <span style="font-family:'Cinzel',serif;font-size:0.65rem;color:var(--parchment-dim)">Solo</span>
        </button>
        <button class="player-btn" data-players="2">
          <span class="player-icon">🧙🧝</span>
          <span>2 Players</span>
          <span style="font-family:'Cinzel',serif;font-size:0.65rem;color:var(--parchment-dim)">Duo</span>
        </button>
        <button class="player-btn" data-players="3">
          <span class="player-icon">🧙🧝🛡️</span>
          <span>3 Players</span>
          <span style="font-family:'Cinzel',serif;font-size:0.65rem;color:var(--parchment-dim)">Party</span>
        </button>
        <button class="player-btn" data-players="4">
          <span class="player-icon">⚔️🧙🧝🛡️</span>
          <span>4 Players</span>
          <span style="font-family:'Cinzel',serif;font-size:0.65rem;color:var(--parchment-dim)">Guild</span>
        </button>
      </div>
      <div class="multiplayer-note">
        Pass the device between players on their turns. Each player controls their own character when it's their time to act.
      </div>
    </div>

    <div class="settings-section">
      <h2>🎮 Multiplayer Support</h2>
      <ul class="game-support-list">
        <li>🐍 Snake <span class="support-badge support-4p">Up to 4P — Round Robin</span></li>
        <li>🧠 Memory Match <span class="support-badge support-4p">Up to 4P — Alternating Turns</span></li>
        <li>❌ Tic-Tac-Toe <span class="support-badge support-2p">2 Players</span></li>
        <li>🎵 Simon Says <span class="support-badge support-4p">Up to 4P — Pass & Play</span></li>
        <li>🔐 Mastermind <span class="support-badge support-4p">Up to 4P — Take Turns</span></li>
        <li>🔨 Whack-a-Mole <span class="support-badge support-4p">Up to 4P — Rounds</span></li>
        <li>🧩 Puzzle Slider <span class="support-badge support-4p">Up to 4P — Alternating</span></li>
        <li>📜 Word Scramble <span class="support-badge support-4p">Up to 4P — Alternating</span></li>
        <li>🎲 Dungeon Dice <span class="support-badge support-4p">Up to 4P — Cooperative</span></li>
        <li>⚔️ Kingdom Wars <span class="support-badge support-2p">2 Players vs AI or PvP</span></li>
        <li>⚙️ Physics Lab <span class="support-badge support-1p">Single Player</span></li>
        <li>🚔 Police Chase <span class="support-badge support-4p">Up to 4P — Round Robin</span></li>
      </ul>
    </div>

    <button id="btn-save-settings" class="btn-primary">💾 Save Settings</button>
    <div id="save-msg" class="hidden" style="text-align:center;margin-top:14px;font-family:'Press Start 2P',monospace;font-size:0.55rem;color:var(--green-light);">
      ✅ Settings saved!
    </div>

    <div class="settings-section" style="margin-top:28px;">
      <h2>🎵 Sound Effects</h2>
      <div style="margin-top:12px;display:flex;align-items:center;gap:16px;">
        <label style="font-family:'Cinzel',serif;font-size:0.85rem;color:var(--parchment-dim);cursor:pointer;">
          <input type="checkbox" id="sound-toggle" style="accent-color:var(--gold);width:18px;height:18px;cursor:pointer;" />
          &nbsp; Enable sound effects
        </label>
      </div>
      <p style="font-family:'Cinzel',serif;font-size:0.75rem;color:var(--parchment-dim);margin-top:8px;line-height:1.5;">
        Applies to Simon Says, Whack-a-Mole, and other games that support audio feedback.
      </p>
    </div>

    <div class="settings-section" style="margin-top:24px;">
      <h2>🗑️ Reset Progress</h2>
      <p style="font-family:'Cinzel',serif;font-size:0.8rem;color:var(--parchment-dim);margin:10px 0 14px;line-height:1.5;">
        Clear all saved high scores and records from your device.
      </p>
      <button id="btn-reset-scores" class="btn-secondary" style="font-family:'Press Start 2P',monospace;font-size:0.5rem;">
        🗑️ Reset All Scores
      </button>
      <div id="reset-msg" class="hidden" style="text-align:left;margin-top:10px;font-family:'Press Start 2P',monospace;font-size:0.5rem;color:var(--red);">
        ✓ Scores cleared!
      </div>
    </div>
  </div>

  <script>
    const savedPlayers = parseInt(localStorage.getItem('miniGamePlayers') || '1', 10);
    let selectedPlayers = savedPlayers;

    function updateButtons() {
      document.querySelectorAll('.player-btn').forEach(btn => {
        const n = parseInt(btn.dataset.players, 10);
        btn.classList.toggle('active', n === selectedPlayers);
      });
    }

    document.querySelectorAll('.player-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        selectedPlayers = parseInt(btn.dataset.players, 10);
        updateButtons();
      });
    });

    document.getElementById('btn-save-settings').addEventListener('click', () => {
      localStorage.setItem('miniGamePlayers', selectedPlayers);
      localStorage.setItem('miniGameSound', document.getElementById('sound-toggle').checked ? '1' : '0');
      const msg = document.getElementById('save-msg');
      msg.classList.remove('hidden');
      setTimeout(() => msg.classList.add('hidden'), 2000);
    });

    // Restore sound toggle state
    document.getElementById('sound-toggle').checked = localStorage.getItem('miniGameSound') !== '0';

    // Reset scores
    document.getElementById('btn-reset-scores').addEventListener('click', () => {
      const scoreKeys = ['snakeBest', 'moleBest', 'simonBest', 'wordscrambleBest', 'chaseBest'];
      scoreKeys.forEach(k => localStorage.removeItem(k));
      const msg = document.getElementById('reset-msg');
      msg.classList.remove('hidden');
      setTimeout(() => msg.classList.add('hidden'), 2500);
    });

    updateButtons();
  </script>
</body>
</html>