Maxi
424 lines
17 KiB
JavaScript
Executable File
424 lines
17 KiB
JavaScript
Executable File
// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine: Riddles, Two-Way Stirring & Snape's Wrath)
|
||
(function() {
|
||
let currentStep = 1; // 1: Dosage, 2: Stirring, 3: Heat, 4: Done
|
||
|
||
// Step 1: Ingredient Doses
|
||
const doses = {
|
||
dragon: 0,
|
||
mandrake: 0,
|
||
star: 0
|
||
};
|
||
const targetDoses = {
|
||
dragon: 3, // Fluffy's 3 heads
|
||
mandrake: 2, // Harry's companions Ron & Hermione
|
||
star: 1 // The Alchemist's 1 ring
|
||
};
|
||
|
||
// DOM Elements
|
||
const stepBadge = document.getElementById('stepBadge');
|
||
const stepInstruction = document.getElementById('stepInstruction');
|
||
const stepSubtext = document.getElementById('stepSubtext');
|
||
const step1Wrapper = document.getElementById('step1Wrapper');
|
||
const doseValDragon = document.getElementById('doseValDragon');
|
||
const doseValMandrake = document.getElementById('doseValMandrake');
|
||
const doseValStar = document.getElementById('doseValStar');
|
||
|
||
// SVG Elements
|
||
const gradStop1 = document.getElementById('gradStop1');
|
||
const gradStop2 = document.getElementById('gradStop2');
|
||
const gradStop3 = document.getElementById('gradStop3');
|
||
const liquidSurface = document.getElementById('liquidSurface');
|
||
const stirSpoon = document.getElementById('stirSpoon');
|
||
const dropItemAnim = document.getElementById('dropItemAnim');
|
||
|
||
// Step 2: Stirring Controls
|
||
const stirPanel = document.getElementById('stirPanel');
|
||
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');
|
||
|
||
// 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?«"
|
||
];
|
||
|
||
function getRandomSnapeQuote() {
|
||
return snapeQuotes[Math.floor(Math.random() * snapeQuotes.length)];
|
||
}
|
||
|
||
// Modal helpers
|
||
window.openRecipeRiddleModal = function() {
|
||
if (riddleModal) riddleModal.classList.add('show');
|
||
if (window.soundFX) window.soundFX.playStoneSlide();
|
||
};
|
||
|
||
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;
|
||
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';
|
||
if (stirSpoon) stirSpoon.style.display = 'block';
|
||
|
||
// 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);
|
||
}
|
||
|
||
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;
|
||
|
||
// 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;
|
||
}
|
||
|
||
// 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');
|
||
}
|
||
};
|
||
|
||
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%). Nicht überhitzen!";
|
||
if (heatPanel) heatPanel.classList.add('active');
|
||
|
||
// Shift liquid color to fiery orange
|
||
if (gradStop1 && gradStop2 && gradStop3) {
|
||
gradStop1.setAttribute('stop-color', '#e67e22');
|
||
gradStop2.setAttribute('stop-color', '#d35400');
|
||
gradStop3.setAttribute('stop-color', '#561d00');
|
||
}
|
||
|
||
if (window.soundFX) window.soundFX.playWhoosh();
|
||
if (heatInterval) clearInterval(heatInterval);
|
||
heatInterval = setInterval(updateHeatLoop, 50);
|
||
}
|
||
|
||
window.pumpHeat = function() {
|
||
if (currentStep !== 3) return;
|
||
currentTemp = Math.min(100, currentTemp + 18);
|
||
if (window.soundFX) window.soundFX.playWhoosh();
|
||
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(20);
|
||
|
||
if (bellowsBtn) {
|
||
bellowsBtn.style.transform = 'scale(0.92)';
|
||
setTimeout(() => bellowsBtn.style.transform = 'scale(1)', 100);
|
||
}
|
||
};
|
||
|
||
function updateHeatLoop() {
|
||
if (currentStep !== 3) return;
|
||
|
||
// Cooling decay
|
||
currentTemp = Math.max(0, currentTemp - 0.45);
|
||
if (tempIndicator) tempIndicator.style.width = currentTemp + '%';
|
||
|
||
// 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);
|
||
if (tempIndicator) tempIndicator.style.background = '#2ecc71';
|
||
} else {
|
||
if (tempIndicator) tempIndicator.style.background = 'linear-gradient(90deg, #3498db, #f39c12, #e74c3c)';
|
||
}
|
||
|
||
if (heatTimer >= 3.0) {
|
||
clearInterval(heatInterval);
|
||
heatInterval = null;
|
||
finishPotionBrew();
|
||
}
|
||
}
|
||
|
||
// Step 4: Victory
|
||
async function finishPotionBrew() {
|
||
currentStep = 4;
|
||
stepBadge.innerText = "✅ Trank vollendet!";
|
||
stepBadge.style.background = "rgba(46, 204, 113, 0.3)";
|
||
stepBadge.style.borderColor = "#2ecc71";
|
||
stepBadge.style.color = "#2ecc71";
|
||
|
||
stepInstruction.innerText = "Felix Felicis strahlt in reinem Gold!";
|
||
stepSubtext.innerText = "Dein Zaubertrank ist meisterhaft gelungen. Selbst Snape nickt widerwillig!";
|
||
|
||
if (heatPanel) heatPanel.classList.remove('active');
|
||
|
||
// Turn liquid into radiant shimmering gold
|
||
if (gradStop1 && gradStop2 && gradStop3) {
|
||
gradStop1.setAttribute('stop-color', '#fff6a5');
|
||
gradStop2.setAttribute('stop-color', '#ffd700');
|
||
gradStop3.setAttribute('stop-color', '#b7950b');
|
||
}
|
||
|
||
if (window.soundFX) window.soundFX.playMagicSuccess();
|
||
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([50, 100, 150]);
|
||
|
||
// API Completion Call
|
||
let newItem = null;
|
||
try {
|
||
const res = await fetch('/api/brew/complete', { method: 'POST' });
|
||
const data = await res.json();
|
||
if (data.new_item) newItem = data.new_item;
|
||
} catch (e) {
|
||
console.error("Brew complete error:", e);
|
||
}
|
||
|
||
if (!newItem) {
|
||
newItem = {
|
||
id: "felix_felicis",
|
||
name: "Felix Felicis",
|
||
icon: "🧪",
|
||
desc: "Ein Tropfen flüssiges Gold! Verleiht dir unerschütterliches Glück und enthüllt verborgene Runen."
|
||
};
|
||
}
|
||
|
||
if (successPanel) successPanel.style.display = 'block';
|
||
|
||
if (window.showChamberVictory) {
|
||
window.showChamberVictory({
|
||
chamberBadge: "Kammer III: Die Brauküche",
|
||
title: "⚗️ Zaubertrank Gemeistert!",
|
||
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. 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 🔐"
|
||
});
|
||
}
|
||
}
|
||
})();
|