Mario
c472093f62
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
665 lines
26 KiB
HTML
665 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Task Game – xXx Sphere</title>
|
||
<link rel="stylesheet" href="/css/variables.css">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<style>
|
||
.game-card {
|
||
background: var(--color-card);
|
||
border: 1px solid var(--color-secondary);
|
||
border-radius: 14px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.game-label {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
color: var(--color-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.5rem;
|
||
height: 1.2rem;
|
||
}
|
||
.game-text {
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
color: var(--color-text);
|
||
white-space: pre-wrap;
|
||
height: 14rem;
|
||
overflow-y: auto;
|
||
}
|
||
.game-timer {
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
color: var(--color-primary);
|
||
text-align: center;
|
||
letter-spacing: 0.04em;
|
||
height: 4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
margin-top: 0.5rem;
|
||
}
|
||
.game-timer.active { opacity: 1; }
|
||
.game-timer.urgent { color: #e74c3c; }
|
||
.game-btn-row {
|
||
margin-top: 1rem;
|
||
height: 2.75rem;
|
||
}
|
||
|
||
.level-display {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.level-display img {
|
||
width: 72px;
|
||
height: 72px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.lock-messages {
|
||
background: rgba(233,69,96,0.1);
|
||
border: 1px solid rgba(233,69,96,0.3);
|
||
border-radius: 10px;
|
||
padding: 1rem 1.1rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.lock-messages p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; }
|
||
.lock-messages p:last-child { margin: 0; }
|
||
|
||
.init-box {
|
||
background: var(--color-card);
|
||
border: 1px solid var(--color-secondary);
|
||
border-radius: 14px;
|
||
padding: 1.5rem;
|
||
}
|
||
.init-box h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
|
||
.group-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
|
||
.group-item {
|
||
display: flex; align-items: center; gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
border: 1px solid var(--color-secondary);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, background 0.2s;
|
||
}
|
||
.group-item:hover, .group-item.selected {
|
||
border-color: var(--color-primary);
|
||
background: rgba(var(--color-primary-rgb, 233,69,96), 0.06);
|
||
}
|
||
.group-item input[type=radio] { accent-color: var(--color-primary); }
|
||
|
||
.toy-item {
|
||
display: flex; align-items: center; gap: 0.6rem;
|
||
padding: 0.6rem 0.85rem; border-radius: 8px;
|
||
background: var(--color-card); border: 1px solid var(--color-secondary);
|
||
margin-bottom: 0.5rem; cursor: pointer; transition: border-color 0.15s; user-select: none;
|
||
}
|
||
.toy-item.is-checked { border-color: var(--color-primary); }
|
||
.toy-item input { accent-color: var(--color-primary); flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; }
|
||
.toy-item span { flex: 1; min-width: 0; }
|
||
.toy-item-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
|
||
.toy-item-desc { display: block; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.15rem; }
|
||
.toy-item-img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
|
||
.toys-hint { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 1rem; line-height: 1.5; }
|
||
|
||
.btn-primary {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border-radius: 10px;
|
||
border: none;
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
|
||
.btn-secondary {
|
||
width: 100%;
|
||
padding: 0.65rem;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--color-secondary);
|
||
background: transparent;
|
||
color: var(--color-text);
|
||
font-size: 0.92rem;
|
||
cursor: pointer;
|
||
margin-top: 0.6rem;
|
||
}
|
||
|
||
#finisherBox {
|
||
background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(155,89,182,0.12));
|
||
border: 1px solid rgba(233,69,96,0.4);
|
||
border-radius: 14px;
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
#finisherBox .trophy { font-size: 2.5rem; margin-bottom: 0.5rem; }
|
||
#finisherBox h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--color-primary); }
|
||
</style>
|
||
</head>
|
||
<body class="app">
|
||
<div class="main">
|
||
<div class="content">
|
||
<h2 style="margin-bottom:1.25rem;">🎯 Task Game</h2>
|
||
|
||
<!-- Level-Anzeige -->
|
||
<div class="level-display" id="levelDisplay" style="display:none;">
|
||
<img id="levelImg" src="" alt="Level">
|
||
</div>
|
||
|
||
<!-- Freigegebene Locks (checkLocks-Meldungen) -->
|
||
<div id="lockMessages" class="lock-messages" style="display:none;"></div>
|
||
|
||
<!-- Toy-Auswahl vor Spielstart -->
|
||
<div id="toyBox" style="display:none;">
|
||
<div class="game-card">
|
||
<div class="game-label">Verfügbare Toys</div>
|
||
<p class="toys-hint">
|
||
Deaktiviere Toys, die nicht zur Verfügung stehen.
|
||
Aufgaben, die diese benötigen, werden deaktiviert.
|
||
</p>
|
||
<div id="toyToggleList"></div>
|
||
<div style="margin-top:1.25rem;">
|
||
<button class="btn-primary" onclick="handleToyConfirm()">▶ Spiel starten</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Initialisierung: Gruppe wählen -->
|
||
<div id="initBox" class="init-box" style="display:none;">
|
||
<h2>Spiel-Set auswählen</h2>
|
||
<p style="font-size:0.85rem;color:var(--color-muted);margin:0 0 1rem;">
|
||
Wähle die Aufgabengruppe für dieses Spiel.
|
||
</p>
|
||
<div id="groupList" class="group-list"></div>
|
||
<button class="btn-primary" id="btnStart" disabled onclick="startGame()">▶ Spiel starten</button>
|
||
</div>
|
||
|
||
<!-- Laufendes Spiel -->
|
||
<div id="gameBox" style="display:none;">
|
||
|
||
<!-- Einheitliche Spielkarte -->
|
||
<div id="gameCard" class="game-card" style="display:none;">
|
||
<div class="game-label" id="gameLabel"></div>
|
||
<div class="game-text" id="gameText"></div>
|
||
<div class="game-timer" id="gameTimer"></div>
|
||
<div class="game-btn-row">
|
||
<button class="btn-primary" id="gameBtn" onclick="handleGameBtn()" style="width:100%;height:100%;"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Release-Text (Sperren) -->
|
||
<div id="lockReleaseBox" class="game-card" style="display:none;">
|
||
<div class="game-label">🔓 Sperre aufgehoben</div>
|
||
<div class="game-text" id="releaseText"></div>
|
||
<div style="margin-top:1.1rem;">
|
||
<button class="btn-primary" id="btnReleaseOk">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Finisher -->
|
||
<div id="finisherBox" style="display:none;">
|
||
<div class="trophy">🏆</div>
|
||
<h2>Level 6 erreicht!</h2>
|
||
<div class="game-label" id="finisherTitle"></div>
|
||
<div class="game-text" id="finisherText" style="margin-top:0.5rem;text-align:left;"></div>
|
||
<button class="btn-primary" id="btnFinisherOk" style="margin-top:1.25rem;">✓ OK</button>
|
||
</div>
|
||
|
||
<!-- Debug -->
|
||
<div style="margin-top:1.5rem;">
|
||
<button onclick="debugExit()" style="width:100%;padding:0.45rem;border-radius:8px;border:1px dashed #666;background:transparent;color:#666;font-size:0.78rem;cursor:pointer;">🐛 Debug exit</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="loadingHint" style="text-align:center;color:var(--color-muted);padding:2rem 0;font-size:0.9rem;">
|
||
Wird geladen…
|
||
</div>
|
||
<div id="errorBox" style="display:none;background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.3);
|
||
border-radius:10px;padding:1rem;font-size:0.88rem;color:#e74c3c;margin-top:1rem;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/icons.js"></script>
|
||
<script src="/js/nav.js"></script>
|
||
<script>
|
||
const params = new URLSearchParams(location.search);
|
||
const lockId = params.get('lockId');
|
||
const autoGameSetId = params.get('gameSetId');
|
||
const freshStart = params.get('fresh') === '1';
|
||
let _resolvedGameSetId = autoGameSetId;
|
||
let _state = null;
|
||
let _timerInt = null;
|
||
let _gameAction = null; // 'queue-start' | 'queue-done' | 'active-running' | 'active-done'
|
||
|
||
function goBack() {
|
||
if (lockId) location.href = '/games/chastity/activelock.html?lockId=' + lockId;
|
||
else history.back();
|
||
}
|
||
|
||
async function debugExit() {
|
||
const url = '/lock-game/complete' + (lockId ? '?lockId=' + lockId : '');
|
||
await fetch(url, { method: 'POST' });
|
||
goBack();
|
||
}
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────────────
|
||
|
||
async function boot() {
|
||
try {
|
||
if (!freshStart) {
|
||
const r = await fetch('/lock-game/state');
|
||
if (r.ok) {
|
||
_state = await r.json();
|
||
hide('loadingHint');
|
||
await runGameLoop();
|
||
return;
|
||
}
|
||
if (r.status !== 404) throw new Error('Fehler beim Laden des Spielzustands');
|
||
}
|
||
|
||
// Fresh start or no existing game: resolve gameSetId, then show toy selection
|
||
let gameSetId = autoGameSetId;
|
||
if (!gameSetId && lockId) {
|
||
try {
|
||
const lockR = await fetch('/keyholder/cardlock/' + lockId);
|
||
if (lockR.ok) {
|
||
const lockData = await lockR.json();
|
||
gameSetId = lockData.gameSetId || null;
|
||
}
|
||
} catch (_) {}
|
||
}
|
||
_resolvedGameSetId = gameSetId;
|
||
if (gameSetId) {
|
||
await loadAndShowToys(gameSetId);
|
||
} else {
|
||
await loadGroups();
|
||
}
|
||
} catch (e) {
|
||
showError(e.message);
|
||
}
|
||
}
|
||
|
||
// ── Toy-Auswahl ──────────────────────────────────────────────────────────
|
||
|
||
async function loadAndShowToys(gameSetId) {
|
||
try {
|
||
const r = await fetch('/lock-game/toys?aufgabenGruppeId=' + gameSetId);
|
||
if (!r.ok) throw new Error('Fehler beim Laden der Toys');
|
||
const toys = await r.json();
|
||
hide('loadingHint');
|
||
|
||
const list = document.getElementById('toyToggleList');
|
||
if (toys.length === 0) {
|
||
list.innerHTML = '<p style="font-size:0.85rem;color:var(--color-muted);font-style:italic;margin:0;">'
|
||
+ 'Keine Toys erforderlich – alle Aufgaben werden gespielt.</p>';
|
||
} else {
|
||
list.innerHTML = toys.map(t => `
|
||
<label class="toy-item is-checked">
|
||
<input type="checkbox" value="${esc(t.toyId)}" checked>
|
||
<span>
|
||
<span class="toy-item-name">${esc(t.name)}</span>
|
||
${t.beschreibung ? `<span class="toy-item-desc">${esc(t.beschreibung)}</span>` : ''}
|
||
</span>
|
||
${t.bild ? `<img class="toy-item-img" src="data:image/png;base64,${t.bild}" alt="">` : ''}
|
||
</label>`).join('');
|
||
|
||
list.addEventListener('change', e => {
|
||
const cb = e.target;
|
||
if (cb.type === 'checkbox') cb.closest('.toy-item')?.classList.toggle('is-checked', cb.checked);
|
||
}, { once: false });
|
||
}
|
||
show('toyBox');
|
||
} catch (e) {
|
||
showError(e.message);
|
||
}
|
||
}
|
||
|
||
async function handleToyConfirm() {
|
||
const excludedToyIds = [];
|
||
document.querySelectorAll('#toyToggleList input[type="checkbox"]').forEach(cb => {
|
||
if (!cb.checked) excludedToyIds.push(cb.value);
|
||
});
|
||
hide('toyBox');
|
||
show('loadingHint');
|
||
try {
|
||
await startWithExcludedToys(_resolvedGameSetId, excludedToyIds);
|
||
} catch (e) {
|
||
showError(e.message);
|
||
}
|
||
}
|
||
|
||
async function startWithExcludedToys(gameSetId, excludedToyIds) {
|
||
const params = new URLSearchParams({ aufgabenGruppeId: gameSetId });
|
||
excludedToyIds.forEach(id => params.append('excludedToyIds', id));
|
||
const r = await fetch('/lock-game/init?' + params.toString(), { method: 'POST' });
|
||
|
||
if (r.status === 422) {
|
||
const body = await r.json().catch(() => ({}));
|
||
await showValidationError(body.error || 'Das Aufgaben-Set ist nicht vollständig.');
|
||
return;
|
||
}
|
||
if (!r.ok) throw new Error('Initialisierung fehlgeschlagen');
|
||
|
||
const stateR = await fetch('/lock-game/state');
|
||
_state = await stateR.json();
|
||
hide('loadingHint');
|
||
await runGameLoop();
|
||
}
|
||
|
||
async function showValidationError(msg) {
|
||
hide('loadingHint');
|
||
showError('Das Spiel kann nicht gestartet werden: ' + msg
|
||
+ ' Du wirst in Kürze zurückgeleitet und erhältst eine Strafe.');
|
||
|
||
if (lockId) {
|
||
fetch('/lock-game/penalty?lockId=' + lockId, { method: 'POST' }).catch(() => {});
|
||
}
|
||
|
||
let secs = 5;
|
||
const interval = setInterval(() => {
|
||
const box = document.getElementById('errorBox');
|
||
if (box) box.textContent = 'Das Spiel kann nicht gestartet werden: ' + msg
|
||
+ ` Rückleitung in ${--secs}s…`;
|
||
if (secs <= 0) { clearInterval(interval); goBack(); }
|
||
}, 1000);
|
||
}
|
||
|
||
async function loadGroups() {
|
||
const r = await fetch('/lock-game/groups');
|
||
const groups = r.ok ? await r.json() : [];
|
||
|
||
if (groups.length === 1) {
|
||
_resolvedGameSetId = groups[0].gruppenId;
|
||
await loadAndShowToys(groups[0].gruppenId);
|
||
return;
|
||
}
|
||
|
||
hide('loadingHint');
|
||
const list = document.getElementById('groupList');
|
||
if (groups.length === 0) {
|
||
list.innerHTML = '<p style="font-size:0.85rem;color:var(--color-muted);">Keine passenden Aufgabengruppen gefunden.<br>Erstelle zuerst eine Gruppe vom Typ „Chastity Only".</p>';
|
||
} else {
|
||
list.innerHTML = groups.map(g => `
|
||
<label class="group-item" onclick="selectGroup(this)">
|
||
<input type="radio" name="gruppe" value="${g.gruppenId}" style="display:none;">
|
||
<div>
|
||
<div style="font-weight:600;font-size:0.95rem;">${esc(g.name)}</div>
|
||
${g.beschreibung ? `<div style="font-size:0.8rem;color:var(--color-muted);">${esc(g.beschreibung)}</div>` : ''}
|
||
</div>
|
||
</label>`).join('');
|
||
}
|
||
show('initBox');
|
||
}
|
||
|
||
function selectGroup(el) {
|
||
document.querySelectorAll('.group-item').forEach(i => i.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
el.querySelector('input').checked = true;
|
||
document.getElementById('btnStart').disabled = false;
|
||
}
|
||
|
||
async function startGame() {
|
||
const sel = document.querySelector('input[name="gruppe"]:checked');
|
||
if (!sel) return;
|
||
hide('initBox');
|
||
show('loadingHint');
|
||
_resolvedGameSetId = sel.value;
|
||
await loadAndShowToys(sel.value);
|
||
}
|
||
|
||
// ── Game Loop ─────────────────────────────────────────────────────────────
|
||
|
||
function setGameCard(label, text, action, btnLabel) {
|
||
document.getElementById('gameLabel').textContent = label;
|
||
document.getElementById('gameText').textContent = text;
|
||
const timerEl = document.getElementById('gameTimer');
|
||
timerEl.classList.remove('active', 'urgent');
|
||
timerEl.textContent = '';
|
||
_gameAction = action;
|
||
document.getElementById('gameBtn').textContent = btnLabel;
|
||
}
|
||
|
||
async function runGameLoop() {
|
||
hide('gameCard');
|
||
hide('finisherBox');
|
||
clearTimer();
|
||
|
||
if (_state.level >= 6) {
|
||
await showFinisherFlow();
|
||
return;
|
||
}
|
||
|
||
renderLevelBar(_state.level);
|
||
|
||
if (_state.activeTask) {
|
||
showActiveTask(_state.activeTask, _state.activeTaskEnd);
|
||
return;
|
||
}
|
||
|
||
if (!_state.taskInQueue && !_state.lockInQueue) {
|
||
await fetch('/lock-game/next-task', { method: 'POST' });
|
||
const r = await fetch('/lock-game/state');
|
||
_state = await r.json();
|
||
}
|
||
|
||
showQueue();
|
||
}
|
||
|
||
function showQueue() {
|
||
if (_state.lockInQueue) {
|
||
let sperre;
|
||
try { sperre = JSON.parse(_state.lockInQueue); } catch { sperre = {}; }
|
||
setGameCard('🔒 Neue Sperre', sperre.text || sperre.kurzText || '', 'queue-start', '▶ Starten');
|
||
} else if (_state.taskInQueue) {
|
||
let aufgabe;
|
||
try { aufgabe = JSON.parse(_state.taskInQueue); } catch { aufgabe = {}; }
|
||
const hasDuration = !!(aufgabe.sekundenVon || aufgabe.sekundenBis);
|
||
setGameCard('🎯 Neue Aufgabe', aufgabe.text || '', hasDuration ? 'queue-start' : 'queue-done',
|
||
hasDuration ? '▶ Starten' : '✓ Erledigt');
|
||
}
|
||
show('gameBox');
|
||
show('gameCard');
|
||
}
|
||
|
||
function showActiveTask(text, endIso) {
|
||
show('gameBox');
|
||
show('gameCard');
|
||
const timerEl = document.getElementById('gameTimer');
|
||
timerEl.classList.remove('active', 'urgent');
|
||
timerEl.textContent = '';
|
||
document.getElementById('gameLabel').textContent = 'Aktive Aufgabe';
|
||
document.getElementById('gameText').textContent = text;
|
||
|
||
if (endIso) {
|
||
const end = new Date(endIso);
|
||
if (end > Date.now()) {
|
||
_gameAction = 'active-running';
|
||
document.getElementById('gameBtn').textContent = '✕ Abbrechen';
|
||
startTimer(end, timerEl);
|
||
return;
|
||
}
|
||
}
|
||
_gameAction = 'active-done';
|
||
document.getElementById('gameBtn').textContent = '✓ Erledigt';
|
||
}
|
||
|
||
function handleGameBtn() {
|
||
switch (_gameAction) {
|
||
case 'queue-start': doQueueStart(); break;
|
||
case 'queue-done': doQueueDone(); break;
|
||
case 'active-running': doCancelCountdown(); break;
|
||
case 'active-done': doErledigt(); break;
|
||
}
|
||
}
|
||
|
||
async function doQueueStart() {
|
||
try {
|
||
await checkAndShowLocks();
|
||
const r = await fetch('/lock-game/apply-task', { method: 'POST' });
|
||
if (!r.ok) { showError('Fehler beim Starten'); return; }
|
||
const stateR = await fetch('/lock-game/state');
|
||
_state = await stateR.json();
|
||
await runGameLoop();
|
||
} catch (e) { showError(e.message || 'Fehler (Starten)'); }
|
||
}
|
||
|
||
async function doQueueDone() {
|
||
try {
|
||
await checkAndShowLocks();
|
||
const applyR = await fetch('/lock-game/apply-task', { method: 'POST' });
|
||
if (!applyR.ok) { showError('Fehler beim Anwenden'); return; }
|
||
const nextR = await fetch('/lock-game/next-task', { method: 'POST' });
|
||
if (!nextR.ok) { showError('Fehler beim Ziehen'); return; }
|
||
const stateR = await fetch('/lock-game/state');
|
||
_state = await stateR.json();
|
||
await runGameLoop();
|
||
} catch (e) { showError(e.message || 'Fehler (Erledigt)'); }
|
||
}
|
||
|
||
function doCancelCountdown() {
|
||
clearTimer();
|
||
_gameAction = 'active-done';
|
||
document.getElementById('gameBtn').textContent = '✓ Erledigt';
|
||
}
|
||
|
||
async function doErledigt() {
|
||
try {
|
||
await checkAndShowLocks();
|
||
if (_state.level >= 6) { await showFinisherFlow(); return; }
|
||
const r = await fetch('/lock-game/next-task', { method: 'POST' });
|
||
if (!r.ok) { showError('Fehler beim Ziehen'); return; }
|
||
const stateR = await fetch('/lock-game/state');
|
||
_state = await stateR.json();
|
||
await runGameLoop();
|
||
} catch (e) { showError(e.message || 'Fehler (Erledigt)'); }
|
||
}
|
||
|
||
async function checkAndShowLocks() {
|
||
const r = await fetch('/lock-game/check-locks', { method: 'POST' });
|
||
if (!r.ok) return;
|
||
const texts = await r.json();
|
||
const valid = texts ? texts.filter(t => t != null && t !== '') : [];
|
||
if (valid.length > 0) {
|
||
const box = document.getElementById('lockMessages');
|
||
box.innerHTML = valid.map(t => `<p>🔓 ${esc(t)}</p>`).join('');
|
||
show('lockMessages');
|
||
await new Promise(res => setTimeout(res, 2000));
|
||
}
|
||
}
|
||
|
||
async function showFinisherFlow() {
|
||
show('gameBox');
|
||
hide('gameCard');
|
||
hide('lockReleaseBox');
|
||
hide('finisherBox');
|
||
|
||
// 1. Release-Texte sequenziell anzeigen
|
||
try {
|
||
const r = await fetch('/lock-game/release-locks');
|
||
if (r.ok) {
|
||
const texts = await r.json();
|
||
for (const text of texts) {
|
||
await waitForReleaseOk(text);
|
||
}
|
||
}
|
||
} catch (_) { /* ignorieren */ }
|
||
|
||
// 2. Finisher laden und Zeit messen
|
||
const finisherStartTime = Date.now();
|
||
let finisher = null;
|
||
try {
|
||
const r = await fetch('/lock-game/finisher');
|
||
if (r.ok) finisher = await r.json();
|
||
} catch (_) { /* ignorieren */ }
|
||
|
||
document.getElementById('finisherTitle').textContent = finisher?.kurzText || '';
|
||
document.getElementById('finisherText').textContent = finisher?.text || 'Glückwunsch – du hast Level 6 erreicht!';
|
||
|
||
// 3. Warten bis Nutzer OK drückt
|
||
await new Promise(resolve => {
|
||
document.getElementById('btnFinisherOk').onclick = resolve;
|
||
show('finisherBox');
|
||
});
|
||
|
||
// 4. Zeit berechnen und Spiel beenden
|
||
const timeInMinutes = Math.round((Date.now() - finisherStartTime) / 60000);
|
||
const params = new URLSearchParams({ timeInMinutes });
|
||
if (lockId) params.set('lockId', lockId);
|
||
await fetch('/lock-game/complete?' + params.toString(), { method: 'POST' });
|
||
goBack();
|
||
}
|
||
|
||
function waitForReleaseOk(text) {
|
||
return new Promise(resolve => {
|
||
document.getElementById('releaseText').textContent = text;
|
||
document.getElementById('btnReleaseOk').onclick = () => {
|
||
hide('lockReleaseBox');
|
||
resolve();
|
||
};
|
||
show('lockReleaseBox');
|
||
});
|
||
}
|
||
|
||
// ── Level-Bar ─────────────────────────────────────────────────────────────
|
||
|
||
function renderLevelBar(level) {
|
||
const lvl = Math.min(Math.max(level, 1), 5);
|
||
document.getElementById('levelImg').src = `/img/lvl${lvl}.png`;
|
||
show('levelDisplay');
|
||
}
|
||
|
||
// ── Timer ─────────────────────────────────────────────────────────────────
|
||
|
||
function playSound(src) {
|
||
try { new Audio(src).play().catch(() => {}); } catch (_) {}
|
||
}
|
||
|
||
function startTimer(endDate, el) {
|
||
el.classList.add('active');
|
||
clearTimer();
|
||
_timerInt = setInterval(() => {
|
||
const diff = Math.max(0, Math.round((endDate - Date.now()) / 1000));
|
||
const m = String(Math.floor(diff / 60)).padStart(2, '0');
|
||
const s = String(diff % 60).padStart(2, '0');
|
||
el.textContent = m + ':' + s;
|
||
el.classList.toggle('urgent', diff < 30);
|
||
if (diff === 0) {
|
||
clearTimer();
|
||
playSound('/audio/alarm.mp3');
|
||
_gameAction = 'active-done';
|
||
document.getElementById('gameBtn').textContent = '✓ Erledigt';
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
function clearTimer() {
|
||
if (_timerInt) { clearInterval(_timerInt); _timerInt = null; }
|
||
}
|
||
|
||
// ── Hilfsfunktionen ───────────────────────────────────────────────────────
|
||
|
||
function show(id) { const el = document.getElementById(id); if (el) el.style.display = ''; }
|
||
function hide(id) { const el = document.getElementById(id); if (el) el.style.display = 'none'; }
|
||
function esc(s) { return String(s).replace(/</g,'<').replace(/>/g,'>'); }
|
||
function showError(msg) {
|
||
hide('loadingHint');
|
||
const box = document.getElementById('errorBox');
|
||
box.textContent = msg || 'Ein Fehler ist aufgetreten.';
|
||
box.style.display = '';
|
||
}
|
||
|
||
boot();
|
||
</script>
|
||
</body>
|
||
</html>
|