From 023df382f0088d62c3caefebfe88c8096aaaa857 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Sat, 13 Jun 2026 20:20:59 +0000 Subject: [PATCH] =?UTF-8?q?Diploma=20A4=20print-first=20(=C2=A7Design=20pc?= =?UTF-8?q?t.9):=20certificat=20la=20final=20campanie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Buton "Vezi diploma" pe finale (+ "Joaca din nou"). Overlay #diploma: certificat A4 portret alb, chenar dublu accent, titlu serif (singurul), numele copilului = cel mai mare element. - buildDiploma(): rand de stele per camera (roomStars[], persistat in resume; camere sarite = 🔒 "sarita"), cuvant magic in dale (lacate pt sarite), footer = data + "creat de {creator}" + marcaj auriu "timpul a expirat" - camp builder nou: creator ("Creat de") - @media print izoleaza #diploma (rest visibility:hidden, margin 20mm, print-color-adjust:exact) - exemplu-campanie.html regenerat Smoke 31/31 (test nou "diploma": nume/titlu/stele/cuvant/creator/inapoi) + screenshot scratch/diploma.png (A4, camera sarita, footer expirat). Cluster T10/PR2 complet (D7 + Timer + Muzica + Diploma). Ramas Etapa 2: Adventure Mode v0. Co-Authored-By: Claude Opus 4.8 (1M context) --- AGENTS.md | 4 +- DESIGN.md | 5 +- TODOS.md | 12 ++++- escape-builder.html | 118 +++++++++++++++++++++++++++++++++++++++++- exemplu-campanie.html | 115 +++++++++++++++++++++++++++++++++++++++- tests/AGENTS.md | 10 ++-- tests/smoke.mjs | 57 ++++++++++++++++++++ 7 files changed, 308 insertions(+), 13 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index b4fa10b..23c2fc8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -20,9 +20,9 @@ sursa de adevăr tehnică pentru agenți. python3 -m http.server 8000 # Teste (Playwright; fără package.json commitat — vezi tests/AGENTS.md): -npx playwright test tests/smoke.mjs # suita completă: 30/30 +npx playwright test tests/smoke.mjs # suita completă: 31/31 npx playwright test tests/smoke.mjs --grep @regresie # regresie: 16 -npx playwright test tests/smoke.mjs --grep @campanie # campanie E2E: 16 +npx playwright test tests/smoke.mjs --grep @campanie # campanie E2E: 17 ``` ## Durable Rules (repo-wide) diff --git a/DESIGN.md b/DESIGN.md index 8c3720e..e97ba8b 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -217,7 +217,10 @@ Mesajul creatorului ## 10. Diplomă — Certificat A4 Print-First (§Design pct. 9 — Etapa 2 / PR2) -> Implementare în T10/PR2. Spec inclusă aici ca parte a contractului de design. +> **LIVRAT** (2026-06-13). Overlay `#diploma`; buton „Vezi diploma →" pe finale + „Joacă din nou". +> `buildDiploma()` citește `roomStars`/`collected`/`skipped`/`MASTER`/`_timerExpired`. Câmp builder nou +> `creator` („Creat de"). `@media print` izolează `#diploma` (rest `visibility:hidden`). Test smoke +> „diploma" (nume/titlu/stele-per-cameră/cuvânt/creator/înapoi). Camere sărite = 🔒 (verificat vizual). - **Format:** A4 portret, fundal ALB, chenar dublu `var(--c-accent)` - **Titlu:** „DIPLOMĂ DE EVADARE" — **singurul** element cu font serif (limbajul certificatelor) diff --git a/TODOS.md b/TODOS.md index 2defb53..08f5d4f 100644 --- a/TODOS.md +++ b/TODOS.md @@ -18,7 +18,7 @@ Referință plan complet: `~/.gstack/projects/romfast-escape-builder/ceo-plans/2 - [x] **Audit a11y motoare** — LIVRAT (vezi §dedicată mai jos). Smoke 26/26. **PR2 livrat (2026-06-13):** audio camere `651025b`, voce `da93d84`, unificare `ab11089`, a11y (acest commit). -Rămas din Etapa 2: Adventure Mode v0 (+ Diplomă §Design pct.9). (D7 + Timer Calm + Muzică T10 LIVRATE.) +Rămas din Etapa 2: Adventure Mode v0. (D7 + Timer Calm + Muzică T10 + Diplomă LIVRATE — vezi §§ mai jos.) ### [x] Bomberman polish (feedback user 2026-06-13) — LIVRAT Trei probleme raportate + o lipsă, toate în `gameArcade` (`escape-builder.html`): @@ -96,6 +96,16 @@ portează în `escape-builder.html` (un singur fișier, integrare secvențială) ## Post-PR1 (după ship-ul campaniei) +### [x] Diplomă A4 print-first (§Design pct.9) — LIVRAT (2026-06-13) +Certificat A4 portret, fundal alb, chenar dublu accent, titlu serif „DIPLOMĂ DE EVADARE" (singurul serif), +numele copilului = cel mai mare element. Overlay `#diploma`; buton „Vezi diploma →" pe finale (+ „Joacă +din nou"). `buildDiploma()` randează: rând de stele per cameră (★★★/★★☆; camere sărite = 🔒 „sărită"), +cuvântul magic în dăle (aceeași iconografie ca finalul, lacăte pentru sărite), footer = dată + +„creat de {creator}" + marcaj auriu „timpul a expirat" (dacă `_timerExpired`). Câmp builder nou `creator`. +Per-cameră `roomStars[]` (persistat în resume). `@media print` izolează `#diploma` (rest `visibility:hidden`, +`margin:20mm`, `print-color-adjust:exact`). Verificat: smoke 31/31 (test nou „diploma") + screenshot +(`scratch/diploma.png`: A4, 🔒 cameră sărită, footer expirat). Rămas din Etapa 2: doar Adventure Mode v0. + ### [x] Timer Calm (§Design pct.10 / T10) — LIVRAT (2026-06-13) Ceas M:SS în bara chrome a campaniei. Opt-in din builder (câmp „Timp limită (minute)", default 0 = fără; `cleanState` coerce la întreg 0..120). Pornește la „Începe aventura" (intro necronometrat); deadline diff --git a/escape-builder.html b/escape-builder.html index 2036135..c4bbd22 100644 --- a/escape-builder.html +++ b/escape-builder.html @@ -130,6 +130,8 @@ + + @@ -178,6 +180,7 @@ const defaultState = () => ({ player: '', color: '#6d28d9', style: 'classic', + creator: '', charName: 'Alex', voice: false, music: false, @@ -1793,6 +1796,52 @@ body { } .btn-main:hover { filter: brightness(1.1); } .btn-main:disabled { opacity: .5; cursor: not-allowed; } +.btn-sec { + font: inherit; font-size: 15px; font-weight: 700; + background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); + border-radius: 12px; padding: 12px 24px; cursor: pointer; min-height: 44px; + width: 100%; max-width: 320px; +} +.btn-sec:hover { background: rgba(255,255,255,.2); } +.btn-main:focus-visible, .btn-sec:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; } +.fin-actions, .dipl-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } +/* ----- Diplomă A4 print-first (§Design pct.9) ----- */ +#diploma { background: #0d0620; gap: 16px; } +.dipl-sheet { + width: 100%; max-width: 520px; aspect-ratio: 210 / 297; background: #fff; color: #1a1333; + border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.5); + display: flex; padding: 10px; overflow: hidden; +} +.dipl-frame { + flex: 1; border: 3px double var(--accent); border-radius: 4px; + display: flex; flex-direction: column; align-items: center; justify-content: flex-start; + gap: 2.2%; padding: 6% 7%; text-align: center; +} +.dipl-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .04em; + font-size: clamp(20px, 5.2vw, 30px); color: var(--accent); } +.dipl-sub { font-size: clamp(11px, 2.4vw, 13px); color: #6b6480; text-transform: uppercase; letter-spacing: .12em; } +.dipl-name { font-size: clamp(26px, 7vw, 42px); font-weight: 800; line-height: 1.05; color: #1a1333; word-break: break-word; } +.dipl-game { font-size: clamp(12px, 2.8vw, 15px); color: #4a4360; font-style: italic; } +.dipl-rooms { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 320px; margin-top: 2%; } +.dipl-rooms .dipl-room { display: flex; justify-content: space-between; align-items: center; gap: 8px; + font-size: clamp(11px, 2.4vw, 13px); color: #4a4360; border-bottom: 1px dotted rgba(0,0,0,.12); padding: 2px 0; } +.dipl-rooms .dipl-room .rstars { color: #c8952a; letter-spacing: 1px; white-space: nowrap; } +.dipl-rooms .dipl-room .rskip { color: #9a93ad; } +.dipl-wordlbl { font-size: clamp(10px, 2.2vw, 12px); text-transform: uppercase; letter-spacing: .12em; color: #6b6480; margin-top: 2%; } +.dipl-word { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } +.dipl-word span { width: clamp(24px, 7vw, 38px); aspect-ratio: 5 / 6; background: var(--accent); color: #fff; + border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: clamp(15px, 4vw, 22px); font-weight: 800; } +.dipl-word span.lock { background: #d8d3e4; color: #6b6480; } +.dipl-footer { margin-top: auto; font-size: clamp(10px, 2.2vw, 12px); color: #6b6480; line-height: 1.5; } +.dipl-footer .dipl-expired { color: #c8952a; } +@media print { + body * { visibility: hidden !important; } + #diploma, #diploma * { visibility: visible !important; } + #diploma { position: fixed; inset: 0; display: flex !important; background: #fff !important; padding: 0; } + .dipl-actions { display: none !important; } + .dipl-sheet { box-shadow: none; max-width: none; width: auto; height: auto; margin: 20mm; aspect-ratio: 210 / 297; } + .dipl-title, .dipl-word span, .dipl-frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; } +} .btn-skip { font: inherit; font-size: 15px; font-weight: 700; background: #4b5563; color: #fff; border: none; @@ -1856,6 +1905,30 @@ body {

Cuvântul magic:

+
+ + +
+ + + + @@ -1882,6 +1955,7 @@ document.documentElement.style.setProperty('--accent', MASTER.color || '#6d28d9' var N = MASTER.puzzles.length; var totalStars = 0; var collected = []; +var roomStars = []; /* stele per cameră — pentru diplomă (§Design pct.9) */ var skipped = {}; var activeIdx = -1; @@ -1899,7 +1973,7 @@ var _RESUME_KEY = 'esc-camp-' + djb2(JSON.stringify(MASTER)); function safeGet(){ try{ return JSON.parse(sessionStorage.getItem(_RESUME_KEY)); }catch(e){ return null; } } function safeSet(v){ try{ sessionStorage.setItem(_RESUME_KEY, JSON.stringify(v)); }catch(e){ /* webview restrictat — continuă fără resume */ } } function saveProgress(){ - safeSet({ idx: activeIdx, totalStars: totalStars, collected: collected.slice(), skipped: skipped }); + safeSet({ idx: activeIdx, totalStars: totalStars, collected: collected.slice(), roomStars: roomStars.slice(), skipped: skipped }); } function clearProgress(){ try{ sessionStorage.removeItem(_RESUME_KEY); sessionStorage.removeItem(_DEADLINE_KEY); }catch(e){} } @@ -1988,6 +2062,7 @@ var frameEl = document.getElementById('room-frame'); var introEl = document.getElementById('intro'); var skipEl = document.getElementById('skip-banner'); var finaleEl = document.getElementById('finale'); +var diplomaEl = document.getElementById('diploma'); /* ----- Dots ----- */ function buildDots(){ @@ -2110,6 +2185,7 @@ window.nextRoom = function(data){ clearTimeout(readyTimer); roomDone[idx] = true; totalStars += (data.stars || 0); + roomStars[idx] = (data.stars || 0); /* pentru diplomă */ var letter = String(data.letter || '').replace(/[^A-Za-z0-9]/g,'').charAt(0).toUpperCase(); if(letter) collected.push(letter); setDot(idx,'done'); @@ -2240,6 +2316,43 @@ function showFinale(){ voiceSay(document.getElementById('fin-msg').textContent); /* citește mesajul final (D10) */ } +/* ----- Diplomă A4 (§Design pct.9) — populată la „Vezi diploma" ----- */ +function _starStr(n){ n = Math.max(0, Math.min(3, n|0)); var s = ''; for(var i=0;i<3;i++) s += i