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

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
+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">