125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Spiel laden — Edu Boardgame Generator</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{height:100%;}
|
|
body{
|
|
background:radial-gradient(ellipse at top,#1e1b4b 0%,#050314 70%);
|
|
color:#e2e0f0;font-family:'Nunito',sans-serif;
|
|
min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
|
|
}
|
|
.card{
|
|
background:#1a1827;border:1px solid #2e2b4a;border-radius:22px;
|
|
padding:36px 32px;max-width:460px;width:100%;text-align:center;
|
|
box-shadow:0 24px 70px rgba(0,0,0,0.7);
|
|
}
|
|
h1{font-family:'Fredoka One',cursive;color:#a78bfa;margin-bottom:6px;font-size:1.8rem;}
|
|
.sub{color:#a7a3c2;margin-bottom:26px;font-size:14px;line-height:1.5;}
|
|
.code-input{
|
|
background:#0f0e17;border:2px solid #2e2b4a;border-radius:14px;
|
|
color:#fff;font-size:34px;font-weight:900;letter-spacing:10px;
|
|
font-family:'Courier New',monospace;padding:18px 14px;width:100%;
|
|
text-align:center;text-transform:uppercase;
|
|
transition:border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.code-input::placeholder{color:#3a3658;letter-spacing:10px;}
|
|
.code-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,0.18);}
|
|
.go-btn{
|
|
background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;
|
|
font-family:'Fredoka One',cursive;font-size:1.15rem;border:none;border-radius:12px;
|
|
padding:14px 36px;margin-top:18px;cursor:pointer;
|
|
transition:transform 0.15s,box-shadow 0.15s;
|
|
}
|
|
.go-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,58,237,0.55);}
|
|
.go-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
|
|
.err{color:#ef4444;margin-top:14px;min-height:20px;font-size:13px;font-weight:700;}
|
|
.ok{color:#a78bfa;}
|
|
.hint{margin-top:24px;color:#5b5680;font-size:11px;line-height:1.5;}
|
|
.logo{font-size:2.4rem;margin-bottom:10px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="logo">🎲</div>
|
|
<h1>Spiel laden</h1>
|
|
<p class="sub">Gib den 6-stelligen Code ein, den du auf deinem Ausdruck findest.</p>
|
|
<input id="code" class="code-input" maxlength="9" placeholder="——————" autofocus
|
|
autocapitalize="characters" autocomplete="off" spellcheck="false" inputmode="text">
|
|
<br>
|
|
<button id="goBtn" class="go-btn" onclick="loadGame()">Spiel starten →</button>
|
|
<div class="err" id="err"></div>
|
|
<div class="hint">Edu Boardgame Generator · PH Weingarten</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
|
|
<script>
|
|
const ALPHA_RE = /[23456789A-HJ-NP-Z]/g;
|
|
|
|
function cleanCode(v) {
|
|
return (v || '').toUpperCase().match(ALPHA_RE)?.join('') || '';
|
|
}
|
|
|
|
async function loadGame() {
|
|
const inp = document.getElementById('code');
|
|
const err = document.getElementById('err');
|
|
const btn = document.getElementById('goBtn');
|
|
const raw = cleanCode(inp.value);
|
|
if (raw.length !== 6) {
|
|
err.className = 'err';
|
|
err.textContent = 'Bitte 6 Zeichen eingeben (Buchstaben + Zahlen).';
|
|
return;
|
|
}
|
|
err.className = 'err ok';
|
|
err.textContent = 'Lade Spiel …';
|
|
btn.disabled = true;
|
|
try {
|
|
const res = await fetch('codes/' + raw + '.json', { cache: 'no-store' });
|
|
if (!res.ok) {
|
|
err.className = 'err';
|
|
err.textContent = res.status === 404
|
|
? '⚠️ Code unbekannt. Schau nochmal auf deinen Ausdruck.'
|
|
: 'Fehler ' + res.status + ' beim Laden.';
|
|
btn.disabled = false;
|
|
return;
|
|
}
|
|
const cfg = await res.json();
|
|
// Hash bauen wie share.js es macht (pako deflate + base64)
|
|
const json = JSON.stringify(cfg);
|
|
const compressed = pako.deflate(json, { level: 9 });
|
|
const binary = Array.from(compressed).map(b => String.fromCharCode(b)).join('');
|
|
const encoded = 'z:' + btoa(binary);
|
|
location.href = '../game.html#' + encoded;
|
|
} catch (e) {
|
|
err.className = 'err';
|
|
err.textContent = 'Verbindungsfehler. Bist du online?';
|
|
btn.disabled = false;
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
// Auto-format input (Großbuchstaben, nur erlaubte Zeichen, max 6)
|
|
const inp = document.getElementById('code');
|
|
inp.addEventListener('input', () => {
|
|
const clean = cleanCode(inp.value).slice(0, 6);
|
|
if (inp.value !== clean) inp.value = clean;
|
|
});
|
|
inp.addEventListener('keypress', e => {
|
|
if (e.key === 'Enter') loadGame();
|
|
});
|
|
|
|
// Auto-load via URL hash (z.B. /play/#ABC234)
|
|
if (location.hash.length > 1) {
|
|
const fromHash = cleanCode(location.hash.slice(1));
|
|
if (fromHash.length === 6) {
|
|
inp.value = fromHash;
|
|
setTimeout(loadGame, 100);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|