Feature: Integrate all four Hogwarts mini-games (Duel, Potion Brewing, Cryptex Lock, Cornish Pixies)

2026-09-22 19:43:12 +02:00
parent 0e20549a44
commit 2ce944d1cd
13 changed files with 1662 additions and 13 deletions
@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+
+{% block title %}Kammer III: Die Zaubertrank-Brauküche · Hogwarts Escape{% endblock %}
+
+{% block content %}
+<div class="parchment-scroll">
+    <h1 class="parchment-title">⚗️ Kammer III: Die Zaubertrank-Brauküche ⚗️</h1>
+    <p class="riddle-poem" style="font-size: 1.25rem;">
+        "Dichte Dämpfe steigen aus dem massiven Kupferkessel auf.<br>
+        Um das nächste Kerkertor aufzuschmelzen, musst du einen legendären Trank vollenden:<br>
+        <strong>Felix Felicis – Das flüssige Gold des Glücks!</strong>"
+    </p>
+</div>
+
+<div class="brew-container">
+    <!-- Recipe Instruction Scroll -->
+    <div class="recipe-book">
+        <span id="stepBadge" class="recipe-step-badge">Schritt 1: Zutaten zugeben</span>
+        <h3 id="stepInstruction" style="color: var(--gold); margin: 0.25rem 0; font-size: 1.35rem;">
+            Gib die 4 Essenzen in den Kessel!
+        </h3>
+        <p id="stepSubtext" style="color: var(--text-dim); font-size: 0.95rem; margin: 0;">
+            Tippe auf die Zutaten im Regal, um sie in den brodelnden Sud zu geben.
+        </p>
+    </div>
+
+    <!-- The Cauldron Stage -->
+    <div class="cauldron-wrapper" id="cauldronZone">
+        <!-- Interactive Stir Ring Overlay -->
+        <div id="stirCircle" class="stir-circle">
+            <span class="stir-arrow-hint">↻</span>
+            <div id="stirTracker" style="width: 20px; height: 20px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px #fff;"></div>
+        </div>
+
+        <div class="cauldron-pot">
+            <div id="potionSurface" class="potion-surface"></div>
+        </div>
+        <div class="cauldron-fire">🔥</div>
+    </div>
+
+    <!-- Stir Status Hint -->
+    <div id="stirCounterText" style="display: none; color: var(--gold); font-size: 1.2rem; font-weight: bold;">
+        Rühre im Uhrzeigersinn: <span id="stirCount">0</span> / 3 Runden
+    </div>
+
+    <!-- Step 1: Ingredient Shelf -->
+    <div id="ingredientsShelf" class="ingredients-shelf">
+        <button type="button" class="ingredient-btn" id="ingDragon" onclick="addIngredient('dragon')">
+            <span class="ing-icon">🐉</span>
+            <span class="ing-name">Drachenblut</span>
+            <span class="ing-count" id="countDragon">0 / 2</span>
+        </button>
+        <button type="button" class="ingredient-btn" id="ingMandrake" onclick="addIngredient('mandrake')">
+            <span class="ing-icon">🌿</span>
+            <span class="ing-name">Alraunenblatt</span>
+            <span class="ing-count" id="countMandrake">0 / 1</span>
+        </button>
+        <button type="button" class="ingredient-btn" id="ingStar" onclick="addIngredient('star')">
+            <span class="ing-icon">✨</span>
+            <span class="ing-name">Sternenstaub</span>
+            <span class="ing-count" id="countStar">0 / 1</span>
+        </button>
+    </div>
+
+    <!-- Step 3: Heat Control Panel -->
+    <div id="heatPanel" class="heat-control-panel">
+        <div style="color: var(--text-light); font-size: 0.95rem;">
+            🌡️ Halte die Kesseltemperatur für <strong>4 Sekunden</strong> im grünen Bereich:
+        </div>
+        <div class="temp-bar-container">
+            <div class="temp-ideal-zone"></div>
+            <div id="tempIndicator" class="temp-indicator"></div>
+        </div>
+        <div style="display: flex; justify-content: space-between; width: 100%; max-width: 320px; font-size: 0.8rem; color: var(--text-dim);">
+            <span>Kalt (0°C)</span>
+            <span style="color: #2ecc71; font-weight: bold;">Ideal (70-90°C)</span>
+            <span>Überhitzt (120°C)</span>
+        </div>
+        <div style="color: var(--gold); font-weight: bold; margin-top: 0.25rem;">
+            Ideale Hitze gehalten: <span id="heatTimer">0.0</span> / 4.0s
+        </div>
+        <button type="button" id="bellowsBtn" class="bellows-btn" onclick="pumpHeat()">
+            🔥 Blasebalg drücken!
+        </button>
+    </div>
+
+    <!-- Success Container -->
+    <div id="successPanel" style="display: none; text-align: center; margin-top: 1rem;">
+        <h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
+            ✨ Felix Felicis vollendet! ✨
+        </h2>
+        <p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
+            Der Kessel erstrahlt in goldenem Sonnenlicht! Eine Phiole des reinen flüssigen Glücks fließt magisch in deinen Zauberbeutel.
+        </p>
+        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+            <a href="/cryptex" class="btn-magical">Zur nächsten Kammer: Das Drehschloss 🔐➔</a>
+            <a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/brew.js?v=1.0"></script>
+{% endblock %}