app.js

// Sound Manager (Web Audio API Synthesizer)
class SoundSynth {
  constructor() {
    this.ctx = null;
  }

  init() {
    if (!this.ctx) {
      this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    }
  }

  playTone(freq, durationMs, type = 'sine') {
    try {
      this.init();
      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      osc.type = type;
      osc.frequency.value = freq;
      gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + durationMs / 1000);
      osc.connect(gain);
      gain.connect(this.ctx.destination);
      osc.start();
      osc.stop(this.ctx.currentTime + durationMs / 1000);
    } catch (e) {}
  }

  playFlip() { this.playTone(440, 60); }
  playMatch() {
    this.playTone(523.25, 100);
    setTimeout(() => this.playTone(659.25, 150), 80);
  }
  playSpot() {
    this.playTone(587.33, 90);
    setTimeout(() => this.playTone(880, 140), 70);
  }
  playMismatch() { this.playTone(280, 120, 'sawtooth'); }
  playWin() {
    [523.25, 659.25, 783.99, 1046.50].forEach((freq, idx) => {
      setTimeout(() => this.playTone(freq, 150), idx * 120);
    });
  }
}

const sounds = new SoundSynth();

// ================= TOP 2-IN-1 GAME SWITCHER =================
document.querySelectorAll('.switcher-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.switcher-tab').forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    const targetGame = tab.dataset.game;

    if (targetGame === 'game1') {
      document.getElementById('game1Container').classList.add('active');
      document.getElementById('game2Container').classList.remove('active');
    } else {
      document.getElementById('game1Container').classList.remove('active');
      document.getElementById('game2Container').classList.add('active');
      initIspyGame();
    }
  });
});


// ================= GAME 1: MINDFLIP MEMORY LOGIC =================
const CONFIG = {
  EASY: { label: 'Easy', rows: 4, cols: 3, pairs: 6 },
  MEDIUM: { label: 'Medium', rows: 4, cols: 4, pairs: 8 },
  HARD: { label: 'Hard', rows: 6, cols: 5, pairs: 15 }
};

const DOODLE_ICONS = ['✏️', '🎨', '🐱', '🚀', '⭐', '🔥', '👑', '🏆', '⚽', '🎵', '⚡', '💡', '🍦', '🌸', '🍕'];

const POKER_SUITS = [
  { symbol: '♠', name: 'S', red: false },
  { symbol: '♥', name: 'H', red: true },
  { symbol: '♦', name: 'D', red: true },
  { symbol: '♣', name: 'C', red: false }
];
const POKER_RANKS = ['Q', 'K', 'J', 'A', '10', '9', '8', '7', '6', '5', '4', '3', '2'];

const SKETCH_SVGS = {
  'Q': `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="sketch-svg-art"><path d="M32 12c-8 0-14 6-14 14 0 6 3 10 7 13-4 5-7 12-7 17h30c0-5-3-12-7-17 4-3 7-7 7-13 0-8-6-14-14-14z"/><path d="M22 18l10-6 10 6"/><circle cx="27" cy="24" r="1.5" fill="currentColor"/><circle cx="37" cy="24" r="1.5" fill="currentColor"/><path d="M28 30q4 3 8 0"/><path d="M24 38c4 4 12 4 16 0"/><path d="M28 44h8"/></svg>`,
  'K': `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="sketch-svg-art"><path d="M18 16l14-6 14 6-5 12h-18z"/><path d="M20 28c0 8 5 14 12 14s12-6 12-14"/><circle cx="26" cy="34" r="1.5" fill="currentColor"/><circle cx="38" cy="34" r="1.5" fill="currentColor"/><path d="M28 40h8"/><path d="M20 54h24v-8h-24z"/></svg>`,
  'J': `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="sketch-svg-art"><path d="M24 16h16l-2 10h-12z"/><circle cx="32" cy="12" r="3" fill="currentColor"/><path d="M22 26c0 6 4 12 10 12s10-6 10-12"/><circle cx="28" cy="30" r="1.5" fill="currentColor"/><circle cx="36" cy="30" r="1.5" fill="currentColor"/><path d="M22 52c4-4 12-4 20 0"/></svg>`,
  'A': `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="sketch-svg-art"><path d="M32 10l-16 44h8l5-14h16l5 14h8z"/><path d="M26 32h12"/></svg>`,
  'DEFAULT': `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="sketch-svg-art"><path d="M32 12c-10 0-18 8-18 18 0 12 18 24 18 24s18-12 18-24c0-10-8-18-18-18z"/></svg>`
};

let gameState = {
  difficulty: 'EASY',
  deckType: 'DEFAULT',
  playerName: 'Player',
  cards: [],
  flippedCards: [],
  matchedPairs: 0,
  moves: 0,
  seconds: 0,
  timerId: null,
  isProcessing: false,
  customImages: []
};

const homeView = document.getElementById('homeView');
const gameView = document.getElementById('gameView');
const statsBar = document.getElementById('statsBar');
const gameGrid = document.getElementById('gameGrid');
const moveCountEl = document.getElementById('moveCount');
const timerTextEl = document.getElementById('timerText');
const progressFill = document.getElementById('progressFill');
const nameModal = document.getElementById('nameModal');
const playerNameInput = document.getElementById('playerNameInput');
const winModal = document.getElementById('winModal');
const winPlayerName = document.getElementById('winPlayerName');
const filePicker = document.getElementById('filePicker');
const customSetsList = document.getElementById('customSetsList');
const leaderboardList = document.getElementById('leaderboardList');
const leaderboardDiffLabel = document.getElementById('leaderboardDiffLabel');

document.querySelectorAll('[data-difficulty]').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('[data-difficulty]').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    gameState.difficulty = btn.dataset.difficulty;
    updateLeaderboardView();
  });
});

document.querySelectorAll('[data-deck]').forEach(btn => {
  btn.addEventListener('click', () => {
    if (btn.dataset.deck === 'CUSTOM' && gameState.customImages.length === 0) {
      alert('Please click "Add Photos" first to upload custom images!');
      return;
    }
    document.querySelectorAll('[data-deck]').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    gameState.deckType = btn.dataset.deck;
  });
});

filePicker.addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  if (files.length === 0) return;

  const readPromises = files.map(file => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (evt) => resolve(evt.target.result);
      reader.readAsDataURL(file);
    });
  });

  Promise.all(readPromises).then(base64Images => {
    gameState.customImages = base64Images;
    renderCustomPhotosRow();
    document.querySelector('[data-deck="CUSTOM"]').click();
  });
});

function renderCustomPhotosRow() {
  customSetsList.innerHTML = '';
  if (gameState.customImages.length === 0) {
    customSetsList.innerHTML = '<p class="placeholder-text">No custom photos added yet. Click "Add Photos" to upload your own images!</p>';
    return;
  }
  gameState.customImages.slice(0, 10).forEach(src => {
    const img = document.createElement('img');
    img.src = src;
    img.className = 'custom-thumb';
    customSetsList.appendChild(img);
  });
}

document.getElementById('btnStartGame').addEventListener('click', () => {
  nameModal.classList.add('active');
  playerNameInput.focus();
});

document.getElementById('btnConfirmStart').addEventListener('click', () => {
  const name = playerNameInput.value.trim();
  gameState.playerName = name.length > 0 ? name : 'Player';
  nameModal.classList.remove('active');
  startGame();
});

document.getElementById('btnCancelStart').addEventListener('click', () => {
  nameModal.classList.remove('active');
});

document.getElementById('btnResetScores').addEventListener('click', () => {
  if (confirm('Reset all leaderboard high scores?')) {
    localStorage.removeItem('leaderboard_EASY');
    localStorage.removeItem('leaderboard_MEDIUM');
    localStorage.removeItem('leaderboard_HARD');
    updateLeaderboardView();
  }
});

document.getElementById('btnRestart').addEventListener('click', resetGame);
document.getElementById('btnHome').addEventListener('click', showHome);
document.getElementById('btnPlayAgain').addEventListener('click', () => {
  winModal.classList.remove('active');
  resetGame();
});
document.getElementById('btnReturnHome').addEventListener('click', () => {
  winModal.classList.remove('active');
  showHome();
});

function showHome() {
  clearInterval(gameState.timerId);
  gameView.classList.remove('active');
  statsBar.style.display = 'none';
  homeView.classList.add('active');
  updateLeaderboardView();
}

function startGame() {
  homeView.classList.remove('active');
  gameView.classList.add('active');
  statsBar.style.display = 'flex';
  resetGame();
}

function resetGame() {
  clearInterval(gameState.timerId);
  gameState.moves = 0;
  gameState.matchedPairs = 0;
  gameState.seconds = 0;
  gameState.flippedCards = [];
  gameState.isProcessing = false;

  moveCountEl.textContent = '0 Moves';
  timerTextEl.textContent = '0s';
  progressFill.style.width = '0%';

  generateDeck();
  renderGrid();

  gameState.timerId = setInterval(() => {
    gameState.seconds++;
    timerTextEl.textContent = `${gameState.seconds}s`;
  }, 1000);
}

function generateDeck() {
  const diff = CONFIG[gameState.difficulty];
  const requiredPairs = diff.pairs;
  let items = [];

  if (gameState.deckType === 'DEFAULT') {
    items = DOODLE_ICONS.slice(0, requiredPairs).map(icon => ({ type: 'icon', value: icon }));
  } else if (gameState.deckType === 'POKER') {
    const fullPokerDeck = [];
    POKER_SUITS.forEach(suit => {
      POKER_RANKS.forEach(rank => {
        fullPokerDeck.push({ type: 'poker', rank, suit: suit.symbol, red: suit.red });
      });
    });
    items = fullPokerDeck.sort(() => 0.5 - Math.random()).slice(0, requiredPairs);
  } else if (gameState.deckType === 'CUSTOM') {
    const pool = [];
    while (pool.length < requiredPairs) {
      pool.push(...gameState.customImages);
    }
    items = pool.slice(0, requiredPairs).map(src => ({ type: 'image', value: src }));
  }

  const paired = [];
  items.forEach((item, index) => {
    paired.push({ ...item, pairId: index, id: index * 2 });
    paired.push({ ...item, pairId: index, id: index * 2 + 1 });
  });

  gameState.cards = paired.sort(() => 0.5 - Math.random());
}

function renderGrid() {
  const diff = CONFIG[gameState.difficulty];
  gameGrid.style.gridTemplateColumns = `repeat(${diff.cols}, 1fr)`;
  gameGrid.style.gridTemplateRows = `repeat(${diff.rows}, 1fr)`;
  gameGrid.innerHTML = '';

  gameState.cards.forEach((card, index) => {
    const cardEl = document.createElement('div');
    cardEl.className = 'memory-card';
    cardEl.dataset.index = index;

    const pokerBackClass = gameState.deckType === 'POKER' ? 'poker-theme' : '';

    let frontContentHtml = '';
    if (card.type === 'icon') {
      frontContentHtml = `<span class="card-icon">${card.value}</span>`;
    } else if (card.type === 'poker') {
      const colorClass = card.red ? 'poker-red' : 'poker-black';
      const sketchSvg = SKETCH_SVGS[card.rank] || SKETCH_SVGS['DEFAULT'];
      frontContentHtml = `
        <div class="sketch-card-container">
          <div class="sketch-corner top-left ${colorClass}">
            <span>${card.rank}</span>
            <span class="suit-symbol">${card.suit}</span>
          </div>
          <div class="sketch-center-art ${colorClass}">
            ${sketchSvg}
          </div>
          <div class="sketch-corner bottom-right ${colorClass}">
            <span>${card.rank}</span>
            <span class="suit-symbol">${card.suit}</span>
          </div>
        </div>
      `;
    } else if (card.type === 'image') {
      frontContentHtml = `<img src="${card.value}" class="card-img" alt="Memory Card">`;
    }

    cardEl.innerHTML = `
      <div class="card-inner">
        <div class="card-face card-face-back ${pokerBackClass}">
          <div class="card-back-badge">✏️</div>
        </div>
        <div class="card-face card-face-front">
          ${frontContentHtml}
        </div>
      </div>
    `;

    cardEl.addEventListener('click', () => handleCardClick(index, cardEl));
    gameGrid.appendChild(cardEl);
  });
}

function handleCardClick(index, cardEl) {
  if (gameState.isProcessing) return;
  if (cardEl.classList.contains('flipped') || cardEl.classList.contains('matched')) return;

  sounds.playFlip();
  cardEl.classList.add('flipped');
  gameState.flippedCards.push({ index, card: gameState.cards[index], el: cardEl });

  if (gameState.flippedCards.length === 2) {
    gameState.moves++;
    moveCountEl.textContent = `${gameState.moves} Moves`;
    checkMatch();
  }
}

function checkMatch() {
  const [first, second] = gameState.flippedCards;
  const diff = CONFIG[gameState.difficulty];

  if (first.card.pairId === second.card.pairId) {
    sounds.playMatch();
    first.el.classList.add('matched');
    second.el.classList.add('matched');
    gameState.matchedPairs++;
    gameState.flippedCards = [];

    const progress = (gameState.matchedPairs / diff.pairs) * 100;
    progressFill.style.width = `${progress}%`;

    if (gameState.matchedPairs === diff.pairs) {
      clearInterval(gameState.timerId);
      sounds.playWin();
      saveHighScore();
      setTimeout(showWinModal, 500);
    }
  } else {
    sounds.playMismatch();
    gameState.isProcessing = true;
    setTimeout(() => {
      first.el.classList.remove('flipped');
      second.el.classList.remove('flipped');
      gameState.flippedCards = [];
      gameState.isProcessing = false;
    }, 1000);
  }
}

function showWinModal() {
  document.getElementById('finalMoves').textContent = gameState.moves;
  document.getElementById('finalTime').textContent = `${gameState.seconds}s`;
  winPlayerName.textContent = gameState.playerName;
  winModal.classList.add('active');
}

function saveHighScore() {
  const key = `leaderboard_${gameState.difficulty}`;
  const scores = JSON.parse(localStorage.getItem(key) || '[]');
  scores.push({
    name: gameState.playerName,
    moves: gameState.moves,
    time: gameState.seconds,
    date: new Date().toLocaleDateString()
  });
  scores.sort((a, b) => a.moves - b.moves || a.time - b.time);
  localStorage.setItem(key, JSON.stringify(scores.slice(0, 5)));
}

function updateLeaderboardView() {
  leaderboardDiffLabel.textContent = CONFIG[gameState.difficulty].label;
  const key = `leaderboard_${gameState.difficulty}`;
  const scores = JSON.parse(localStorage.getItem(key) || '[]');

  if (scores.length === 0) {
    leaderboardList.innerHTML = '<p class="placeholder-text">No high scores recorded yet. Be the first to win!</p>';
    return;
  }

  leaderboardList.innerHTML = scores.map((s, idx) => `
    <div style="display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; font-weight: 700;">
      <span>#${idx + 1} ${s.name || 'Player'}</span>
      <span>${s.moves} moves • ${s.time}s</span>
    </div>
  `).join('');
}

updateLeaderboardView();


// ================= GAME 2: I-SPY VARANASI EXPANDED MAP LOGIC =================

const VARANASI_MEGA_MAP = {
  title: 'Varanasi Ghats (14 Objectives)',
  imgSrc: 'assets/images/ispy_varanasi.jpg',
  targets: [
    { id: 'sadhu', name: 'Dancing Sadhu', icon: '🧘‍♂️', x: 27, y: 54, radius: 42 },
    { id: 'cow', name: 'Sacred Cow', icon: '🐄', x: 46, y: 60, radius: 46 },
    { id: 'diya', name: 'Floating Diya', icon: '🪔', x: 54, y: 91, radius: 36 },
    { id: 'chai', name: 'Chai Stall', icon: '☕', x: 12, y: 63, radius: 40 },
    { id: 'yellow_boat', name: 'Yellow Boat', icon: '⛵', x: 35, y: 85, radius: 44 },
    { id: 'orange_boat', name: 'Orange Boat', icon: '🚣‍♂️', x: 80, y: 84, radius: 44 },
    { id: 'golden_spire', name: 'Gold Shrine Spire', icon: '🛕', x: 49, y: 28, radius: 40 },
    { id: 'temple_flag', name: 'Red Temple Flag', icon: '🚩', x: 51, y: 13, radius: 36 },
    { id: 'hanging_clothes', name: 'Washing Lines', icon: '🧺', x: 59, y: 17, radius: 38 },
    { id: 'river_bather', name: 'Ganges Pilgrim', icon: '🧘‍♀️', x: 53, y: 77, radius: 36 },
    { id: 'shehnai_musician', name: 'Shehnai Musician', icon: '🎺', x: 14, y: 81, radius: 38 },
    { id: 'banyan_tree', name: 'Sacred Banyan Tree', icon: '🌳', x: 31, y: 14, radius: 44 },
    { id: 'ektara_player', name: 'Ektara Musician', icon: '🪕', x: 70, y: 84, radius: 38 },
    { id: 'small_boat', name: 'River Rowboat', icon: '🛶', x: 87, y: 49, radius: 38 }
  ]
};

let ispyState = {
  mode: 'challenge',
  spottedCount: 0,
  seconds: 120,
  timerId: null,
  isInitialized: false,
  spottedTargets: {},
  clickTimes: []
};

function initIspyGame() {
  if (!ispyState.isInitialized) {
    ispyState.isInitialized = true;

    // Mode Toggle Buttons
    document.getElementById('btnModeChallenge').addEventListener('click', () => switchIspyMode('challenge'));
    document.getElementById('btnModeFree').addEventListener('click', () => switchIspyMode('free'));

    // Secret Triple-Click Reveal Trigger on Spotted Counter Chip
    const countChip = document.getElementById('ispyCountChip');
    countChip.addEventListener('click', () => {
      const now = Date.now();
      ispyState.clickTimes.push(now);
      ispyState.clickTimes = ispyState.clickTimes.filter(t => now - t < 2000);

      if (ispyState.clickTimes.length >= 3) {
        ispyState.clickTimes = [];
        revealAllLocations();
      }
    });

    // Win Modal Control
    document.getElementById('btnIspyPlayAgain').addEventListener('click', () => {
      document.getElementById('ispyWinModal').classList.remove('active');
      loadVaranasiMap();
    });

    loadVaranasiMap();
  }
}

function revealAllLocations() {
  sounds.playWin();
  const layer = document.getElementById('hotspotsLayer');
  if (layer) {
    layer.classList.add('reveal-cheat');
    document.getElementById('ispyCountChip').textContent = `✨ Locations Revealed!`;
  }
}

function switchIspyMode(mode) {
  ispyState.mode = mode;
  document.querySelectorAll('.ispy-mode-btn').forEach(b => b.classList.remove('active'));
  if (mode === 'challenge') {
    document.getElementById('btnModeChallenge').classList.add('active');
  } else {
    document.getElementById('btnModeFree').classList.add('active');
  }
  loadVaranasiMap();
}

function loadVaranasiMap() {
  clearInterval(ispyState.timerId);
  ispyState.spottedCount = 0;
  ispyState.spottedTargets = {};
  ispyState.clickTimes = [];
  ispyState.seconds = ispyState.mode === 'challenge' ? 120 : 0;

  // Remove Secret Cheat Reveal Class
  const layer = document.getElementById('hotspotsLayer');
  if (layer) layer.classList.remove('reveal-cheat');

  // Update Status Chips
  document.getElementById('ispyCountChip').textContent = `🔍 0/${VARANASI_MEGA_MAP.targets.length} Spotted`;

  if (ispyState.mode === 'challenge') {
    document.getElementById('ispyTimerChip').style.display = 'inline';
    document.getElementById('ispyTimerChip').textContent = `⏱️ ${ispyState.seconds}s`;

    ispyState.timerId = setInterval(() => {
      ispyState.seconds--;
      document.getElementById('ispyTimerChip').textContent = `⏱️ ${ispyState.seconds}s`;
      if (ispyState.seconds <= 0) {
        clearInterval(ispyState.timerId);
        sounds.playMismatch();
        alert(`Time's Up! You spotted ${ispyState.spottedCount}/${VARANASI_MEGA_MAP.targets.length} items. Try again!`);
        loadVaranasiMap();
      }
    }, 1000);
  } else {
    document.getElementById('ispyTimerChip').style.display = 'none';
  }

  // Render Target HUD Cards in Upper Left Panel
  renderTargetHUDCards();

  // Render Scene Map & Hotspots
  renderIspyScene();
}

function renderTargetHUDCards() {
  const hudContainer = document.getElementById('targetCardsGrid');
  hudContainer.innerHTML = '';

  VARANASI_MEGA_MAP.targets.forEach(target => {
    const cardEl = document.createElement('div');
    cardEl.className = 'target-card';
    cardEl.id = `hud_card_${target.id}`;

    cardEl.innerHTML = `
      <div class="item-icon">${target.icon}</div>
      <div class="item-name">${target.name}</div>
    `;

    hudContainer.appendChild(cardEl);
  });
}

function renderIspyScene() {
  const wrapper = document.getElementById('ispySceneWrapper');
  wrapper.innerHTML = `
    <img src="${VARANASI_MEGA_MAP.imgSrc}" alt="Varanasi Ghats Mega Map" class="ispy-scene-img expanded-map">
    <div id="hotspotsLayer" class="hotspots-layer"></div>
  `;

  const hotspotsLayer = document.getElementById('hotspotsLayer');

  VARANASI_MEGA_MAP.targets.forEach(target => {
    const spot = document.createElement('div');
    spot.className = 'hotspot-target';
    spot.style.left = `${target.x}%`;
    spot.style.top = `${target.y}%`;
    spot.style.width = `${target.radius}px`;
    spot.style.height = `${target.radius}px`;
    spot.style.transform = 'translate(-50%, -50%)';

    spot.addEventListener('click', () => handleSpotItem(target, spot));
    hotspotsLayer.appendChild(spot);
  });
}

function handleSpotItem(target, spotEl) {
  if (ispyState.spottedTargets[target.id]) return;

  sounds.playSpot();
  ispyState.spottedTargets[target.id] = true;
  ispyState.spottedCount++;

  spotEl.classList.add('spotted');

  // Check off Target Card in Upper Left Panel
  const hudCard = document.getElementById(`hud_card_${target.id}`);
  if (hudCard) {
    hudCard.classList.add('found');
  }

  document.getElementById('ispyCountChip').textContent = `🔍 ${ispyState.spottedCount}/${VARANASI_MEGA_MAP.targets.length} Spotted`;

  if (ispyState.spottedCount === VARANASI_MEGA_MAP.targets.length) {
    clearInterval(ispyState.timerId);
    sounds.playWin();
    setTimeout(() => {
      const elapsed = ispyState.mode === 'challenge' ? (120 - ispyState.seconds) : ispyState.seconds;
      document.getElementById('ispyWinText').textContent = `Incredible! You spotted all 14 hidden objectives in Varanasi Ghats!`;
      document.getElementById('ispyFinalSpotted').textContent = `${ispyState.spottedCount} / ${VARANASI_MEGA_MAP.targets.length}`;
      document.getElementById('ispyFinalTime').textContent = `${elapsed}s`;
      document.getElementById('ispyWinModal').classList.add('active');
    }, 400);
  }
}