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

feat: Add audio assets, UI escape room polish, requirements, and INSTALL.md

Browse Source
This commit is contained in:
Maxi
2026-10-29 08:51:59 +01:00
parent c07c0e10b9
commit 3d30d0812a
17 changed files with 1367 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/broom.html
+21 -6
View File
@@ -12,12 +12,13 @@
</p>
</div>
<div class="canvas-wrapper">
<div class="canvas-wrapper" id="canvasWrapper">
<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 id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 80px;"></div>
<div>🧹 Zustand: <span id="livesVal" style="font-size: 1.1rem; letter-spacing: 2px;">💚💚💚</span></div>
<div id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 60px;"></div>
</div>
<canvas id="broomCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
@@ -26,14 +27,28 @@
<div id="broomStartOverlay" class="flight-start-overlay">
<div style="font-size: 2.8rem; margin-bottom: 0.3rem;">🧹✨⭕</div>
<h3 style="color: var(--gold); font-size: 1.45rem; margin: 0 0 0.4rem 0;">Bereit zum Abflug?</h3>
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 300px;">
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 320px;">
Fliege durch <strong>12 magische Ringe</strong>!<br>
Steuere per Daumen über das Spielfeld oder mit dem Steuerkreuz unten.
<span style="color: #e74c3c;">⚠️ Weiche wilden Klatschern (💣) und schwebenden Felsen (🪨) aus!</span><br>
Steuere per Daumen über das Feld oder mit dem Steuerkreuz.
</p>
<button type="button" id="startFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;" onclick="startFlight()">
<button type="button" id="startFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;">
⚡ Flug starten!
</button>
</div>
<!-- Crash / Game Over Overlay -->
<div id="broomCrashOverlay" class="flight-start-overlay hidden">
<div style="font-size: 2.8rem; margin-bottom: 0.3rem;">💥🧹😵</div>
<h3 style="color: #e74c3c; font-size: 1.45rem; margin: 0 0 0.4rem 0;">Klatscher-Volltreffer!</h3>
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 300px;">
Dein Besen hat die Balance verloren und Madam Hooch pfeift zum Abbruch!<br>
Halte Abstand zu den wirbelnden Eisenbällen!
</p>
<button type="button" id="restartFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;">
🔄 Erneut abheben!
</button>
</div>
</div>
<!-- Mobile Flight Cockpit & D-Pad -->
@@ -73,5 +88,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/broom.js?v=5.0"></script>
<script src="/static/js/broom.js?v=6.0"></script>
{% endblock %}