597 lines
32 KiB
HTML
597 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||
<title>Spiel-Generator</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="editor.css">
|
||
</head>
|
||
<body>
|
||
<div id="saveIndicator">Gespeichert ✓</div>
|
||
|
||
<!-- ═══ PROGRESS BAR ═══ -->
|
||
|
||
<div id="progressBar">
|
||
<div class="pb-inner">
|
||
<div class="pb-top">
|
||
<div class="pb-logo" style="display:flex;align-items:center;gap:12px">
|
||
<span>🎲 Spiel-Generator <span style="color:var(--muted);font-size:0.75rem;font-family:'Nunito',sans-serif;font-weight:700">— Dein Spiel, deine Regeln</span></span>
|
||
<button onclick="resetAll()" title="Alles zurücksetzen" style="background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#ef4444;font-size:10px;font-weight:800;font-family:'Nunito',sans-serif;border-radius:6px;padding:3px 9px;cursor:pointer;letter-spacing:0.5px;transition:all 0.2s" onmouseover="this.style.background='rgba(239,68,68,0.25)'" onmouseout="this.style.background='rgba(239,68,68,0.12)'">↺ Reset</button>
|
||
</div>
|
||
<div class="pb-phwg">
|
||
<img src="logo.png" alt="PH Weingarten"/>
|
||
<div class="pb-phwg-text">
|
||
<div class="pb-phwg-studiengaenge"><span>Medien- und Bildungsmanagement</span></div>
|
||
<div class="pb-phwg-studiengaenge"><span>Informatik (Lehramt)</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pb-steps">
|
||
<div class="pb-step active" id="pb0" onclick="pbClick(0)"><div class="pb-dot">1</div><span class="pb-label">Grundinfos</span></div>
|
||
<div class="pb-connector" id="pbc0"></div>
|
||
<div class="pb-step" id="pb1" onclick="pbClick(1)"><div class="pb-dot">2</div><span class="pb-label">Gestaltung</span></div>
|
||
<div class="pb-connector" id="pbc1"></div>
|
||
<div class="pb-step" id="pb2" onclick="pbClick(2)"><div class="pb-dot">3</div><span class="pb-label">Spielfeld</span></div>
|
||
<div class="pb-connector" id="pbc2"></div>
|
||
<div class="pb-step" id="pb3" onclick="pbClick(3)"><div class="pb-dot">4</div><span class="pb-label">Quiz</span></div>
|
||
<div class="pb-connector" id="pbc3"></div>
|
||
<div class="pb-step" id="pb4" onclick="pbClick(4)"><div class="pb-dot">5</div><span class="pb-label">Testen</span></div>
|
||
</div>
|
||
<div class="pb-track"><div class="pb-fill" id="pbFill" style="width:10%"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="splitWrap">
|
||
<div id="editorPane">
|
||
|
||
|
||
<div id="dragGhost"></div>
|
||
<div class="emoji-picker" id="emojiPicker"></div>
|
||
<div id="toast">✅ Gespeichert!</div>
|
||
|
||
<!-- ════════════ SCREEN 1: GRUNDINFOS ════════════ -->
|
||
<div class="screen active" id="s0">
|
||
<div class="sh">
|
||
<div class="sh-badge">Schritt 1 von 5</div>
|
||
<h1 class="sh-title">Dein Spiel <em>beginnt hier ✨</em></h1>
|
||
<p class="sh-sub">Erstmal wichtig: Wer bist du? Dann gib deinem Spiel einen Namen.</p>
|
||
</div>
|
||
<div class="card" style="background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(245,166,35,0.06));border-color:rgba(124,58,237,0.4)">
|
||
<div class="card-title">👋 Hallo! Wie heißt du?</div>
|
||
<p class="card-sub">Dein Name oder Nickname — er erscheint auf deinem Spiel als Entwickler:in!</p>
|
||
<input class="finput" id="s1devname" type="text" onfocus="setCodeFocus('dev')" maxlength="30" placeholder="z.B. Lena, MrCoder, GameMaster42 …" oninput="s1update()" style="border-color:rgba(124,58,237,0.5)"/>
|
||
<div id="devGreeting" style="margin-top:10px;min-height:28px;font-family:'Fredoka One',cursive;font-size:1.05rem;color:var(--accent);transition:opacity 0.3s;opacity:0"></div>
|
||
</div>
|
||
<div class="card">
|
||
<label class="lbl">🎮 Spielname</label>
|
||
<input class="finput" id="s1name" type="text" onfocus="setCodeFocus('name')" maxlength="40" placeholder="z.B. Abenteuer im Dschungel" oninput="s1update()"/>
|
||
<div class="char-row" id="s1nc">0 / 40</div>
|
||
<div class="suggestions">
|
||
<div class="sug" onclick="suggest('Abenteuer im Dschungel')">🌴 Abenteuer im Dschungel</div>
|
||
<div class="sug" onclick="suggest('Mission Weltraum')">🚀 Mission Weltraum</div>
|
||
<div class="sug" onclick="suggest('Das große Quiz-Turnier')">❓ Das große Quiz-Turnier</div>
|
||
<div class="sug" onclick="suggest('Schatz des Drachen')">🐲 Schatz des Drachen</div>
|
||
<div class="sug" onclick="suggest('Flucht aus dem Labyrinth')">🌀 Flucht aus dem Labyrinth</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<label class="lbl">📝 Beschreibung <span style="color:var(--muted);font-weight:400;font-size:10px">(optional)</span></label>
|
||
<textarea class="ftarea" id="s1desc" rows="3" onfocus="setCodeFocus('desc')" maxlength="120" placeholder="Worum geht es? Was ist das Ziel?" oninput="s1update()"></textarea>
|
||
<div class="char-row" id="s1dc">0 / 120</div>
|
||
</div>
|
||
<div id="s1preview" style="display:none">
|
||
<div class="preview-card">
|
||
<div class="pv-label">👁️ Vorschau</div>
|
||
<div class="pv-name" id="s1pvname"></div>
|
||
<div class="pv-desc" id="s1pvdesc"></div>
|
||
<div id="s1pvdev" style="margin-top:6px;font-size:11px;font-weight:700;color:var(--accent2)"></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<div></div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px">
|
||
<button class="btn-next" id="s1next" onclick="goTo(1)" disabled>Weiter <span>→</span></button>
|
||
<div id="s1hint" style="font-size:12px;color:var(--muted);display:none">Name und Entwickler-Name erforderlich</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════ SCREEN 2: GESTALTUNG ════════════ -->
|
||
<div class="screen" id="s1">
|
||
<div class="sh">
|
||
<div class="sh-badge">Schritt 2 von 5</div>
|
||
<h1 class="sh-title">Figur & <em>Setting 🎨</em></h1>
|
||
<p class="sh-sub">Wähle deine Spielfigur und die Spielwelt.</p>
|
||
</div>
|
||
<div class="summary-banner" id="sum0">
|
||
<div class="sb-title">✅ Schritt 1 abgeschlossen</div>
|
||
<div class="sb-chips" id="sum0chips"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">👥 Spielmodus</div>
|
||
<p class="card-sub">Allein oder zu zweit gegeneinander?</p>
|
||
<div class="pmode-grid">
|
||
<div class="pmode-card" id="pmode1" onclick="setPlayerCount(1)">
|
||
<div class="pmode-icon">👤</div>
|
||
<div class="pmode-label">1 Spieler</div>
|
||
<div class="pmode-desc">Allein spielen</div>
|
||
</div>
|
||
<div class="pmode-card" id="pmode2" onclick="setPlayerCount(2)">
|
||
<div class="pmode-icon">👥</div>
|
||
<div class="pmode-label">2 Spieler</div>
|
||
<div class="pmode-desc">Wettrennen — wer zuerst am Ziel?</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title" id="figCardTitle">👤 Spielfigur</div>
|
||
<p class="card-sub" id="figCardSub">Das bist du im Spiel!</p>
|
||
<div class="sel-grid" id="figGrid"></div>
|
||
</div>
|
||
<div class="card" id="fig2Card" style="display:none">
|
||
<div class="card-title">🎮 Spielfigur Spieler 2</div>
|
||
<p class="card-sub">Welche Figur soll der zweite Spieler haben?</p>
|
||
<div class="sel-grid" id="fig2Grid"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">🌍 Spielwelt</div>
|
||
<p class="card-sub">Wo findet das Abenteuer statt?</p>
|
||
<div class="sel-grid" id="bgGrid"></div>
|
||
<div id="s2combo" style="display:none">
|
||
<div class="combo-preview">
|
||
<span class="cp-scene" id="s2scene"></span>
|
||
<div class="cp-label" id="s2clabel"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn-back" onclick="goTo(0)">← Zurück</button>
|
||
<button class="btn-next" id="s2next" onclick="goTo(2)" disabled>Weiter <span>→</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════ SCREEN 3: SPIELFELD ════════════ -->
|
||
<div class="screen" id="s2">
|
||
<div class="sh" style="position:relative">
|
||
<div class="sh-badge">Schritt 3 von 5</div>
|
||
<h1 class="sh-title">Bau dein <em>Spielfeld 🎲</em></h1>
|
||
<p class="sh-sub">Lege Regeln fest und bestücke die Felder mit Mini-Games.</p>
|
||
<button class="tour-restart-btn" onclick="tourStart()" title="Tour erneut anzeigen">🎓 Tour starten</button>
|
||
</div>
|
||
<div class="summary-banner" id="sum1">
|
||
<div class="sb-title">✅ Schritt 2 abgeschlossen</div>
|
||
<div class="sb-chips" id="sum1chips"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">⚙️ Spielregeln</div>
|
||
<p class="card-sub">Wie soll dein Spiel funktionieren?</p>
|
||
<div class="rules-grid">
|
||
<div class="rule-block" data-tour="bewegung">
|
||
<div class="rule-block-title">🎲 Bewegung</div>
|
||
<div class="toggle-group">
|
||
<div class="toggle-option selected" data-g="movement" data-v="dice" onclick="selRule(this)"><span class="tog-emoji">🎲</span><div><div class="tog-text">Würfeln</div><div class="tog-sub">Zufällig 1–6 Felder</div></div><div class="tog-check"></div></div>
|
||
<div class="toggle-option" data-g="movement" data-v="step" onclick="selRule(this)"><span class="tog-emoji">👣</span><div><div class="tog-text">Ein Feld pro Runde</div><div class="tog-sub">Jedes Feld wird besucht</div></div><div class="tog-check"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="rule-block">
|
||
<div class="rule-block-title" data-tour="spielmodus-header">🎮 Spielmodus</div>
|
||
<div class="toggle-group" data-tour="spielmodus">
|
||
<div class="toggle-option selected" data-g="fail" data-v="lives" onclick="selRule(this)"><span class="tog-emoji">❤️</span><div><div class="tog-text">Ich spiele mit Leben</div><div class="tog-sub">Bei 0 Leben: Game Over</div></div><div class="tog-check"></div></div>
|
||
<div class="toggle-option" data-g="fail" data-v="points" onclick="selRule(this)"><span class="tog-emoji">⭐</span><div><div class="tog-text">Ich spiele mit Punkten</div><div class="tog-sub">Kein Verlieren, nur Score</div></div><div class="tog-check"></div></div>
|
||
</div>
|
||
<div class="sub-opts visible" id="sub_lives" data-tour="modus-counter" style="display:flex;align-items:center;gap:10px;padding:10px 4px 4px">
|
||
<span style="font-size:13px;font-weight:700;color:var(--text)">Anzahl Leben:</span>
|
||
<button class="val-btn" onclick="chgLives(-1)">−</button>
|
||
<span id="livesDisplay" style="font-size:15px;font-weight:800;min-width:18px;text-align:center">3</span>
|
||
<button class="val-btn" onclick="chgLives(1)">+</button>
|
||
<span id="livesHearts" style="font-size:13px;letter-spacing:1px">❤️❤️❤️</span>
|
||
</div>
|
||
<div class="sub-opts" id="sub_points" data-tour="modus-counter"></div>
|
||
</div>
|
||
</div>
|
||
<div class=divider></div>
|
||
<div class="card-title">Konsequenzen nach Mini-Game</div>
|
||
<p class="card-sub">Was passiert wenn ein Mini-Game gewonnen oder verloren wird?</p>
|
||
<div class="rules-grid" id="consequenceGrid">
|
||
<!-- BEI SIEG -->
|
||
<div class="rule-block" data-tour="konsequenz-sieg">
|
||
<div class="rule-block-title" style="color:#22c55e">Bei Sieg</div>
|
||
<div class="toggle-group" id="cq-win-group">
|
||
<div class="toggle-option selected" data-cq="win" data-cv="nothing" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">—</span><div><div class="tog-text">Nichts passiert</div><div class="tog-sub">Spiel läuft normal weiter</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-dice-only" data-cq="win" data-cv="forward" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">➕</span><div><div class="tog-text">Felder vor</div>
|
||
<div class="tog-sub"><button class="val-btn" onclick="chgCQVal('winVal',-1,event)">−</button> <span id="cqWinVal">2</span> <button class="val-btn" onclick="chgCQVal('winVal',1,event)">+</button> Felder</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-pts-only" data-cq="win" data-cv="points" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">⭐</span><div><div class="tog-text">Punkte +</div>
|
||
<div class="tog-sub"><button class="val-btn" onclick="chgCQVal('winPts',-5,event)">−</button> <span id="cqWinPts">10</span> <button class="val-btn" onclick="chgCQVal('winPts',5,event)">+</button> Punkte</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-dice-only" data-cq="win" data-cv="again" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">🎲</span><div><div class="tog-text">Nochmal würfeln</div><div class="tog-sub">Sofort ein zweites Mal</div></div><div class="tog-check"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- BEI NIEDERLAGE -->
|
||
<div class="rule-block" data-tour="konsequenz-niederlage">
|
||
<div class="rule-block-title" style="color:#ef4444">Bei Niederlage</div>
|
||
<div class="toggle-group" id="cq-lose-group">
|
||
<div class="toggle-option selected" data-cq="lose" data-cv="nothing" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">—</span><div><div class="tog-text">Nichts passiert</div><div class="tog-sub">Spiel läuft normal weiter</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-dice-only" data-cq="lose" data-cv="back" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">➖</span><div><div class="tog-text">Felder zurück</div>
|
||
<div class="tog-sub"><button class="val-btn" onclick="chgCQVal('loseVal',-1,event)">−</button> <span id="cqLoseVal">1</span> <button class="val-btn" onclick="chgCQVal('loseVal',1,event)">+</button> Felder</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-lives-only" data-cq="lose" data-cv="life" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">❤️</span><div><div class="tog-text">Leben verlieren</div><div class="tog-sub">Zusätzlich zu Spielregel</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-pts-only" data-cq="lose" data-cv="points" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">⭐</span><div><div class="tog-text">Punkte −</div>
|
||
<div class="tog-sub"><button class="val-btn" onclick="chgCQVal('losePts',-5,event)">−</button> <span id="cqLosePts">5</span> <button class="val-btn" onclick="chgCQVal('losePts',5,event)">+</button> Punkte</div></div><div class="tog-check"></div>
|
||
</div>
|
||
<div class="toggle-option cq-dice-only" data-cq="lose" data-cv="skip" onclick="selCQ(this,event)">
|
||
<span class="tog-emoji">⏸️</span><div><div class="tog-text">Runde aussetzen</div><div class="tog-sub">Nächste Runde pausieren</div></div><div class="tog-check"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="count-row" data-tour="fieldcount">
|
||
<label>⬛ Anzahl Felder</label>
|
||
<div class="count-ctrl">
|
||
<button class="cnt-btn" id="cntMinus" onclick="chgCount(-1)">−</button>
|
||
<div class="cnt-val" id="cntVal">10</div>
|
||
<button class="cnt-btn" id="cntPlus" onclick="chgCount(1)">+</button>
|
||
<span style="font-size:11px;color:var(--muted)">(6–50)</span>
|
||
</div>
|
||
</div>
|
||
<div data-tour="palette">
|
||
<div class="sec-label"><span>🕹️ Bausteine</span><div class="story-counter" id="storyCtr">📖 0 / 5</div></div>
|
||
<div class="pal-tabs">
|
||
<div class="pal-tab active" onclick="palTab('games')">🕹️ Mini-Games</div>
|
||
<div class="pal-tab" onclick="palTab('story')">📖 Erzähltexte</div>
|
||
</div>
|
||
<div class="pal-panel active" id="panGames"></div>
|
||
<div class="pal-panel" id="panStory">
|
||
<div class="mg-card" id="storyCard" draggable="true" onclick="clickStory()" style="border-color:rgba(6,182,212,0.4)">
|
||
<div class="use-count" id="storyUC">0</div>
|
||
<div class="mg-emoji">📖</div>
|
||
<div class="mg-lbl">Erzähl-Text</div>
|
||
<div class="mg-tag story-tag">max.5×</div>
|
||
<div style="font-size:10px;color:rgba(6,182,212,0.6);margin-top:2px">Vor/nach Feld</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sec-label" style="margin-top:6px">🗺️ Spielwelt <span style="font-size:10px;font-weight:400;text-transform:none;letter-spacing:0">Generieren bis es passt, dann Bausteine auf die Felder ziehen</span></div>
|
||
<div class="world-toolbar">
|
||
<button id="wbReroll" type="button" onclick="worldReroll()">🎲 Welt neu generieren</button>
|
||
<button id="wbLock" type="button" onclick="worldToggleLock()">✓ Spielbrett verwenden</button>
|
||
<span id="wbStatus" class="world-status">🎲 Welt frei generierbar</span>
|
||
</div>
|
||
<canvas id="worldCanvas" class="world-canvas"></canvas>
|
||
<div class="board-stats" id="boardStats"></div>
|
||
<div id="storyList" class="story-list"></div>
|
||
</div>
|
||
|
||
|
||
<div class="btn-row">
|
||
<button class="btn-back" onclick="goTo(1)">← Zurück</button>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px">
|
||
<button class="btn-next" id="s3next" onclick="goTo(3)" disabled>Weiter <span>→</span></button>
|
||
<div id="s3hint" style="font-size:12px;color:var(--muted);display:none">Mindestens 1 Minigame auf dem Spielfeld platzieren</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════ SCREEN 4: QUIZ ════════════ -->
|
||
<div class="screen" id="s3">
|
||
<div class="sh">
|
||
<div class="sh-badge">Schritt 4 von 5</div>
|
||
<h1 class="sh-title">Deine <em>Quiz-Fragen ❓</em></h1>
|
||
<p class="sh-sub">Für jedes Quiz-Feld brauchst du eine Frage mit vier Antworten.</p>
|
||
</div>
|
||
<div class="summary-banner" id="sum2">
|
||
<div class="sb-title">✅ Schritt 3 abgeschlossen</div>
|
||
<div class="sb-chips" id="sum2chips"></div>
|
||
</div>
|
||
<div id="quizArea"></div>
|
||
<div class="btn-row">
|
||
<button class="btn-back" onclick="goTo(2)">← Zurück</button>
|
||
<button class="btn-next" id="s4next" onclick="goTo(4)">Weiter <span>→</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════ SCREEN 5: TESTEN ════════════ -->
|
||
<div class="screen" id="s4">
|
||
<div class="sh">
|
||
<div class="sh-badge">Schritt 5 von 5</div>
|
||
<h1 class="sh-title">Testen & <em>Feedback 🎮</em></h1>
|
||
<p class="sh-sub">Überblick über dein Spiel — dann starten und ausprobieren!</p>
|
||
</div>
|
||
<div class="summary-banner" id="sum3">
|
||
<div class="sb-title">✅ Schritt 4 abgeschlossen</div>
|
||
<div class="sb-chips" id="sum3chips"></div>
|
||
</div>
|
||
<!-- Review filled dynamically -->
|
||
<div id="reviewArea"></div>
|
||
<!-- Launch card -->
|
||
<div class="card" id="launchCard" style="padding:0;overflow:hidden;margin-bottom:18px">
|
||
<div class="launch-hero">
|
||
<span class="lh-fig" id="lhFig">🎮</span>
|
||
<div class="lh-name" id="lhName">—</div>
|
||
<div class="lh-desc" id="lhDesc"></div>
|
||
<div class="lh-pills" id="lhPills"></div>
|
||
</div>
|
||
<div class="launch-body">
|
||
<div class="launch-chk" id="launchChk"></div>
|
||
<button class="btn-launch" id="btnLaunch" onclick="doLaunch()">🎮 Spiel starten & testen!</button>
|
||
<div class="btn-launch-sub">Öffnet das Spiel in einem neuen Fenster</div>
|
||
<div class="played-badge" id="playedBadge">✅ Du hast gespielt! Jetzt bitte Feedback geben ↓</div>
|
||
</div>
|
||
</div>
|
||
<!-- Feedback (hidden until played) -->
|
||
<div class="card" id="fbCard" style="display:none">
|
||
<div class="card-title">📝 Feedback zu deinem Spiel</div>
|
||
<p class="card-sub">Beantworte diese Fragen ehrlich — sie helfen dir, das Spiel zu verbessern!</p>
|
||
<div class="fb-prog"><div class="fb-prog-fill" id="fbFill" style="width:0%"></div></div>
|
||
<div id="fbArea"></div>
|
||
<div class="fb-nav">
|
||
<button class="btn-fb-prev" id="fbPrev" onclick="fbBack()" style="display:none">← Zurück</button>
|
||
<button class="btn-fb-next" id="fbNext" onclick="fbFwd()" disabled>Weiter →</button>
|
||
</div>
|
||
</div>
|
||
<!-- Summary (hidden until feedback done) -->
|
||
<div class="card" id="sumCard" style="display:none;padding:0;overflow:hidden">
|
||
<div class="sum-hero">
|
||
<span class="sum-icon">🎉</span>
|
||
<h2>Test abgeschlossen!</h2>
|
||
<p id="sumText"></p>
|
||
<div class="sum-scores" id="sumScores"></div>
|
||
</div>
|
||
<div style="padding:0 22px 6px">
|
||
<div class="card-title" style="margin-bottom:9px">📋 Auswertung</div>
|
||
<div class="sum-notes" id="sumNotes"></div>
|
||
</div>
|
||
<div style="padding:14px 22px 26px">
|
||
<div class="final-btns">
|
||
<button class="btn-revise" onclick="goTo(0)">✏️ Überarbeiten</button>
|
||
<button class="btn-publish" onclick="doPublish()">🚀 Spiel veröffentlichen →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn-back" onclick="goTo(3)">← Zurück</button>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ SHARE MODAL ════ -->
|
||
<div id="shareOverlay" onclick="if(event.target===this)closeShare()" style="
|
||
display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:6000;
|
||
align-items:center;justify-content:center;backdrop-filter:blur(6px);">
|
||
<div style="background:#1a1827;border:1.5px solid #2e2b4a;border-radius:20px;
|
||
width:min(520px,94vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,0.7);">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;
|
||
padding:18px 22px 14px;border-bottom:1px solid #2e2b4a;">
|
||
<div style="font-family:'Fredoka One',cursive;font-size:1.3rem;color:#a78bfa">
|
||
🎉 Dein Spiel ist fertig!
|
||
</div>
|
||
<button onclick="closeShare()" style="background:none;border:none;color:#a7a3c2;
|
||
font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:6px">✕</button>
|
||
</div>
|
||
<div style="padding:22px">
|
||
<div id="shareGameInfo" style="background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.3);
|
||
border-radius:12px;padding:14px;margin-bottom:18px;font-family:'Nunito',sans-serif;"></div>
|
||
<div style="margin-bottom:18px">
|
||
<div style="font-family:'Fredoka One',cursive;color:#a78bfa;font-size:0.95rem;margin-bottom:8px">
|
||
🔗 Dein Spiel-Link
|
||
</div>
|
||
<div style="display:flex;gap:8px;align-items:center">
|
||
<input id="shareLinkInput" readonly style="
|
||
flex:1;background:#0f0e17;border:1.5px solid #2e2b4a;border-radius:10px;
|
||
color:#e2e0f0;font-family:'Nunito',sans-serif;font-size:11px;
|
||
padding:10px 12px;outline:none;" />
|
||
<button onclick="copyShareLink()" id="shareCopyBtn" style="
|
||
background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;
|
||
font-family:'Fredoka One',cursive;font-size:0.9rem;border:none;
|
||
border-radius:10px;padding:10px 16px;cursor:pointer;white-space:nowrap">
|
||
📋 Kopieren
|
||
</button>
|
||
</div>
|
||
<div id="shareLinkLen" style="font-size:11px;color:#64748b;margin-top:4px;font-family:'Nunito',sans-serif;"></div>
|
||
</div>
|
||
<div style="margin-bottom:18px;text-align:center">
|
||
<div style="font-family:'Fredoka One',cursive;color:#a78bfa;font-size:0.95rem;margin-bottom:10px">
|
||
📱 QR-Code zum Scannen
|
||
</div>
|
||
<div id="shareQR" style="display:inline-block;background:#fff;padding:12px;border-radius:12px;min-width:160px;min-height:160px;"></div>
|
||
<div style="font-size:11px;color:#64748b;margin-top:6px;font-family:'Nunito',sans-serif">
|
||
Handy-Kamera auf den QR-Code richten → öffnet das Spiel direkt
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KURZ-CODE für PC/Geräte ohne QR-Scanner -->
|
||
<div id="shareCodeBox" style="display:none;margin-bottom:18px;background:rgba(124,58,237,0.06);
|
||
border:1px solid rgba(124,58,237,0.25);border-radius:14px;padding:16px;">
|
||
<div style="font-family:'Fredoka One',cursive;color:#a78bfa;font-size:0.95rem;margin-bottom:6px">
|
||
⌨️ Kein QR-Scanner? Code eingeben:
|
||
</div>
|
||
<div style="font-size:11px;color:#7c7596;margin-bottom:12px;font-family:'Nunito',sans-serif;line-height:1.45">
|
||
Am PC oder Gerät ohne Kamera zu <b style="color:#cdc9e6"><span id="sharePlayUrl">franke-lab.de/edu-boardgame-generator/play/</span></b> gehen und den Code eintippen.
|
||
</div>
|
||
<div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap">
|
||
<div style="flex:1;min-width:160px;text-align:center;background:#0f0e17;border:1.5px solid #2e2b4a;border-radius:10px;padding:14px 8px">
|
||
<div style="font-size:10px;color:#7c7596;letter-spacing:1px;font-weight:700;margin-bottom:4px">DEIN SPIEL-CODE</div>
|
||
<div id="shareCodeText" style="font-family:'Courier New',monospace;font-size:1.7rem;font-weight:900;letter-spacing:5px;color:#fff">······</div>
|
||
<div id="shareCodeStatus" style="font-size:10px;color:#7c7596;margin-top:4px">wird erzeugt …</div>
|
||
</div>
|
||
<div style="background:#fff;padding:8px;border-radius:10px;flex-shrink:0">
|
||
<div id="sharePlayQR" style="width:120px;height:120px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:'Fredoka One',cursive;color:#a78bfa;font-size:0.95rem;margin-bottom:10px">
|
||
📤 Direkt teilen
|
||
</div>
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px">
|
||
<button onclick="shareViaEmail()" style="flex:1;min-width:100px;background:rgba(59,130,246,0.15);
|
||
border:1.5px solid rgba(59,130,246,0.4);color:#93c5fd;font-family:'Fredoka One',cursive;
|
||
font-size:0.85rem;border-radius:10px;padding:10px 14px;cursor:pointer">
|
||
📧 E-Mail
|
||
</button>
|
||
<button onclick="shareViaWhatsApp()" style="flex:1;min-width:100px;background:rgba(34,197,94,0.15);
|
||
border:1.5px solid rgba(34,197,94,0.4);color:#86efac;font-family:'Fredoka One',cursive;
|
||
font-size:0.85rem;border-radius:10px;padding:10px 14px;cursor:pointer">
|
||
💬 WhatsApp
|
||
</button>
|
||
<button onclick="shareNative()" style="flex:1;min-width:100px;background:rgba(245,158,11,0.15);
|
||
border:1.5px solid rgba(245,158,11,0.4);color:#fcd34d;font-family:'Fredoka One',cursive;
|
||
font-size:0.85rem;border-radius:10px;padding:10px 14px;cursor:pointer">
|
||
📲 Teilen...
|
||
</button>
|
||
<button onclick="printAsPDF()" style="flex:1;min-width:100px;background:rgba(239,68,68,0.15);border:1.5px solid rgba(239,68,68,0.4);color:#fca5a5;font-family:'Fredoka One',cursive;font-size:0.85rem;border-radius:10px;padding:10px 14px;cursor:pointer">
|
||
🖨️ PDF
|
||
</button>
|
||
</div>
|
||
<div style="background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);
|
||
border-radius:10px;padding:12px;font-family:'Nunito',sans-serif;font-size:12px;color:#6ee7b7;">
|
||
ℹ️ Der Link enthält dein komplettes Spiel. Jeder mit dem Link kann es direkt spielen – keine Anmeldung nötig!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/data.js"></script>
|
||
<script src="js/state.js"></script>
|
||
<script src="js/world.js"></script>
|
||
<script src="js/wizard.js"></script>
|
||
<script src="js/board.js"></script>
|
||
<script src="js/quiz.js"></script>
|
||
<script src="js/share.js"></script>
|
||
<script src="js/minigame-test.js"></script>
|
||
<script src="codegen.js"></script>
|
||
|
||
<!-- ════ MINI-GAME TEST POPUP ════ -->
|
||
<div id="mgTestOverlay" onclick="if(event.target===this)closeMGTest()">
|
||
<div id="mgTestBox">
|
||
<div id="mgTestHeader">
|
||
<span id="mgTestEmoji">🎮</span>
|
||
<div id="mgTestTitle">Mini-Game Test</div>
|
||
<button id="mgTestClose" onclick="closeMGTest()">✕</button>
|
||
</div>
|
||
<div id="mgTestBody">
|
||
<div id="mgTestDesc"></div>
|
||
<div id="mgTestWrap" style="width:100%;min-height:560px;position:relative;overflow:hidden;border-radius:10px;">
|
||
<canvas id="mgTestCanvas" width="400" height="280" style="display:none;margin:0 auto;border-radius:10px;border:1px solid #2e2b4a;"></canvas>
|
||
</div>
|
||
<div id="mgTestMsg"></div>
|
||
<div id="mgTestControls"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /editorPane -->
|
||
<div id="resizerBar"></div>
|
||
<div id="codePane">
|
||
<div id="codeHeader">
|
||
<div id="codeHeaderLeft">
|
||
<span class="code-dot red"></span>
|
||
<span class="code-dot yellow"></span>
|
||
<span class="code-dot green"></span>
|
||
<span id="codeFilename">boardgame.py</span>
|
||
</div>
|
||
<div id="codeHeaderRight">
|
||
<span id="codeLang">🐍 Python</span>
|
||
<span id="codeLines">0 Zeilen</span>
|
||
</div>
|
||
</div>
|
||
<div id="codeScroll">
|
||
<div id="codeLineNums"></div>
|
||
<pre id="codeContent"></pre>
|
||
</div>
|
||
<div id="codeFooter">
|
||
<span id="codeStatus">● Bereit</span>
|
||
<span id="codeInfo">Live-Vorschau deines Spielcodes</span>
|
||
<button onclick="downloadPy()" style="background:rgba(124,58,237,0.25);border:1px solid rgba(124,58,237,0.5);color:#c4b5fd;font-family:'Fredoka One',cursive;font-size:0.78rem;border-radius:7px;padding:4px 10px;cursor:pointer;transition:all 0.15s;flex-shrink:0;" onmouseover="this.style.background='rgba(124,58,237,0.45)'" onmouseout="this.style.background='rgba(124,58,237,0.25)'">⬇ .py</button>
|
||
</div>
|
||
</div><!-- /codePane -->
|
||
|
||
</div><!-- /splitWrap -->
|
||
|
||
<!-- CDN Libraries: QR-Code + Kompression -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||
<!-- ═══ Mini-Game-Module (gemeinsame Quelle mit game.html) ═══ -->
|
||
<script src="minigames/_api.js"></script>
|
||
<script src="minigames/snake.js"></script>
|
||
<script src="minigames/flappy.js"></script>
|
||
<script src="minigames/memory.js"></script>
|
||
<script src="minigames/quiz.js"></script>
|
||
<script src="minigames/reaction.js"></script>
|
||
<script src="minigames/basketball.js"></script>
|
||
<script src="minigames/catch.js"></script>
|
||
<script src="minigames/maze.js"></script>
|
||
<script src="minigames/simon.js"></script>
|
||
<script src="minigames/typing.js"></script>
|
||
<script src="minigames/puzzle.js"></script>
|
||
<script src="minigames/spotdiff.js"></script>
|
||
<script src="minigames/snake2p.js"></script>
|
||
<script src="minigames/flappy2p.js"></script>
|
||
<script src="js/tour.js"></script>
|
||
|
||
<script>
|
||
// ── Initialisierung — läuft NACH allen Modulen ──────────────────────────────
|
||
s1init();
|
||
updatePB();
|
||
if (ST.highestStep > 0) {
|
||
for (let i = 0; i < ST.highestStep && i < 4; i++) {
|
||
document.getElementById('s' + i).classList.remove('active');
|
||
document.getElementById('s' + i).style.display = '';
|
||
}
|
||
cur = ST.highestStep;
|
||
document.getElementById('s' + cur).classList.add('active');
|
||
updatePB();
|
||
showSummary(cur);
|
||
if (cur === 1) s2init();
|
||
if (cur === 2) s3init();
|
||
if (cur === 3) buildQuiz();
|
||
if (cur === 4) buildReview();
|
||
}
|
||
</script>
|
||
|
||
<!-- ═══ TOUR-OVERLAY (Schritt 3 Erstbesuch) ═══ -->
|
||
<div id="tourRoot" class="tour-root" style="display:none">
|
||
<div class="tour-blocker"></div>
|
||
<div class="tour-highlight" id="tourHighlight" style="display:none"></div>
|
||
<div class="tour-character" id="tourCharacter">
|
||
<div class="tour-figure" id="tourFigure">🎮</div>
|
||
<div class="tour-bubble" id="tourBubble">
|
||
<div class="tour-bubble-text" id="tourBubbleText"></div>
|
||
<div class="tour-bubble-progress" id="tourBubbleProgress"></div>
|
||
<div class="tour-bubble-actions">
|
||
<button class="tour-btn-skip" id="tourBtnSkip" onclick="tourSkipConfirm()">Tour beenden</button>
|
||
<div style="flex:1"></div>
|
||
<button class="tour-btn-back" id="tourBtnBack" onclick="tourPrev()" style="display:none">← Zurück</button>
|
||
<button class="tour-btn-next" id="tourBtnNext" onclick="tourNext()">Weiter →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- App-eigener Dialog (ersetzt natives confirm/alert für einheitliche Optik) -->
|
||
<div id="appDialog" class="app-dialog" onclick="if(event.target===this)appDialogCancel()">
|
||
<div class="app-dialog-box">
|
||
<div class="app-dialog-icon" id="appDialogIcon">⚠️</div>
|
||
<div class="app-dialog-msg" id="appDialogMsg"></div>
|
||
<div class="app-dialog-btns">
|
||
<button class="app-dialog-cancel" id="appDialogNo" onclick="appDialogCancel()">Abbrechen</button>
|
||
<button class="app-dialog-ok" id="appDialogYes" onclick="appDialogOk()">Bestätigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src=/chat/chat.js></script>
|
||
</body>
|
||
</html>
|