game.js

import { alphabetDict, pianoScale, fallbackEmojis, PRESSES_FOR_REWARD } from './constants.js';

/**
 * GameController
 * The core brain of the application.
 * Manages game state, user input events (keyboard, mouse, touch), 
 * rewards tracking, and coordinates the Audio and Visual engines.
 */
export class GameController {
  /**
   * @param {AudioEngine} audioEngine 
   * @param {VisualEngine} visualEngine 
   */
  constructor(audioEngine, visualEngine) {
    this.audio = audioEngine;
    this.visuals = visualEngine;
    
    this.isAppActive = false;
    this.keyPressCount = 0;
    this.currentRewardType = 0;
    
    // Internal counters to track cycling words like 'Apple' -> 'Ant' -> 'Alien'
    this.letterCounters = {};
    
    // Mobile Touch interaction state
    this.mobileTouchAlphabetIndex = 0;
    this.alphabetKeys = Object.keys(alphabetDict);
    this.isLowerCycle = false;
    this.isSequenceActive = false;
    
    this.lastDrawTime = 0;
  }

  /**
   * Bootstraps the visual canvas and event listeners.
   */
  init() {
    this.visuals.createBackgroundStars();
    this.bindEvents();
  }

  bindEvents() {
    const startBtn = document.getElementById('start-btn');
    const welcomeScreen = document.getElementById('welcome-screen');

    startBtn.addEventListener('click', () => {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen().catch(() => {});
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen().catch(() => {});
      }
      
      this.audio.init();
      this.audio.resume();
      
      welcomeScreen.style.opacity = '0';
      setTimeout(() => {
        welcomeScreen.style.display = 'none';
        this.isAppActive = true;
      }, 500);
    });

    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
    document.addEventListener('keydown', (e) => this.handleKeyDown(e));
    document.addEventListener('touchstart', (e) => this.handleTouch(e), { passive: false });
  }

  handleMouseMove(e) {
    if (!this.isAppActive || this.isSequenceActive) return;
    const now = Date.now();
    if (now - this.lastDrawTime < 40) return; 
    this.lastDrawTime = now;
    
    this.visuals.spawnMouseTrailStar(e.clientX, e.clientY);
  }

  handleKeyDown(e) {
    if (!this.isAppActive || this.isSequenceActive) return;
    if (e.key !== 'F11' && e.key !== 'F12' && !e.metaKey && !e.ctrlKey) {
      e.preventDefault();
    }
    if (e.repeat) return;
    
    this.processInput(e.key.toUpperCase(), null, e.code === 'Space');
  }

  handleTouch(e) {
    if (!this.isAppActive || e.target.id === 'start-btn') return;
    if (this.isSequenceActive) return;
    
    e.preventDefault(); 
    
    let letter = this.alphabetKeys[this.mobileTouchAlphabetIndex];
    this.mobileTouchAlphabetIndex = (this.mobileTouchAlphabetIndex + 1) % this.alphabetKeys.length;

    // Use current cycle case for display
    const passedLetter = this.isLowerCycle ? letter.toLowerCase() : letter;
    this.processInput(passedLetter, { x: e.touches[0].clientX, y: e.touches[0].clientY }, false, true);

    // If they just hit Z or z, trigger the chart!
    if (letter === 'Z') {
      this.isSequenceActive = true;
      setTimeout(() => {
        const chartElements = this.visuals.triggerAlphabetChart(alphabetDict);
        this.audio.playHarpSweep();
        
        // Setup Chart based on cycle
        if (this.isLowerCycle) {
          chartElements.title.textContent = "Small Letters!";
          this.alphabetKeys.forEach((l, i) => {
            chartElements.cells[i].querySelector('.cell-letter').textContent = l.toLowerCase();
          });
        } else {
          chartElements.title.textContent = "Capital Letters!";
        }

        let readIndex = 0;
        
        const readChartSequentially = async () => {
          if (readIndex < this.alphabetKeys.length) {
            // Remove highlight from previous
            if (readIndex > 0) {
              chartElements.cells[readIndex - 1].classList.remove('active-reading');
            }
            
            // Highlight current and read it
            chartElements.cells[readIndex].classList.add('active-reading');
            
            // Wait precisely for the voice to finish speaking this particular letter
            await this.audio.speakWord(this.alphabetKeys[readIndex].toLowerCase(), true);
            
            readIndex++;
            // Exact 300ms pause between letters so highlight is obvious before moving on
            setTimeout(readChartSequentially, 300);
          } else {
            // Finished reading the chart
            chartElements.cells[readIndex - 1].classList.remove('active-reading');
            
            // Toggle the cycle for the next time they start tapping A-Z
            this.isLowerCycle = !this.isLowerCycle;
            this.mobileTouchAlphabetIndex = 0; // Explicitly reset the pointer back to 'A'
            
            // Clean up 2 seconds later
            setTimeout(() => {
              chartElements.container.classList.remove('show-chart');
              setTimeout(() => {
                chartElements.container.remove();
                this.isSequenceActive = false; // Important: Unlock screen touches again!
              }, 600);
            }, 2000);
          }
        };
        
        // Start reading slightly after the chart pops up
        setTimeout(readChartSequentially, 1500);
        
      }, 1000); // slight delay to let "Z for Zebra" finish speaking
    }
  }

  processReward(isMobile) {
    // Disable rewards completely for mobile taps to avoid distracting from the A-Z sequence
    if (isMobile) return;

    this.keyPressCount++;
    if (this.keyPressCount >= PRESSES_FOR_REWARD) {
      this.audio.playHarpSweep();
      if (this.currentRewardType === 0) {
        this.visuals.triggerStarburstShower();
        this.currentRewardType = 1;
      } else {
        this.visuals.triggerConstellation();
        this.currentRewardType = 0;
      }
      this.keyPressCount = 0;
    }
    
    this.visuals.updateProgress((this.keyPressCount / PRESSES_FOR_REWARD) * 100);
  }

  processInput(keyUpper, touchCoords = null, isSpace = false, isMobile = false) {
    this.audio.init();
    this.audio.resume();

    this.processReward(isMobile);

    if (Math.random() > 0.8) {
      this.visuals.triggerBackgroundPulse();
    }

    let displayEmoji = '';
    let displayText = '';
    
    // Normalize to capital letter for internal dictionary matching 
    // (since piano keys and spaces aren't letters, we safely use toUpperCase() only if it's a string)
    const dictKey = typeof keyUpper === 'string' ? keyUpper.toUpperCase() : keyUpper;
    
    if (pianoScale[keyUpper]) {
      const noteData = pianoScale[keyUpper];
      displayEmoji = noteData.e;
      displayText = `<span class="letter-badge">Note</span><br/><span class="word-badge">${noteData.note}</span>`;
      this.audio.playSound(noteData.freq, true); 
    } else if (alphabetDict[dictKey]) {
      if (this.letterCounters[dictKey] === undefined) this.letterCounters[dictKey] = 0;
      
      const item = alphabetDict[dictKey][this.letterCounters[dictKey]];
      this.letterCounters[dictKey] = (this.letterCounters[dictKey] + 1) % alphabetDict[dictKey].length;
      
      displayEmoji = item.e;
      // KeyUpper retains its capital/small display case, dictKey is just for lookup
      displayText = `<span class="letter-badge">${keyUpper} for</span><br/><span class="word-badge">${item.w}</span>`;
      
      this.audio.speakWord(`${keyUpper} for ${item.w}`, isMobile);
      this.audio.playSound(); 
    } else {
      displayEmoji = fallbackEmojis[Math.floor(Math.random() * fallbackEmojis.length)];
      if (isSpace && Math.random() > 0.5) {
        this.audio.speakWord("Whoosh!", isMobile);
      }
      this.audio.playSound();
    }

    this.visuals.spawnElement(displayEmoji, displayText, touchCoords);
  }
}