Add Player Menu with Inventory drawer, house selection, and mobile-first header
This commit is contained in:
Maxi
+163
-17
@@ -8,28 +8,28 @@
|
||||
<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=1.0">
|
||||
<link rel="stylesheet" href="/static/css/escape.css?v=2.0">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Minimalist & Mobile-Friendly Header -->
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="/" class="brand-link">
|
||||
<span>🏰⚡</span>
|
||||
<span class="brand-sparkle">🏰⚡</span>
|
||||
<span class="brand-title">Hogwarts Escape</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav-links">
|
||||
<a href="/" class="nav-link {% if request.url.path == '/' %}active{% endif %}">🚪 Kammern</a>
|
||||
<a href="/broom" class="nav-link {% if request.url.path == '/broom' %}active{% endif %}">🧹 Besenflug</a>
|
||||
<a href="/bottles" class="nav-link {% if request.url.path == '/bottles' %}active{% endif %}">🧪 Snapes Flaschen</a>
|
||||
<a href="/sliding" class="nav-link {% if request.url.path == '/sliding' %}active{% endif %}">🧩 Schieberätsel</a>
|
||||
<a href="https://quiz.dev.waiswuaschd.de" class="nav-link" target="_blank" rel="noopener">📜 Hogwarts-Quiz ↗</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-right">
|
||||
<button type="button" id="audioToggleBtn" class="btn-control" onclick="toggleSound()">
|
||||
🔊 <span class="audio-lbl">Ton: An</span>
|
||||
<button type="button" id="audioToggleBtn" class="btn-control icon-only" onclick="toggleSound()" title="Ton an/aus">
|
||||
🔊
|
||||
</button>
|
||||
|
||||
<!-- Player Menu & Bag Button -->
|
||||
<button type="button" id="openBagBtn" class="btn-bag" title="Zauberbeutel & Profil öffnen">
|
||||
<span id="bagHouseIcon" class="bag-house-icon">{{ house.icon }}</span>
|
||||
<span class="bag-label">Beutel</span>
|
||||
<span id="bagBadge" class="bag-badge">{{ inventory_items | length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,18 +49,164 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide-Over Player Drawer & Inventory -->
|
||||
<div id="drawerBackdrop" class="drawer-backdrop"></div>
|
||||
<div id="playerDrawer" class="player-drawer">
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-title">
|
||||
<span>🎒</span> Zauberer-Cockpit
|
||||
</div>
|
||||
<button type="button" id="closeDrawerBtn" class="drawer-close-btn" aria-label="Schließen">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Tabs inside Drawer -->
|
||||
<div class="drawer-tabs">
|
||||
<button type="button" class="drawer-tab-btn active" data-tab="backpackTab">
|
||||
🎒 Beutel
|
||||
</button>
|
||||
<button type="button" class="drawer-tab-btn" data-tab="profileTab">
|
||||
🧙♂️ Profil
|
||||
</button>
|
||||
<button type="button" class="drawer-tab-btn" data-tab="roomsTab">
|
||||
🗺️ Kammern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="drawer-body">
|
||||
<!-- TAB 1: INVENTORY (BEUTEL) -->
|
||||
<div id="backpackTab" class="drawer-tab-pane active">
|
||||
<div class="inv-grid">
|
||||
{% for item in inventory_items %}
|
||||
<div class="inv-item-slot"
|
||||
data-item-id="{{ item.id }}"
|
||||
data-item-name="{{ item.name }}"
|
||||
data-item-icon="{{ item.icon }}"
|
||||
data-item-desc="{{ item.desc }}"
|
||||
data-action="{{ item.action }}"
|
||||
data-action-label="{{ item.action_label }}">
|
||||
<div class="inv-item-icon">{{ item.icon }}</div>
|
||||
<div class="inv-item-name">{{ item.name }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Item Detail & Interaction Box -->
|
||||
<div id="itemDetailBox" class="inv-detail-card" style="display: none;">
|
||||
<div id="itemDetailIcon" class="inv-detail-icon">🪄</div>
|
||||
<div id="itemDetailName" class="inv-detail-name">Gegenstand</div>
|
||||
<p id="itemDetailDesc" class="inv-detail-desc">Beschreibung des Gegenstands...</p>
|
||||
<button type="button" id="itemDetailActionBtn" class="btn-magical" style="padding: 0.6rem 1.2rem; font-size: 0.95rem; width: 100%;">
|
||||
Benutzen ✨
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PROFILE & HOUSE (HAUS) -->
|
||||
<div id="profileTab" class="drawer-tab-pane">
|
||||
<h4 style="color: var(--gold); margin-bottom: 0.75rem; text-align: center;">Wähle dein Hogwarts-Haus:</h4>
|
||||
<div class="house-picker-grid">
|
||||
{% for hid, h in houses.items() %}
|
||||
<button type="button" class="house-select-btn {% if state.house == hid %}active{% endif %}" data-house="{{ hid }}">
|
||||
<span class="house-icon">{{ h.icon }}</span>
|
||||
<span class="house-name">{{ h.name }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="profile-stats-card">
|
||||
<div class="stat-row">
|
||||
<span>⚡ Gesammelte Punkte:</span>
|
||||
<strong style="color: var(--gold);">{{ state.broom_score }} Pkt</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>🧹 Besenflug:</span>
|
||||
<span>{% if state.broom_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>🧪 Snapes Flammen:</span>
|
||||
<span>{% if state.bottles_solved %}✅ Gelöst{% else %}⏳ Offen{% endif %}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>🧩 Alchemie-Schieberätsel:</span>
|
||||
<span>{% if state.sliding_solved %}✅ Gelöst{% else %}⏳ Frei spielbar{% endif %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: CHAMBERS MAP (KAMMERN) -->
|
||||
<div id="roomsTab" class="drawer-tab-pane">
|
||||
<div class="rooms-nav-list">
|
||||
<a href="/" class="room-nav-item {% if request.url.path == '/' %}current{% endif %}">
|
||||
<span class="room-icon">🚪</span>
|
||||
<div class="room-info">
|
||||
<strong>Vorhalle & Übersicht</strong>
|
||||
<small>Die Pforten zu den Verliesen</small>
|
||||
</div>
|
||||
</a>
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/bottles" class="room-nav-item {% if request.url.path == '/bottles' %}current{% endif %}">
|
||||
<span class="room-icon">🧪</span>
|
||||
<div class="room-info">
|
||||
<strong>Kammer II: Snapes Flaschen</strong>
|
||||
<small>{% if state.bottles_solved %}✅ Gemeistert{% else %}🔥 Die Flammenkammer{% endif %}</small>
|
||||
</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">
|
||||
<strong>Alchemie-Schieberätsel</strong>
|
||||
<small>{% if state.sliding_solved %}✅ Gelöst{% else %}⚗️ Runen-Schiebepuzzle{% endif %}</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/finale" class="room-nav-item {% if request.url.path == '/finale' %}current{% endif %}">
|
||||
<span class="room-icon">🏆</span>
|
||||
<div class="room-info">
|
||||
<strong>Das Finale</strong>
|
||||
<small>Der Stein der Weisen</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://quiz.dev.waiswuaschd.de" class="room-nav-item external" target="_blank" rel="noopener">
|
||||
<span class="room-icon">📜</span>
|
||||
<div class="room-info">
|
||||
<strong>Hogwarts-Quiz Portal ↗</strong>
|
||||
<small>Große Wissensprüfung</small>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-footer">
|
||||
<button type="button" class="btn-control" onclick="resetEscapeProgress()" style="width: 100%; justify-content: center;">
|
||||
🔄 Fortschritt zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p>⚡ <strong>Hogwarts Escape Adventure</strong> · Teil des Magischen Zauberer-Kosmos ⚡</p>
|
||||
<p style="margin-top: 0.5rem;">
|
||||
<a href="/">Startseite</a> ·
|
||||
<a href="/broom">Der Besenflug</a> ·
|
||||
<a href="/bottles">Snapes Flaschenrätsel</a> ·
|
||||
<a href="/sliding">Alchemie-Schieberätsel</a> ·
|
||||
<a href="javascript:void(0)" onclick="openPlayerDrawer('backpackTab')">🎒 Zauberbeutel öffnen</a> ·
|
||||
<a href="https://quiz.dev.waiswuaschd.de" target="_blank" rel="noopener">Hogwarts Quiz Portal</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/audio.js?v=1.0"></script>
|
||||
<script src="/static/js/audio.js?v=2.0"></script>
|
||||
<script src="/static/js/inventory.js?v=2.0"></script>
|
||||
<script>
|
||||
async function resetEscapeProgress() {
|
||||
if (confirm("Möchtest du deinen Escape-Fortschritt und dein Inventar wirklich zurücksetzen?")) {
|
||||
await fetch('/api/reset', { method: 'POST' });
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user