Mobile First Overhaul: Touch gestures, dual tap/drag, instant responsiveness and ergonomic controls across all mini games
This commit is contained in:
Maxi
+63
-56
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user