feat: escape room v2 — noul scenariu cu text inputs și cod ISTEȚ
Rescrie complet escape_room.html pentru noul scenariu matematic: - 6 probleme noi cu text input (nu multiple choice) - Sistem cireșe variabil (7 total, 1-2 per problemă) - Litere-indiciu T,S,I,Ț,E pe markere - Ecran cod final "ISTEȚ" cu verificare - Problemă bonus "Școala de la biserică" fără penalizare - Imagini externe (4 PNG-uri, eliminat base64 — 1.2MB → 148KB) - Start screen cu crossfade, HUD nou, design tokens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1 +1,3 @@
|
||||
.playwright-mcp/
|
||||
.gstack/
|
||||
test_*.png
|
||||
|
||||
BIN
10_provocarea_bonus_felicitari.png
Normal file
BIN
10_provocarea_bonus_felicitari.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
1_Start.png
Normal file
BIN
1_Start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
2_escape-room.png
Normal file
BIN
2_escape-room.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
3_felicitari.png
Normal file
BIN
3_felicitari.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
background.jpg
BIN
background.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 822 KiB |
1449
escape_room.html
1449
escape_room.html
File diff suppressed because one or more lines are too long
77
spec.md
77
spec.md
@@ -1,77 +0,0 @@
|
||||
## Context
|
||||
|
||||
Sunt profesor de matematică, clasa a 7-a. Am o lecție deschisă cu inspecție și vreau un **Escape Room Matematic** interactiv, afișat pe proiector, bazat pe tema "Drumul lui Nică prin Humulești" (Ion Creangă).
|
||||
|
||||
## Imaginea de fundal
|
||||
|
||||
Am o imagine ilustrată (`background.jpg` — se află în directorul curent) care reprezintă o hartă a Humulestilor cu 6 provocări/stații numerotate:
|
||||
|
||||
1. **La cireșe** — Nică a cules 36 de cireșe. Câte a mâncat și câte i-au rămas?
|
||||
2. **La pupăză** — Nică vede pupeze și capre. 20 animale, 56 picioare. Câte sunt din fiecare?
|
||||
3. **La scăldat** — Băieții din Humulești sunt cu 6 mai mulți decât cei din satul vecin. Total 22. Câți din fiecare sat?
|
||||
4. **La școală** — 24 exerciții de matematică și citire. Cele de matematică sunt de 2 ori mai multe. Câte de fiecare?
|
||||
5. **În curte** — Pupeze și capre. 22 animale, 56 picioare. Câte din fiecare?
|
||||
6. **La târg** — 30 fructe: mere și nuci. Merele sunt cu 6 mai multe decât nucile. Câte din fiecare?
|
||||
|
||||
|
||||
## Ce vreau
|
||||
|
||||
Un singur fișier `escape_room.html` (imaginea de fundal encodată base64 inline) care:
|
||||
|
||||
### Funcționalitate
|
||||
- Ecran de start → este chiar imaginea de background, cu un mesaj: "click pentru a începe"
|
||||
- Imaginea e fundalul full-screen (100vw × 100vh, cover)
|
||||
- VREAU sa nu se vada initial provocarile deja scrise, ci sa fie acoperite initial, si sa se descopere pe masura ce se raspunde corect.
|
||||
- Markerele trebuie să fie zone clickabile invizibile/subtile poziționate PESTE cifrele roșii existente din imagine
|
||||
- La click pe o zonă → se deschide un modal/popup cu:
|
||||
- Titlul provocării
|
||||
- Textul problemei (CONCIS — nu verbose, exact textul din problema.)
|
||||
- Buton "💡 Indiciu" care la click arată ecuația/sistemul de ecuații sau un ajutor pentru descoperire
|
||||
- 4 variante de răspuns (A, B, C, D) — scurte, cu notație matematică (ex: `m = 24, r = 12`) scrise clar, in stilul kahoot
|
||||
- La răspuns corect → feedback scurt "Bravo!" → se închide automat → markerul devine verde cu ✓ si problema ramane vizibila
|
||||
- La răspuns greșit → feedback "Mai gândiți-vă!" → se poate încerca din nou
|
||||
- Sa aiba si un sistem de vieti - 5 inimioare - cate una pentru fiecare raspuns gresit sau pentru hint folosit
|
||||
- Bara de progres + steluțe (6 steluțe, una per provocare)
|
||||
- La final (toate 6 rezolvate) → ecran de victorie cu confetti
|
||||
- ESC închide modalul
|
||||
|
||||
### Design
|
||||
- Trebuie să arate PROFESIONAL pe proiector (1920×1080 sau 1366×768)
|
||||
- Imaginea de fundal trebuie să rămână curată, neacoperită de elemente inutile
|
||||
- Modalul: stil pergament/carte veche, fonturi frumoase (Playfair Display + Nunito sau similar)
|
||||
- Animații subtile, nu distrag — sparks la rezolvare, confetti la final
|
||||
- Responsiv dar optimizat pentru landscape/proiector
|
||||
|
||||
### Ton
|
||||
- E pentru copii de clasa a 7-a, trebuie să fie cald, prietenos
|
||||
- Nu excesiv de colorat sau agitat — e lecție cu inspecție, trebuie echilibru între fun și profesionalism
|
||||
|
||||
## Proces de lucru
|
||||
|
||||
**IMPORTANT**: Înainte de a scrie cod, întreabă-mă:
|
||||
|
||||
1. **Despre pozițiile markerelor** — arată-mi coordonatele propuse (top%, left%) și confirmă cu mine dacă se potrivesc peste cifrele din imagine
|
||||
2. **Despre formularea problemelor** — propune textul pentru fiecare problemă și variantele A/B/C/D și lasă-mă să le ajustez
|
||||
3. **Despre designul modalului** — descrie-mi cum va arăta și întreabă dacă vreau altceva
|
||||
4. **Despre orice decizie creativă** — nu presupune, întreabă
|
||||
|
||||
După ce avem totul confirmat, scrie codul. După prima versiune, deschide fișierul și arată-mi screenshot, apoi întreabă ce trebuie ajustat.
|
||||
|
||||
## Structura fișierelor
|
||||
|
||||
```
|
||||
proiect/
|
||||
├── background.jpg # imaginea originală (deja existentă)
|
||||
└── escape_room.html # output-ul final (un singur fișier, base64 inline)
|
||||
```
|
||||
|
||||
## Verificări finale
|
||||
|
||||
Înainte de a considera proiectul gata:
|
||||
- [ ] Deschide fișierul în browser și verifică vizual
|
||||
- [ ] Testează fiecare provocare (click, răspuns corect, răspuns greșit)
|
||||
- [ ] Verifică ecranul de victorie
|
||||
- [ ] Confirmă că nu sunt elemente vizuale care acoperă textul din imagine
|
||||
- [ ] Confirmă că markerele sunt poziționate corect
|
||||
- [ ] Testează ESC pentru închidere modal
|
||||
- [ ] Verifică că fișierul funcționează standalone (fără dependențe externe în afară de Google Fonts)
|
||||
Reference in New Issue
Block a user