bfe9be28d7
Classic era ultimul motor bespoke: CFG/norm/beep/confetti/star-logic/ finalWord/payload campanie inline. Acum injecteaza libJS(cfg) si foloseste checkAnswer/starsFor/finalWord/choiceOpts/campaignDone/roomReady ca celelalte 4 motoare. UI-ul bespoke (card sStart/sGame/sFinal) ramane intentionat - fortarea modalului/overlay-ului SNIP ar fi regresie vizuala pe demo-ul implicit (aceeasi decizie ca terminalul cu finale CRT). - payload parent.nextRoom traieste o singura data in libJS.campaignDone() - net -70 linii duplicate - exemplu-clasic.html regenerat; celelalte demo-uri byte-identice - smoke 27/27 (regresie clasic standalone + campanie E2E cu clasic ca odaie) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
261 lines
14 KiB
HTML
261 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Comoara ascunsa</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
color: #f1f0ff; display: flex; align-items: center; justify-content: center; padding: 16px;
|
|
background: radial-gradient(ellipse at 50% 30%, #2a0e5e 0%, #0e0622 70%);
|
|
}
|
|
.card {
|
|
width: 100%; max-width: 560px; background: #1a0e3d;
|
|
border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 26px;
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(109,40,217,.35);
|
|
}
|
|
h1 { margin: 0 0 6px; font-size: 26px; text-align: center; }
|
|
.story { color: rgba(255,255,255,.8); text-align: center; line-height: 1.5; }
|
|
.screen { display: none; }
|
|
.screen.on { display: block; animation: pop .35s cubic-bezier(.22,1,.36,1); }
|
|
@keyframes pop { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
|
|
.progress { height: 10px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin: 14px 0 4px; }
|
|
.progress i { display: block; height: 100%; background: var(--accent); width: 0; box-shadow: 0 0 8px var(--accent); transition: width .5s cubic-bezier(.22,1,.36,1); }
|
|
.meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
|
|
.letters { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
|
|
.tile {
|
|
width: 44px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
|
|
font-weight: 800; font-size: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
|
|
color: rgba(255,255,255,.35);
|
|
}
|
|
.tile.won { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 12px var(--accent); animation: flip .5s cubic-bezier(.34,1.56,.64,1); }
|
|
@keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
|
|
.qtitle { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-light); font-weight: 700; }
|
|
.question { font-size: 21px; line-height: 1.5; margin: 8px 0 18px; color: #f1f0ff; }
|
|
input[type=text] {
|
|
width: 100%; font: inherit; font-size: 18px; padding: 11px 13px; border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; text-align: center;
|
|
}
|
|
input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
|
|
button {
|
|
font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 12px 18px;
|
|
font-weight: 700; background: var(--accent); color: #fff; width: 100%; margin-top: 10px; min-height: 44px;
|
|
}
|
|
button:hover { filter: brightness(1.12); }
|
|
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
button.opt { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-weight: 600; text-align: left; min-height: 48px; transition: background .15s, border-color .15s; }
|
|
button.opt:hover { background: rgba(255,255,255,.16); border-color: var(--accent); }
|
|
button.hint { background: none; border: none; color: rgba(255,255,255,.55); font-weight: 600; font-size: 13px; width: auto; display: block; margin: 12px auto 0; }
|
|
button.hint:hover { color: #fff; }
|
|
.hinttext { background: rgba(255,255,255,.1); border-radius: 9px; padding: 10px 12px; font-size: 14px; margin-top: 10px; white-space: pre-line; display: none; }
|
|
.feedback { min-height: 22px; text-align: center; font-weight: 700; margin-top: 10px; }
|
|
.feedback.bad { color: #fda4af; }
|
|
.feedback.good { color: #86efac; }
|
|
.shake { animation: shake .4s ease; }
|
|
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
|
|
.stars { text-align: center; font-size: 26px; letter-spacing: 4px; color: #fbbf24; margin: 6px 0; }
|
|
.bigword { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
|
|
.bigword span {
|
|
width: 44px; height: 52px; border-radius: 10px; background: var(--accent); display: flex;
|
|
align-items: center; justify-content: center; font-size: 26px; font-weight: 800; animation: flip .6s ease backwards;
|
|
}
|
|
.confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 5; animation: fall linear forwards; }
|
|
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.screen.on, .tile.won, .bigword span, .shake { animation: none; }
|
|
.confetti { display: none !important; }
|
|
.progress i { transition: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div id="sStart" class="screen on">
|
|
<h1 id="gtitle"></h1>
|
|
<p class="story" id="gstory"></p>
|
|
<button id="btnStart">Incepe aventura</button>
|
|
</div>
|
|
|
|
<div id="sGame" class="screen">
|
|
<div class="progress"><i id="bar"></i></div>
|
|
<div class="meta"><span id="step"></span><span id="score"></span></div>
|
|
<div class="letters" id="lettersBar"></div>
|
|
<div id="qbox">
|
|
<div class="qtitle" id="qtitle"></div>
|
|
<div class="question" id="qtext"></div>
|
|
<div id="answers"></div>
|
|
<div class="feedback" id="feedback"></div>
|
|
<button class="hint" id="btnHint">Vreau un indiciu</button>
|
|
<div class="hinttext" id="hinttext"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sFinal" class="screen">
|
|
<h1>Evadare reusita!</h1>
|
|
<div class="stars" id="finalStars"></div>
|
|
<div class="bigword" id="bigword"></div>
|
|
<p class="story" id="finalMsg"></p>
|
|
<button id="btnAgain">Joaca din nou</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var CFG = {"title":"Comoara ascunsa","player":"","color":"#6d28d9","charName":"Alex","story":"O comoara a fost ascunsa, iar singurul drum spre ea trece prin cateva incercari.","finalMessage":"Felicitari! Ai gasit comoara!","puzzles":[{"title":"Incalzirea","type":"free","question":"Cat fac 7 x 8?","answer":"56","tfAnswer":"Adevarat","choices":"","hint":"Tabla inmultirii cu 7.","letter":"D","style":""},{"title":"Adevarat sau fals","type":"tf","question":"Romania are iesire la Marea Neagra.","answer":"","tfAnswer":"Adevarat","choices":"","hint":"","letter":"A","style":""},{"title":"Alege raspunsul","type":"choice","question":"Care este capitala Frantei?","answer":"","tfAnswer":"Adevarat","choices":"*Paris\nLyon\nMarsilia","hint":"Turnul Eiffel.","letter":"R","style":""}],"style":"classic"};
|
|
document.documentElement.style.setProperty('--accent', CFG.color || '#6d28d9');
|
|
var totalStars = 0;
|
|
function el(id){ return document.getElementById(id); }
|
|
function norm(s){ return String(s).trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ').replace(/,/g, '.'); }
|
|
function starsFor(att, hint){ return (hint || att >= 2) ? 1 : (att === 1 ? 2 : 3); }
|
|
function finalWord(){ var w = ''; for (var i = 0; i < CFG.puzzles.length; i++){ var L = (CFG.puzzles[i].letter || '').trim(); if (L) w += L.toUpperCase(); } return w; }
|
|
function choiceOpts(p){ return (p.choices || '').split('\n').map(function(l){ return l.trim(); }).filter(Boolean).map(function(o){ return o.charAt(0) === '*' ? o.slice(1).trim() : o; }); }
|
|
function choiceCorrect(p){ var ls = (p.choices || '').split('\n'); for (var i = 0; i < ls.length; i++){ var l = ls[i].trim(); if (l.charAt(0) === '*') return l.slice(1).trim(); } return ''; }
|
|
function checkAnswer(p, given){ var exp = p.type === 'tf' ? p.tfAnswer : (p.type === 'choice' ? choiceCorrect(p) : p.answer); return norm(given) !== '' && norm(given) === norm(exp); }
|
|
function beep(ok){ if(CFG._campaign){ try{ parent.beep(ok); }catch(e){} return; } try { var ctx = beep.ctx || (beep.ctx = new (window.AudioContext || window.webkitAudioContext)()); var t = ctx.currentTime; var fs = ok ? [523, 784] : [196]; fs.forEach(function(f, k){ var o = ctx.createOscillator(), g = ctx.createGain(); o.frequency.value = f; o.type = 'triangle'; g.gain.setValueAtTime(0.12, t + k * 0.09); g.gain.exponentialRampToValueAtTime(0.001, t + k * 0.09 + 0.25); o.connect(g); g.connect(ctx.destination); o.start(t + k * 0.09); o.stop(t + k * 0.09 + 0.3); }); } catch (e) {} }
|
|
function confetti(){ var colors = [CFG.color || '#6d28d9', '#fbbf24', '#34d399', '#60a5fa', '#f472b6']; for (var i = 0; i < 90; i++){ var c = document.createElement('div'); c.className = 'confetti'; c.style.left = (i * 137 % 100) + 'vw'; c.style.background = colors[i % colors.length]; c.style.animationDuration = (2.2 + (i * 53 % 18) / 10) + 's'; c.style.animationDelay = ((i * 31 % 14) / 10) + 's'; document.body.appendChild(c); } }
|
|
function roomReady(){ if(CFG._campaign){ try{ parent.roomReady(CFG._campaign.idx); }catch(e){} } }
|
|
/* Contract de finalizare a camerei — un singur loc pentru payload-ul parent.nextRoom
|
|
(înlocuiește duplicatele din showFinal/finale; D7). Citește totalStars + finalWord() la apel. */
|
|
function campaignDone(){ if(CFG._campaign){ try{ parent.nextRoom({idx:CFG._campaign.idx, stars:totalStars, letter:finalWord().charAt(0)}); }catch(e){} } }
|
|
window.onerror = function(msg){ if(CFG._campaign){ try{ parent.roomError(CFG._campaign.idx, String(msg)); }catch(e){} } };
|
|
if(CFG._campaign){
|
|
/* Mod cameră (§Design pct.12): ascunde h1, progres propriu, restart propriu */
|
|
var _cs = document.createElement('style');
|
|
_cs.textContent = 'h1{display:none!important}.progress{display:none!important}.meta{display:none!important}';
|
|
(document.head || document.documentElement).appendChild(_cs);
|
|
}
|
|
document.documentElement.style.setProperty('--accent-light', 'color-mix(in srgb, ' + (CFG.color || '#6d28d9') + ' 40%, white)');
|
|
|
|
var idx = 0, attempts = 0, hintUsed = false, won = [];
|
|
/* CFG, totalStars, el, norm, beep, confetti, starsFor, finalWord, checkAnswer,
|
|
choiceOpts, campaignDone, roomReady, window.onerror — toate din libJS (D7) */
|
|
function show(id) {
|
|
var scr = document.querySelectorAll('.screen');
|
|
for (var i = 0; i < scr.length; i++) scr[i].classList.remove('on');
|
|
el(id).classList.add('on');
|
|
}
|
|
|
|
el('gtitle').textContent = CFG.title;
|
|
var hello = CFG.player ? 'Salut, ' + CFG.player + '! ' : '';
|
|
el('gstory').textContent = hello + CFG.story;
|
|
|
|
el('btnStart').onclick = function () { show('sGame'); renderPuzzle(); };
|
|
el('btnAgain').onclick = function () { location.reload(); };
|
|
|
|
function lettersBar() {
|
|
var bar = el('lettersBar');
|
|
bar.innerHTML = '';
|
|
var any = false;
|
|
for (var i = 0; i < CFG.puzzles.length; i++) {
|
|
var L = (CFG.puzzles[i].letter || '').trim();
|
|
if (!L) continue;
|
|
any = true;
|
|
var d = document.createElement('div');
|
|
d.className = 'tile' + (won[i] ? ' won' : '');
|
|
d.textContent = won[i] ? L.toUpperCase() : '?';
|
|
bar.appendChild(d);
|
|
}
|
|
bar.style.display = any ? '' : 'none';
|
|
}
|
|
|
|
function renderPuzzle() {
|
|
var p = CFG.puzzles[idx];
|
|
attempts = 0; hintUsed = false;
|
|
el('bar').style.width = (idx / CFG.puzzles.length * 100) + '%';
|
|
el('step').textContent = 'Puzzle ' + (idx + 1) + ' din ' + CFG.puzzles.length;
|
|
el('score').textContent = totalStars + ' \u2605';
|
|
el('qtitle').textContent = p.title || 'Puzzle ' + (idx + 1);
|
|
el('qtext').textContent = p.question;
|
|
el('feedback').textContent = ''; el('feedback').className = 'feedback';
|
|
el('hinttext').style.display = 'none';
|
|
el('hinttext').textContent = p.hint || '';
|
|
el('btnHint').style.display = p.hint ? '' : 'none';
|
|
lettersBar();
|
|
|
|
var box = el('answers');
|
|
box.innerHTML = '';
|
|
if (p.type === 'free') {
|
|
var inp = document.createElement('input');
|
|
inp.type = 'text'; inp.autocomplete = 'off'; inp.placeholder = 'Scrie raspunsul...';
|
|
var btn = document.createElement('button');
|
|
btn.textContent = 'Verifica';
|
|
btn.onclick = function () { check(p, inp.value); };
|
|
inp.onkeydown = function (e) { if (e.key === 'Enter') btn.click(); };
|
|
box.appendChild(inp); box.appendChild(btn);
|
|
setTimeout(function () { inp.focus(); }, 50);
|
|
} else if (p.type === 'tf') {
|
|
['Adevarat', 'Fals'].forEach(function (v) {
|
|
var b = document.createElement('button');
|
|
b.className = 'opt'; b.textContent = v;
|
|
b.onclick = function () { check(p, v); };
|
|
box.appendChild(b);
|
|
});
|
|
} else {
|
|
var opts = choiceOpts(p);
|
|
opts.forEach(function (o) {
|
|
var b = document.createElement('button');
|
|
b.className = 'opt'; b.textContent = o;
|
|
b.onclick = function () { check(p, o); };
|
|
box.appendChild(b);
|
|
});
|
|
if (!opts.length) box.textContent = '(puzzle fara variante - completeaza-le in builder)';
|
|
}
|
|
}
|
|
|
|
el('btnHint').onclick = function () {
|
|
hintUsed = true;
|
|
el('hinttext').style.display = 'block';
|
|
};
|
|
|
|
function check(p, given) {
|
|
if (checkAnswer(p, given)) {
|
|
var stars = starsFor(attempts, hintUsed);
|
|
totalStars += stars;
|
|
won[idx] = true;
|
|
beep(true);
|
|
var f = el('feedback');
|
|
f.textContent = 'Corect! +' + stars + ' \u2605';
|
|
f.className = 'feedback good';
|
|
lettersBar();
|
|
el('bar').style.width = ((idx + 1) / CFG.puzzles.length * 100) + '%';
|
|
setTimeout(next, 900);
|
|
} else {
|
|
attempts++;
|
|
beep(false);
|
|
var fb = el('feedback');
|
|
fb.textContent = 'Nu e bine, mai incearca!';
|
|
fb.className = 'feedback bad';
|
|
var card = document.querySelector('.card');
|
|
card.classList.remove('shake');
|
|
void card.offsetWidth;
|
|
card.classList.add('shake');
|
|
}
|
|
}
|
|
|
|
function next() {
|
|
idx++;
|
|
if (idx < CFG.puzzles.length) { renderPuzzle(); return; }
|
|
if(CFG._campaign){ campaignDone(); return; }
|
|
show('sFinal');
|
|
var max = CFG.puzzles.length * 3;
|
|
el('finalStars').textContent = totalStars + ' / ' + max + ' \u2605';
|
|
var word = finalWord();
|
|
var bw = el('bigword');
|
|
bw.innerHTML = '';
|
|
for (var j = 0; j < word.length; j++) {
|
|
var s = document.createElement('span');
|
|
s.textContent = word.charAt(j);
|
|
s.style.animationDelay = (j * 0.18) + 's';
|
|
bw.appendChild(s);
|
|
}
|
|
var name = CFG.player ? CFG.player + ', ' : '';
|
|
el('finalMsg').textContent = name ? name + (CFG.finalMessage || '').charAt(0).toLowerCase() + (CFG.finalMessage || '').slice(1) : (CFG.finalMessage || '');
|
|
confetti();
|
|
}
|
|
|
|
roomReady(); /* beep/confetti/onerror/roomReady din libJS (D7) */
|
|
</script>
|
|
</body>
|
|
</html> |