🎉 All Letters Discovered!
Letters Discovered: ${this._discoveredLetters.length}
Words Learned: ${this._discoveredWords.length}
Final Score: ${this._score}
`;
// Set up button listeners
document.getElementById('start-practice-btn').addEventListener('click', () => {
this._startPractice();
});
document.getElementById('restart-btn').addEventListener('click', () => {
this._restart();
});
this._updateHUD();
}
_startPractice() {
this._currentPhase = 'practice';
this._practiceLevel = 1;
this._practiceRound = 0;
this._practiceCorrectAnswers = 0;
this._practiceErrors = 0;
// Create shuffled practice items from all discovered words
this._currentPracticeItems = this._shuffleArray([...this._discoveredWords]);
this._showPracticeChallenge();
}
_showPracticeChallenge() {
if (this._practiceRound >= this._config.maxPracticeRounds) {
this._endPractice();
return;
}
const currentItem = this._currentPracticeItems[this._practiceRound % this._currentPracticeItems.length];
const gameContent = document.getElementById('game-content');
// Generate options (correct + 3 random)
const allWords = this._discoveredWords.filter(w => w.word !== currentItem.word);
const randomOptions = this._shuffleArray([...allWords]).slice(0, 3);
const options = this._shuffleArray([currentItem, ...randomOptions]);
gameContent.innerHTML = `
What does "${currentItem.word}" mean?
${options.map((option, index) => `
`).join('')}
Correct: ${this._practiceCorrectAnswers}
Errors: ${this._practiceErrors}
Round: ${this._practiceRound + 1}/${this._config.maxPracticeRounds}
`;
// Set up option listeners
document.querySelectorAll('.practice-option').forEach(button => {
button.addEventListener('click', (e) => {
const selectedIndex = parseInt(e.target.dataset.optionIndex);
const selectedWord = e.target.dataset.word;
this._selectPracticeAnswer(selectedIndex, selectedWord);
});
});
// Store correct answer for checking
this._currentCorrectAnswer = currentItem.word;
this._updateHUD();
// Auto-play word if enabled
if (this._config.autoPlayTTS) {
setTimeout(() => this._playWordSound(currentItem.word), 500);
}
}
_selectPracticeAnswer(selectedIndex, selectedWord) {
const buttons = document.querySelectorAll('.practice-option');
const isCorrect = selectedWord === this._currentCorrectAnswer;
// Disable all buttons to prevent multiple clicks
buttons.forEach(btn => btn.disabled = true);
if (isCorrect) {
buttons[selectedIndex].classList.add('correct');
this._practiceCorrectAnswers++;
this._score += 10;
// Emit score update event
this._eventBus.emit('game:score-update', {
gameId: 'letter-discovery',
instanceId: this.name,
score: this._score
}, this.name);
} else {
buttons[selectedIndex].classList.add('incorrect');
this._practiceErrors++;
// Show correct answer
buttons.forEach((btn) => {
if (btn.dataset.word === this._currentCorrectAnswer) {
btn.classList.add('correct');
}
});
}
setTimeout(() => {
this._practiceRound++;
this._showPracticeChallenge();
}, 1500);
}
_endPractice() {
const accuracy = Math.round((this._practiceCorrectAnswers / this._config.maxPracticeRounds) * 100);
// Store best score
const gameKey = 'letter-discovery';
const currentScore = this._score;
const bestScore = parseInt(localStorage.getItem(`${gameKey}-best-score`) || '0');
const isNewBest = currentScore > bestScore;
if (isNewBest) {
localStorage.setItem(`${gameKey}-best-score`, currentScore.toString());
}
// Show victory popup
this._showVictoryPopup({
gameTitle: 'Letter Discovery',
currentScore,
bestScore: isNewBest ? currentScore : bestScore,
isNewBest,
stats: {
'Letters Found': this._discoveredLetters.length,
'Words Learned': this._discoveredWords.length,
'Practice Accuracy': `${accuracy}%`,
'Correct Answers': `${this._practiceCorrectAnswers}/${this._config.maxPracticeRounds}`
}
});
// Emit game completion event
this._eventBus.emit('game:completed', {
gameId: 'letter-discovery',
instanceId: this.name,
score: this._score,
lettersDiscovered: this._discoveredLetters.length,
wordsLearned: this._discoveredWords.length,
practiceAccuracy: accuracy
}, this.name);
this._updateHUD();
}
_restart() {
// Reset all game state
this._currentPhase = 'letter-discovery';
this._currentLetterIndex = 0;
this._discoveredLetters = [];
this._currentLetter = null;
this._currentWordIndex = 0;
this._discoveredWords = [];
this._score = 0;
this._lives = 3;
this._practiceLevel = 1;
this._practiceRound = 0;
this._practiceCorrectAnswers = 0;
this._practiceErrors = 0;
this._currentPracticeItems = [];
this._currentCorrectAnswer = null;
this._showLetterCard();
}
_shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
_speakText(text, options = {}) {
if (!text) return;
try {
if ('speechSynthesis' in window) {
speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = this._getContentLanguage();
utterance.rate = options.rate || this._config.ttsSpeed;
utterance.volume = 1.0;
speechSynthesis.speak(utterance);
}
} catch (error) {
console.warn('TTS error:', error);
}
}
_getContentLanguage() {
if (this._content.language) {
const langMap = {
'chinese': 'zh-CN',
'english': 'en-US',
'french': 'fr-FR',
'spanish': 'es-ES'
};
return langMap[this._content.language] || this._content.language;
}
return 'en-US';
}
_showError(message) {
if (this._config.container) {
this._config.container.innerHTML = `
Your Score
${currentScore}
${Object.entries(stats).map(([key, value]) => `
`).join('')}
`;
document.body.appendChild(popup);
// Animate in
requestAnimationFrame(() => {
popup.classList.add('show');
});
// Add event listeners
popup.querySelector('#play-again-btn').addEventListener('click', () => {
popup.remove();
this._restart();
});
popup.querySelector('#different-game-btn').addEventListener('click', () => {
popup.remove();
if (window.app && window.app.getCore().router) {
window.app.getCore().router.navigate('/games');
// Force content reload by re-emitting navigation event
setTimeout(() => {
const chapterId = window.currentChapterId || 'sbs';
this._eventBus.emit('navigation:games', {
path: `/games/${chapterId}`,
data: { path: `/games/${chapterId}` }
}, 'Application');
}, 100);
} else {
window.location.href = '/#/games';
}
});
popup.querySelector('#main-menu-btn').addEventListener('click', () => {
popup.remove();
if (window.app && window.app.getCore().router) {
window.app.getCore().router.navigate('/');
} else {
window.location.href = '/';
}
});
// Close on backdrop click
popup.addEventListener('click', (e) => {
if (e.target === popup) {
popup.remove();
if (window.app && window.app.getCore().router) {
window.app.getCore().router.navigate('/games');
// Force content reload by re-emitting navigation event
setTimeout(() => {
const chapterId = window.currentChapterId || 'sbs';
this._eventBus.emit('navigation:games', {
path: `/games/${chapterId}`,
data: { path: `/games/${chapterId}` }
}, 'Application');
}, 100);
} else {
window.location.href = '/#/games';
}
}
});
}
// Helper method to convert vocabulary to letters format
static _createLettersFromVocabulary(vocabulary) {
const letters = {};
Object.entries(vocabulary).forEach(([word, data]) => {
const firstLetter = word.charAt(0).toUpperCase();
if (!letters[firstLetter]) {
letters[firstLetter] = [];
}
letters[firstLetter].push({
word: word,
translation: data.user_language || data.translation || data,
type: data.type || 'word',
pronunciation: data.pronunciation
});
});
return letters;
}
}
export default LetterDiscovery;