${spell.icon} ${spell.name}
@@ -1418,23 +1582,572 @@ class WizardSpellCaster extends Module {
_showSpellEffect(type) {
const enemyChar = document.querySelector('.enemy-character');
+ if (!enemyChar) {
+ console.warn('Enemy character not found, skipping spell effect');
+ return;
+ }
const rect = enemyChar.getBoundingClientRect();
- // Main spell effect
- const effect = document.createElement('div');
- effect.className = `spell-effect ${type}-effect`;
- effect.style.position = 'fixed';
- effect.style.left = rect.left + rect.width/2 - 50 + 'px';
- effect.style.top = rect.top + rect.height/2 - 50 + 'px';
- document.body.appendChild(effect);
+ // Special animations for different spell types
+ if (type === 'short' || type === 'fire') {
+ this._launchFireball(rect);
+ } else if (type === 'medium' || type === 'lightning') {
+ this._launchLightning(rect);
+ } else if (type === 'long' || type === 'meteor') {
+ this._launchMeteor(rect);
+ } else {
+ // Main spell effect for other types
+ const effect = document.createElement('div');
+ effect.className = `spell-effect ${type}-effect`;
+ effect.style.position = 'fixed';
+ effect.style.left = rect.left + rect.width/2 - 50 + 'px';
+ effect.style.top = rect.top + rect.height/2 - 50 + 'px';
+ document.body.appendChild(effect);
+
+ setTimeout(() => {
+ effect.remove();
+ }, 800);
+ }
// Enhanced effects based on spell type
this._createSpellParticles(type, rect);
this._triggerSpellAnimation(type, enemyChar);
+ }
+ _launchFireball(targetRect) {
+ const wizardChar = document.querySelector('.wizard-character');
+ const wizardRect = wizardChar.getBoundingClientRect();
+
+ // Create fireball
+ const fireball = document.createElement('div');
+ fireball.className = 'fireball-projectile';
+
+ const startX = wizardRect.left + wizardRect.width / 2 - 30;
+ const startY = wizardRect.top + wizardRect.height / 2 - 30;
+ const endX = targetRect.left + targetRect.width / 2 - 30;
+ const endY = targetRect.top + targetRect.height / 2 - 30;
+
+ fireball.style.left = startX + 'px';
+ fireball.style.top = startY + 'px';
+
+ document.body.appendChild(fireball);
+
+ // Animation parameters
+ const duration = 500; // milliseconds
+ const startTime = Date.now();
+ const trailInterval = 30; // Create trail every 30ms
+ let lastTrailTime = 0;
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // Easing function (ease-in-out)
+ const eased = progress < 0.5
+ ? 2 * progress * progress
+ : -1 + (4 - 2 * progress) * progress;
+
+ // Calculate current position
+ const currentX = startX + (endX - startX) * eased;
+ const currentY = startY + (endY - startY) * eased;
+
+ fireball.style.left = currentX + 'px';
+ fireball.style.top = currentY + 'px';
+
+ // Create trail effect
+ if (elapsed - lastTrailTime > trailInterval) {
+ this._createFireballTrail(currentX + 30, currentY + 30);
+ this._createFireballSparks(currentX + 30, currentY + 30);
+ lastTrailTime = elapsed;
+ }
+
+ // Continue animation or finish
+ if (progress < 1) {
+ requestAnimationFrame(animate);
+ } else {
+ // Impact effect
+ fireball.remove();
+ this._createFireballImpact(endX + 30, endY + 30);
+ }
+ };
+
+ animate();
+ }
+
+ _createFireballTrail(x, y) {
+ const trail = document.createElement('div');
+ trail.className = 'fireball-trail';
+ trail.style.left = (x - 20) + 'px';
+ trail.style.top = (y - 20) + 'px';
+ document.body.appendChild(trail);
+
+ setTimeout(() => trail.remove(), 500);
+ }
+
+ _createFireballSparks(x, y) {
+ const sparkCount = 3;
+ for (let i = 0; i < sparkCount; i++) {
+ const spark = document.createElement('div');
+ spark.className = 'fireball-spark';
+
+ const angle = Math.random() * Math.PI * 2;
+ const distance = 20 + Math.random() * 30;
+ const sparkX = x + Math.cos(angle) * distance;
+ const sparkY = y + Math.sin(angle) * distance;
+
+ spark.style.left = sparkX + 'px';
+ spark.style.top = sparkY + 'px';
+
+ document.body.appendChild(spark);
+
+ // Animate spark
+ const duration = 300 + Math.random() * 200;
+ const startTime = Date.now();
+ const startSparkX = sparkX;
+ const startSparkY = sparkY;
+ const velocityX = (Math.random() - 0.5) * 100;
+ const velocityY = Math.random() * 50 - 100;
+
+ const animateSpark = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const newX = startSparkX + velocityX * progress;
+ const newY = startSparkY + velocityY * progress + (progress * progress * 100);
+ spark.style.left = newX + 'px';
+ spark.style.top = newY + 'px';
+ spark.style.opacity = 1 - progress;
+ requestAnimationFrame(animateSpark);
+ } else {
+ spark.remove();
+ }
+ };
+
+ animateSpark();
+ }
+ }
+
+ _createFireballImpact(x, y) {
+ // Main explosion
+ const explosion = document.createElement('div');
+ explosion.className = 'spell-effect fire-effect';
+ explosion.style.position = 'fixed';
+ explosion.style.left = (x - 50) + 'px';
+ explosion.style.top = (y - 50) + 'px';
+ document.body.appendChild(explosion);
+
+ setTimeout(() => explosion.remove(), 800);
+
+ // Impact sparks
+ const impactSparkCount = 12;
+ for (let i = 0; i < impactSparkCount; i++) {
+ const angle = (i / impactSparkCount) * Math.PI * 2;
+ const spark = document.createElement('div');
+ spark.className = 'fireball-spark';
+ spark.style.left = x + 'px';
+ spark.style.top = y + 'px';
+ spark.style.width = '12px';
+ spark.style.height = '12px';
+
+ document.body.appendChild(spark);
+
+ const distance = 60 + Math.random() * 40;
+ const duration = 400;
+ const startTime = Date.now();
+
+ const animateImpactSpark = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDistance = distance * progress;
+ const newX = x + Math.cos(angle) * currentDistance;
+ const newY = y + Math.sin(angle) * currentDistance;
+ spark.style.left = newX + 'px';
+ spark.style.top = newY + 'px';
+ spark.style.opacity = 1 - progress;
+ spark.style.transform = `scale(${1 - progress * 0.5})`;
+ requestAnimationFrame(animateImpactSpark);
+ } else {
+ spark.remove();
+ }
+ };
+
+ animateImpactSpark();
+ }
+ }
+
+ _launchLightning(targetRect) {
+ const wizardChar = document.querySelector('.wizard-character');
+ const wizardRect = wizardChar.getBoundingClientRect();
+
+ const startX = wizardRect.left + wizardRect.width / 2;
+ const startY = wizardRect.top + wizardRect.height / 2;
+ const endX = targetRect.left + targetRect.width / 2;
+ const endY = targetRect.top + targetRect.height / 2;
+
+ // Screen flash
+ const flash = document.createElement('div');
+ flash.className = 'lightning-flash';
+ document.body.appendChild(flash);
+ setTimeout(() => flash.remove(), 300);
+
+ // Create lightning bolt with jagged segments
+ const boltContainer = document.createElement('div');
+ boltContainer.className = 'lightning-bolt';
+ document.body.appendChild(boltContainer);
+
+ const segments = 8;
+ const points = [{ x: startX, y: startY }];
+
+ // Generate jagged lightning path
+ for (let i = 1; i < segments; i++) {
+ const progress = i / segments;
+ const baseX = startX + (endX - startX) * progress;
+ const baseY = startY + (endY - startY) * progress;
+
+ // Add random offset for jagged effect
+ const offsetX = (Math.random() - 0.5) * 60;
+ const offsetY = (Math.random() - 0.5) * 60;
+
+ points.push({
+ x: baseX + offsetX,
+ y: baseY + offsetY
+ });
+ }
+
+ points.push({ x: endX, y: endY });
+
+ // Draw lightning segments
+ for (let i = 0; i < points.length - 1; i++) {
+ const segment = document.createElement('div');
+ segment.className = 'lightning-segment';
+
+ const dx = points[i + 1].x - points[i].x;
+ const dy = points[i + 1].y - points[i].y;
+ const length = Math.sqrt(dx * dx + dy * dy);
+ const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+ segment.style.left = points[i].x + 'px';
+ segment.style.top = points[i].y + 'px';
+ segment.style.width = length + 'px';
+ segment.style.height = (3 + Math.random() * 3) + 'px';
+ segment.style.transform = `rotate(${angle}deg)`;
+
+ boltContainer.appendChild(segment);
+ }
+
+ // Create electric sparks along the path
+ for (let i = 0; i < 15; i++) {
+ setTimeout(() => {
+ const pointIndex = Math.floor(Math.random() * points.length);
+ const point = points[pointIndex];
+ this._createLightningSpark(point.x, point.y);
+ }, i * 30);
+ }
+
+ // Remove lightning bolt after animation
setTimeout(() => {
- effect.remove();
- }, 800);
+ boltContainer.remove();
+ }, 400);
+
+ // Impact effect
+ setTimeout(() => {
+ this._createLightningImpact(endX, endY);
+ }, 200);
+ }
+
+ _createLightningSpark(x, y) {
+ const spark = document.createElement('div');
+ spark.className = 'lightning-spark';
+ spark.style.left = x + 'px';
+ spark.style.top = y + 'px';
+ document.body.appendChild(spark);
+
+ const angle = Math.random() * Math.PI * 2;
+ const distance = 30 + Math.random() * 40;
+ const duration = 300;
+ const startTime = Date.now();
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDist = distance * progress;
+ const newX = x + Math.cos(angle) * currentDist;
+ const newY = y + Math.sin(angle) * currentDist;
+ spark.style.left = newX + 'px';
+ spark.style.top = newY + 'px';
+ spark.style.opacity = 1 - progress;
+ requestAnimationFrame(animate);
+ } else {
+ spark.remove();
+ }
+ };
+
+ animate();
+ }
+
+ _createLightningImpact(x, y) {
+ // Main impact explosion
+ const explosion = document.createElement('div');
+ explosion.className = 'spell-effect lightning-effect';
+ explosion.style.position = 'fixed';
+ explosion.style.left = (x - 50) + 'px';
+ explosion.style.top = (y - 50) + 'px';
+ document.body.appendChild(explosion);
+
+ setTimeout(() => explosion.remove(), 800);
+
+ // Electric burst
+ for (let i = 0; i < 20; i++) {
+ const spark = document.createElement('div');
+ spark.className = 'lightning-spark';
+ const angle = (i / 20) * Math.PI * 2;
+ const distance = 40 + Math.random() * 60;
+
+ spark.style.left = x + 'px';
+ spark.style.top = y + 'px';
+ document.body.appendChild(spark);
+
+ const duration = 400 + Math.random() * 200;
+ const startTime = Date.now();
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDist = distance * progress;
+ const newX = x + Math.cos(angle) * currentDist;
+ const newY = y + Math.sin(angle) * currentDist;
+ spark.style.left = newX + 'px';
+ spark.style.top = newY + 'px';
+ spark.style.opacity = 1 - progress;
+ spark.style.transform = `scale(${1 - progress * 0.7})`;
+ requestAnimationFrame(animate);
+ } else {
+ spark.remove();
+ }
+ };
+
+ animate();
+ }
+ }
+
+ _launchMeteor(targetRect) {
+ // Create meteor starting from top of screen
+ const meteor = document.createElement('div');
+ meteor.className = 'meteor-projectile';
+
+ // Random horizontal start position (from above the screen)
+ const startX = targetRect.left + targetRect.width / 2 + (Math.random() - 0.5) * 300;
+ const startY = -100; // Start above viewport
+ const endX = targetRect.left + targetRect.width / 2 - 40;
+ const endY = targetRect.top + targetRect.height / 2 - 40;
+
+ meteor.style.left = startX + 'px';
+ meteor.style.top = startY + 'px';
+
+ document.body.appendChild(meteor);
+
+ // Animation parameters
+ const duration = 800; // milliseconds
+ const startTime = Date.now();
+ const trailInterval = 25;
+ let lastTrailTime = 0;
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // Accelerating fall (quadratic easing)
+ const eased = progress * progress;
+
+ // Calculate current position
+ const currentX = startX + (endX - startX) * progress;
+ const currentY = startY + (endY - startY) * eased;
+
+ meteor.style.left = currentX + 'px';
+ meteor.style.top = currentY + 'px';
+
+ // Rotate meteor as it falls
+ meteor.style.transform = `rotate(${progress * 360}deg) scale(${1 + progress * 0.5})`;
+
+ // Create trail effect
+ if (elapsed - lastTrailTime > trailInterval) {
+ this._createMeteorTrail(currentX + 40, currentY + 40);
+ this._createMeteorDebris(currentX + 40, currentY + 40);
+ lastTrailTime = elapsed;
+ }
+
+ // Continue animation or finish
+ if (progress < 1) {
+ requestAnimationFrame(animate);
+ } else {
+ // Impact effect
+ meteor.remove();
+ this._createMeteorImpact(endX + 40, endY + 40);
+ }
+ };
+
+ animate();
+ }
+
+ _createMeteorTrail(x, y) {
+ const trail = document.createElement('div');
+ trail.className = 'meteor-trail';
+ trail.style.left = (x - 30) + 'px';
+ trail.style.top = (y - 30) + 'px';
+ document.body.appendChild(trail);
+
+ setTimeout(() => trail.remove(), 600);
+ }
+
+ _createMeteorDebris(x, y) {
+ const debrisCount = 2;
+ for (let i = 0; i < debrisCount; i++) {
+ const debris = document.createElement('div');
+ debris.className = 'meteor-debris';
+
+ // Debris flies off to the sides
+ const angle = Math.PI / 2 + (Math.random() - 0.5) * Math.PI;
+ const distance = 30 + Math.random() * 40;
+
+ debris.style.left = x + 'px';
+ debris.style.top = y + 'px';
+
+ document.body.appendChild(debris);
+
+ const duration = 400 + Math.random() * 200;
+ const startTime = Date.now();
+
+ const animateDebris = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDist = distance * progress;
+ const newX = x + Math.cos(angle) * currentDist;
+ const newY = y + Math.sin(angle) * currentDist + (progress * progress * 80);
+ debris.style.left = newX + 'px';
+ debris.style.top = newY + 'px';
+ debris.style.opacity = 1 - progress;
+ debris.style.transform = `rotate(${progress * 720}deg) scale(${1 - progress})`;
+ requestAnimationFrame(animateDebris);
+ } else {
+ debris.remove();
+ }
+ };
+
+ animateDebris();
+ }
+ }
+
+ _createMeteorImpact(x, y) {
+ // Screen shake on impact
+ document.body.classList.add('screen-shake');
+ setTimeout(() => document.body.classList.remove('screen-shake'), 500);
+
+ // Main explosion crater effect
+ const explosion = document.createElement('div');
+ explosion.className = 'spell-effect meteor-effect';
+ explosion.style.position = 'fixed';
+ explosion.style.left = (x - 50) + 'px';
+ explosion.style.top = (y - 50) + 'px';
+ document.body.appendChild(explosion);
+
+ setTimeout(() => explosion.remove(), 800);
+
+ // Shockwave rings
+ for (let i = 0; i < 3; i++) {
+ setTimeout(() => {
+ const shockwave = document.createElement('div');
+ shockwave.className = 'meteor-shockwave';
+ shockwave.style.left = x + 'px';
+ shockwave.style.top = y + 'px';
+ document.body.appendChild(shockwave);
+
+ setTimeout(() => shockwave.remove(), 800);
+ }, i * 100);
+ }
+
+ // Impact debris explosion
+ const debrisCount = 20;
+ for (let i = 0; i < debrisCount; i++) {
+ const debris = document.createElement('div');
+ debris.className = 'meteor-debris';
+ const angle = (i / debrisCount) * Math.PI * 2;
+ const distance = 50 + Math.random() * 80;
+
+ debris.style.left = x + 'px';
+ debris.style.top = y + 'px';
+ debris.style.width = (6 + Math.random() * 8) + 'px';
+ debris.style.height = (6 + Math.random() * 8) + 'px';
+
+ document.body.appendChild(debris);
+
+ const duration = 600 + Math.random() * 400;
+ const startTime = Date.now();
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDist = distance * progress;
+ const newX = x + Math.cos(angle) * currentDist;
+ const newY = y + Math.sin(angle) * currentDist - (50 * progress) + (progress * progress * 100);
+ debris.style.left = newX + 'px';
+ debris.style.top = newY + 'px';
+ debris.style.opacity = 1 - progress;
+ debris.style.transform = `rotate(${progress * 1080}deg) scale(${1 - progress * 0.5})`;
+ requestAnimationFrame(animate);
+ } else {
+ debris.remove();
+ }
+ };
+
+ animate();
+ }
+
+ // Purple impact sparks
+ for (let i = 0; i < 12; i++) {
+ const spark = document.createElement('div');
+ spark.className = 'meteor-spark';
+ const angle = (i / 12) * Math.PI * 2;
+ const distance = 60 + Math.random() * 50;
+
+ spark.style.left = x + 'px';
+ spark.style.top = y + 'px';
+
+ document.body.appendChild(spark);
+
+ const duration = 500;
+ const startTime = Date.now();
+
+ const animate = () => {
+ const elapsed = Date.now() - startTime;
+ const progress = elapsed / duration;
+
+ if (progress < 1) {
+ const currentDist = distance * (1 - Math.pow(1 - progress, 3));
+ const newX = x + Math.cos(angle) * currentDist;
+ const newY = y + Math.sin(angle) * currentDist;
+ spark.style.left = newX + 'px';
+ spark.style.top = newY + 'px';
+ spark.style.opacity = 1 - progress;
+ spark.style.transform = `scale(${1 - progress * 0.8})`;
+ requestAnimationFrame(animate);
+ } else {
+ spark.remove();
+ }
+ };
+
+ animate();
+ }
}
_createSpellParticles(type, enemyRect) {
@@ -1599,7 +2312,10 @@ class WizardSpellCaster extends Module {
_wizardTakesDamage() {
this._playerHP = Math.max(0, this._playerHP - 10);
- document.getElementById('player-health').style.width = this._playerHP + '%';
+ const playerHealthEl = document.getElementById('player-health');
+ if (playerHealthEl) {
+ playerHealthEl.style.width = this._playerHP + '%';
+ }
document.body.classList.add('screen-shake');
setTimeout(() => {
@@ -1612,6 +2328,10 @@ class WizardSpellCaster extends Module {
damageEl.style.color = '#ff4757';
const wizardChar = document.querySelector('.wizard-character');
+ if (!wizardChar) {
+ console.warn('Wizard character not found, skipping damage display');
+ return;
+ }
const rect = wizardChar.getBoundingClientRect();
damageEl.style.position = 'fixed';
@@ -1741,7 +2461,10 @@ class WizardSpellCaster extends Module {
Math.floor(Math.random() * (this._config.enemyDamage.max - this._config.enemyDamage.min + 1));
this._playerHP = Math.max(0, this._playerHP - damage);
- document.getElementById('player-health').style.width = this._playerHP + '%';
+ const playerHealthEl = document.getElementById('player-health');
+ if (playerHealthEl) {
+ playerHealthEl.style.width = this._playerHP + '%';
+ }
document.body.classList.add('screen-shake');
setTimeout(() => {
@@ -1754,6 +2477,10 @@ class WizardSpellCaster extends Module {
damageEl.style.color = '#ff4757';
const wizardChar = document.querySelector('.wizard-character');
+ if (!wizardChar) {
+ console.warn('Wizard character not found, skipping damage display');
+ return;
+ }
const rect = wizardChar.getBoundingClientRect();
damageEl.style.position = 'fixed';
@@ -1896,9 +2623,18 @@ class WizardSpellCaster extends Module {
this._selectedWords = [];
// Update UI
- document.getElementById('current-score').textContent = this._score;
- document.getElementById('player-health').style.width = '100%';
- document.getElementById('enemy-health').style.width = '100%';
+ const currentScoreEl = document.getElementById('current-score');
+ if (currentScoreEl) {
+ currentScoreEl.textContent = this._score;
+ }
+ const playerHealthEl = document.getElementById('player-health');
+ if (playerHealthEl) {
+ playerHealthEl.style.width = '100%';
+ }
+ const enemyHealthEl = document.getElementById('enemy-health');
+ if (enemyHealthEl) {
+ enemyHealthEl.style.width = '100%';
+ }
// Restart enemy attacks
this._startEnemyAttackSystem();
diff --git a/src/games/WordDiscovery.js b/src/games/WordDiscovery.js
index f15a6e4..6745bb0 100644
--- a/src/games/WordDiscovery.js
+++ b/src/games/WordDiscovery.js
@@ -34,6 +34,15 @@ class WordDiscovery extends Module {
this._correctAnswer = null;
this._currentQuestion = null;
+ // Session progress tracking (5 discovery / 3 practice cycle)
+ this._sessionDiscoveryCount = 0; // Words discovered in current cycle
+ this._sessionPracticeCount = 0; // Practice questions answered in current cycle
+ this._totalDiscoveryCount = 0; // Total discoveries in session
+ this._totalPracticeCount = 0; // Total practice questions in session
+ this._cycleDiscoveryMax = 5; // Discover 5 words
+ this._cyclePracticeMax = 3; // Then 3 practice questions
+ this._totalWordsAvailable = 0; // Total vocab words (e.g., 76)
+
Object.seal(this);
}
@@ -134,12 +143,13 @@ class WordDiscovery extends Module {
example: data.example
}));
- this._discoveredWords = [];
- this._currentWordIndex = 0;
- this._currentPhase = 'discovery';
+ this._totalWordsAvailable = this._practiceWords.length;
+
+ // Restore session or start fresh
+ this._restoreSession();
await this._preloadAssets();
- this._renderDiscoveryPhase();
+ this._renderCurrentPhase();
// Emit game ready event
this._eventBus.emit('game:ready', {
@@ -240,6 +250,129 @@ class WordDiscovery extends Module {
}
}
+ /**
+ * Save current session state to sessionStorage
+ * @private
+ */
+ _saveSession() {
+ const sessionData = {
+ currentPhase: this._currentPhase,
+ sessionDiscoveryCount: this._sessionDiscoveryCount,
+ sessionPracticeCount: this._sessionPracticeCount,
+ totalDiscoveryCount: this._totalDiscoveryCount,
+ totalPracticeCount: this._totalPracticeCount,
+ currentWordIndex: this._currentWordIndex,
+ discoveredWords: this._discoveredWords.map(w => w.word),
+ practiceCorrect: this._practiceCorrect,
+ practiceTotal: this._practiceTotal
+ };
+
+ sessionStorage.setItem('wordDiscovery_session', JSON.stringify(sessionData));
+ }
+
+ /**
+ * Restore session state from sessionStorage or start fresh
+ * @private
+ */
+ _restoreSession() {
+ const savedData = sessionStorage.getItem('wordDiscovery_session');
+
+ if (savedData) {
+ try {
+ const session = JSON.parse(savedData);
+ this._currentPhase = session.currentPhase || 'discovery';
+ this._sessionDiscoveryCount = session.sessionDiscoveryCount || 0;
+ this._sessionPracticeCount = session.sessionPracticeCount || 0;
+ this._totalDiscoveryCount = session.totalDiscoveryCount || 0;
+ this._totalPracticeCount = session.totalPracticeCount || 0;
+ this._currentWordIndex = session.currentWordIndex || 0;
+ this._practiceCorrect = session.practiceCorrect || 0;
+ this._practiceTotal = session.practiceTotal || 0;
+
+ // Restore discovered words
+ if (session.discoveredWords && Array.isArray(session.discoveredWords)) {
+ this._discoveredWords = this._practiceWords.filter(w =>
+ session.discoveredWords.includes(w.word)
+ );
+ }
+
+ console.log('📖 Session restored:', session);
+ } catch (error) {
+ console.warn('Failed to restore session:', error);
+ this._startFreshSession();
+ }
+ } else {
+ this._startFreshSession();
+ }
+ }
+
+ /**
+ * Start a fresh session (reset all counters)
+ * @private
+ */
+ _startFreshSession() {
+ this._discoveredWords = [];
+ this._currentWordIndex = 0;
+ this._currentPhase = 'discovery';
+ this._sessionDiscoveryCount = 0;
+ this._sessionPracticeCount = 0;
+ this._totalDiscoveryCount = 0;
+ this._totalPracticeCount = 0;
+ this._practiceCorrect = 0;
+ this._practiceTotal = 0;
+ }
+
+ /**
+ * Calculate total progress including both discovery and practice
+ * Total = totalWordsAvailable + (totalWordsAvailable * 3/5)
+ * @private
+ */
+ _calculateTotalProgress() {
+ const maxDiscovery = this._totalWordsAvailable;
+ const maxPractice = Math.floor(this._totalWordsAvailable * 3 / 5);
+ const totalMax = maxDiscovery + maxPractice;
+ const currentProgress = this._totalDiscoveryCount + this._totalPracticeCount;
+
+ return {
+ current: currentProgress,
+ max: totalMax,
+ percentage: totalMax > 0 ? (currentProgress / totalMax) * 100 : 0
+ };
+ }
+
+ /**
+ * Determine if we should switch phases based on cycle counts
+ * @private
+ */
+ _shouldSwitchPhase() {
+ if (this._currentPhase === 'discovery') {
+ return this._sessionDiscoveryCount >= this._cycleDiscoveryMax;
+ } else {
+ return this._sessionPracticeCount >= this._cyclePracticeMax;
+ }
+ }
+
+ /**
+ * Render the appropriate phase based on current state
+ * @private
+ */
+ _renderCurrentPhase() {
+ // Check if we've completed everything
+ const maxDiscovery = this._totalWordsAvailable;
+ const maxPractice = Math.floor(this._totalWordsAvailable * 3 / 5);
+
+ if (this._totalDiscoveryCount >= maxDiscovery && this._totalPracticeCount >= maxPractice) {
+ this._showCompletionScreen();
+ return;
+ }
+
+ if (this._currentPhase === 'discovery') {
+ this._renderDiscoveryPhase();
+ } else {
+ this._renderPracticePhase();
+ }
+ }
+
async _preloadAssets() {
for (const word of this._practiceWords) {
if (word.audio) {
@@ -271,20 +404,41 @@ class WordDiscovery extends Module {
}
_renderDiscoveryPhase() {
- const word = this._practiceWords[this._currentWordIndex];
- if (!word) {
- this._startPracticePhase();
+ // Check if we've discovered all words
+ if (this._totalDiscoveryCount >= this._totalWordsAvailable) {
+ this._currentPhase = 'practice';
+ this._renderPracticePhase();
return;
}
+ // Check if we need to switch to practice (5 discoveries done in this cycle)
+ if (this._shouldSwitchPhase()) {
+ this._currentPhase = 'practice';
+ this._sessionPracticeCount = 0; // Reset practice counter for new cycle
+ this._saveSession();
+ this._renderPracticePhase();
+ return;
+ }
+
+ const word = this._practiceWords[this._currentWordIndex];
+ if (!word) {
+ // No more words, finish discovery
+ this._currentPhase = 'practice';
+ this._renderPracticePhase();
+ return;
+ }
+
+ const progress = this._calculateTotalProgress();
+
this._gameContainer.innerHTML = `
@@ -311,12 +465,6 @@ class WordDiscovery extends Module {
-
-
-
-
`;
@@ -332,10 +480,13 @@ class WordDiscovery extends Module {
const currentWord = this._practiceWords[this._currentWordIndex];
if (currentWord && !this._discoveredWords.find(w => w.word === currentWord.word)) {
this._discoveredWords.push(currentWord);
+ this._sessionDiscoveryCount++;
+ this._totalDiscoveryCount++;
}
this._currentWordIndex++;
- this._renderDiscoveryPhase();
+ this._saveSession();
+ this._renderCurrentPhase();
}
_playAudio(word) {
@@ -433,35 +584,49 @@ class WordDiscovery extends Module {
});
}
- _startPracticePhase() {
- if (this._discoveredWords.length === 0) {
- this._discoveredWords = [...this._practiceWords];
+ _renderPracticePhase() {
+ // Check if we've completed all practice (max = totalWords * 3/5)
+ const maxPractice = Math.floor(this._totalWordsAvailable * 3 / 5);
+ if (this._totalPracticeCount >= maxPractice) {
+ // All practice done, switch back to discovery or finish
+ if (this._totalDiscoveryCount < this._totalWordsAvailable) {
+ this._currentPhase = 'discovery';
+ this._sessionDiscoveryCount = 0;
+ this._saveSession();
+ this._renderDiscoveryPhase();
+ } else {
+ this._showCompletionScreen();
+ }
+ return;
}
- this._currentPhase = 'practice';
- this._currentPracticeLevel = 0;
- this._practiceCorrect = 0;
- this._practiceTotal = 0;
+ // Check if we need to switch back to discovery (3 practice done in this cycle)
+ if (this._shouldSwitchPhase()) {
+ this._currentPhase = 'discovery';
+ this._sessionDiscoveryCount = 0; // Reset discovery counter for new cycle
+ this._saveSession();
+ this._renderDiscoveryPhase();
+ return;
+ }
- this._renderPracticeLevel();
- }
+ if (this._discoveredWords.length === 0) {
+ // No words to practice yet
+ this._currentPhase = 'discovery';
+ this._renderDiscoveryPhase();
+ return;
+ }
- _renderPracticeLevel() {
- const levels = ['Easy', 'Medium', 'Hard', 'Expert'];
- const levelConfig = {
- 0: { options: 4, type: 'translation' },
- 1: { options: 3, type: 'mixed' },
- 2: { options: 4, type: 'definition' },
- 3: { options: 4, type: 'context' }
- };
-
- const config = levelConfig[this._currentPracticeLevel];
- const levelName = levels[this._currentPracticeLevel];
+ const progress = this._calculateTotalProgress();
+ const config = { options: 4, type: 'translation' }; // Simple translation questions
this._gameContainer.innerHTML = `
`;
- this._generateAnswerOptions();
+ // Answer buttons will be populated when first word spawns
}
_setupEventListeners() {
@@ -718,6 +718,9 @@ class WordStorm extends Module {
const word = this._vocabulary[this._currentWordIndex % this._vocabulary.length];
this._currentWordIndex++;
+ // Generate options for THIS specific word
+ const options = this._generateOptionsForWord(word);
+
const gameArea = document.getElementById('game-area');
const wordElement = document.createElement('div');
wordElement.className = 'falling-word';
@@ -734,27 +737,22 @@ class WordStorm extends Module {
return;
}
- const gameArea = document.getElementById('game-area');
- if (!gameArea) {
+ const answerPanel = document.getElementById('answer-panel');
+ if (!answerPanel) {
clearInterval(positionCheck);
return;
}
// Get positions using getBoundingClientRect for accuracy
const wordRect = wordElement.getBoundingClientRect();
- const gameAreaRect = gameArea.getBoundingClientRect();
+ const answerPanelRect = answerPanel.getBoundingClientRect();
- // Calculate word's position relative to game area
- const wordTop = wordRect.top;
- const wordHeight = wordRect.height;
- const gameAreaBottom = gameAreaRect.bottom;
+ // Calculate word's bottom edge position
+ const wordBottom = wordRect.bottom;
+ const panelTop = answerPanelRect.top;
- // Destroy when word's bottom edge nears the bottom of the game area
- // Use larger margin to ensure word stays visible until destruction
- const wordBottom = wordTop + wordHeight;
- const threshold = gameAreaBottom - 100; // 100px margin before bottom
-
- if (wordBottom >= threshold) {
+ // Destroy when word's bottom edge touches the answer panel
+ if (wordBottom >= panelTop) {
clearInterval(positionCheck);
if (wordElement.parentNode) {
this._missWord(wordElement);
@@ -763,15 +761,18 @@ class WordStorm extends Module {
}, 50); // Check every 50ms for smooth detection
- this._fallingWords.push({
+ const fallingWordData = {
element: wordElement,
word: word,
+ options: options, // Store options with this word
startTime: Date.now(),
positionCheck: positionCheck
- });
+ };
- // Generate new answer options when word spawns
- this._generateAnswerOptions();
+ this._fallingWords.push(fallingWordData);
+
+ // Update answer panel with the OLDEST word's options (first word still falling)
+ this._updateAnswerPanelForOldestWord();
// Animate falling
this._animateFalling(wordElement);
@@ -797,16 +798,11 @@ class WordStorm extends Module {
}, 50);
}
- _generateAnswerOptions() {
- if (this._vocabulary.length === 0) return;
-
+ _generateOptionsForWord(word) {
const buttons = [];
- const correctWord = this._fallingWords.length > 0 ?
- this._fallingWords[this._fallingWords.length - 1].word :
- this._vocabulary[0];
// Add correct answer
- buttons.push(correctWord.translation);
+ buttons.push(word.translation);
// Add 3 random incorrect answers
while (buttons.length < 4) {
@@ -816,13 +812,24 @@ class WordStorm extends Module {
}
}
- // Shuffle buttons
- this._shuffleArray(buttons);
+ // Shuffle and return
+ return this._shuffleArray(buttons);
+ }
+
+ _updateAnswerPanelForOldestWord() {
+ // Find the oldest word still falling (first in array)
+ const activeFallingWords = this._fallingWords.filter(fw => fw.element.parentNode);
+
+ if (activeFallingWords.length === 0) return;
+
+ // Use the OLDEST word's options
+ const oldestWord = activeFallingWords[0];
+ const options = oldestWord.options;
// Update answer panel
const answerButtons = document.getElementById('answer-buttons');
if (answerButtons) {
- answerButtons.innerHTML = buttons.map(answer =>
+ answerButtons.innerHTML = options.map(answer =>
``
).join('');
}
@@ -892,6 +899,9 @@ class WordStorm extends Module {
// Add points popup animation
this._showPointsPopup(points, fallingWord.element);
+ // Update answer panel to show next word's options
+ this._updateAnswerPanelForOldestWord();
+
// Vibration feedback (if supported)
if (navigator.vibrate) {
navigator.vibrate([50, 30, 50]);
@@ -1002,9 +1012,30 @@ class WordStorm extends Module {
clearInterval(fallingWord.positionCheck);
}
- // Remove word
+ // Play explosion sound
+ soundSystem.play('enemy_defeat');
+
+ // EXPLOSION ANIMATION when word reaches bottom
if (wordElement.parentNode) {
- wordElement.remove();
+ wordElement.classList.add('exploding');
+
+ // Add screen shake effect for life loss
+ const gameArea = document.getElementById('game-area');
+ if (gameArea) {
+ gameArea.style.animation = 'none';
+ gameArea.offsetHeight; // Force reflow
+ gameArea.style.animation = 'screenShake 0.5s ease-in-out';
+ setTimeout(() => {
+ gameArea.style.animation = '';
+ }, 500);
+ }
+
+ // Remove after explosion animation completes
+ setTimeout(() => {
+ if (wordElement.parentNode) {
+ wordElement.remove();
+ }
+ }, 800);
}
// Remove from tracking
@@ -1016,6 +1047,14 @@ class WordStorm extends Module {
this._updateHUD();
+ // Update answer panel to show next word's options
+ this._updateAnswerPanelForOldestWord();
+
+ // Stronger vibration for life loss
+ if (navigator.vibrate) {
+ navigator.vibrate([200, 100, 200, 100, 200]);
+ }
+
if (this._lives <= 0) {
this._gameOver();
}
@@ -1180,7 +1219,6 @@ class WordStorm extends Module {
// Update HUD and restart
this._updateHUD();
- this._generateAnswerOptions();
this._startSpawning();
}