Mobile First Overhaul: Touch gestures, dual tap/drag, instant responsiveness and ergonomic controls across all mini games

This commit is contained in:
Maxi
2026-09-22 19:57:56 +02:00
parent 2ce944d1cd
commit 5551c4e54f
13 changed files with 443 additions and 319 deletions
+1 -1
View File
@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=MedievalSharp&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/escape.css?v=2.0">
<link rel="stylesheet" href="/static/css/escape.css?v=3.0">
{% block head %}{% endblock %}
</head>
<body>
+36 -32
View File
@@ -5,10 +5,9 @@
{% 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 class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
"Snapes Kupferkessel dampft im Halbdunkel des Kerkers.<br>
Braue das flüssige Gold des Glücks: <strong>Felix Felicis</strong>!"
</p>
</div>
@@ -16,11 +15,11 @@
<!-- 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;">
<h3 id="stepInstruction" style="color: var(--gold); margin: 0.25rem 0; font-size: 1.25rem;">
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 id="stepSubtext" style="color: var(--text-dim); font-size: 0.9rem; margin: 0;">
Tippe auf die Zutaten unten, um sie in den Kessel zu werfen.
</p>
</div>
@@ -28,8 +27,7 @@
<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>
<span class="stir-arrow-hint">🥄</span>
</div>
<div class="cauldron-pot">
@@ -38,11 +36,6 @@
<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')">
@@ -62,44 +55,55 @@
</button>
</div>
<!-- Step 2: Stir Control Panel (Mobile Friendly!) -->
<div id="stirPanel" style="display: none; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%;">
<button type="button" id="stirBtn" class="btn-magical" style="padding: 0.9rem 1.8rem; font-size: 1.15rem; width: 100%; max-width: 320px;" onclick="doStir()">
🥄 Kessel umrühren! (<span id="stirCount">0</span> / 3)
</button>
<span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf den Button oder wische über den Kessel</span>
</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 style="color: var(--text-light); font-size: 0.95rem; text-align: center;">
🌡️ Halte die Temperatur mit dem Blasebalg 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>
<span>Kalt</span>
<span style="color: #2ecc71; font-weight: bold;">Ideal (50% - 85%)</span>
<span>Zu heiß!</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
Ideale Hitze gehalten: <span id="heatTimer">0.0</span> / 3.0s
</div>
<button type="button" id="bellowsBtn" class="bellows-btn" onclick="pumpHeat()">
🔥 Blasebalg drücken!
🔥 Blasebalg pumpen!
</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 id="successPanel" 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;">
Felix Felicis vollendet!
</h2>
<p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
Der Kessel erstrahlt in gleißendem Gold! Eine Phiole des reinen flüssigen Glücks wandert in deinen <strong>Zauberbeutel</strong>.
</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>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/brew.js?v=1.0"></script>
<script src="/static/js/brew.js?v=2.0"></script>
{% endblock %}
+1 -1
View File
@@ -20,7 +20,7 @@
<div id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 80px;"></div>
</div>
<canvas id="broomCanvas"></canvas>
<canvas id="broomCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
</div>
<!-- Mobile Flight Cockpit & D-Pad -->
+25 -27
View File
@@ -5,12 +5,9 @@
{% 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>
<p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
"Vor dir ragt das Tresortor der vier Gründer mit vier rotierenden Messingwalzen.<br>
<em>»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>"
@@ -26,64 +23,65 @@
<div class="cryptex-box">
<div class="cryptex-frame-line"></div>
<div class="cryptex-rings-row">
<!-- Dial 1 -->
<!-- Dial 0 -->
<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)">
<button type="button" class="dial-step-btn" onclick="stepDial(0, -1)" aria-label="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" id="cylinder0" 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>
<button type="button" class="dial-step-btn" onclick="stepDial(0, 1)" aria-label="Nächstes Symbol">▼</button>
</div>
<!-- Dial 2 -->
<!-- Dial 1 -->
<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)">
<button type="button" class="dial-step-btn" onclick="stepDial(1, -1)" aria-label="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" id="cylinder1" 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>
<button type="button" class="dial-step-btn" onclick="stepDial(1, 1)" aria-label="Nächstes Symbol">▼</button>
</div>
<!-- Dial 3 -->
<!-- Dial 2 -->
<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)">
<button type="button" class="dial-step-btn" onclick="stepDial(2, -1)" aria-label="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" id="cylinder2" 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>
<button type="button" class="dial-step-btn" onclick="stepDial(2, 1)" aria-label="Nächstes Symbol">▼</button>
</div>
<!-- Dial 4 -->
<!-- Dial 3 -->
<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)">
<button type="button" class="dial-step-btn" onclick="stepDial(3, -1)" aria-label="Vorheriges Symbol">▲</button>
<div class="dial-cylinder" id="cylinder3" 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>
<button type="button" class="dial-step-btn" onclick="stepDial(3, 1)" aria-label="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()">
<div style="margin-top: 0.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;">
<button type="button" id="unlockCryptexBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem; width: 100%; max-width: 320px;" onclick="checkCryptex()">
🔓 Siegel entriegeln
</button>
<span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf ▲/▼ oder wische auf den Walzen</span>
</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>
<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.
Die Messingbolzen schnappen lautstark zurück! Der uralte <strong>Schlüssel der Gründer</strong> wandert in deinen <strong>Zauberbeutel</strong>.
</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>
@@ -95,5 +93,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/cryptex.js?v=1.0"></script>
<script src="/static/js/cryptex.js?v=2.0"></script>
{% endblock %}
+11 -12
View File
@@ -5,10 +5,9 @@
{% 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 class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
"Zücke deinen Zauberstab! Verbinde die Runensterne <strong>1 bis 4</strong> (durch Ziehen oder Antippen),
um die Sprüche zu wirken und die verzauberte Rüstung zu bezwingen!"
</p>
</div>
@@ -22,22 +21,22 @@
<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;">
<div class="dungeon-card" style="margin-top: 1rem; text-align: center; padding: 0.75rem 1rem;">
<p id="spellDesc" style="font-size: 1.1rem; color: var(--gold); margin-bottom: 0.4rem;">
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 style="color: var(--text-dim); font-size: 0.9rem; margin: 0;">
💡 <em>Tipp: Ziehe mit dem Daumen über die Sterne oder tippe sie einfach der Reihe nach (1 ➔ 2 ➔ 3 ➔ 4) an!</em>
</p>
</div>
<div style="text-align: center; margin-top: 1.5rem;">
<a href="/bottles" class="btn-magical">
Direkt weiter zu Snapes Flammenkammer 🧪 ➔
<div style="text-align: center; margin-top: 1.25rem;">
<a href="/brew" class="btn-magical">
Direkt weiter zur Brauküche ⚗️ ➔
</a>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/duel.js?v=1.0"></script>
<script src="/static/js/duel.js?v=2.0"></script>
{% endblock %}
+63 -56
View File
@@ -5,9 +5,8 @@
{% 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>
<p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
"Lockharts Käfig ist zerbrochen! Banne <strong>10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> ❄️</strong>!<br>
<span style="color: #e74c3c;">Vorsicht: Tippe nicht auf Neville Longbottom (👦), der an der Decke baumelt!</span>"
</p>
</div>
@@ -23,60 +22,68 @@
</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>
<!-- Arena Container with Center Start Overlay -->
<div style="position: relative; width: 100%;">
<!-- Start & Restart Overlay (Directly over the arena!) -->
<div id="startOverlay" class="arena-start-overlay">
<div style="font-size: 2.8rem; margin-bottom: 0.4rem;">🧚⚡❄️</div>
<h3 style="color: var(--gold); margin: 0 0 0.4rem 0; font-size: 1.4rem;">Bist du bereit?</h3>
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.25rem 0; text-align: center; max-width: 280px;">
Tippe schnell auf die blauen Wichtel (🧚), um sie einzufrieren! Verschone Neville (👦)!
</p>
<button type="button" id="startPixieBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem;" onclick="startPixieHunt()">
⚡ Jagd starten!
</button>
</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>
<!-- 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>
</div>
<!-- Success Panel -->
@@ -99,5 +106,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/pixies.js?v=1.0"></script>
<script src="/static/js/pixies.js?v=2.0"></script>
{% endblock %}