fix: use complete app.js with full UI logic

- Replace minimal app.js with full implementation from main
- Includes startNewGame, displayRound, event handlers, etc.
- Actually starts the game after initialization
- Properly manages UI state and user interactions

src/app.js

@@ -1,44 +1,319 @@
 // Main application entry point
-import ClozeGameEngine from './clozeGameEngine.js';
-import bookDataService from './bookDataService.js';
-import { AIService } from './aiService.js';
-import ChatInterface from './chatInterface.js';
-import ConversationManager from './conversationManager.js';
-
-class ClozeReaderApp {
-    constructor() {
-        this.bookDataService = bookDataService; // Already instantiated
-        this.aiService = new AIService();
-        this.gameEngine = new ClozeGameEngine();
-        this.chatInterface = new ChatInterface(this.gameEngine);
-        this.conversationManager = new ConversationManager(this.aiService);
-        
-        this.init();
-    }
-
-    async init() {
-        try {
-            // Start the game directly - bookDataService is already initialized
-            await this.gameEngine.initialize();
-            
-            // Chat interface is already initialized in constructor
-            
-            console.log('Cloze Reader application initialized successfully');
-        } catch (error) {
-            console.error('Failed to initialize application:', error);
-            this.showError('Failed to load the application. Please refresh the page.');
+import ClozeGame from './clozeGameEngine.js';
+import ChatUI from './chatInterface.js';
+
+class App {
+  constructor() {
+    this.game = new ClozeGame();
+    this.chatUI = new ChatUI(this.game);
+    this.elements = {
+      loading: document.getElementById('loading'),
+      gameArea: document.getElementById('game-area'),
+      bookInfo: document.getElementById('book-info'),
+      roundInfo: document.getElementById('round-info'),
+      contextualization: document.getElementById('contextualization'),
+      passageContent: document.getElementById('passage-content'),
+      hintsSection: document.getElementById('hints-section'),
+      hintsList: document.getElementById('hints-list'),
+      submitBtn: document.getElementById('submit-btn'),
+      nextBtn: document.getElementById('next-btn'),
+      hintBtn: document.getElementById('hint-btn'),
+      result: document.getElementById('result')
+    };
+    
+    this.currentResults = null;
+    this.setupEventListeners();
+  }
+
+  async initialize() {
+    try {
+      this.showLoading(true);
+      await this.game.initialize();
+      await this.startNewGame();
+      this.showLoading(false);
+    } catch (error) {
+      console.error('Failed to initialize app:', error);
+      this.showError('Failed to load the game. Please refresh and try again.');
+    }
+  }
+
+  setupEventListeners() {
+    this.elements.submitBtn.addEventListener('click', () => this.handleSubmit());
+    this.elements.nextBtn.addEventListener('click', () => this.handleNext());
+    this.elements.hintBtn.addEventListener('click', () => this.toggleHints());
+    
+    // Allow Enter key to submit when focused on an input
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && e.target.classList.contains('cloze-input')) {
+        this.handleSubmit();
+      }
+    });
+  }
+
+  async startNewGame() {
+    try {
+      const roundData = await this.game.startNewRound();
+      this.displayRound(roundData);
+      this.resetUI();
+    } catch (error) {
+      console.error('Error starting new game:', error);
+      this.showError('Could not load a new passage. Please try again.');
+    }
+  }
+
+  displayRound(roundData) {
+    // Show book information
+    this.elements.bookInfo.innerHTML = `
+      <strong>${roundData.title}</strong> by ${roundData.author}
+    `;
+
+    // Show level information without round number
+    const blanksCount = roundData.blanks.length;
+    const difficultyText = blanksCount === 1 ? 'Easy' : blanksCount === 2 ? 'Medium' : 'Hard';
+    this.elements.roundInfo.innerHTML = `Level ${this.game.currentLevel} • ${blanksCount} blank${blanksCount > 1 ? 's' : ''} • ${difficultyText}`;
+
+    // Show contextualization from AI agent
+    this.elements.contextualization.innerHTML = `
+      <div class="flex items-start gap-2">
+        <span class="text-blue-600">📚</span>
+        <span>${roundData.contextualization || 'Loading context...'}</span>
+      </div>
+    `;
+
+    // Render the cloze text with input fields and chat buttons
+    const clozeHtml = this.game.renderClozeTextWithChat();
+    this.elements.passageContent.innerHTML = `<p>${clozeHtml}</p>`;
+
+    // Store hints for later display
+    this.currentHints = roundData.hints || [];
+    this.populateHints();
+    
+    // Hide hints initially
+    this.elements.hintsSection.style.display = 'none';
+
+    // Set up input field listeners
+    this.setupInputListeners();
+    
+    // Set up chat buttons
+    this.chatUI.setupChatButtons();
+  }
+
+  setupInputListeners() {
+    const inputs = this.elements.passageContent.querySelectorAll('.cloze-input');
+    
+    inputs.forEach((input, index) => {
+      input.addEventListener('input', () => {
+        // Remove any previous styling
+        input.classList.remove('correct', 'incorrect');
+        this.updateSubmitButton();
+      });
+      
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          
+          // Move to next input or submit if last
+          const nextInput = inputs[index + 1];
+          if (nextInput) {
+            nextInput.focus();
+          } else {
+            this.handleSubmit();
+          }
+        }
+      });
+    });
+
+    // Focus first input
+    if (inputs.length > 0) {
+      inputs[0].focus();
+    }
+  }
+
+  updateSubmitButton() {
+    const inputs = this.elements.passageContent.querySelectorAll('.cloze-input');
+    const allFilled = Array.from(inputs).every(input => input.value.trim() !== '');
+    this.elements.submitBtn.disabled = !allFilled;
+  }
+
+  handleSubmit() {
+    const inputs = this.elements.passageContent.querySelectorAll('.cloze-input');
+    const answers = Array.from(inputs).map(input => input.value.trim());
+    
+    // Check if all fields are filled
+    if (answers.some(answer => answer === '')) {
+      alert('Please fill in all blanks before submitting.');
+      return;
+    }
+
+    // Submit answers and get results
+    this.currentResults = this.game.submitAnswers(answers);
+    this.displayResults(this.currentResults);
+    this.highlightAnswers(this.currentResults.results);
+  }
+
+  displayResults(results) {
+    let message = `Score: ${results.correct}/${results.total} (${results.percentage}%)`;
+    
+    // Only show "Required" information at Level 3 and above
+    if (this.game.currentLevel >= 3) {
+      message += ` - Required: ${results.requiredCorrect}/${results.total}`;
+    }
+    
+    if (results.passed) {
+      message += ` - Excellent! Advancing to Level ${this.game.currentLevel + 1}! 🎉`;
+      this.elements.result.className = 'mt-4 text-center font-semibold text-green-600';
+    } else {
+      if (this.game.currentLevel >= 3) {
+        message += ` - Need ${results.requiredCorrect} correct to advance. Keep practicing! 💪`;
+      } else {
+        message += ` - Keep practicing! 💪`;
+      }
+      this.elements.result.className = 'mt-4 text-center font-semibold text-red-600';
+    }
+    
+    this.elements.result.textContent = message;
+    
+    // Always reveal answers at the end of each round
+    this.revealAnswersInPlace(results.results);
+    
+    // Show next button and hide submit button
+    this.elements.submitBtn.style.display = 'none';
+    this.elements.nextBtn.classList.remove('hidden');
+  }
+
+  highlightAnswers(results) {
+    const inputs = this.elements.passageContent.querySelectorAll('.cloze-input');
+    
+    results.forEach((result, index) => {
+      const input = inputs[index];
+      if (input) {
+        if (result.isCorrect) {
+          input.classList.add('correct');
+        } else {
+          input.classList.add('incorrect');
+          // Show correct answer as placeholder or title
+          input.title = `Correct answer: ${result.correctAnswer}`;
         }
+        input.disabled = true;
+      }
+    });
+  }
+
+  async handleNext() {
+    try {
+      // Show loading immediately with specific message
+      this.showLoading(true, 'Loading next passage...');
+      
+      // Clear chat history when starting new round
+      this.chatUI.clearChatHistory();
+      
+      const roundData = await this.game.nextRound();
+      this.displayRound(roundData);
+      this.resetUI();
+      this.showLoading(false);
+    } catch (error) {
+      console.error('Error loading next round:', error);
+      this.showError('Could not load next passage. Please try again.');
     }
+  }
 
-    showError(message) {
-        const loadingElement = document.getElementById('loading');
-        if (loadingElement) {
-            loadingElement.innerHTML = `<p class="text-red-600">${message}</p>`;
+  // Reveal correct answers immediately after submission
+  revealAnswersInPlace(results) {
+    const inputs = this.elements.passageContent.querySelectorAll('.cloze-input');
+    
+    results.forEach((result, index) => {
+      const input = inputs[index];
+      if (input) {
+        if (result.isCorrect) {
+          input.classList.add('correct');
+          input.style.backgroundColor = '#dcfce7'; // Light green
+          input.style.borderColor = '#16a34a'; // Green border
+        } else {
+          input.classList.add('incorrect');
+          input.style.backgroundColor = '#fef2f2'; // Light red
+          input.style.borderColor = '#dc2626'; // Red border
+          
+          // Show correct answer below the input
+          const correctAnswerSpan = document.createElement('span');
+          correctAnswerSpan.className = 'text-sm text-green-600 font-semibold ml-2';
+          correctAnswerSpan.textContent = `✓ ${result.correctAnswer}`;
+          input.parentNode.appendChild(correctAnswerSpan);
         }
+        input.disabled = true;
+      }
+    });
+  }
+
+  populateHints() {
+    if (!this.currentHints || this.currentHints.length === 0) {
+      this.elements.hintsList.innerHTML = '<div class="text-yellow-600">No hints available for this passage.</div>';
+      return;
+    }
+
+    const hintsHtml = this.currentHints.map((hintData, index) => 
+      `<div class="flex items-start gap-2">
+        <span class="font-semibold text-yellow-800">${index + 1}.</span>
+        <span>${hintData.hint}</span>
+      </div>`
+    ).join('');
+    
+    this.elements.hintsList.innerHTML = hintsHtml;
+  }
+
+  toggleHints() {
+    const isHidden = this.elements.hintsSection.style.display === 'none';
+    this.elements.hintsSection.style.display = isHidden ? 'block' : 'none';
+    this.elements.hintBtn.textContent = isHidden ? 'Hide Hints' : 'Show Hints';
+  }
+
+  resetUI() {
+    this.elements.result.textContent = '';
+    this.elements.submitBtn.style.display = 'inline-block';
+    this.elements.submitBtn.disabled = true;
+    this.elements.nextBtn.classList.add('hidden');
+    this.elements.hintsSection.style.display = 'none';
+    this.elements.hintBtn.textContent = 'Show Hints';
+    this.currentResults = null;
+    this.currentHints = [];
+  }
+
+  showLoading(show, message = 'Loading passages...') {
+    if (show) {
+      this.elements.loading.innerHTML = `
+        <div class="text-center py-8">
+          <p class="text-lg loading-text">${message}</p>
+        </div>
+      `;
+      this.elements.loading.classList.remove('hidden');
+      this.elements.gameArea.classList.add('hidden');
+    } else {
+      this.elements.loading.classList.add('hidden');
+      this.elements.gameArea.classList.remove('hidden');
     }
+  }
+
+  showError(message) {
+    this.elements.loading.innerHTML = `
+      <div class="text-center py-8">
+        <p class="text-lg text-red-600 mb-4">${message}</p>
+        <button onclick="location.reload()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+          Reload
+        </button>
+      </div>
+    `;
+    this.elements.loading.classList.remove('hidden');
+    this.elements.gameArea.classList.add('hidden');
+  }
 }
 
-// Initialize the application when DOM is loaded
+// Initialize the app when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    new ClozeReaderApp();
+  const app = new App();
+  app.initialize();
+  
+  // Expose API key setter for browser console
+  window.setOpenRouterKey = (key) => {
+    app.game.chatService.aiService.setApiKey(key);
+    console.log('OpenRouter API key updated');
+  };
 });