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

feat: Add universal victory celebration modal, chamber item requirements, and fix broom & cauldron displays

Browse Source
This commit is contained in:
Maxi
2026-09-22 21:10:08 +02:00
parent cb8851b7a4
commit 8c3e60c1c4
19 changed files with 1149 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+41 -1
View File
@@ -39,7 +39,7 @@
{% block content %}{% endblock %}
</main>
<!-- Global Modal Backdrop -->
<!-- Global Standard Modal Backdrop -->
<div id="modalBackdrop" class="modal-backdrop">
<div class="modal-content">
<div id="modalIcon" class="modal-icon">🏆</div>
@@ -49,6 +49,46 @@
</div>
</div>
<!-- Spectacular Victory Celebration Overlay -->
<div id="victoryCelebrationModal" class="victory-modal-backdrop">
<canvas id="victoryConfettiCanvas" class="victory-confetti-canvas"></canvas>
<div class="victory-card">
<div class="victory-crest-wrap">
<div id="vicCrestIcon" class="victory-crest-icon">🏆</div>
</div>
<div id="vicChamberBadge" class="victory-chamber-badge">Kammer Gemeistert</div>
<h2 id="vicTitle" class="victory-title">Hervorragend, Zauberschüler!</h2>
<div id="vicStatsBox" class="victory-stats-box">
<!-- Filled dynamically: Score, Time, Spells -->
</div>
<div id="vicItemRewardBox" class="victory-reward-box" style="display: none;">
<div id="vicRewardIcon" class="reward-icon">🗝️</div>
<div class="reward-content">
<span class="reward-label">🎒 Neuer Gegenstand im Zauberbeutel:</span>
<strong id="vicRewardName" class="reward-name">Geflügelter Schlüssel</strong>
<p id="vicRewardDesc" class="reward-desc">Öffnet die Eichentür zur Duellier-Kammer.</p>
</div>
</div>
<div id="vicStoryBox" class="victory-story-box">
<!-- Story progression & hint for next chamber -->
</div>
<div class="victory-actions">
<a id="vicNextBtn" href="/duel" class="btn-magical victory-next-btn">
➔ Weiter zur nächsten Kammer ✨
</a>
<div class="victory-sub-actions">
<a href="/" class="btn-subtle">🗺️ Kammern-Übersicht</a>
<button type="button" class="btn-subtle" onclick="window.openPlayerDrawer('backpackTab'); document.getElementById('victoryCelebrationModal').classList.remove('show');">🎒 Beutel ansehen</button>
</div>
</div>
</div>
</div>
<!-- Slide-Over Player Drawer & Inventory -->
<div id="drawerBackdrop" class="drawer-backdrop"></div>
<div id="playerDrawer" class="player-drawer">
app/templates/bottles.html
+27 -2
View File
@@ -1,10 +1,10 @@
{% extends "base.html" %}
{% block title %}Kammer II: Snapes Flaschenrätsel & Flammenkammer · Hogwarts Escape{% endblock %}
{% block title %}Kammer VI: Snapes Flaschenrätsel & Flammenkammer · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🧪 Kammer II: Snapes Flaschenrätsel 🔥</h1>
<h1 class="parchment-title">🧪 Kammer VI: Snapes Flaschenrätsel & Flammenkammer 🔥</h1>
<div class="riddle-poem">
"Gefahr liegt vor euch, die Rettung zurück,
@@ -28,6 +28,31 @@
</div>
</div>
{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
<div class="chamber-lock-icon">🔒</div>
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
<p class="chamber-lock-desc">
{{ lock_info.reason }}
</p>
<div class="chamber-req-box">
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
<div class="chamber-req-info">
<strong>{{ lock_info.item_name }}</strong>
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
</div>
</div>
<div class="chamber-lock-actions">
<a href="{{ lock_info.from_url }}" class="btn-magical">
➔ Zu {{ lock_info.from_chamber }} gehen
</a>
<a href="?alohomora=1" class="alohomora-link">
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
</a>
</div>
</div>
{% endif %}
<div class="flame-chamber-arena">
<!-- The Two Flaming Portals -->
<div class="flame-wall-container">
app/templates/brew.html
+25
View File
@@ -11,6 +11,31 @@
</p>
</div>
{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
<div class="chamber-lock-icon">🔒</div>
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
<p class="chamber-lock-desc">
{{ lock_info.reason }}
</p>
<div class="chamber-req-box">
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
<div class="chamber-req-info">
<strong>{{ lock_info.item_name }}</strong>
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
</div>
</div>
<div class="chamber-lock-actions">
<a href="{{ lock_info.from_url }}" class="btn-magical">
➔ Zu {{ lock_info.from_chamber }} gehen
</a>
<a href="?alohomora=1" class="alohomora-link">
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
</a>
</div>
</div>
{% endif %}
<div class="brew-container">
<!-- Recipe Instruction Scroll -->
<div class="recipe-book">
app/templates/cryptex.html
+32
View File
@@ -19,8 +19,40 @@
Nicht das Schloss selbst, nicht das alte Pergament, nicht die Glasphiole – welches Instrument aus Holz und Phönixfeder schlägt die Funken?«
</em>
</div>
<!-- Felix Felicis Interactive Clue -->
<div style="text-align: center; margin-top: 0.8rem;">
<button type="button" class="btn-subtle" onclick="useFelixFelicisHint()" style="border-color: #ffd700; color: #ffd700; font-size: 0.95rem;">
🍀 Felix Felicis Glücks-Eingebung einnehmen 🧪
</button>
</div>
</div>
{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
<div class="chamber-lock-icon">🔒</div>
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
<p class="chamber-lock-desc">
{{ lock_info.reason }}
</p>
<div class="chamber-req-box">
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
<div class="chamber-req-info">
<strong>{{ lock_info.item_name }}</strong>
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
</div>
</div>
<div class="chamber-lock-actions">
<a href="{{ lock_info.from_url }}" class="btn-magical">
➔ Zu {{ lock_info.from_chamber }} gehen
</a>
<a href="?alohomora=1" class="alohomora-link">
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
</a>
</div>
</div>
{% endif %}
<div class="cryptex-container">
<!-- Feedback Toast -->
<div id="cryptexFeedback" style="display: none; padding: 0.6rem 1rem; border-radius: 8px; font-weight: bold; text-align: center; width: 100%;">
app/templates/duel.html
+25
View File
@@ -11,6 +11,31 @@
</p>
</div>
{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
<div class="chamber-lock-icon">🔒</div>
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
<p class="chamber-lock-desc">
{{ lock_info.reason }}
</p>
<div class="chamber-req-box">
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
<div class="chamber-req-info">
<strong>{{ lock_info.item_name }}</strong>
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
</div>
</div>
<div class="chamber-lock-actions">
<a href="{{ lock_info.from_url }}" class="btn-magical">
➔ Zu {{ lock_info.from_chamber }} gehen
</a>
<a href="?alohomora=1" class="alohomora-link">
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
</a>
</div>
</div>
{% endif %}
<div class="canvas-wrapper">
<div class="game-hud">
<div>🪄 Spruch: <strong id="spellName" style="color: var(--gold);">Flipendo ⚡</strong></div>
app/templates/index.html
+8 -8
View File
@@ -24,13 +24,13 @@
<!-- Chamber 1: Ring Flight -->
<div class="chamber-card">
<span class="chamber-badge {% if state.broom_solved %}solved{% endif %}">
{% if state.broom_solved %}✅ Gemeistert{% else %}🔓 Bereit{% endif %}
{% if state.broom_solved %}✅ Gemeistert{% else %}🔓 Bereit (Start){% endif %}
</span>
<div class="chamber-icon">🧹⭕</div>
<h3 class="chamber-title">Kammer I: Der Ring-Flug</h3>
<p class="chamber-desc">
Madam Hoochs Quidditch-Parcours! Schwinge dich auf deinen Rennbesen, steuere geschmeidig durch
die schwebenden goldenen Ringe und sammle Punkte und Speed-Combos!
die schwebenden goldenen Ringe und fange den geflügelten Schlüssel!
</p>
<a href="/broom" class="btn-magical">Parcours fliegen 🧹</a>
</div>
@@ -38,7 +38,7 @@
<!-- Chamber 2: Wand Spell Dueling -->
<div class="chamber-card">
<span class="chamber-badge {% if state.duel_solved %}solved{% endif %}">
{% if state.duel_solved %}✅ Gemeistert{% else %}⚡ Bereit{% endif %}
{% if state.duel_solved %}✅ Gemeistert{% elif 'winged_key' in state.inventory or state.broom_solved or state.alohomora_mode %}⚡ Bereit{% else %}🔒 Benötigt: Geflügelter Schlüssel{% endif %}
</span>
<div class="chamber-icon">🪄⚡</div>
<h3 class="chamber-title">Kammer II: Das Spruch-Duell</h3>
@@ -52,12 +52,12 @@
<!-- 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 %}
{% if state.brew_solved %}✅ Gemeistert{% elif 'duel_badge' in state.inventory or state.duel_solved or state.alohomora_mode %}⚗️ Bereit{% else %}🔒 Benötigt: Kessel-Rezeptur{% 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
Snapes Kupferkessel brodelt! Gib Essenzen hinzu, rühre mit Bedacht
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>
@@ -66,7 +66,7 @@
<!-- 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 %}
{% if state.cryptex_solved %}✅ Gemeistert{% elif 'felix_felicis' in state.inventory or state.brew_solved or state.alohomora_mode %}🔐 Bereit{% else %}🔒 Benötigt: Felix Felicis{% endif %}
</span>
<div class="chamber-icon">🔐🗝️</div>
<h3 class="chamber-title">Kammer IV: Das Drehschloss</h3>
@@ -80,7 +80,7 @@
<!-- 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 %}
{% if state.pixies_solved %}✅ Gemeistert{% elif 'cryptex_key' in state.inventory or state.cryptex_solved or state.alohomora_mode %}🧚 Bereit{% else %}🔒 Benötigt: Gründerschlüssel{% endif %}
</span>
<div class="chamber-icon">🧚❄️</div>
<h3 class="chamber-title">Kammer V: Wichtel-Panik</h3>
@@ -94,7 +94,7 @@
<!-- 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 %}
{% if state.bottles_solved %}✅ Gemeistert{% elif 'pixie_jar' in state.inventory or state.pixies_solved or state.alohomora_mode %}🔥 Bereit{% else %}🔒 Benötigt: Wichtelglas{% endif %}
</span>
<div class="chamber-icon">🧪🔥</div>
<h3 class="chamber-title">Kammer VI: Snapes Flaschen</h3>
app/templates/pixies.html
+25
View File
@@ -11,6 +11,31 @@
</p>
</div>
{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
<div class="chamber-lock-icon">🔒</div>
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
<p class="chamber-lock-desc">
{{ lock_info.reason }}
</p>
<div class="chamber-req-box">
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
<div class="chamber-req-info">
<strong>{{ lock_info.item_name }}</strong>
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
</div>
</div>
<div class="chamber-lock-actions">
<a href="{{ lock_info.from_url }}" class="btn-magical">
➔ Zu {{ lock_info.from_chamber }} gehen
</a>
<a href="?alohomora=1" class="alohomora-link">
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
</a>
</div>
</div>
{% endif %}
<div class="pixies-container">
<!-- Top HUD Bar -->
<div class="pixies-hud">