-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathLernmemoryBeispiel_klein.html
More file actions
185 lines (185 loc) · 24.3 KB
/
LernmemoryBeispiel_klein.html
File metadata and controls
185 lines (185 loc) · 24.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Duell</title>
<script>
window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }, svg: { fontCache: 'global' } };
</script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f1f5f9; margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: #0f172a; }
.screen { display: none; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 20px; text-align: center; overflow-y: auto; }
.screen.active { display: flex; }
h1 { color: #4338ca; font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.logo-text { font-size: 3rem; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.rules-box { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); max-width: 600px; text-align: left; margin-bottom: 2rem; }
.rules-box h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: #1e293b; }
.rules-box ul { list-style-type: disc; padding-left: 1.5rem; color: #475569; }
.rules-box li { margin-bottom: 0.5rem; }
.mode-btn { width: 100%; max-width: 400px; padding: 1rem; margin: 0.5rem; border: 2px solid #e2e8f0; background: white; border-radius: 0.75rem; cursor: pointer; text-align: left; transition: all 0.2s; display: flex; align-items: center; gap: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.mode-btn:hover { border-color: #4f46e5; background: #eff6ff; }
.mode-icon { background: #e0e7ff; color: #4f46e5; padding: 0.75rem; border-radius: 9999px; }
.mode-title { font-weight: 700; color: #1e293b; font-size: 1rem; }
.mode-desc { font-size: 0.75rem; color: #64748b; }
.input-group { margin: 1.5rem 0; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1rem; }
input[type="password"] { font-size: 1.25rem; padding: 1rem; border-radius: 0.5rem; border: 2px solid #c7d2fe; text-align: center; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.2s; }
input[type="password"]:focus { border-color: #4f46e5; }
.action-btn { font-size: 1.125rem; padding: 0.75rem 2rem; background: #4f46e5; color: white; border: none; border-radius: 9999px; cursor: pointer; transition: 0.2s; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.action-btn:hover { background: #4338ca; }
.action-btn:disabled { background: #cbd5e1; cursor: not-allowed; opacity: 0.6; }
#game-interface { display: none; flex-direction: column; height: 100%; padding: 1rem; box-sizing: border-box; max-width: 1200px; margin: 0 auto; width: 100%; }
#game-interface.active { display: flex; }
.header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; background: white; padding: 1rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: 0.75rem; margin-bottom: 1rem; z-index: 50; }
.player-wrapper { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 100px; }
.score-box { text-align: center; padding: 0.25rem 1rem; border-radius: 0.5rem; border: 2px solid transparent; transition: all 0.3s; width: 100%; box-sizing: border-box; }
.score-box > div:first-child { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.score-box > div:last-child { font-size: 1.5rem; font-weight: 700; }
.p1-active .score-box { border-color: #3b82f6; background: #eff6ff; }
.p1-active .score-box > div:first-child { color: #1e40af; }
.p1-active .score-box > div:last-child { color: #2563eb; }
.p2-active .score-box { border-color: #ec4899; background: #fdf2f8; }
.p2-active .score-box > div:first-child { color: #9d174d; }
.p2-active .score-box > div:last-child { color: #db2777; }
.center-controls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1; }
.game-msg { font-size: 0.875rem; font-weight: 500; color: #64748b; }
.guess-btn { background: #f59e0b; font-size: 0.875rem; padding: 0.375rem 1rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; border-radius: 9999px; border: none; cursor: pointer; color: white; font-weight: 700; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.guess-btn.active { background: #d97706; transform: scale(1.05); box-shadow: 0 0 0 4px #fde68a; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.guess-btn:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; box-shadow: none; animation: none; }
.cover-btn { background: #64748b; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; border: none; cursor: pointer; color: white; font-weight: 700; visibility: hidden; margin-top: 2px; width: 100%; white-space: nowrap; }
.cover-btn:hover { background: #475569; }
@keyframes pulse { 50% { opacity: .5; } }
.game-container { flex: 1; position: relative; border: 4px solid #1e293b; border-radius: 0.75rem; background: white; overflow: hidden; display: flex; justify-content: center; align-items: center; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.message-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; display: flex; transition: opacity 0.3s ease; }
.card-grid { position: relative; z-index: 20; display: grid; gap: 0; width: 100%; height: 100%; padding: 0; box-sizing: border-box; }
.card { cursor: pointer; padding: 0; border: none; outline: none; perspective: 1000px; display: block; position: relative; background: transparent; user-select: none; border: 1px solid rgba(255,255,255,0.8); }
.card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card.flipped { z-index: 50; }
.face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; justify-content: center; align-items: center; }
.face.back { background: #4f46e5; color: rgba(255,255,255,0.5); font-size: 2rem; font-weight: 700; }
.face.front { background: white; border: 2px solid #4f46e5; color: #312e81; font-weight: 600; transform: rotateY(180deg); overflow: hidden; padding: 4px; font-size: clamp(0.75rem, 2.5vw, 1.25rem); }
.content-wrap { width: 100%; max-width: 100%; text-align: center; word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
mjx-container { font-size: inherit !important; outline: 0 !important; }
.card.matched { opacity: 0; pointer-events: none; visibility: hidden; }
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
.modal.active { display: flex; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content { background: white; padding: 2rem; border-radius: 1rem; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); max-height: 90vh; overflow-y: auto; }
#timer-bar { position: absolute; bottom: -8px; left: 0; height: 4px; background: #f59e0b; width: 0%; border-radius: 9999px; }
.icon { width: 20px; height: 20px; display: inline-block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
</style>
</head>
<body>
<div id="screen-intro" class="screen active">
<h1 class="logo-text">Lernmemory</h1>
<div class="rules-box">
<h2>Spielregeln</h2>
<ul>
<li><strong>2 Spieler</strong> treten gegeneinander an und geben zunächst jeweils ein geheimes Lösungswort ein.</li>
<li>Ziel ist es, passende <strong>Kartenpaare</strong> (z.B. Aufgabe & Lösung) zu finden.</li>
<li>Jedes Paar enthüllt einen Teil des geheimen <strong>Lösungswortes</strong> im Hintergrund.</li>
<li>Wer an der Reihe ist, kann versuchen, das Lösungswort zu <strong>erraten</strong>.</li>
<li>Bei falscher Antwort wechselt der Zug.</li>
<li>Wer zuerst das Wort errät, gewinnt sofort! Ansonsten zählen am Ende die Punkte.</li>
</ul>
</div>
<button class="action-btn" onclick="goToMode()">Starten <svg class="icon" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
</div>
<div id="screen-mode" class="screen"><h1>Spielmodus wählen</h1><button class="mode-btn" onclick="selectMode('normal')"><div class="mode-icon"><svg class="icon" viewBox="0 0 24 24"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg></div><div><div class="mode-title">Normal</div><div class="mode-desc">Text normal lesbar</div></div></button><button class="mode-btn" onclick="selectMode('flipped')"><div class="mode-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><path d="M12 3v18"/></svg></div><div><div class="mode-title">Spiegelverkehrt</div><div class="mode-desc">Text ist gespiegelt</div></div></button><button class="mode-btn" onclick="selectMode('random')"><div class="mode-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l14.2-13h3.1"/><path d="M2 5h1.6c1.3 0 2.5.6 3.3 1.7l1.6 1.5"/><path d="M12 15.5l2.7 2.5c.8 1.1 2 1.7 3.3 1.7h3.1"/></svg></div><div><div class="mode-title">Buchstabensalat</div><div class="mode-desc">Buchstaben durcheinander</div></div></button></div>
<div id="screen-setup1" class="screen"><h1>Spieler 1 - Setup</h1><p class="game-msg">Geheime Nachricht für Spieler 2 eingeben.</p><div class="input-group"><input type="password" id="inputP1" placeholder="Geheime Nachricht"><input type="password" id="inputP1Conf" placeholder="Bestätigung"></div><button class="action-btn" onclick="confirmP1()">Weiter <svg class="icon" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></button></div>
<div id="screen-setup2" class="screen"><h1>Spieler 2 - Setup</h1><p class="game-msg">Geheime Nachricht für Spieler 1 eingeben.</p><div class="input-group"><input type="password" id="inputP2" placeholder="Geheime Nachricht"><input type="password" id="inputP2Conf" placeholder="Bestätigung"></div><button class="action-btn" onclick="startGame()">Start <svg class="icon" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></button></div>
<div id="game-interface"><div class="header">
<div id="p1-wrapper" class="player-wrapper"><div class="score-box"><div>Spieler 1</div><div id="score1">0</div></div><button id="coverBtn1" class="cover-btn" onclick="finishTurn()">Weiter</button></div>
<div class="center-controls"><div id="game-message" class="game-msg">Spieler 1 ist am Zug</div><div style="position: relative;"><button id="guessBtn" class="guess-btn" onclick="openGuessModal()" disabled><span id="lockIcon"><svg class="icon" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><span>Lösung raten?</span></button><div id="timer-bar"></div></div></div>
<div id="p2-wrapper" class="player-wrapper"><div class="score-box"><div>Spieler 2</div><div id="score2">0</div></div><button id="coverBtn2" class="cover-btn" onclick="finishTurn()">Weiter</button></div>
</div><div class="game-container"><div id="bg-message" class="message-layer"></div><div id="grid" class="card-grid"></div></div></div>
<div id="guessModal" class="modal"><div class="modal-content"><h2 id="guessTitle" style="font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; color:#1e293b;">Spieler X rät</h2><p style="color:#64748b; font-size:0.875rem; margin-bottom:1rem;">Welche Nachricht versteckt sich hinter den Karten?</p><input type="text" id="guessInput" style="font-size: 1.25rem; padding: 0.75rem; border-radius: 0.5rem; border: 2px solid #cbd5e1; text-align: center; width: 100%; box-sizing: border-box; margin-bottom:1.5rem; outline:none; font-weight:700;"><div style="display:flex; gap:10px; justify-content:center;"><button class="action-btn" style="margin:0; background:#64748b; padding:0.5rem 1.5rem; font-size:1rem;" onclick="closeGuessModal()">Abbrechen</button><button class="action-btn" style="margin:0; background:#16a34a; padding:0.5rem 1.5rem; font-size:1rem;" onclick="submitGuess()">Prüfen</button></div></div></div>
<div id="winModal" class="modal"><div class="modal-content"><svg class="icon" viewBox="0 0 24 24" style="width:80px; height:80px; color:#f59e0b; margin-bottom:1rem;"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg><h1 id="winTitle" style="color:#1e293b; font-size:2rem; margin-bottom:0.5rem;">GEWONNEN!</h1><p id="winText" style="color:#64748b; margin-bottom:1rem; font-size:1.2rem;"></p><div id="winSolutions" style="margin-bottom:2rem; width:100%;"></div><button class="action-btn" onclick="location.reload()" style="background:#4f46e5; margin:0 auto;">Nochmal spielen</button></div></div>
<script>
const config = {"pairs":[{"id":1,"a":"Um <b>3</b> nach <br><b>rechts</b> verschobene Normalparabel","b":"\\( f(x) = (x-3)^2 \\)"},{"id":2,"a":"\\( f(x) = 3(x+2)^2 - 5 \\)","b":"\\( f(-2) = -5 \\)"}]};
let p1Secret="", p2Secret="", displayMode="normal", cards=[], flipped=[], matched=[], turn=1, scores={1:0,2:0}, lockBoard=false, canGuess=false, guessTimer=null, waitingForTurnEnd=false;
function goToMode() { document.getElementById('screen-intro').classList.remove('active'); document.getElementById('screen-mode').classList.add('active'); }
function selectMode(m) { displayMode=m; document.getElementById('screen-mode').classList.remove('active'); document.getElementById('screen-setup1').classList.add('active'); }
function confirmP1() { const val=document.getElementById('inputP1').value.trim(), conf=document.getElementById('inputP1Conf').value.trim(); if(!val || val!==conf) return alert("Fehlerhafte Eingabe"); p1Secret=val; document.getElementById('screen-setup1').classList.remove('active'); document.getElementById('screen-setup2').classList.add('active'); }
function startGame() { const val=document.getElementById('inputP2').value.trim(), conf=document.getElementById('inputP2Conf').value.trim(); if(!val || val!==conf) return alert("Fehlerhafte Eingabe"); p2Secret=val; document.getElementById('screen-setup2').classList.remove('active'); document.getElementById('game-interface').classList.add('active'); initBoard(); updateTurnUI(); }
function initBoard() {
let deck=[]; config.pairs.forEach(p=>{ deck.push({id:'a-'+p.id, pid:p.id, html:p.a}); deck.push({id:'b-'+p.id, pid:p.id, html:p.b}); });
for(let i=deck.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [deck[i],deck[j]]=[deck[j],deck[i]]; }
const grid=document.getElementById('grid'), count=deck.length;
let cols=1, rows=count;
for (let i = Math.floor(Math.sqrt(count)); i >= 1; i--) { if (count % i === 0) { rows = i; cols = count / i; if (rows > cols) { let temp = rows; rows = cols; cols = temp; } break; } }
grid.style.gridTemplateColumns=`repeat(${cols},1fr)`; grid.style.gridTemplateRows=`repeat(${rows},1fr)`;
deck.forEach((card,index)=>{ const el=document.createElement('div'); el.className='card'; el.innerHTML=`<div class="card-inner"><div class="face back">?</div><div class="face front"><div class="content-wrap">${card.html}</div></div></div>`; el.onclick=()=>handleCardClick(index); grid.appendChild(el); cards.push({...card,el}); });
if (window.MathJax) { setTimeout(() => window.MathJax.typesetPromise(), 100); }
}
function getDisplaySecret(text) { return displayMode==='random'?text.split('').sort(()=>0.5-Math.random()).join(''):text; }
function updateMessage(text) {
const msgEl=document.getElementById('bg-message'), displayText=getDisplaySecret(text), scaleX=displayMode==='flipped'?'-1':'1';
msgEl.innerHTML=`<svg width="100%" height="100%" viewBox="0 0 100 20" preserveAspectRatio="none"><text x="50" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-weight="900" font-size="18" fill="#166534" textLength="100" lengthAdjust="spacingAndGlyphs" transform="scale(${scaleX}, 1)" transform-origin="center">${displayText}</text></svg>`;
}
function handleCardClick(index) {
if(waitingForTurnEnd) return;
if(canGuess) { setCanGuess(false); document.getElementById('game-message').innerText="Ratechance verpasst. Weiter geht's."; if(matched.length===cards.length){checkWinByScore(); return;} }
if(lockBoard || matched.includes(index) || flipped.includes(index)) return;
const card=cards[index]; card.el.classList.add('flipped'); flipped.push(index); if(flipped.length===2) checkMatch();
}
function setCanGuess(val) {
canGuess=val; const btn=document.getElementById('guessBtn'), msgEl=document.getElementById('bg-message'), bar=document.getElementById('timer-bar');
btn.disabled=!val; const lockSvg='<svg class="icon" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>', eyeSvg='<svg class="icon" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
document.getElementById('lockIcon').innerHTML=val?eyeSvg:lockSvg; if(val)btn.classList.add('active');else btn.classList.remove('active'); msgEl.style.opacity=val?'1':'0';
if(val) { bar.style.transition='none'; bar.style.width='100%'; setTimeout(()=>{bar.style.transition='width 3s linear';bar.style.width='0%';},50); if(guessTimer)clearTimeout(guessTimer); guessTimer=setTimeout(()=>{setCanGuess(false); if(matched.length===cards.length)checkWinByScore(); else document.getElementById('game-message').innerText='Zeit abgelaufen! Spieler '+turn+' ist weiter dran.';},3000); }
else { if(guessTimer)clearTimeout(guessTimer); bar.style.width='0%'; bar.style.transition='none'; }
}
function checkMatch() {
lockBoard=true; const c1=cards[flipped[0]], c2=cards[flipped[1]];
if(c1.pid===c2.pid) { setTimeout(()=>{cards[flipped[0]].el.classList.add('matched'); cards[flipped[1]].el.classList.add('matched'); matched.push(...flipped); flipped=[]; scores[turn]++; const b1=document.getElementById('p1-wrapper'), b2=document.getElementById('p2-wrapper'); document.getElementById('score1').innerText=scores[1]; document.getElementById('score2').innerText=scores[2]; let s=turn===1?p2Secret:p1Secret; updateMessage(s); document.getElementById('game-message').innerText="Treffer! 3 Sekunden Zeit zum Raten..."; setCanGuess(true); lockBoard=false;},1000); }
else { waitingForTurnEnd = true; const btn = turn === 1 ? document.getElementById('coverBtn1') : document.getElementById('coverBtn2'); btn.style.visibility = 'visible'; document.getElementById('game-message').innerText = "Leider falsch."; }
}
function finishTurn() {
cards[flipped[0]].el.classList.remove('flipped'); cards[flipped[1]].el.classList.remove('flipped'); flipped=[];
const btn = turn === 1 ? document.getElementById('coverBtn1') : document.getElementById('coverBtn2'); btn.style.visibility = 'hidden';
turn=turn===1?2:1; waitingForTurnEnd = false; setCanGuess(false); updateTurnUI(); document.getElementById('game-message').innerText="Spieler "+turn+" ist am Zug."; lockBoard=false;
}
function updateTurnUI() {
document.getElementById('score1').innerText=scores[1]; document.getElementById('score2').innerText=scores[2];
const b1=document.getElementById('p1-wrapper'), b2=document.getElementById('p2-wrapper'); let s=turn===1?p2Secret:p1Secret;
if(turn===1){b1.classList.add('p1-active');b2.classList.remove('p2-active');}else{b1.classList.remove('p1-active');b2.classList.add('p2-active');} updateMessage(s);
}
function showSolutions() {
let html = '<div style="margin-top:10px; text-align:left; background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0;"><h3 style="font-weight:bold; color:#1e293b; margin-bottom:10px; border-bottom:1px solid #cbd5e1; padding-bottom:5px;">Die Lösungswörter:</h3>';
// Helper to generate row
const getRow = (p, s) => {
let vis = s;
if(displayMode === 'flipped') {
vis = '<div style="display:flex; align-items:center; flex-wrap:wrap;"><span style="display:inline-block; transform:scaleX(-1); color:#94a3b8; font-family:monospace; font-size:1.1em; margin-right:8px; user-select:none;">'+s+'</span> <span style="color:#94a3b8; font-size:0.9em; margin-right:8px;">→</span> <span style="color:#4f46e5; font-weight:bold; font-size:1.1em;">'+s+'</span></div>';
} else if (displayMode === 'random') {
let shuf = s.split('').sort(()=>0.5-Math.random()).join('');
vis = '<div style="display:flex; align-items:center; flex-wrap:wrap;"><span style="color:#94a3b8; margin-right:8px; letter-spacing:3px; font-family:monospace; font-size:1.1em; user-select:none;">'+shuf+'</span> <span style="color:#94a3b8; font-size:0.9em; margin-right:8px;">→</span> <span style="color:#4f46e5; font-weight:bold; font-size:1.1em;">'+s+'</span></div>';
} else {
vis = '<span style="color:#4f46e5; font-weight:bold; font-size:1.1em;">'+s+'</span>';
}
return '<div style="margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:5px;"><strong>'+p+':</strong> '+vis+'</div>';
};
html += getRow('Spieler 1', p1Secret);
html += getRow('Spieler 2', p2Secret);
html += '</div>';
document.getElementById('winSolutions').innerHTML = html;
}
function checkWinByScore() {
let t="ENDE",txt=""; if(scores[1]>scores[2])txt="Spieler 1 gewinnt!";else if(scores[2]>scores[1])txt="Spieler 2 gewinnt!";else{t="UNENTSCHIEDEN";txt="Gleicher Punktestand.";}
document.getElementById('winTitle').innerText=t; document.getElementById('winText').innerText=txt;
showSolutions();
document.getElementById('winModal').classList.add('active');
}
function openGuessModal() { setCanGuess(false); document.getElementById('guessTitle').innerText='Spieler '+turn+' rät'; document.getElementById('guessInput').value=''; document.getElementById('guessModal').classList.add('active'); }
function closeGuessModal() { document.getElementById('guessModal').classList.remove('active'); if(matched.length===cards.length)checkWinByScore(); }
function submitGuess() {
const g=document.getElementById('guessInput').value.trim(), t=(turn===1?p2Secret:p1Secret).trim();
if(g===t) { closeGuessModal(); document.getElementById('winTitle').innerText='GEWONNEN!'; document.getElementById('winText').innerText='Spieler '+turn+' hat es erraten!'; showSolutions(); document.getElementById('winModal').classList.add('active'); }
else { alert('Falsch! (Case-sensitive) Zugwechsel.'); closeGuessModal(); if(matched.length===cards.length){checkWinByScore();}else{turn=turn===1?2:1; updateTurnUI(); document.getElementById('game-message').innerText="Falsch geraten! Spieler "+turn+" ist dran.";} }
}
</script></body></html>