Monster Heartbeats

Loading Monster Heartbeats...

// Initialize game function run(mode) { lib.log('run() called. Mode: ' + mode); currentMode = mode; // Initialize canvas canvas = document.getElementById('gameCanvas'); ctx = canvas.getContext('2d'); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; // Initialize audio context audioContext = new (window.AudioContext || window.webkitAudioContext)(); // Show edit mode indicator if in edit mode if (mode === 'edit') { document.getElementById('editModeIndicator').classList.remove('hidden'); } // Setup game parameters setupGameParameters(); // Initialize game config if needed initializeGameConfig(); // Preload assets preloadAssets().then(() => { // Setup input handlers setupInputHandlers(); // Start game if (window.gameConfig.storyProgress.currentBeat === null) { // New game - show character creation showCharacterCreation(); } else { // Continue from saved progress continueStory(); } // Start render loop requestAnimationFrame(gameLoop); }); } function setupGameParameters() { lib.showGameParameters({ name: 'Game Settings', params: { 'Difficulty': { key: 'gameConfig.settings.difficulty', type: 'dropdown', options: [ { label: 'Easy', value: 'easy' }, { label: 'Normal', value: 'normal' }, { label: 'Hard', value: 'hard' } ], onChange: (value) => { window.gameConfig.settings.difficulty = value; } }, 'Text Speed': { key: 'gameConfig.settings.textSpeed', type: 'slider', min: 1, max: 3, step: 1, onChange: (value) => { window.gameConfig.settings.textSpeed = value; } }, 'Auto-Advance': { key: 'gameConfig.settings.autoAdvance', type: 'checkbox', onChange: (value) => { window.gameConfig.settings.autoAdvance = value; } } } }); } function initializeGameConfig() { if (!window.gameConfig) { window.gameConfig = {}; } // Initialize player character if (!window.gameConfig.playerCharacter) { window.gameConfig.playerCharacter = { type: null, name: '', stats: { confidence: 3, empathy: 3, creativity: 3, intelligence: 3, courage: 3 } }; } // Initialize relationships if (!window.gameConfig.relationships) { window.gameConfig.relationships = { vesper: 0, luna: 0, finn: 0 }; } // Initialize story progress if (!window.gameConfig.storyProgress) { window.gameConfig.storyProgress = { currentBeat: null, completedBeats: [], choices: {}, chapter: 1, season: 'Autumn', dayOfSeason: 1 }; } // Initialize settings if (!window.gameConfig.settings) { window.gameConfig.settings = { difficulty: 'normal', textSpeed: 2, autoAdvance: false }; } // Initialize mini-game scores if (!window.gameConfig.miniGameScores) { window.gameConfig.miniGameScores = { rhythm: 0, potion: 0, trivia: 0, painting: 0 }; } // Initialize quests if (!window.gameConfig.quests) { window.gameConfig.quests = { active: [], completed: [], available: [ { id: 'quest_meet_vesper', name: 'Meet Vesper', description: 'Get to know the mysterious vampire student', objectives: [{ id: 'obj_talk_vesper', description: 'Talk to Vesper', completed: false }], rewards: { coins: 50, relationshipBoost: { vesper: 10 } }, completed: false }, { id: 'quest_help_luna', name: 'Help Luna with Training', description: 'Assist Luna with her athletic training', objectives: [{ id: 'obj_train_luna', description: 'Complete a training session', completed: false }], rewards: { coins: 75, relationshipBoost: { luna: 15 } }, completed: false }, { id: 'quest_comfort_finn', name: 'Comfort Finn', description: 'Help Finn feel less homesick', objectives: [{ id: 'obj_listen_finn', description: 'Listen to Finn\'s story', completed: false }], rewards: { coins: 50, relationshipBoost: { finn: 20 } }, completed: false }, { id: 'quest_mystery_circle', name: 'Investigate the Midnight Circle', description: 'Uncover the secrets of the mysterious Midnight Circle', objectives: [ { id: 'obj_find_clue1', description: 'Find the first clue', completed: false }, { id: 'obj_find_clue2', description: 'Find the second clue', completed: false }, { id: 'obj_confront_leader', description: 'Confront the leader', completed: false } ], rewards: { coins: 200, gems: 100, relationshipBoost: { vesper: 25 } }, completed: false }, { id: 'quest_autumn_festival', name: 'Prepare for Autumn Festival', description: 'Get ready for the biggest event of the season', objectives: [ { id: 'obj_get_outfit', description: 'Get a festival outfit', completed: false }, { id: 'obj_practice_dance', description: 'Practice dancing', completed: false }, { id: 'obj_attend_festival', description: 'Attend the festival', completed: false } ], rewards: { coins: 150, gems: 50 }, completed: false } ] }; } if (!window.gameConfig.characterData) { const charIds = ['vesper', 'luna', 'finn', 'kael', 'aurora', 'zephyr', 'sage', 'ember', 'echo']; window.gameConfig.characterData = {}; charIds.forEach(id => { window.gameConfig.characterData[id] = { relationshipLevel: 0, relationshipPoints: 0, interactions: [], secretsRevealed: [], preferences: { likes: 0, dislikes: 0 }, lastInteraction: null }; }); } // Initialize time system if (!window.gameConfig.timeSystem) { window.gameConfig.timeSystem = { currentDay: 1, currentSeason: 'Autumn', currentTimeOfDay: 'morning', // morning, afternoon, evening, night weather: 'clear', // clear, rainy, snowy, stormy, foggy temperature: 65, // Fahrenheit isWeekend: false, totalDaysPlayed: 1, holidays: [] }; } if (!window.gameConfig.clubMemberships) { window.gameConfig.clubMemberships = []; } if (!window.gameConfig.currentJob) { window.gameConfig.currentJob = null; } if (!window.gameConfig.minigamePerformance) { window.gameConfig.minigamePerformance = { rhythm: { score: 0, rank: 'Bronze', affectsStory: false }, potion: { score: 0, rank: 'Bronze', affectsStory: false }, painting: { score: 0, rank: 'Bronze', affectsStory: false }, trivia: { score: 0, rank: 'Bronze', affectsStory: false } }; } } async function preloadAssets() { const assetIds = [ 'main_menu_background', 'entrance_hall_background', 'homeroom_background', 'cafeteria_background', 'courtyard_background', 'dance_studio_background', 'alchemy_lab_background', 'shadow_weaver_base', 'crystal_golem_base', 'spark_sprite_base', 'vesper_neutral', 'vesper_happy', 'vesper_sad', 'vesper_surprised', 'vesper_angry', 'luna_neutral', 'luna_happy', 'luna_sad', 'luna_surprised', 'luna_angry', 'finn_neutral', 'finn_happy', 'finn_sad', 'finn_surprised', 'finn_angry', 'dialogue_box_ornament', 'confidence_icon', 'empathy_icon', 'creativity_icon', 'intelligence_icon', 'courage_icon', 'relationship_heart_empty', 'relationship_heart_filled', 'rhythm_note_blue', 'rhythm_note_pink', 'rhythm_note_purple', 'rhythm_note_yellow', 'potion_ingredient_heart', 'potion_ingredient_star', 'potion_ingredient_moon', 'potion_ingredient_flower', 'potion_ingredient_skull', 'menu_button_icon' ]; const audioIds = [ 'background_music_main', 'background_music_dance', 'background_music_alchemy', 'sfx_dialogue_advance', 'sfx_choice_select', 'sfx_stat_increase', 'sfx_relationship_increase', 'sfx_rhythm_perfect', 'sfx_rhythm_good', 'sfx_rhythm_miss', 'sfx_potion_match', 'sfx_potion_special', 'sfx_menu_open', 'sfx_menu_close' ]; let loaded = 0; const total = assetIds.length + audioIds.length; // Load images for (const id of assetIds) { try { const assetInfo = lib.getAsset(id); if (assetInfo && assetInfo.url) { const img = new Image(); img.crossOrigin = 'anonymous'; await new Promise((resolve, reject) => { img.onload = () => { assetCache[id] = { image: img, info: assetInfo }; loaded++; updateLoadingBar(loaded / total); resolve(); }; img.onerror = () => { lib.log('Failed to load image: ' + id); loaded++; updateLoadingBar(loaded / total); resolve(); // Continue even if asset fails }; img.src = assetInfo.url; }); } } catch (e) { lib.log('Error loading asset ' + id + ': ' + e.message); loaded++; updateLoadingBar(loaded / total); } } // Load audio for (const id of audioIds) { try { const assetInfo = lib.getAsset(id); if (assetInfo && assetInfo.url) { const response = await fetch(assetInfo.url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); audioBuffers[id] = audioBuffer; loaded++; updateLoadingBar(loaded / total); } } catch (e) { lib.log('Error loading audio ' + id + ': ' + e.message); loaded++; updateLoadingBar(loaded / total); } } // Hide loading screen document.getElementById('loadingScreen').classList.add('hidden'); // Set stat icons if (assetCache['confidence_icon']) { document.getElementById('confidenceIcon').src = assetCache['confidence_icon'].image.src; } if (assetCache['empathy_icon']) { document.getElementById('empathyIcon').src = assetCache['empathy_icon'].image.src; } if (assetCache['creativity_icon']) { document.getElementById('creativityIcon').src = assetCache['creativity_icon'].image.src; } if (assetCache['intelligence_icon']) { document.getElementById('intelligenceIcon').src = assetCache['intelligence_icon'].image.src; } if (assetCache['courage_icon']) { document.getElementById('courageIcon').src = assetCache['courage_icon'].image.src; } if (assetCache['menu_button_icon']) { document.getElementById('menuIcon').src = assetCache['menu_button_icon'].image.src; } } function updateLoadingBar(progress) { document.getElementById('loadingFill').style.width = (progress * 100) + '%'; // Update loading screen character if (window.gameConfig.playerCharacter.type) { const type = MONSTER_TYPES[window.gameConfig.playerCharacter.type]; if (type && assetCache[type.assetId]) { document.getElementById('loadingCharacterImage').src = assetCache[type.assetId].image.src; } } } function setupInputHandlers() { // Dialogue box click const dialogueBox = document.getElementById('dialogueBox'); dialogueBox.addEventListener('click', advanceDialogue); // Keyboard controls document.addEventListener('keydown', handleKeyPress); // Menu button document.getElementById('menuButton').addEventListener('click', () => { playSound('sfx_menu_open'); // Menu functionality would go here }); // Results continue button document.getElementById('resultsContinue').addEventListener('click', () => { hideResults(); continueAfterMinigame(); }); // Hub buttons const continueStoryBtn = document.getElementById('continueStoryBtn'); if (continueStoryBtn) continueStoryBtn.addEventListener('click', continueStory); const questsBtn = document.getElementById('questsBtn'); if (questsBtn) questsBtn.addEventListener('click', showQuestsMenu); const hangoutBtn = document.getElementById('hangoutBtn'); if (hangoutBtn) hangoutBtn.addEventListener('click', showHangoutMenu); const minigamesBtn = document.getElementById('minigamesBtn'); if (minigamesBtn) minigamesBtn.addEventListener('click', showMinigameSelection); const jobsBtn = document.getElementById('jobsBtn'); if (jobsBtn) jobsBtn.addEventListener('click', showJobsMenu); const shopBtn = document.getElementById('shopBtn'); if (shopBtn) shopBtn.addEventListener('click', showShop); const backFromMinigamesBtn = document.getElementById('backFromMinigamesBtn'); if (backFromMinigamesBtn) { backFromMinigamesBtn.addEventListener('click', () => { document.getElementById('minigameSelectScreen').classList.add('hidden'); document.getElementById('statsHeader').classList.remove('hidden'); document.getElementById('menuButton').classList.remove('hidden'); showHub(); }); } } function handleKeyPress(e) { if (gameState.screen === 'story') { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); advanceDialogue(); } else if (e.key >= '1' && e.key <= '9') { const choiceIndex = parseInt(e.key) - 1; const choices = document.querySelectorAll('.choice-button:not(.locked)'); if (choices[choiceIndex]) { choices[choiceIndex].click(); } } } } function showCharacterCreation() { gameState.screen = 'creation'; document.getElementById('creationScreen').classList.remove('hidden'); const nameInput = document.getElementById('characterNameInput'); nameInput.value = window.gameConfig.playerCharacter.name || ''; nameInput.addEventListener('input', (e) => { window.gameConfig.playerCharacter.name = e.target.value; updateStartButton(); }); // Gender selection const genderMale = document.getElementById('genderMale'); const genderFemale = document.getElementById('genderFemale'); if (window.gameConfig.playerCharacter.gender === 'male') { genderMale.classList.add('selected'); } else if (window.gameConfig.playerCharacter.gender === 'female') { genderFemale.classList.add('selected'); } genderMale.addEventListener('click', () => { genderMale.classList.add('selected'); genderFemale.classList.remove('selected'); window.gameConfig.playerCharacter.gender = 'male'; updateStartButton(); }); genderFemale.addEventListener('click', () => { genderFemale.classList.add('selected'); genderMale.classList.remove('selected'); window.gameConfig.playerCharacter.gender = 'female'; updateStartButton(); }); const monsterTypesContainer = document.getElementById('monsterTypes'); monsterTypesContainer.innerHTML = ''; for (const typeKey in MONSTER_TYPES) { const type = MONSTER_TYPES[typeKey]; const button = document.createElement('div'); button.className = 'monster-type-button'; button.innerHTML = `

${type.name}

${type.description}

${type.ability}

`; button.addEventListener('click', () => selectMonsterType(typeKey, button)); monsterTypesContainer.appendChild(button); } const statAllocation = document.getElementById('statAllocation'); statAllocation.innerHTML = ''; const stats = ['confidence', 'empathy', 'creativity', 'intelligence', 'courage']; stats.forEach(stat => { const allocator = document.createElement('div'); allocator.className = 'stat-allocator'; allocator.innerHTML = `

${stat.charAt(0).toUpperCase() + stat.slice(1)}

`; statAllocation.appendChild(allocator); const decreaseBtn = allocator.querySelector('[data-action="decrease"]'); const increaseBtn = allocator.querySelector('[data-action="increase"]'); decreaseBtn.addEventListener('click', () => adjustStat(stat, -1)); increaseBtn.addEventListener('click', () => adjustStat(stat, 1)); }); updateStatAllocators(); } function updateStartButton() { const startBtn = document.getElementById('startButton'); const nameInput = document.getElementById('characterNameInput'); const stats = window.gameConfig.playerCharacter.stats; const bonusPoints = window.gameConfig.playerCharacter.type ? 2 : 0; const totalUsed = Object.values(stats).reduce((sum, val) => sum + val, 0); const remaining = STARTING_POINTS + bonusPoints - totalUsed; startBtn.disabled = !window.gameConfig.playerCharacter.type || !window.gameConfig.playerCharacter.gender || remaining > 0 || !nameInput.value.trim(); } function selectMonsterType(typeKey, button) { // Remove previous selection document.querySelectorAll('.monster-type-button').forEach(btn => { btn.classList.remove('selected'); }); // Select new type button.classList.add('selected'); window.gameConfig.playerCharacter.type = typeKey; // Apply stat bonus const type = MONSTER_TYPES[typeKey]; const bonusStat = type.statBonus; // Reset all stats to base const stats = ['confidence', 'empathy', 'creativity', 'intelligence', 'courage']; stats.forEach(stat => { window.gameConfig.playerCharacter.stats[stat] = 3; }); // Apply bonus window.gameConfig.playerCharacter.stats[bonusStat] += 2; updateStatAllocators(); } function adjustStat(stat, delta) { const stats = window.gameConfig.playerCharacter.stats; const newValue = stats[stat] + delta; // Check constraints if (newValue < MIN_STAT || newValue > MAX_STAT) return; // Check total points const totalUsed = Object.values(stats).reduce((sum, val) => sum + val, 0); const bonusPoints = window.gameConfig.playerCharacter.type ? 2 : 0; const maxTotal = STARTING_POINTS + bonusPoints; if (delta > 0 && totalUsed >= maxTotal) return; stats[stat] = newValue; updateStatAllocators(); } function updateStatAllocators() { const stats = window.gameConfig.playerCharacter.stats; const bonusPoints = window.gameConfig.playerCharacter.type ? 2 : 0; const totalUsed = Object.values(stats).reduce((sum, val) => sum + val, 0); const remaining = STARTING_POINTS + bonusPoints - totalUsed; // Update display document.getElementById('pointsRemaining').textContent = `Points Remaining: ${remaining}`; // Update stat values for (const stat in stats) { const valueEl = document.querySelector(`.stat-allocator-value[data-stat="${stat}"]`); if (valueEl) valueEl.textContent = stats[stat]; // Update button states const decreaseBtn = document.querySelector(`.stat-allocator-button[data-stat="${stat}"][data-action="decrease"]`); const increaseBtn = document.querySelector(`.stat-allocator-button[data-stat="${stat}"][data-action="increase"]`); if (decreaseBtn) decreaseBtn.disabled = stats[stat] <= MIN_STAT; if (increaseBtn) increaseBtn.disabled = stats[stat] >= MAX_STAT || remaining <= 0; } // Update start button updateStartButton(); } function startGame() { document.getElementById('creationScreen').classList.add('hidden'); window.gameConfig.storyProgress.currentBeat = 'opening'; showHub(); } function showHub() { const timeSystem = window.gameConfig.timeSystem; // Advance time of day const timeProgression = ['morning', 'afternoon', 'evening', 'night']; const currentIndex = timeProgression.indexOf(timeSystem.currentTimeOfDay); if (currentIndex === timeProgression.length - 1) { // Move to next day timeSystem.currentDay++; timeSystem.totalDaysPlayed++; timeSystem.currentTimeOfDay = 'morning'; // Check if weekend timeSystem.isWeekend = (timeSystem.currentDay % 7 === 6 || timeSystem.currentDay % 7 === 0); // Update season every 30 days const seasons = ['Autumn', 'Winter', 'Spring', 'Summer']; const seasonIndex = Math.floor((timeSystem.currentDay - 1) / 30) % 4; timeSystem.currentSeason = seasons[seasonIndex]; // Random weather const weatherTypes = ['clear', 'rainy', 'snowy', 'stormy', 'foggy']; timeSystem.weather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)]; // Temperature based on season const seasonTemps = { 'Autumn': 65, 'Winter': 35, 'Spring': 55, 'Summer': 85 }; const baseTemp = seasonTemps[timeSystem.currentSeason]; timeSystem.temperature = baseTemp + Math.floor(Math.random() * 15) - 7; // Check for holidays if (timeSystem.currentDay === 30) { timeSystem.holidays.push('Autumn Equinox Festival'); } else if (timeSystem.currentDay === 60) { timeSystem.holidays.push('Winter Solstice'); } else if (timeSystem.currentDay === 90) { timeSystem.holidays.push('Spring Awakening'); } else if (timeSystem.currentDay === 120) { timeSystem.holidays.push('Summer Solstice'); } } else { // Move to next time of day timeSystem.currentTimeOfDay = timeProgression[currentIndex + 1]; } } function continueStory() { gameState.screen = 'story'; const beatId = window.gameConfig.storyProgress.currentBeat; if (!beatId || !STORY_BEATS[beatId]) { // End of story lib.log('End of Chapter 1'); return; } const beat = STORY_BEATS[beatId]; gameState.currentBeat = beat; gameState.currentDialogueIndex = 0; // Set background gameState.currentBackground = beat.location; // Set characters gameState.currentCharacters = beat.characters || []; // Show UI document.getElementById('statsHeader').classList.remove('hidden'); document.getElementById('menuButton').classList.remove('hidden'); updateStatsDisplay(); // Check if this beat has a minigame if (beat.minigame) { // Show dialogue first, then minigame showDialogue(); } else if (beat.choices) { // Show dialogue, then choices showDialogue(); } else { // Just dialogue showDialogue(); } // Play background music playBackgroundMusic('background_music_main'); } function showDialogue() { const beat = gameState.currentBeat; const dialogue = beat.dialogue[gameState.currentDialogueIndex]; if (!dialogue) { // End of dialogue for this beat if (beat.choices) { showChoices(); } else if (beat.minigame) { startMinigame(beat.minigame); } else { // Apply effects and move to next beat applyBeatEffects(beat); moveToNextBeat(beat.next); } return; } // Update character expressions if (dialogue.character) { const charIndex = gameState.currentCharacters.findIndex(c => c.id === dialogue.character); if (charIndex !== -1) { gameState.currentCharacters[charIndex].expression = dialogue.expression; } } // Show dialogue box const dialogueBox = document.getElementById('dialogueBox'); dialogueBox.classList.remove('hidden'); document.getElementById('dialogueSpeaker').textContent = dialogue.speaker; document.getElementById('dialogueText').textContent = dialogue.text; document.getElementById('dialogueContinue').classList.remove('hidden'); // Hide choices document.getElementById('choicesContainer').classList.add('hidden'); } function advanceDialogue() { playSound('sfx_dialogue_advance'); gameState.currentDialogueIndex++; showDialogue(); } function showChoices() { const beat = gameState.currentBeat; const choicesContainer = document.getElementById('choicesContainer'); choicesContainer.innerHTML = ''; choicesContainer.classList.remove('hidden'); document.getElementById('dialogueBox').classList.add('hidden'); beat.choices.forEach((choice, index) => { const button = document.createElement('button'); button.className = 'choice-button'; // Check stat requirement let locked = false; if (choice.statRequirement) { const stat = choice.statRequirement.stat; const required = choice.statRequirement.value; const current = window.gameConfig.playerCharacter.stats[stat]; locked = current < required; if (locked) { button.classList.add('locked'); button.innerHTML = ` ${choice.text}

Requires ${required} ${stat.charAt(0).toUpperCase() + stat.slice(1)}

`; } else { button.textContent = choice.text; } } else { button.textContent = choice.text; } if (!locked) { button.addEventListener('click', () => selectChoice(choice)); } choicesContainer.appendChild(button); }); } function selectChoice(choice) { playSound('sfx_choice_select'); // Record choice window.gameConfig.storyProgress.choices[gameState.currentBeat.id] = choice.text; // Track character interaction if (gameState.currentCharacters.length > 0) { const charId = gameState.currentCharacters[0].id; const character = CHARACTERS[charId]; if (character && window.gameConfig.characterData[charId]) { const charData = window.gameConfig.characterData[charId]; // Record interaction charData.interactions.push({ beat: gameState.currentBeat.id, choice: choice.text, timestamp: Date.now() }); // Evaluate choice against character preferences evaluateCharacterPreference(charId, choice.text); // Check if secrets should be revealed checkSecretReveal(charId); } } // Apply effects if (choice.effects) { if (choice.effects.stats) { for (const stat in choice.effects.stats) { window.gameConfig.playerCharacter.stats[stat] += choice.effects.stats[stat]; playSound('sfx_stat_increase'); } } if (choice.effects.relationships) { for (const char in choice.effects.relationships) { window.gameConfig.relationships[char] += choice.effects.relationships[char]; playSound('sfx_relationship_increase'); } } } updateStatsDisplay(); // Move to next beat moveToNextBeat(choice.next); } function evaluateCharacterPreference(charId, choiceText) { const character = CHARACTERS[charId]; const charData = window.gameConfig.characterData[charId]; const playerStats = window.gameConfig.playerCharacter.stats; if (!character || !charData) return; // Check if choice aligns with character likes const choiceLower = choiceText.toLowerCase(); let preferenceBonus = 0; character.likes.forEach(like => { if (choiceLower.includes(like)) { preferenceBonus += 10; charData.preferences.likes++; } }); character.dislikes.forEach(dislike => { if (choiceLower.includes(dislike)) { preferenceBonus -= 5; charData.preferences.dislikes++; } }); // Apply bonus/penalty to relationship points if (preferenceBonus > 0) { charData.relationshipPoints += Math.ceil(preferenceBonus / 5); playSound('sfx_relationship_increase'); } else if (preferenceBonus < 0) { charData.relationshipPoints += preferenceBonus; } // Update relationship level based on total relationship points charData.relationshipLevel = getRelationshipLevel(charData.relationshipPoints); } function checkSecretReveal(charId) { const character = CHARACTERS[charId]; const charData = window.gameConfig.characterData[charId]; if (!character || !charData) return; // Check if new secrets should be revealed based on relationship level character.secrets.forEach((secret, index) => { if (!charData.secretsRevealed.includes(index) && charData.relationshipLevel >= secret.level) { charData.secretsRevealed.push(index); // Log secret reveal (could trigger special dialogue) lib.log(`Secret revealed about ${character.name}: ${secret.text}`); } }); } function getCharacterReaction(charId, playerAction) { const character = CHARACTERS[charId]; const charData = window.gameConfig.characterData[charId]; const playerStats = window.gameConfig.playerCharacter.stats; if (!character || !charData) return 'neutral'; // Determine reaction based on player stats and character personality let reactionScore = 0; // Compare player stats to character personality for (const stat in character.personality) { const charStat = character.personality[stat]; const playerStat = playerStats[stat]; if (playerStat >= charStat) { reactionScore += (playerStat - charStat) * 0.5; } } // Factor in relationship level reactionScore += charData.relationshipLevel * 2; // Determine expression if (reactionScore > 15) return 'happy'; if (reactionScore > 5) return 'surprised'; if (reactionScore < -10) return 'angry'; if (reactionScore < 0) return 'sad'; return 'neutral'; } function getCharacterDialogueVariation(charId, baseDialogue) { const character = CHARACTERS[charId]; const charData = window.gameConfig.characterData[charId]; if (!character || !charData) return baseDialogue; // Add character-specific flavor based on relationship level const variations = { vesper: { 0: `${baseDialogue} *Vesper regards you with cool indifference.*`, 1: `${baseDialogue} *Vesper's expression softens slightly.*`, 2: `${baseDialogue} *Vesper smiles faintly, a rare sight.*`, 3: `${baseDialogue} *Vesper speaks with genuine warmth.*`, 4: `${baseDialogue} *Vesper's eyes gleam with affection.*` }, luna: { 0: `${baseDialogue} *Luna eyes you cautiously.*`, 1: `${baseDialogue} *Luna's tail wags slightly.*`, 2: `${baseDialogue} *Luna grins widely at you.*`, 3: `${baseDialogue} *Luna pulls you into a warm embrace.*`, 4: `${baseDialogue} *Luna looks at you with complete trust and devotion.*` }, finn: { 0: `${baseDialogue} *Finn looks away shyly.*`, 1: `${baseDialogue} *Finn meets your eyes with a gentle smile.*`, 2: `${baseDialogue} *Finn's face brightens when they see you.*`, 3: `${baseDialogue} *Finn reaches out and gently touches your hand.*`, 4: `${baseDialogue} *Finn gazes at you with deep affection and understanding.*` } }; const charVariations = variations[charId]; if (charVariations && charVariations[charData.relationshipLevel]) { return charVariations[charData.relationshipLevel]; } return baseDialogue; } function applyBeatEffects(beat) { if (beat.effects) { if (beat.effects.stats) { for (const stat in beat.effects.stats) { window.gameConfig.playerCharacter.stats[stat] += beat.effects.stats[stat]; playSound('sfx_stat_increase'); } } if (beat.effects.relationships) { for (const char in beat.effects.relationships) { window.gameConfig.relationships[char] += beat.effects.relationships[char]; playSound('sfx_relationship_increase'); } } if (beat.effects.resources) { for (const resource in beat.effects.resources) { window.gameConfig.resources[resource] += beat.effects.resources[resource]; } } } updateStatsDisplay(); updateResourcesDisplay(); } function moveToNextBeat(nextBeatId) { if (!nextBeatId) { // End of story lib.log('End of Chapter 1'); document.getElementById('dialogueBox').classList.add('hidden'); document.getElementById('choicesContainer').classList.add('hidden'); return; } // Mark current beat as completed if (!window.gameConfig.storyProgress.completedBeats.includes(gameState.currentBeat.id)) { window.gameConfig.storyProgress.completedBeats.push(gameState.currentBeat.id); } // Move to next beat window.gameConfig.storyProgress.currentBeat = nextBeatId; continueStory(); } function updateStatsDisplay() { const stats = window.gameConfig.playerCharacter.stats; for (const stat in stats) { const value = stats[stat]; const valueEl = document.getElementById(stat + 'Value'); if (valueEl) valueEl.textContent = value; } } function updateResourcesDisplay() { document.getElementById('coinsValue').textContent = window.gameConfig.resources.coins; document.getElementById('gemsValue').textContent = window.gameConfig.resources.gems; } function startMinigame(type) { gameState.screen = 'minigame'; gameState.minigameType = type; // Hide all UI elements document.getElementById('dialogueBox').classList.add('hidden'); document.getElementById('choicesContainer').classList.add('hidden'); document.getElementById('minigameSelectScreen').classList.add('hidden'); document.getElementById('hubScreen').classList.add('hidden'); document.getElementById('statsHeader').classList.add('hidden'); document.getElementById('menuButton').classList.add('hidden'); document.getElementById('resultsScreen').classList.add('hidden'); // Show minigame container document.getElementById('minigameContainer').classList.remove('hidden'); // Clear previous content document.getElementById('minigamePlayArea').innerHTML = ''; document.getElementById('minigameScore').textContent = 'Score: 0'; document.getElementById('minigameTimer').textContent = 'Time: 0'; if (type === 'rhythm') { startRhythmGame(); } else if (type === 'potion') { startPotionGame(); } else if (type === 'painting') { startPaintingGame(); } else if (type === 'trivia') { startTriviaGame(); } } function startRhythmGame() { playBackgroundMusic('background_music_dance'); const playArea = document.getElementById('minigamePlayArea'); playArea.innerHTML = ''; // Create lanes const lanesContainer = document.createElement('div'); lanesContainer.className = 'rhythm-lanes'; const lanes = []; const noteColors = ['blue', 'pink', 'purple', 'yellow']; for (let i = 0; i < 4; i++) { const lane = document.createElement('div'); lane.className = 'rhythm-lane'; lane.dataset.lane = i; const target = document.createElement('div'); target.className = 'rhythm-target'; lane.appendChild(target); lanesContainer.appendChild(lane); lanes.push({ element: lane, notes: [] }); // Add touch/click handler lane.addEventListener('click', () => hitLane(i)); } playArea.appendChild(lanesContainer); // Initialize game state gameState.minigameState = { score: 0, timeRemaining: 30, lanes: lanes, noteSpeed: 400, // pixels per second spawnInterval: 0.8, // seconds timeSinceLastSpawn: 0, notes: [] }; // Add keyboard controls const keyMap = { 'd': 0, 'f': 1, 'j': 2, 'k': 3 }; const keyHandler = (e) => { if (keyMap[e.key.toLowerCase()] !== undefined) { e.preventDefault(); hitLane(keyMap[e.key.toLowerCase()]); } }; document.addEventListener('keydown', keyHandler); gameState.minigameState.keyHandler = keyHandler; // Start game loop gameState.minigameState.lastTime = performance.now(); gameState.minigameState.running = true; updateRhythmGame(); } function updateRhythmGame() { if (!gameState.minigameState.running) return; const now = performance.now(); const deltaTime = Math.min((now - gameState.minigameState.lastTime) / 1000, 0.11); gameState.minigameState.lastTime = now; const state = gameState.minigameState; // Update timer state.timeRemaining -= deltaTime; document.getElementById('minigameTimer').textContent = 'Time: ' + Math.ceil(state.timeRemaining); if (state.timeRemaining <= 0) { endRhythmGame(); return; } // Spawn notes state.timeSinceLastSpawn += deltaTime; if (state.timeSinceLastSpawn >= state.spawnInterval) { state.timeSinceLastSpawn = 0; spawnNote(); } // Update notes const noteSpeed = state.noteSpeed; const targetY = CANVAS_HEIGHT - 120; // Position of target zone for (let i = state.notes.length - 1; i >= 0; i--) { const note = state.notes[i]; note.y += noteSpeed * deltaTime; // Update visual position note.element.style.top = note.y + 'px'; // Check if note passed target (miss) if (note.y > targetY + 100) { note.element.remove(); state.notes.splice(i, 1); } } // Update score display document.getElementById('minigameScore').textContent = 'Score: ' + state.score; requestAnimationFrame(updateRhythmGame); } function spawnNote() { const state = gameState.minigameState; const laneIndex = Math.floor(Math.random() * 4); const lane = state.lanes[laneIndex]; const noteColors = ['blue', 'pink', 'purple', 'yellow']; const color = noteColors[laneIndex]; const noteElement = document.createElement('img'); noteElement.className = 'rhythm-note'; noteElement.style.position = 'absolute'; noteElement.style.width = '80px'; noteElement.style.height = '80px'; noteElement.style.left = '50%'; noteElement.style.transform = 'translateX(-50%)'; noteElement.style.top = '0px'; const assetId = 'rhythm_note_' + color; if (assetCache[assetId]) { noteElement.src = assetCache[assetId].image.src; } lane.element.appendChild(noteElement); const note = { lane: laneIndex, y: 0, element: noteElement }; state.notes.push(note); } function hitLane(laneIndex) { const state = gameState.minigameState; if (!state.running) return; const targetY = CANVAS_HEIGHT - 120; const perfectRange = 40; const goodRange = 80; // Find closest note in this lane let closestNote = null; let closestDistance = Infinity; for (const note of state.notes) { if (note.lane === laneIndex) { const distance = Math.abs(note.y - targetY); if (distance < closestDistance) { closestDistance = distance; closestNote = note; } } } if (closestNote) { if (closestDistance < perfectRange) { // Perfect hit state.score += 3; playSound('sfx_rhythm_perfect'); closestNote.element.remove(); state.notes.splice(state.notes.indexOf(closestNote), 1); } else if (closestDistance < goodRange) { // Good hit state.score += 1; playSound('sfx_rhythm_good'); closestNote.element.remove(); state.notes.splice(state.notes.indexOf(closestNote), 1); } else { // Miss playSound('sfx_rhythm_miss'); } } else { // No note nearby playSound('sfx_rhythm_miss'); } } function endRhythmGame() { const state = gameState.minigameState; state.running = false; // Remove keyboard handler if (state.keyHandler) { document.removeEventListener('keydown', state.keyHandler); } // Clear notes state.notes.forEach(note => note.element.remove()); // Calculate rank and rewards const score = state.score; let rank = 'Bronze'; let statGain = 1; let relationshipGain = 5; const difficulty = window.gameConfig.settings.difficulty; const thresholds = { easy: { silver: 40, gold: 70 }, normal: { silver: 50, gold: 80 }, hard: { silver: 80, gold: 110 } }; const threshold = thresholds[difficulty] || thresholds.normal; if (score >= threshold.gold) { rank = 'Gold'; statGain = 3; relationshipGain = 15; } else if (score >= threshold.silver) { rank = 'Silver'; statGain = 2; relationshipGain = 10; } // Apply rewards window.gameConfig.playerCharacter.stats.confidence += statGain; window.gameConfig.characterData.luna.relationshipPoints += relationshipGain; window.gameConfig.characterData.luna.relationshipLevel = getRelationshipLevel(window.gameConfig.characterData.luna.relationshipPoints); window.gameConfig.miniGameScores.rhythm = Math.max(window.gameConfig.miniGameScores.rhythm, score); // Track performance for story branching window.gameConfig.minigamePerformance.rhythm = { score: score, rank: rank, affectsStory: true }; // Show results showResults('Rhythm Dance Battle', score, rank, [ `+${statGain} Confidence`, `+${relationshipGain} Relationship with Luna` ]); playBackgroundMusic('background_music_main'); } function startPotionGame() { playBackgroundMusic('background_music_alchemy'); const playArea = document.getElementById('minigamePlayArea'); playArea.innerHTML = ''; // Create grid const grid = document.createElement('div'); grid.className = 'potion-grid'; const ingredientTypes = ['heart', 'star', 'moon', 'flower', 'skull']; const gridSize = 6; const cells = []; for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { const cell = document.createElement('div'); cell.className = 'potion-cell'; cell.dataset.row = row; cell.dataset.col = col; const ingredientType = ingredientTypes[Math.floor(Math.random() * ingredientTypes.length)]; const img = document.createElement('img'); const assetId = 'potion_ingredient_' + ingredientType; if (assetCache[assetId]) { img.src = assetCache[assetId].image.src; } cell.appendChild(img); cell.dataset.type = ingredientType; cell.addEventListener('click', () => selectCell(row, col)); grid.appendChild(cell); cells.push(cell); } } playArea.appendChild(grid); // Initialize game state gameState.minigameState = { score: 0, timeRemaining: 60, gridSize: gridSize, cells: cells, selectedCell: null, running: true, lastTime: performance.now() }; updatePotionGame(); } function updatePotionGame() { if (!gameState.minigameState.running) return; const now = performance.now(); const deltaTime = Math.min((now - gameState.minigameState.lastTime) / 1000, 0.11); gameState.minigameState.lastTime = now; const state = gameState.minigameState; // Update timer state.timeRemaining -= deltaTime; document.getElementById('minigameTimer').textContent = 'Time: ' + Math.ceil(state.timeRemaining); if (state.timeRemaining <= 0) { endPotionGame(); return; } // Update score display document.getElementById('minigameScore').textContent = 'Score: ' + state.score; requestAnimationFrame(updatePotionGame); } function selectCell(row, col) { const state = gameState.minigameState; if (!state.running) return; const cellIndex = row * state.gridSize + col; const cell = state.cells[cellIndex]; if (!state.selectedCell) { // First selection state.selectedCell = { row, col, cell }; cell.classList.add('selected'); } else { // Second selection - check if adjacent const prevRow = state.selectedCell.row; const prevCol = state.selectedCell.col; const isAdjacent = (Math.abs(row - prevRow) === 1 && col === prevCol) || (Math.abs(col - prevCol) === 1 && row === prevRow); if (isAdjacent) { // Swap cells swapCells(state.selectedCell, { row, col, cell }); } // Deselect state.selectedCell.cell.classList.remove('selected'); state.selectedCell = null; } } function swapCells(cell1, cell2) { const state = gameState.minigameState; // Swap types const type1 = cell1.cell.dataset.type; const type2 = cell2.cell.dataset.type; cell1.cell.dataset.type = type2; cell2.cell.dataset.type = type1; // Swap images const img1 = cell1.cell.querySelector('img'); const img2 = cell2.cell.querySelector('img'); const src1 = img1.src; img1.src = img2.src; img2.src = src1; // Check for matches setTimeout(() => { checkMatches(); }, 100); } function checkMatches() { const state = gameState.minigameState; const gridSize = state.gridSize; const cells = state.cells; const matched = new Set(); // Check horizontal matches for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize - 2; col++) { const idx1 = row * gridSize + col; const idx2 = row * gridSize + col + 1; const idx3 = row * gridSize + col + 2; const type1 = cells[idx1].dataset.type; const type2 = cells[idx2].dataset.type; const type3 = cells[idx3].dataset.type; if (type1 === type2 && type2 === type3) { matched.add(idx1); matched.add(idx2); matched.add(idx3); } } } // Check vertical matches for (let col = 0; col < gridSize; col++) { for (let row = 0; row < gridSize - 2; row++) { const idx1 = row * gridSize + col; const idx2 = (row + 1) * gridSize + col; const idx3 = (row + 2) * gridSize + col; const type1 = cells[idx1].dataset.type; const type2 = cells[idx2].dataset.type; const type3 = cells[idx3].dataset.type; if (type1 === type2 && type2 === type3) { matched.add(idx1); matched.add(idx2); matched.add(idx3); } } } if (matched.size > 0) { // Score based on match size const matchSize = matched.size; let points = matchSize * 100; if (matchSize >= 4) { points *= 2; playSound('sfx_potion_special'); } else { playSound('sfx_potion_match'); } state.score += points; // Remove matched cells and refill matched.forEach(idx => { const cell = cells[idx]; const ingredientTypes = ['heart', 'star', 'moon', 'flower', 'skull']; const newType = ingredientTypes[Math.floor(Math.random() * ingredientTypes.length)]; cell.dataset.type = newType; const img = cell.querySelector('img'); const assetId = 'potion_ingredient_' + newType; if (assetCache[assetId]) { img.src = assetCache[assetId].image.src; } }); // Check for more matches setTimeout(() => { checkMatches(); }, 200); } } function endPotionGame() { const state = gameState.minigameState; state.running = false; // Calculate rank and rewards const score = state.score; let rank = 'Bronze'; let statGain = 1; let relationshipGain = 5; const difficulty = window.gameConfig.settings.difficulty; const thresholds = { easy: { silver: 800, gold: 1200 }, normal: { silver: 1000, gold: 1500 }, hard: { silver: 1500, gold: 2000 } }; const threshold = thresholds[difficulty] || thresholds.normal; if (score >= threshold.gold) { rank = 'Gold'; statGain = 3; relationshipGain = 15; } else if (score >= threshold.silver) { rank = 'Silver'; statGain = 2; relationshipGain = 10; } // Apply rewards window.gameConfig.playerCharacter.stats.intelligence += statGain; window.gameConfig.characterData.finn.relationshipPoints += relationshipGain; window.gameConfig.characterData.finn.relationshipLevel = getRelationshipLevel(window.gameConfig.characterData.finn.relationshipPoints); window.gameConfig.miniGameScores.potion = Math.max(window.gameConfig.miniGameScores.potion, score); // Track performance for story branching window.gameConfig.minigamePerformance.potion = { score: score, rank: rank, affectsStory: true }; // Show results showResults('Potion Mixing', score, rank, [ `+${statGain} Intelligence`, `+${relationshipGain} Relationship with Finn` ]); playBackgroundMusic('background_music_main'); } // PAINTING MINI-GAME function startPaintingGame() { playBackgroundMusic('background_music_main'); const playArea = document.getElementById('minigamePlayArea'); playArea.innerHTML = ''; // Create canvas for painting const paintCanvas = document.createElement('canvas'); paintCanvas.width = 600; paintCanvas.height = 400; paintCanvas.style.border = '3px solid var(--color-accent-purple)'; paintCanvas.style.borderRadius = '12px'; paintCanvas.style.cursor = 'crosshair'; paintCanvas.style.display = 'block'; paintCanvas.style.margin = '20px auto'; paintCanvas.style.backgroundColor = 'white'; const paintCtx = paintCanvas.getContext('2d'); paintCtx.fillStyle = 'white'; paintCtx.fillRect(0, 0, paintCanvas.width, paintCanvas.height); // Color palette const colors = ['#FF6EC7', '#9D4EDD', '#FFD60A', '#00D9FF', '#00FF00']; const colorPalette = document.createElement('div'); colorPalette.style.display = 'flex'; colorPalette.style.justifyContent = 'center'; colorPalette.style.gap = '10px'; colorPalette.style.marginBottom = '20px'; let currentColor = colors[0]; colors.forEach(color => { const colorBtn = document.createElement('button'); colorBtn.style.width = '40px'; colorBtn.style.height = '40px'; colorBtn.style.backgroundColor = color; colorBtn.style.border = '2px solid white'; colorBtn.style.borderRadius = '8px'; colorBtn.style.cursor = 'pointer'; colorBtn.addEventListener('click', () => { currentColor = color; document.querySelectorAll('[data-color-btn]').forEach(btn => btn.style.border = '2px solid white'); colorBtn.style.border = '3px solid black'; }); colorBtn.dataset.colorBtn = color; colorPalette.appendChild(colorBtn); }); playArea.appendChild(colorPalette); playArea.appendChild(paintCanvas); // Drawing logic let isDrawing = false; let lastX = 0; let lastY = 0; paintCanvas.addEventListener('mousedown', (e) => { isDrawing = true; const rect = paintCanvas.getBoundingClientRect(); lastX = e.clientX - rect.left; lastY = e.clientY - rect.top; }); paintCanvas.addEventListener('mousemove', (e) => { if (!isDrawing) return; const rect = paintCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; paintCtx.strokeStyle = currentColor; paintCtx.lineWidth = 5; paintCtx.lineCap = 'round'; paintCtx.lineJoin = 'round'; paintCtx.beginPath(); paintCtx.moveTo(lastX, lastY); paintCtx.lineTo(x, y); paintCtx.stroke(); lastX = x; lastY = y; }); paintCanvas.addEventListener('mouseup', () => { isDrawing = false; }); paintCanvas.addEventListener('mouseleave', () => { isDrawing = false; }); // Touch support paintCanvas.addEventListener('touchstart', (e) => { isDrawing = true; const rect = paintCanvas.getBoundingClientRect(); const touch = e.touches[0]; lastX = touch.clientX - rect.left; lastY = touch.clientY - rect.top; }); paintCanvas.addEventListener('touchmove', (e) => { if (!isDrawing) return; e.preventDefault(); const rect = paintCanvas.getBoundingClientRect(); const touch = e.touches[0]; const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; paintCtx.strokeStyle = currentColor; paintCtx.lineWidth = 5; paintCtx.lineCap = 'round'; paintCtx.lineJoin = 'round'; paintCtx.beginPath(); paintCtx.moveTo(lastX, lastY); paintCtx.lineTo(x, y); paintCtx.stroke(); lastX = x; lastY = y; }); paintCanvas.addEventListener('touchend', () => { isDrawing = false; }); // Initialize game state gameState.minigameState = { score: 0, timeRemaining: 45, running: true, lastTime: performance.now(), paintCanvas: paintCanvas, paintCtx: paintCtx }; updatePaintingGame(); } function updatePaintingGame() { if (!gameState.minigameState.running) return; const now = performance.now(); const deltaTime = Math.min((now - gameState.minigameState.lastTime) / 1000, 0.11); gameState.minigameState.lastTime = now; const state = gameState.minigameState; // Update timer state.timeRemaining -= deltaTime; document.getElementById('minigameTimer').textContent = 'Time: ' + Math.ceil(state.timeRemaining); if (state.timeRemaining <= 0) { endPaintingGame(); return; } // Update score based on time spent painting state.score += Math.floor(deltaTime * 10); document.getElementById('minigameScore').textContent = 'Score: ' + state.score; requestAnimationFrame(updatePaintingGame); } function endPaintingGame() { const state = gameState.minigameState; state.running = false; // Calculate rank and rewards const score = state.score; let rank = 'Bronze'; let statGain = 1; let relationshipGain = 5; const difficulty = window.gameConfig.settings.difficulty; const thresholds = { easy: { silver: 300, gold: 500 }, normal: { silver: 400, gold: 600 }, hard: { silver: 600, gold: 800 } }; const threshold = thresholds[difficulty] || thresholds.normal; if (score >= threshold.gold) { rank = 'Gold'; statGain = 3; relationshipGain = 15; } else if (score >= threshold.silver) { rank = 'Silver'; statGain = 2; relationshipGain = 10; } // Apply rewards window.gameConfig.playerCharacter.stats.creativity += statGain; window.gameConfig.characterData.vesper.relationshipPoints = (window.gameConfig.characterData.vesper.relationshipPoints || 0) + relationshipGain; window.gameConfig.characterData.vesper.relationshipLevel = getRelationshipLevel(window.gameConfig.characterData.vesper.relationshipPoints); window.gameConfig.miniGameScores.painting = Math.max(window.gameConfig.miniGameScores.painting, score); // Track performance for story branching window.gameConfig.minigamePerformance.painting = { score: score, rank: rank, affectsStory: true }; // Show results showResults('Painting', score, rank, [ `+${statGain} Creativity`, `+${relationshipGain} Relationship with Vesper` ]); playBackgroundMusic('background_music_main'); } // TRIVIA MINI-GAME function startTriviaGame() { playBackgroundMusic('background_music_main'); const triviaQuestions = [ { question: 'What is the name of our school?', options: ['Monsterton High', 'Monster Academy', 'Creature School', 'Beast University'], correct: 0 }, { question: 'Who is the Headmaster?', options: ['Grimwood', 'Shadowbane', 'Nightfall', 'Darkstone'], correct: 0 }, { question: 'What color is the magical fountain?', options: ['Blue', 'Purple', 'Changes with emotions', 'Silver'], correct: 2 }, { question: 'What is Vesper\'s species?', options: ['Werewolf', 'Vampire', 'Mer-creature', 'Shadow Weaver'], correct: 1 }, { question: 'What is Luna\'s favorite activity?', options: ['Reading', 'Sports', 'Painting', 'Cooking'], correct: 1 }, { question: 'Where does Finn come from?', options: ['The mountains', 'The forest', 'The ocean', 'The sky'], correct: 2 }, { question: 'How many personality stats are there?', options: ['3', '4', '5', '6'], correct: 2 }, { question: 'What is the name of the alchemy class?', options: ['Potion Making', 'Alchemy 101', 'Magical Brews', 'Ingredient Mixing'], correct: 1 } ]; const playArea = document.getElementById('minigamePlayArea'); playArea.innerHTML = ''; gameState.minigameState = { score: 0, timeRemaining: 60, running: true, lastTime: performance.now(), currentQuestion: 0, questions: triviaQuestions, answered: 0 }; showTriviaQuestion(); } function showTriviaQuestion() { const state = gameState.minigameState; if (state.currentQuestion >= state.questions.length) { endTriviaGame(); return; } const playArea = document.getElementById('minigamePlayArea'); playArea.innerHTML = ''; const question = state.questions[state.currentQuestion]; const questionContainer = document.createElement('div'); questionContainer.style.padding = '40px'; questionContainer.style.textAlign = 'center'; const questionText = document.createElement('div'); questionText.style.fontSize = '32px'; questionText.style.fontWeight = '700'; questionText.style.color = 'var(--color-text-primary)'; questionText.style.marginBottom = '40px'; questionText.textContent = question.question; questionContainer.appendChild(questionText); const optionsContainer = document.createElement('div'); optionsContainer.style.display = 'flex'; optionsContainer.style.flexDirection = 'column'; optionsContainer.style.gap = '20px'; question.options.forEach((option, index) => { const optionBtn = document.createElement('button'); optionBtn.style.padding = '20px'; optionBtn.style.fontSize = '24px'; optionBtn.style.fontWeight = '600'; optionBtn.style.backgroundColor = 'var(--color-accent-purple)'; optionBtn.style.color = 'white'; optionBtn.style.border = 'none'; optionBtn.style.borderRadius = '12px'; optionBtn.style.cursor = 'pointer'; optionBtn.style.transition = 'all 150ms'; optionBtn.textContent = option; optionBtn.addEventListener('mouseover', () => { optionBtn.style.backgroundColor = 'var(--color-accent-pink)'; }); optionBtn.addEventListener('mouseout', () => { optionBtn.style.backgroundColor = 'var(--color-accent-purple)'; }); optionBtn.addEventListener('click', () => { answerTriviaQuestion(index === question.correct); }); optionsContainer.appendChild(optionBtn); }); questionContainer.appendChild(optionsContainer); playArea.appendChild(questionContainer); updateTriviaGame(); } function answerTriviaQuestion(correct) { const state = gameState.minigameState; if (correct) { state.score += 100; playSound('sfx_rhythm_perfect'); } else { playSound('sfx_rhythm_miss'); } state.currentQuestion++; state.answered++; setTimeout(() => { showTriviaQuestion(); }, 500); } function updateTriviaGame() { if (!gameState.minigameState.running) return; const now = performance.now(); const deltaTime = Math.min((now - gameState.minigameState.lastTime) / 1000, 0.11); gameState.minigameState.lastTime = now; const state = gameState.minigameState; // Update timer state.timeRemaining -= deltaTime; document.getElementById('minigameTimer').textContent = 'Time: ' + Math.ceil(state.timeRemaining); if (state.timeRemaining <= 0) { endTriviaGame(); return; } // Update score display document.getElementById('minigameScore').textContent = 'Score: ' + state.score; requestAnimationFrame(updateTriviaGame); } function endTriviaGame() { const state = gameState.minigameState; state.running = false; // Calculate rank and rewards const score = state.score; let rank = 'Bronze'; let statGain = 1; let relationshipGain = 5; const difficulty = window.gameConfig.settings.difficulty; const thresholds = { easy: { silver: 400, gold: 700 }, normal: { silver: 500, gold: 800 }, hard: { silver: 700, gold: 1000 } }; const threshold = thresholds[difficulty] || thresholds.normal; if (score >= threshold.gold) { rank = 'Gold'; statGain = 3; relationshipGain = 15; } else if (score >= threshold.silver) { rank = 'Silver'; statGain = 2; relationshipGain = 10; } // Apply rewards window.gameConfig.playerCharacter.stats.intelligence += statGain; window.gameConfig.characterData.vesper.relationshipPoints = (window.gameConfig.characterData.vesper.relationshipPoints || 0) + relationshipGain; window.gameConfig.characterData.vesper.relationshipLevel = getRelationshipLevel(window.gameConfig.characterData.vesper.relationshipPoints); window.gameConfig.miniGameScores.trivia = Math.max(window.gameConfig.miniGameScores.trivia, score); // Track performance for story branching window.gameConfig.minigamePerformance.trivia = { score: score, rank: rank, affectsStory: true }; // Show results showResults('Trivia Night', score, rank, [ `+${statGain} Intelligence`, `+${relationshipGain} Relationship with Vesper` ]); playBackgroundMusic('background_music_main'); } function showResults(title, score, rank, rewards) { document.getElementById('minigameContainer').classList.add('hidden'); document.getElementById('resultsScreen').classList.remove('hidden'); document.getElementById('resultsTitle').textContent = title; document.getElementById('resultsScoreValue').textContent = score; document.getElementById('resultsRank').textContent = rank; const rewardsContainer = document.getElementById('resultsRewards'); rewardsContainer.innerHTML = ''; rewards.forEach(reward => { const div = document.createElement('div'); div.textContent = reward; rewardsContainer.appendChild(div); }); updateStatsDisplay(); } function hideResults() { document.getElementById('resultsScreen').classList.add('hidden'); } function continueAfterMinigame() { if (gameState.currentBeat) { const beat = gameState.currentBeat; moveToNextBeat(beat.next); } else { // Return to hub if no story beat document.getElementById('minigameSelectScreen').classList.add('hidden'); document.getElementById('statsHeader').classList.remove('hidden'); document.getElementById('menuButton').classList.remove('hidden'); showHub(); } } function playSound(soundId) { if (!audioBuffers[soundId]) return; try { const source = audioContext.createBufferSource(); source.buffer = audioBuffers[soundId]; source.connect(audioContext.destination); source.start(0); } catch (e) { lib.log('Error playing sound: ' + e.message); } } function playBackgroundMusic(musicId) { // Stop current music if (currentBackgroundMusic) { try { currentBackgroundMusic.stop(); } catch (e) {} } if (!audioBuffers[musicId]) return; try { const source = audioContext.createBufferSource(); source.buffer = audioBuffers[musicId]; source.loop = true; source.connect(audioContext.destination); source.start(0); currentBackgroundMusic = source; } catch (e) { lib.log('Error playing music: ' + e.message); } } function gameLoop() { // Clear canvas ctx.fillStyle = '#1a0a2e'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Render based on current screen if (gameState.screen === 'story') { renderStoryScreen(); } requestAnimationFrame(gameLoop); } function renderStoryScreen() { // Draw background if (gameState.currentBackground && assetCache[gameState.currentBackground]) { const bg = assetCache[gameState.currentBackground]; drawImageCover(ctx, bg.image, 0, 200, CANVAS_WIDTH, 700); } // Draw character portraits gameState.currentCharacters.forEach(char => { const character = CHARACTERS[char.id]; if (!character) return; const expressionId = character.expressions[char.expression] || character.expressions.neutral; if (!assetCache[expressionId]) return; const portrait = assetCache[expressionId]; const portraitWidth = 400; const portraitHeight = 600; let x; if (char.position === 'left') { x = 50; } else if (char.position === 'right') { x = CANVAS_WIDTH - portraitWidth - 50; } else { x = (CANVAS_WIDTH - portraitWidth) / 2; } const y = 250; drawImageContain(ctx, portrait.image, x, y, portraitWidth, portraitHeight); }); } function drawImageCover(ctx, img, x, y, width, height) { if (!img || !img.complete) return; const imgAspect = img.width / img.height; const boxAspect = width / height; let drawWidth, drawHeight, offsetX, offsetY; if (imgAspect > boxAspect) { // Image is wider - fit height drawHeight = height; drawWidth = height * imgAspect; offsetX = (width - drawWidth) / 2; offsetY = 0; } else { // Image is taller - fit width drawWidth = width; drawHeight = width / imgAspect; offsetX = 0; offsetY = (height - drawHeight) / 2; } ctx.drawImage(img, x + offsetX, y + offsetY, drawWidth, drawHeight); } function drawImageContain(ctx, img, x, y, width, height) { if (!img || !img.complete) return; const imgAspect = img.width / img.height; const boxAspect = width / height; let drawWidth, drawHeight, offsetX, offsetY; if (imgAspect > boxAspect) { // Image is wider - fit width drawWidth = width; drawHeight = width / imgAspect; offsetX = 0; offsetY = (height - drawHeight) / 2; } else { // Image is taller - fit height drawHeight = height; drawWidth = height * imgAspect; offsetX = (width - drawWidth) / 2; offsetY = 0; } ctx.drawImage(img, x + offsetX, y + offsetY, drawWidth, drawHeight); }

Monster Heartbeats - Free Online Game on Astrocade