Overhaul: Golden ring flight course and magic spell dueling mini-game with mobile gestures

2026-09-22 19:38:57 +02:00
parent efb54befcc
commit 0e20549a44
10 changed files with 831 additions and 329 deletions
@@ -119,12 +119,12 @@
                        <strong style="color: var(--gold);">{{ state.broom_score }} Pkt</strong>
                    </div>
                    <div class="stat-row">
-                        <span>🧹 Besenflug:</span>
+                        <span>🧹 Ring-Flug:</span>
                        <span>{% if state.broom_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
-                        <span>♟️ Zauberschach:</span>
-                        <span>{% if state.chess_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
+                        <span>🪄 Spruch-Duell:</span>
+                        <span>{% if state.duel_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🧪 Snapes Flammen:</span>
@@ -150,15 +150,15 @@
                    <a href="/broom" class="room-nav-item {% if request.url.path == '/broom' %}current{% endif %}">
                        <span class="room-icon">🧹</span>
                        <div class="room-info">
-                            <strong>Kammer I: Der Besenflug</strong>
-                            <small>{% if state.broom_solved %}✅ Gemeistert{% else %}🗝️ Geflügelte Schlüssel jagen{% endif %}</small>
+                            <strong>Kammer I: Der Ring-Flug</strong>
+                            <small>{% if state.broom_solved %}✅ Gemeistert{% else %}⭕ Goldene Ringe durchfliegen{% endif %}</small>
                        </div>
                    </a>
-                    <a href="/chess" class="room-nav-item {% if request.url.path == '/chess' %}current{% endif %}">
-                        <span class="room-icon">♟️</span>
+                    <a href="/duel" class="room-nav-item {% if request.url.path == '/duel' %}current{% endif %}">
+                        <span class="room-icon">🪄</span>
                        <div class="room-info">
-                            <strong>Kammer II: McGonagalls Schach</strong>
-                            <small>{% if state.chess_solved %}✅ Gemeistert{% else %}⚔️ Riesen-Zauberschach{% endif %}</small>
+                            <strong>Kammer II: Das Spruch-Duell</strong>
+                            <small>{% if state.duel_solved %}✅ Gemeistert{% else %}⚡ Zaubergesten zeichnen{% endif %}</small>
                        </div>
                    </a>
                    <a href="/bottles" class="room-nav-item {% if request.url.path == '/bottles' %}current{% endif %}">
@@ -169,6 +169,7 @@
                        </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">
@@ -1,22 +1,23 @@
 {% extends "base.html" %}

-{% block title %}Kammer I: Der Flug der geflügelten Schlüssel · Hogwarts Escape{% endblock %}
+{% block title %}Kammer I: Der Goldene Ring-Flug · Hogwarts Escape{% endblock %}

 {% block content %}
 <div class="parchment-scroll">
-    <h1 class="parchment-title">🧹 Kammer I: Der Besenflug 🗝️</h1>
+    <h1 class="parchment-title">🧹 Kammer I: Der Goldene Ring-Flug ⭕</h1>
    <p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
-        "Hunderte metallischer Flügel schwirren wie Vögel unter der Decke des Gewölbes.<br>
-        Die schwere Kerkertür am anderen Ende ist fest verschlossen.<br>
-        Nur ein einziger Schlüssel passt: Ein alter, großer Silberschlüssel mit geknicktem blauem Flügel!"
+        "Schwinge dich auf deinen Rennbesen über den Dächern von Hogwarts!<br>
+        Durchfliege die magisch schwebenden goldenen Ringe, halte die Combo aufrecht<br>
+        und meistere den Parcours von Madam Hooch, um die nächste Pforte zu öffnen!"
    </p>
 </div>

 <div class="canvas-wrapper">
    <div class="game-hud">
        <div>⏱️ Zeit: <strong id="timerVal">0s</strong></div>
+        <div>⭕ Ringe: <strong id="ringsVal" style="color: #ffd700;">0/12</strong></div>
        <div>✨ Punkte: <strong id="scoreVal">0</strong></div>
-        <div>🎯 Ziel: <span id="missionText">Schlüssel fangen!</span></div>
+        <div id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 80px;"></div>
    </div>

    <canvas id="broomCanvas"></canvas>
@@ -39,25 +40,25 @@
            ⚡ TURBO
        </button>
        <div class="touch-hint">
-            💡 <em>Tipp: Du kannst auch direkt mit dem Finger über das Spielfeld wischen!</em>
+            💡 <em>Ziehe den Besen einfach mit dem Finger direkt von Ring zu Ring!</em>
        </div>
    </div>
 </div>

 <div class="dungeon-card" style="margin-top: 1.5rem;">
    <p id="statusMsg" style="text-align: center; font-size: 1.15rem; color: var(--gold); margin-bottom: 0.8rem;">
-        🎮 <strong>Steuerung:</strong> Pfeiltasten / WASD / Touch-Wischen zum Fliegen · <strong>Leertaste / Turbo</strong> für Besen-Beschleunigung!
+        🎮 <strong>Steuerung:</strong> Wische mit dem Finger über das Spielfeld oder nutze Pfeiltasten / D-Pad zum Fliegen · <strong>Turbo</strong> für rasanten Schub!
    </p>
    <p style="text-align: center; color: var(--text-dim); font-size: 0.95rem;">
-        Fange den großen Silberschlüssel mit dem geknickten Flügel und fliege zur schweren Holztür ganz rechts!
+        Sammle 12 Ringe, um den Parcours abzuschließen. Schnelligkeit und Combos bringen Zusatzpunkte!
    </p>
 </div>

 <div style="text-align: center; margin-top: 1rem;">
-    <a href="/chess" class="nav-link" style="color: var(--text-dim);">Direkt weiter zu McGonagalls Zauberschach ♟️ ➔</a>
+    <a href="/duel" class="nav-link" style="color: var(--text-dim);">Direkt weiter zum Zauberspruch-Duell 🪄 ➔</a>
 </div>
 {% endblock %}

 {% block scripts %}
-<script src="/static/js/broom.js?v=2.0"></script>
+<script src="/static/js/broom.js?v=3.0"></script>
 {% endblock %}
@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block title %}Kammer II: Das Zauberspruch-Duell · Hogwarts Escape{% endblock %}
+
+{% block content %}
+<div class="parchment-scroll">
+    <h1 class="parchment-title">🪄 Kammer II: Das Zauberspruch-Duell ⚡</h1>
+    <p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
+        "Eine uralte verzauberte Rüstung bewacht die Pforte zur Flammenkammer.<br>
+        Zücke deinen Zauberstab! Verbinde die leuchtenden Runensterne mit dem Finger oder der Maus,<br>
+        um mächtige Hogwarts-Zaubersprüche zu entfesseln und die Rüstung zu bezwingen!"
+    </p>
+</div>
+
+<div class="canvas-wrapper">
+    <div class="game-hud">
+        <div>🪄 Spruch: <strong id="spellName" style="color: var(--gold);">Flipendo ⚡</strong></div>
+        <div id="spellProgress" style="color: #4cc9f0; font-weight: bold;">Zauberspruch 1 von 3</div>
+        <div>🛡️ Ziel: <span id="dummyHp">3 Zauber übrig</span></div>
+    </div>
+
+    <canvas id="spellCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
+</div>
+
+<div class="dungeon-card" style="margin-top: 1.5rem; text-align: center;">
+    <p id="spellDesc" style="font-size: 1.15rem; color: var(--gold); margin-bottom: 0.6rem;">
+        Verbinde die leuchtenden Runensterne von 1 bis 4, um den Zauber zu wirken!
+    </p>
+    <p style="color: var(--text-dim); font-size: 0.95rem;">
+        💡 <em>Tipp: Ziehe deinen Finger oder die Maus flüssig durch die nummerierten Sterne auf dem Bildschirm.</em>
+    </p>
+</div>
+
+<div style="text-align: center; margin-top: 1.5rem;">
+    <a href="/bottles" class="btn-magical">
+        Direkt weiter zu Snapes Flammenkammer 🧪 ➔
+    </a>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/duel.js?v=1.0"></script>
+{% endblock %}
@@ -21,34 +21,35 @@
    </p>

    <div class="chamber-grid">
-        <!-- Chamber 1: Winged Keys -->
+        <!-- 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 %}
            </span>
-            <div class="chamber-icon">🧹🗝️</div>
-            <h3 class="chamber-title">Kammer I: Der Besenflug</h3>
+            <div class="chamber-icon">🧹⭕</div>
+            <h3 class="chamber-title">Kammer I: Der Ring-Flug</h3>
            <p class="chamber-desc">
-                Professor Flitwicks verzauberte Kammer. Schwärme geflügelter Schlüssel surren unter der hohen Gewölbedecke. 
-                Finde den großen, alten Silberschlüssel mit dem geknickten Flügel und schließe die Tür auf!
+                Madam Hoochs Quidditch-Parcours! Schwinge dich auf deinen Rennbesen, steuere geschmeidig durch 
+                die schwebenden goldenen Ringe und sammle Punkte und Speed-Combos!
            </p>
-            <a href="/broom" class="btn-magical">Auf den Besen schwingen 🧹</a>
+            <a href="/broom" class="btn-magical">Parcours fliegen 🧹</a>
        </div>

-        <!-- Chamber 2: McGonagall's Wizard Chess (NEW!) -->
+        <!-- Chamber 2: Wand Spell Dueling -->
        <div class="chamber-card">
-            <span class="chamber-badge {% if state.chess_solved %}solved{% endif %}">
-                {% if state.chess_solved %}✅ Gemeistert{% else %}⚔️ Bereit{% endif %}
+            <span class="chamber-badge {% if state.duel_solved %}solved{% endif %}">
+                {% if state.duel_solved %}✅ Gemeistert{% else %}⚡ Bereit{% endif %}
            </span>
-            <div class="chamber-icon">♟️⚔️</div>
-            <h3 class="chamber-title">Kammer II: McGonagalls Schach</h3>
+            <div class="chamber-icon">🪄⚡</div>
+            <h3 class="chamber-title">Kammer II: Das Spruch-Duell</h3>
            <p class="chamber-desc">
-                Das gigantische, lebendige Zauberschach. Übernimm Rons Rolle als schwarzer Springer, 
-                überliste die weiße Königin und setze den feindlichen König schachmatt!
+                Zücke deinen Zauberstab! Zeichne die magischen Runen-Gesten (Flipendo, Incendio & Alohomora) 
+                flüssig mit dem Finger nach und zerschmettere die verzauberte Trainingsrüstung!
            </p>
-            <a href="/chess" class="btn-magical">Schachbrett betreten ♟️</a>
+            <a href="/duel" class="btn-magical">Duell beginnen 🪄</a>
        </div>

+
        <!-- Chamber 3: Snape's Potions -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.bottles_solved %}solved{% endif %}">