feat: Add audio assets, UI escape room polish, requirements, and INSTALL.md

This commit is contained in:
Maxi
2026-10-29 08:51:59 +01:00
parent c07c0e10b9
commit 3d30d0812a
17 changed files with 1367 additions and 180 deletions
+267 -94
View File
@@ -1,15 +1,17 @@
// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine - SVG Overhaul)
// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine: Riddles, Two-Way Stirring & Snape's Wrath)
(function() {
let currentStep = 1; // 1: Ingredients, 2: Stirring, 3: Heat, 4: Done
const ingredients = {
let currentStep = 1; // 1: Dosage, 2: Stirring, 3: Heat, 4: Done
// Step 1: Ingredient Doses
const doses = {
dragon: 0,
mandrake: 0,
star: 0
};
const targetIngredients = {
dragon: 2,
mandrake: 1,
star: 1
const targetDoses = {
dragon: 3, // Fluffy's 3 heads
mandrake: 2, // Harry's companions Ron & Hermione
star: 1 // The Alchemist's 1 ring
};
// DOM Elements
@@ -17,7 +19,9 @@
const stepInstruction = document.getElementById('stepInstruction');
const stepSubtext = document.getElementById('stepSubtext');
const step1Wrapper = document.getElementById('step1Wrapper');
const totalIngredientsCount = document.getElementById('totalIngredientsCount');
const doseValDragon = document.getElementById('doseValDragon');
const doseValMandrake = document.getElementById('doseValMandrake');
const doseValStar = document.getElementById('doseValStar');
// SVG Elements
const gradStop1 = document.getElementById('gradStop1');
@@ -27,121 +31,275 @@
const stirSpoon = document.getElementById('stirSpoon');
const dropItemAnim = document.getElementById('dropItemAnim');
// Controls
// Step 2: Stirring Controls
const stirPanel = document.getElementById('stirPanel');
const stirCountSpan = document.getElementById('stirCount');
const stirBtn = document.getElementById('stirBtn');
const stirPhaseLabel = document.getElementById('stirPhaseLabel');
const stirIndicatorBar = document.getElementById('stirIndicatorBar');
const stirTimerVal = document.getElementById('stirTimerVal');
const btnStirLeft = document.getElementById('btnStirLeft');
const btnStirRight = document.getElementById('btnStirRight');
// Step 3: Heat Controls
const heatPanel = document.getElementById('heatPanel');
const tempIndicator = document.getElementById('tempIndicator');
const heatTimerSpan = document.getElementById('heatTimer');
const bellowsBtn = document.getElementById('bellowsBtn');
// Success & Modals
const successPanel = document.getElementById('successPanel');
const snapeModal = document.getElementById('snapeReprimandModal');
const snapeText = document.getElementById('snapeReprimandText');
const riddleModal = document.getElementById('recipeRiddleModal');
// Step 1: Add Ingredient
window.addIngredient = function(type) {
if (currentStep !== 1) return;
if (ingredients[type] >= targetIngredients[type]) return;
// Snape Insult Repository
const snapeQuotes = [
"»Kläglich. Sogar ein Bergtroll mit verbundenen Augen hätte die Mengenangaben treffender ergründet.«",
"»Offenbar mangelt es Ihnen nicht nur an magischem Talent, sondern auch an elementarem Leseverständnis.«",
"»Ein weiterer solcher Fehltritt, und dieser Kessel fliegt Ihnen um die Ohren wie Longbottoms letzte Missetat.«",
"»Haben Sie Ihre Brille verlegt, oder ist das schlichte Ignoranz gegenüber den feinsten Künsten des Zaubertrankbrauens?«",
"»3 Drachenblut, 2 Alraunen, 1 Sternenstaub – ist das für Ihr Denkvermögen tatsächlich zu hoch gegriffen?«"
];
ingredients[type]++;
if (window.soundFX) window.soundFX.playBottleClink();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(30);
function getRandomSnapeQuote() {
return snapeQuotes[Math.floor(Math.random() * snapeQuotes.length)];
}
// Update UI Badge
if (type === 'dragon') {
document.getElementById('countDragon').innerText = `${ingredients.dragon} / ${targetIngredients.dragon}`;
if (ingredients.dragon >= targetIngredients.dragon) document.getElementById('ingDragon').classList.add('done');
} else if (type === 'mandrake') {
document.getElementById('countMandrake').innerText = `${ingredients.mandrake} / ${targetIngredients.mandrake}`;
if (ingredients.mandrake >= targetIngredients.mandrake) document.getElementById('ingMandrake').classList.add('done');
} else if (type === 'star') {
document.getElementById('countStar').innerText = `${ingredients.star} / ${targetIngredients.star}`;
if (ingredients.star >= targetIngredients.star) document.getElementById('ingStar').classList.add('done');
}
const total = ingredients.dragon + ingredients.mandrake + ingredients.star;
if (totalIngredientsCount) totalIngredientsCount.innerText = total;
// Visual drop animation in SVG
if (dropItemAnim) {
const icons = { dragon: '🐉', mandrake: '🌿', star: '✨' };
dropItemAnim.textContent = icons[type];
dropItemAnim.style.display = 'block';
dropItemAnim.style.animation = 'ingredientDropAnim 0.5s ease-out forwards';
setTimeout(() => {
dropItemAnim.style.display = 'none';
}, 550);
}
// Ripple pulse on liquid
if (liquidSurface) {
liquidSurface.style.transform = 'scale(1.06)';
setTimeout(() => liquidSurface.style.transform = 'scale(1)', 200);
}
// Check if all ingredients added
if (total === 4) {
setTimeout(startStep2, 600);
}
// Modal helpers
window.openRecipeRiddleModal = function() {
if (riddleModal) riddleModal.classList.add('show');
if (window.soundFX) window.soundFX.playStoneSlide();
};
// Step 2: Stirring
let completedStirs = 0;
window.closeRecipeRiddleModal = function() {
if (riddleModal) riddleModal.classList.remove('show');
if (window.soundFX) window.soundFX.playStoneSlide();
};
window.triggerSnapeInsult = function(customQuote) {
if (snapeText) snapeText.innerText = customQuote || getRandomSnapeQuote();
if (snapeModal) snapeModal.classList.add('show');
// Turn cauldron murky black with foul smoke
if (gradStop1 && gradStop2 && gradStop3) {
gradStop1.setAttribute('stop-color', '#2d2d2d');
gradStop2.setAttribute('stop-color', '#1a1a1a');
gradStop3.setAttribute('stop-color', '#0d0d0d');
}
if (window.soundFX) window.soundFX.playWhoosh();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([60, 40, 100]);
};
window.closeSnapeModal = function() {
if (snapeModal) snapeModal.classList.remove('show');
// Reset liquid back to clean starting emerald green
if (gradStop1 && gradStop2 && gradStop3) {
gradStop1.setAttribute('stop-color', '#2ecc71');
gradStop2.setAttribute('stop-color', '#16a085');
gradStop3.setAttribute('stop-color', '#0b3b30');
}
if (window.soundFX) window.soundFX.playStoneSlide();
};
// Step 1: Ingredient Dosage Adjustments
window.adjustDose = function(type, delta) {
if (currentStep !== 1) return;
doses[type] = Math.max(0, Math.min(9, doses[type] + delta));
if (type === 'dragon' && doseValDragon) doseValDragon.innerText = doses.dragon;
if (type === 'mandrake' && doseValMandrake) doseValMandrake.innerText = doses.mandrake;
if (type === 'star' && doseValStar) doseValStar.innerText = doses.star;
if (window.soundFX) window.soundFX.playBottleClink();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(25);
};
window.verifyAndMixIngredients = function() {
if (currentStep !== 1) return;
// Check if correct: 3 Dragon, 2 Mandrake, 1 Star
const isCorrect = (doses.dragon === targetDoses.dragon &&
doses.mandrake === targetDoses.mandrake &&
doses.star === targetDoses.star);
if (!isCorrect) {
// Wrong dosage! Trigger Snape's rebuke!
window.triggerSnapeInsult();
return;
}
// Correct! Play dropping animations and proceed to Step 2
if (dropItemAnim) {
dropItemAnim.textContent = '🐉🌿✨';
dropItemAnim.style.display = 'block';
dropItemAnim.style.animation = 'ingredientDropAnim 0.7s ease-out forwards';
setTimeout(() => { dropItemAnim.style.display = 'none'; }, 750);
}
if (liquidSurface) {
liquidSurface.style.transform = 'scale(1.08)';
setTimeout(() => liquidSurface.style.transform = 'scale(1)', 300);
}
if (window.soundFX) window.soundFX.playBottleClink();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([40, 80]);
setTimeout(startStep2, 700);
};
// Step 2: Two-Way Stirring with Tempo Bar
let stirPhase = 'left'; // 'left' then 'right'
let phaseTimer = 0.0;
let stirTempo = 25; // 0 to 100%
let stirLoopInterval = null;
let wildTempoTime = 0.0;
function startStep2() {
currentStep = 2;
stepBadge.innerText = "Schritt 2: Gleichmäßig rühren";
stepInstruction.innerText = "Rühre den Kessel 3-mal um!";
stepSubtext.innerText = "Tippe auf den großen Rühr-Button, um die Essenzen zu vermengen.";
stirPhase = 'left';
phaseTimer = 0.0;
stirTempo = 25;
wildTempoTime = 0.0;
stepBadge.innerText = "Schritt 2: Rhythmisches Rühren";
stepInstruction.innerText = "Rühre den Sud gleichmäßig im Takt!";
stepSubtext.innerText = "Laut Rezept: Zuerst 3 Sekunden LINKS (↺), danach 3 Sekunden RECHTS (↻)!";
if (step1Wrapper) step1Wrapper.style.display = 'none';
if (stirPanel) stirPanel.style.display = 'flex';
// Show wooden spoon in cauldron
if (stirSpoon) stirSpoon.style.display = 'block';
// Shift liquid color to mystical purple
// Set liquid to rich amethyst purple
if (gradStop1 && gradStop2 && gradStop3) {
gradStop1.setAttribute('stop-color', '#9b59b6');
gradStop2.setAttribute('stop-color', '#8e44ad');
gradStop3.setAttribute('stop-color', '#341f47');
}
updateStirUI();
if (window.soundFX) window.soundFX.playStoneSlide();
// Start tempo decay loop
if (stirLoopInterval) clearInterval(stirLoopInterval);
stirLoopInterval = setInterval(updateStirLoop, 50);
}
window.doStir = function() {
function updateStirUI() {
if (stirPhaseLabel) {
if (stirPhase === 'left') {
stirPhaseLabel.innerText = "↺ LINKS (Phase 1)";
stirPhaseLabel.style.color = "#4cc9f0";
if (btnStirLeft) btnStirLeft.classList.add('active-target');
if (btnStirRight) btnStirRight.classList.remove('active-target');
} else {
stirPhaseLabel.innerText = "↻ RECHTS (Phase 2)";
stirPhaseLabel.style.color = "#ffd700";
if (btnStirLeft) btnStirLeft.classList.remove('active-target');
if (btnStirRight) btnStirRight.classList.add('active-target');
}
}
if (stirTimerVal) stirTimerVal.innerText = phaseTimer.toFixed(1);
}
window.stirTap = function(direction) {
if (currentStep !== 2) return;
completedStirs++;
if (stirCountSpan) stirCountSpan.innerText = completedStirs;
if (stirBtn) stirBtn.innerHTML = `🥄 Kessel umrühren! (<span>${completedStirs}</span> / 3)`;
if (window.soundFX) window.soundFX.playBottleClink();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(35);
// Animate stirring spoon
if (stirSpoon) {
stirSpoon.classList.remove('stirring-active');
void stirSpoon.offsetWidth; // re-flow
stirSpoon.classList.add('stirring-active');
// Check if wrong direction tapped!
if (direction !== stirPhase) {
const wrongDirQuote = (stirPhase === 'left') ?
"»Linksherum, sagte ich! Verwechseln Sie die Drehrichtungen wie Mr. Finnigan?«" :
"»Nun rechtsherum! Hören Sie überhaupt zu oder träumen Sie von Schokofröschen?«";
window.triggerSnapeInsult(wrongDirQuote);
phaseTimer = 0.0;
stirTempo = 25;
updateStirUI();
return;
}
if (completedStirs >= 3) {
setTimeout(() => {
if (stirSpoon) stirSpoon.style.display = 'none';
if (stirPanel) stirPanel.style.display = 'none';
startStep3();
}, 600);
// Correct direction tap: give a rhythmic boost
stirTempo = Math.min(100, stirTempo + 13);
if (window.soundFX) window.soundFX.playBottleClink();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(20);
// Animate spoon
if (stirSpoon) {
stirSpoon.classList.remove('stirring-active');
void stirSpoon.offsetWidth;
stirSpoon.classList.add('stirring-active');
}
};
// Step 3: Heat Control
let currentTemp = 35; // percent (0-100)
function updateStirLoop() {
if (currentStep !== 2) return;
// Continuous tempo decay
stirTempo = Math.max(0, stirTempo - 1.1);
if (stirIndicatorBar) stirIndicatorBar.style.width = stirTempo + '%';
// Check if in green zone (40% to 75%)
if (stirTempo >= 40 && stirTempo <= 75) {
phaseTimer += 0.05;
wildTempoTime = 0.0;
if (stirIndicatorBar) stirIndicatorBar.style.background = '#2ecc71';
if (stirTimerVal) stirTimerVal.innerText = phaseTimer.toFixed(1);
} else if (stirTempo > 82) {
// Too frantic!
if (stirIndicatorBar) stirIndicatorBar.style.background = '#e74c3c';
wildTempoTime += 0.05;
if (wildTempoTime > 1.2) {
wildTempoTime = 0.0;
stirTempo = 20;
phaseTimer = 0.0;
window.triggerSnapeInsult("»Mäßigen Sie Ihr ungestümes Tempo! Sie schlagen Schaum statt zu rühren! Das ist kein Pfannkuchenteig!«");
updateStirUI();
return;
}
} else {
// Too slow (blue/cold)
if (stirIndicatorBar) stirIndicatorBar.style.background = 'linear-gradient(90deg, #3498db 0%, #2ecc71 50%, #e74c3c 100%)';
wildTempoTime = 0.0;
}
// Phase completion checks (3.0 seconds needed each)
if (phaseTimer >= 3.0) {
if (stirPhase === 'left') {
// Switch to Phase 2: Right
stirPhase = 'right';
phaseTimer = 0.0;
stirTempo = 30;
updateStirUI();
if (window.soundFX) window.soundFX.playKeyChime();
if (window.showFloatingToast) {
window.showFloatingToast("✨ Hervorragend! Jetzt 3 Sekunden gleichmäßig RECHTS (↻) rühren!");
}
} else if (stirPhase === 'right') {
// Step 2 Complete!
clearInterval(stirLoopInterval);
stirLoopInterval = null;
if (stirSpoon) stirSpoon.style.display = 'none';
if (stirPanel) stirPanel.style.display = 'none';
startStep3();
}
}
}
// Step 3: Heat Control (Blasebalg) with Overheat Insults
let currentTemp = 35;
let heatTimer = 0.0;
let heatInterval = null;
let overheatSeconds = 0.0;
function startStep3() {
currentStep = 3;
heatTimer = 0.0;
currentTemp = 35;
overheatSeconds = 0.0;
stepBadge.innerText = "Schritt 3: Hitze balancieren";
stepInstruction.innerText = "Pumpe mit dem Blasebalg, um die Flammen zu nähren!";
stepSubtext.innerText = "Halte die Anzeige für 3 Sekunden im grünen Idealbereich (45% - 85%).";
stepSubtext.innerText = "Halte die Anzeige für 3 Sekunden im grünen Idealbereich (45% - 85%). Nicht überhitzen!";
if (heatPanel) heatPanel.classList.add('active');
// Shift liquid color to fiery orange
@@ -152,7 +310,7 @@
}
if (window.soundFX) window.soundFX.playWhoosh();
if (heatInterval) clearInterval(heatInterval);
heatInterval = setInterval(updateHeatLoop, 50);
}
@@ -162,21 +320,35 @@
if (window.soundFX) window.soundFX.playWhoosh();
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(20);
const bellows = document.getElementById('bellowsBtn');
if (bellows) {
bellows.style.transform = 'scale(0.92)';
setTimeout(() => bellows.style.transform = 'scale(1)', 100);
if (bellowsBtn) {
bellowsBtn.style.transform = 'scale(0.92)';
setTimeout(() => bellowsBtn.style.transform = 'scale(1)', 100);
}
};
function updateHeatLoop() {
if (currentStep !== 3) return;
// Gentle cooling down
// Cooling decay
currentTemp = Math.max(0, currentTemp - 0.45);
if (tempIndicator) tempIndicator.style.width = currentTemp + '%';
// Check ideal zone (45% to 85%) - forgiving on mobile!
// Check overheat condition
if (currentTemp > 92) {
overheatSeconds += 0.05;
if (overheatSeconds > 1.0) {
overheatSeconds = 0.0;
currentTemp = 35;
heatTimer = 0.0;
if (heatTimerSpan) heatTimerSpan.innerText = "0.0";
window.triggerSnapeInsult("»Kesselüberhitzung! Sie kochen die kostbaren Essenzen zu Schlacke! Ein wenig mehr Feingefühl mit dem Blasebalg!«");
return;
}
} else {
overheatSeconds = 0.0;
}
// Check ideal zone (45% to 85%)
if (currentTemp >= 45 && currentTemp <= 85) {
heatTimer += 0.05;
if (heatTimerSpan) heatTimerSpan.innerText = heatTimer.toFixed(1);
@@ -187,6 +359,7 @@
if (heatTimer >= 3.0) {
clearInterval(heatInterval);
heatInterval = null;
finishPotionBrew();
}
}
@@ -200,11 +373,11 @@
stepBadge.style.color = "#2ecc71";
stepInstruction.innerText = "Felix Felicis strahlt in reinem Gold!";
stepSubtext.innerText = "Dein Zaubertrank ist meisterhaft gelungen.";
stepSubtext.innerText = "Dein Zaubertrank ist meisterhaft gelungen. Selbst Snape nickt widerwillig!";
if (heatPanel) heatPanel.classList.remove('active');
// Turn liquid into sparkling golden elixir
// Turn liquid into radiant shimmering gold
if (gradStop1 && gradStop2 && gradStop3) {
gradStop1.setAttribute('stop-color', '#fff6a5');
gradStop2.setAttribute('stop-color', '#ffd700');
@@ -239,9 +412,9 @@
window.showChamberVictory({
chamberBadge: "Kammer III: Die Brauküche",
title: "⚗️ Zaubertrank Gemeistert!",
statsHtml: `<span>🧪 Elixier: <strong>Felix Felicis</strong></span><span>🌡️ Hitze: <strong>Perfekt gemeistert</strong></span>`,
statsHtml: `<span>🧪 Elixier: <strong>Felix Felicis</strong></span><span>🥄 Rühren: <strong>2 Phasen perfekt</strong></span><span>🌡️ Hitze: <strong>Meisterlich</strong></span>`,
item: newItem,
storyText: "Der Kessel erstrahlt in gleißendem, flüssigem Gold! Du füllst eine Phiole des unbezahlbaren <strong>Felix Felicis</strong> ab. Seine Wärme durchdringt deinen Geist. Mit geschärften Sinnen trittst du vor das gewaltige <strong>Runen-Drehschloss der vier Gründer</strong>!",
storyText: "Der Kessel erstrahlt in gleißendem, flüssigem Gold! Du füllst eine Phiole des unbezahlbaren <strong>Felix Felicis</strong> ab. Selbst Severus Snape quittiert dein Werk mit einem knappen, anerkennenden Nicken. Seine Wärme durchdringt deinen Geist. Mit geschärften Sinnen trittst du vor das gewaltige <strong>Runen-Drehschloss der vier Gründer</strong>!",
nextUrl: "/cryptex",
nextBtnText: "➔ Weiter zu Kammer IV: Das Drehschloss 🔐"
});