kobold-ai/bootle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maxi
2026-09-22 19:43:12 +02:00
parent 0e20549a44
commit 2ce944d1cd
13 changed files with 1662 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+34 -3
View File
@@ -126,6 +126,18 @@
<span>🪄 Spruch-Duell:</span>
<span>{% if state.duel_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
</div>
<div class="stat-row">
<span>⚗️ Trank-Brauküche:</span>
<span>{% if state.brew_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
</div>
<div class="stat-row">
<span>🔐 Runen-Drehschloss:</span>
<span>{% if state.cryptex_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
</div>
<div class="stat-row">
<span>🧚 Wichtel-Panik:</span>
<span>{% if state.pixies_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
</div>
<div class="stat-row">
<span>🧪 Snapes Flammen:</span>
<span>{% if state.bottles_solved %}✅ Gelöst{% else %}⏳ Offen{% endif %}</span>
@@ -161,15 +173,34 @@
<small>{% if state.duel_solved %}✅ Gemeistert{% else %}⚡ Zaubergesten zeichnen{% endif %}</small>
</div>
</a>
<a href="/brew" class="room-nav-item {% if request.url.path == '/brew' %}current{% endif %}">
<span class="room-icon">⚗️</span>
<div class="room-info">
<strong>Kammer III: Die Brauküche</strong>
<small>{% if state.brew_solved %}✅ Gemeistert{% else %}🧪 Felix Felicis brauen{% endif %}</small>
</div>
</a>
<a href="/cryptex" class="room-nav-item {% if request.url.path == '/cryptex' %}current{% endif %}">
<span class="room-icon">🔐</span>
<div class="room-info">
<strong>Kammer IV: Das Drehschloss</strong>
<small>{% if state.cryptex_solved %}✅ Gemeistert{% else %}🔑 Gründer-Siegel knacken{% endif %}</small>
</div>
</a>
<a href="/pixies" class="room-nav-item {% if request.url.path == '/pixies' %}current{% endif %}">
<span class="room-icon">🧚</span>
<div class="room-info">
<strong>Kammer V: Wichtel-Panik</strong>
<small>{% if state.pixies_solved %}✅ Gemeistert{% else %}❄️ Immobilus auf Wichtel{% endif %}</small>
</div>
</a>
<a href="/bottles" class="room-nav-item {% if request.url.path == '/bottles' %}current{% endif %}">
<span class="room-icon">🧪</span>
<div class="room-info">
<strong>Kammer III: Snapes Flaschen</strong>
<strong>Kammer VI: Snapes Flaschen</strong>
<small>{% if state.bottles_solved %}✅ Gemeistert{% else %}🔥 Die Flammenkammer{% endif %}</small>
</div>
</a>
<a href="/sliding" class="room-nav-item {% if request.url.path == '/sliding' %}current{% endif %}">
<span class="room-icon">🧩</span>
<div class="room-info">
app/templates/brew.html
Executable
+105
View File
@@ -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 %}
app/templates/cryptex.html
Executable
+99
View File
@@ -0,0 +1,99 @@
{% extends "base.html" %}
{% block title %}Kammer IV: Das Runen-Drehschloss der Gründer · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🔐 Kammer IV: Das Runen-Drehschloss 🔐</h1>
<p class="riddle-poem" style="font-size: 1.25rem;">
"Vor dir ragt ein gewaltiges Tresortor mit einem massiven Messing-Zylinderschloss.<br>
In die Steinwand über dem Schloss ist ein altes Gründer-Rätsel gemeißelt:<br><br>
<em>»Vier Siegel schloss der Gründer Rat,<br>
bevor man je die Kammer betrat.<br>
Der <strong>Löwe</strong> wacht am Himmelstor,<br>
wo nachts die <strong>Silbersichel</strong> glimmt,<br>
das ew’ge <strong>Feuer</strong> niemals stirbt,<br>
bis der <strong>Zauberstab</strong> die Siegel bricht.«</em>"
</p>
</div>
<div class="cryptex-container">
<!-- Status / Feedback Toast -->
<div id="cryptexFeedback" style="display: none; padding: 0.6rem 1rem; border-radius: 8px; font-weight: bold; text-align: center; width: 100%;">
</div>
<!-- The 4-Dial Cryptex Box -->
<div class="cryptex-box">
<div class="cryptex-frame-line"></div>
<div class="cryptex-rings-row">
<!-- Dial 1 -->
<div class="cryptex-dial" id="dialCol0">
<button type="button" class="dial-step-btn" onclick="stepDial(0, -1)" title="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" onclick="stepDial(0, 1)">
<div class="dial-symbol" id="sym0">🦁</div>
<div class="dial-label" id="lbl0">Löwe</div>
</div>
<button type="button" class="dial-step-btn" onclick="stepDial(0, 1)" title="Nächstes Symbol">▼</button>
</div>
<!-- Dial 2 -->
<div class="cryptex-dial" id="dialCol1">
<button type="button" class="dial-step-btn" onclick="stepDial(1, -1)" title="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" onclick="stepDial(1, 1)">
<div class="dial-symbol" id="sym1">☀️</div>
<div class="dial-label" id="lbl1">Sonne</div>
</div>
<button type="button" class="dial-step-btn" onclick="stepDial(1, 1)" title="Nächstes Symbol">▼</button>
</div>
<!-- Dial 3 -->
<div class="cryptex-dial" id="dialCol2">
<button type="button" class="dial-step-btn" onclick="stepDial(2, -1)" title="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" onclick="stepDial(2, 1)">
<div class="dial-symbol" id="sym2">💧</div>
<div class="dial-label" id="lbl2">Wasser</div>
</div>
<button type="button" class="dial-step-btn" onclick="stepDial(2, 1)" title="Nächstes Symbol">▼</button>
</div>
<!-- Dial 4 -->
<div class="cryptex-dial" id="dialCol3">
<button type="button" class="dial-step-btn" onclick="stepDial(3, -1)" title="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" onclick="stepDial(3, 1)">
<div class="dial-symbol" id="sym3">🗝️</div>
<div class="dial-label" id="lbl3">Schlüssel</div>
</div>
<button type="button" class="dial-step-btn" onclick="stepDial(3, 1)" title="Nächstes Symbol">▼</button>
</div>
</div>
</div>
<!-- Unlock Action Button -->
<div style="margin-top: 0.5rem; width: 100%; display: flex; justify-content: center;">
<button type="button" id="unlockCryptexBtn" class="btn-magical" style="padding: 0.9rem 2rem; font-size: 1.2rem;" onclick="checkCryptex()">
🔓 Siegel entriegeln
</button>
</div>
<!-- Success Panel -->
<div id="cryptexSuccess" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
<div class="dungeon-card" style="border-color: #2ecc71;">
<div style="font-size: 3rem; margin-bottom: 0.5rem;">🗝️✨</div>
<h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
Das Tor der Gründer steht offen!
</h2>
<p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
Die Messingbolzen schnappen lautstark zurück! Der uralte <strong>Schlüssel der Gründer</strong> fällt in deine Hand und liegt nun in deinem Beutel.
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="/pixies" class="btn-magical">Zur nächsten Prüfung: Wichtel-Panik 🧚➔</a>
<a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/cryptex.js?v=1.0"></script>
{% endblock %}
app/templates/index.html
+43 -2
View File
@@ -49,14 +49,55 @@
<a href="/duel" class="btn-magical">Duell beginnen 🪄</a>
</div>
<!-- Chamber 3: Potion Brewing -->
<div class="chamber-card">
<span class="chamber-badge {% if state.brew_solved %}solved{% endif %}">
{% if state.brew_solved %}✅ Gemeistert{% else %}⚗️ Bereit{% endif %}
</span>
<div class="chamber-icon">⚗️🧪</div>
<h3 class="chamber-title">Kammer III: Die Brauküche</h3>
<p class="chamber-desc">
Snapes Kupferkessel brodelt! Gib Drachenblut und Sternenstaub hinzu, rühre mit kreisenden Gesten
und balanciere die Hitze, um das goldene Glückselixier <em>Felix Felicis</em> zu vollenden!
</p>
<a href="/brew" class="btn-magical">Kessel anheizen ⚗️</a>
</div>
<!-- Chamber 3: Snape's Potions -->
<!-- Chamber 4: Cryptex Lock -->
<div class="chamber-card">
<span class="chamber-badge {% if state.cryptex_solved %}solved{% endif %}">
{% if state.cryptex_solved %}✅ Gemeistert{% else %}🔐 Bereit{% endif %}
</span>
<div class="chamber-icon">🔐🗝️</div>
<h3 class="chamber-title">Kammer IV: Das Drehschloss</h3>
<p class="chamber-desc">
Das massive Tresortor der vier Hogwarts-Gründer. Drehe die vier Messingzylinder mit Wappen, Mond und Sternen,
um das alchemistische Rätsel zu lösen und den Gründerschlüssel zu befreien!
</p>
<a href="/cryptex" class="btn-magical">Ringe drehen 🔐</a>
</div>
<!-- Chamber 5: Cornish Pixies -->
<div class="chamber-card">
<span class="chamber-badge {% if state.pixies_solved %}solved{% endif %}">
{% if state.pixies_solved %}✅ Gemeistert{% else %}🧚 Bereit{% endif %}
</span>
<div class="chamber-icon">🧚❄️</div>
<h3 class="chamber-title">Kammer V: Wichtel-Panik</h3>
<p class="chamber-desc">
Chaos im Klassenzimmer! Freche blaue Wichtel wirbeln umher. Schnelle Reflexe sind gefragt:
Banne 10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> und schone Neville!
</p>
<a href="/pixies" class="btn-magical">Wichtel jagen 🧚</a>
</div>
<!-- Chamber 6: Snape's Potions -->
<div class="chamber-card">
<span class="chamber-badge {% if state.bottles_solved %}solved{% endif %}">
{% if state.bottles_solved %}✅ Gemeistert{% else %}🔥 Bereit{% endif %}
</span>
<div class="chamber-icon">🧪🔥</div>
<h3 class="chamber-title">Kammer III: Snapes Flaschen</h3>
<h3 class="chamber-title">Kammer VI: Snapes Flaschen</h3>
<p class="chamber-desc">
Schwarze Flammen versperren den Weg zum Stein, violette Flammen den Rückweg.
Auf dem Tisch stehen 7 Flaschen und Snapes unerbittliches Logik-Gedicht.
app/templates/pixies.html
Executable
+103
View File
@@ -0,0 +1,103 @@
{% extends "base.html" %}
{% block title %}Kammer V: Wichtel-Panik · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🧚 Kammer V: Wichtel-Panik 🧚</h1>
<p class="riddle-poem" style="font-size: 1.25rem;">
"Lockharts Eisenkäfig ist aufgeplatzt! Ein Schwarm frecher kornischer Wichtel wirbelt durch den Raum.<br>
Banne <strong>10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> ❄️</strong> mit schnellen Fingern!<br>
<span style="color: #e74c3c;">Vorsicht: Tippe nicht auf Neville Longbottom (👦), der an der Decke baumelt!</span>"
</p>
</div>
<div class="pixies-container">
<!-- Top HUD Bar -->
<div class="pixies-hud">
<div>
🧚 Gefangen: <strong id="pixieScore" style="color: var(--gold); font-size: 1.3rem;">0</strong> / 10
</div>
<div>
⏳ Zeit: <strong id="pixieTimer" style="color: #3498db; font-size: 1.3rem;">35</strong>s
</div>
</div>
<!-- 3x3 Magical Grid Arena -->
<div class="pixies-arena" id="pixieArena">
<!-- Hole 0 -->
<div class="pixie-hole" data-idx="0">
<span class="hole-decor">📚</span>
<div class="pixie-target" id="target0">🧚</div>
</div>
<!-- Hole 1 -->
<div class="pixie-hole" data-idx="1">
<span class="hole-decor">🗝️</span>
<div class="pixie-target" id="target1">🧚</div>
</div>
<!-- Hole 2 -->
<div class="pixie-hole" data-idx="2">
<span class="hole-decor">🕯️</span>
<div class="pixie-target" id="target2">🧚</div>
</div>
<!-- Hole 3 -->
<div class="pixie-hole" data-idx="3">
<span class="hole-decor">🧪</span>
<div class="pixie-target" id="target3">🧚</div>
</div>
<!-- Hole 4 -->
<div class="pixie-hole" data-idx="4">
<span class="hole-decor">📦</span>
<div class="pixie-target" id="target4">🧚</div>
</div>
<!-- Hole 5 -->
<div class="pixie-hole" data-idx="5">
<span class="hole-decor">🪟</span>
<div class="pixie-target" id="target5">🧚</div>
</div>
<!-- Hole 6 -->
<div class="pixie-hole" data-idx="6">
<span class="hole-decor">📜</span>
<div class="pixie-target" id="target6">🧚</div>
</div>
<!-- Hole 7 -->
<div class="pixie-hole" data-idx="7">
<span class="hole-decor">🕸️</span>
<div class="pixie-target" id="target7">🧚</div>
</div>
<!-- Hole 8 -->
<div class="pixie-hole" data-idx="8">
<span class="hole-decor">🕰️</span>
<div class="pixie-target" id="target8">🧚</div>
</div>
</div>
<!-- Start & Status Overlay -->
<div id="startOverlay" style="text-align: center; margin-top: 0.5rem; width: 100%;">
<button type="button" id="startPixieBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem;" onclick="startPixieHunt()">
⚡ Jagd beginnen!
</button>
</div>
<!-- Success Panel -->
<div id="pixieSuccess" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
<div class="dungeon-card" style="border-color: #2ecc71;">
<div style="font-size: 3rem; margin-bottom: 0.5rem;">🧚❄️🏆</div>
<h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
Ruhe im Klassenzimmer!
</h2>
<p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
Alle Wichtel sind mit <em>Immobilus</em> eingefroren und sicher im <strong>Wichtelglas</strong> verwahrt. Der Weg zu Snapes Flammenkammer liegt frei!
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="/bottles" class="btn-magical">Zur Flammenkammer (Snapes Flaschen) 🧪➔</a>
<a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/pixies.js?v=1.0"></script>
{% endblock %}