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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/duel.html
+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 %}