Feature: Integrate all four Hogwarts mini-games (Duel, Potion Brewing, Cryptex Lock, Cornish Pixies)
This commit is contained in:
Maxi
Executable
+227
@@ -0,0 +1,227 @@
|
||||
// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine)
|
||||
(function() {
|
||||
let currentStep = 1; // 1: Ingredients, 2: Stirring, 3: Heat, 4: Done
|
||||
const ingredients = {
|
||||
dragon: 0,
|
||||
mandrake: 0,
|
||||
star: 0
|
||||
};
|
||||
const targetIngredients = {
|
||||
dragon: 2,
|
||||
mandrake: 1,
|
||||
star: 1
|
||||
};
|
||||
|
||||
// DOM Elements
|
||||
const stepBadge = document.getElementById('stepBadge');
|
||||
const stepInstruction = document.getElementById('stepInstruction');
|
||||
const stepSubtext = document.getElementById('stepSubtext');
|
||||
const ingredientsShelf = document.getElementById('ingredientsShelf');
|
||||
const potionSurface = document.getElementById('potionSurface');
|
||||
const stirCircle = document.getElementById('stirCircle');
|
||||
const stirTracker = document.getElementById('stirTracker');
|
||||
const stirCounterText = document.getElementById('stirCounterText');
|
||||
const stirCountSpan = document.getElementById('stirCount');
|
||||
const heatPanel = document.getElementById('heatPanel');
|
||||
const tempIndicator = document.getElementById('tempIndicator');
|
||||
const heatTimerSpan = document.getElementById('heatTimer');
|
||||
const successPanel = document.getElementById('successPanel');
|
||||
const cauldronZone = document.getElementById('cauldronZone');
|
||||
|
||||
// Step 1: Add Ingredient
|
||||
window.addIngredient = function(type) {
|
||||
if (currentStep !== 1) return;
|
||||
if (ingredients[type] >= targetIngredients[type]) return;
|
||||
|
||||
ingredients[type]++;
|
||||
if (window.soundFX) window.soundFX.playBottleClink();
|
||||
|
||||
// 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');
|
||||
}
|
||||
|
||||
// Ripple effect on surface
|
||||
potionSurface.style.transform = 'scale(1.08)';
|
||||
setTimeout(() => potionSurface.style.transform = 'scale(1)', 200);
|
||||
|
||||
// Check if all ingredients added
|
||||
const total = ingredients.dragon + ingredients.mandrake + ingredients.star;
|
||||
if (total === 4) {
|
||||
setTimeout(startStep2, 600);
|
||||
}
|
||||
};
|
||||
|
||||
// Step 2: Stirring
|
||||
let completedStirs = 0;
|
||||
let lastAngle = null;
|
||||
let accumulatedAngle = 0;
|
||||
|
||||
function startStep2() {
|
||||
currentStep = 2;
|
||||
stepBadge.innerText = "Schritt 2: Gleichmäßig rühren";
|
||||
stepInstruction.innerText = "Rühre den Sud 3 Runden im Uhrzeigersinn!";
|
||||
stepSubtext.innerText = "Führe deinen Finger oder die Maus im Kreis über dem Kessel oder tippe ihn an.";
|
||||
ingredientsShelf.style.display = 'none';
|
||||
stirCounterText.style.display = 'block';
|
||||
stirCircle.classList.add('active');
|
||||
potionSurface.className = 'potion-surface state-stir';
|
||||
|
||||
if (window.soundFX) window.soundFX.playStoneSlide();
|
||||
}
|
||||
|
||||
// Touch / Pointer stirring logic
|
||||
let isStirring = false;
|
||||
|
||||
function getAngle(e) {
|
||||
const rect = cauldronZone.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
|
||||
return Math.atan2(clientY - centerY, clientX - centerX) * (180 / Math.PI);
|
||||
}
|
||||
|
||||
function onStirStart(e) {
|
||||
if (currentStep !== 2) return;
|
||||
isStirring = true;
|
||||
lastAngle = getAngle(e);
|
||||
}
|
||||
|
||||
function onStirMove(e) {
|
||||
if (currentStep !== 2 || !isStirring) return;
|
||||
e.preventDefault();
|
||||
const angle = getAngle(e);
|
||||
if (lastAngle !== null) {
|
||||
let diff = angle - lastAngle;
|
||||
// Handle wrap-around
|
||||
if (diff < -180) diff += 360;
|
||||
if (diff > 180) diff -= 360;
|
||||
|
||||
// Only count clockwise
|
||||
if (diff > 0) {
|
||||
accumulatedAngle += diff;
|
||||
if (accumulatedAngle >= 360) {
|
||||
accumulatedAngle -= 360;
|
||||
incrementStir();
|
||||
}
|
||||
}
|
||||
}
|
||||
lastAngle = angle;
|
||||
}
|
||||
|
||||
function onStirEnd() {
|
||||
isStirring = false;
|
||||
lastAngle = null;
|
||||
}
|
||||
|
||||
function incrementStir() {
|
||||
completedStirs++;
|
||||
stirCountSpan.innerText = completedStirs;
|
||||
if (window.soundFX) window.soundFX.playBottleClink();
|
||||
|
||||
if (completedStirs >= 3) {
|
||||
stirCircle.classList.remove('active');
|
||||
stirCounterText.style.display = 'none';
|
||||
setTimeout(startStep3, 600);
|
||||
}
|
||||
}
|
||||
|
||||
// Direct tap fallback for mobile
|
||||
cauldronZone.addEventListener('click', () => {
|
||||
if (currentStep === 2 && !isStirring) {
|
||||
incrementStir();
|
||||
}
|
||||
});
|
||||
|
||||
cauldronZone.addEventListener('mousedown', onStirStart);
|
||||
window.addEventListener('mousemove', onStirMove);
|
||||
window.addEventListener('mouseup', onStirEnd);
|
||||
|
||||
cauldronZone.addEventListener('touchstart', onStirStart, { passive: false });
|
||||
window.addEventListener('touchmove', onStirMove, { passive: false });
|
||||
window.addEventListener('touchend', onStirEnd);
|
||||
|
||||
// Step 3: Heat Control
|
||||
let currentTemp = 35; // percent (0-100)
|
||||
let heatTimer = 0.0;
|
||||
let heatInterval = null;
|
||||
|
||||
function startStep3() {
|
||||
currentStep = 3;
|
||||
stepBadge.innerText = "Schritt 3: Hitze balancieren";
|
||||
stepInstruction.innerText = "Pumpe mit dem Blasebalg, um die Hitze im grünen Bereich zu halten!";
|
||||
stepSubtext.innerText = "Halte die Nadel für 4 Sekunden im grünen Bereich (60% - 85%).";
|
||||
potionSurface.className = 'potion-surface state-heat';
|
||||
heatPanel.classList.add('active');
|
||||
|
||||
if (window.soundFX) window.soundFX.playWhoosh();
|
||||
|
||||
heatInterval = setInterval(updateHeatLoop, 50);
|
||||
}
|
||||
|
||||
window.pumpHeat = function() {
|
||||
if (currentStep !== 3) return;
|
||||
currentTemp = Math.min(100, currentTemp + 15);
|
||||
if (window.soundFX) window.soundFX.playWhoosh();
|
||||
};
|
||||
|
||||
function updateHeatLoop() {
|
||||
if (currentStep !== 3) return;
|
||||
|
||||
// Slow cooling down
|
||||
currentTemp = Math.max(0, currentTemp - 0.55);
|
||||
tempIndicator.style.width = currentTemp + '%';
|
||||
|
||||
// Check ideal zone (60% to 85%)
|
||||
if (currentTemp >= 60 && currentTemp <= 85) {
|
||||
heatTimer += 0.05;
|
||||
heatTimerSpan.innerText = heatTimer.toFixed(1);
|
||||
tempIndicator.style.background = '#2ecc71';
|
||||
} else {
|
||||
tempIndicator.style.background = 'linear-gradient(90deg, #3498db, #f39c12, #e74c3c)';
|
||||
}
|
||||
|
||||
if (heatTimer >= 4.0) {
|
||||
clearInterval(heatInterval);
|
||||
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 perfekt gelungen.";
|
||||
|
||||
heatPanel.classList.remove('active');
|
||||
potionSurface.className = 'potion-surface state-gold';
|
||||
|
||||
if (window.soundFX) window.soundFX.playMagicSuccess();
|
||||
|
||||
// API Completion Call
|
||||
try {
|
||||
const res = await fetch('/api/brew/complete', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (data.new_item && window.notifyNewItem) {
|
||||
window.notifyNewItem(data.new_item);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Brew complete error:", e);
|
||||
}
|
||||
|
||||
successPanel.style.display = 'block';
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user