Szablon strony gry ×2 (School's Out!, Coin Collector) — gra nad foldem + sekcje

[MrCrystal2]

Parent PRD

#53

Type

AFK

What to build

Jeden wspólny szablon strony gry sterowany konfiguracją — School's Out! i Coin Collector renderują identyczną oprawę, różni się wyłącznie konfiguracja (tytuł, embed, treść sekcji, grafika):

1. Gra nad zagięciem: istniejący embed gry widoczny bez scrollowania (desktop 1366×768 i mobile 390×844); okno gry w nowej, spójnej oprawie.
2. Sekcje pod grą: „How to play" (sterowanie, zasady), „Features", screenshoty (placeholdery do czasu assetów), link do drugiej gry („Play next").
3. Mechaniki gier bez zmian — dotykamy wyłącznie oprawy wokół embedu.

Konfiguracja gier w content.json + typy (slug, tytuł, opis sekcji, źródło embedu, grafika). Kontekst: PRD #53 → Implementation Decisions (Strony gier); plan plans/landing-upgrade.md Faza 6.

Assumptions

• Embedy gier działają jak dotychczas (nie zmieniamy mechanizmów osadzania).
• Tokeny/layout shell (Design tokens + layout shell (dark default, glass header, footer, bez StickyBar) #56) i pipeline treści (Treść build-time + BrowserRouter + prerender (HTML per trasa) #55) gotowe.
• /products nadal linkuje do obu gier (issue Home: sekcje treści (lineup umux → ExSize → ADM-CLI, features, social proof, FAQ, CTA) #58 zdejmuje gry z home, nie z /products).

Out of scope for this issue

• Do NOT zmieniaj plików/stron samych gier (zewnętrzne embedy) ani ich mechanik.
• Do NOT wstawiaj prawdziwych screenshotów (finałowe issue) — placeholdery.
• Do NOT dotykaj stron produktów (osobny issue: szablon produktu).

Acceptance criteria

• Obie strony gier mają identyczny układ i wygląd (różni się tylko konfiguracja) — [observable: porównanie stron]
• Gra widoczna bez scrollowania na 1366×768 i 390×844 — [observable: test ręczny]
• Sekcje How to play / Features / screenshoty / „Play next" obecne pod grą — [observable: DOM]
• Grywalność nietknięta (embed działa, sterowanie działa) — [observable: ręczne zagranie w obie gry]
• Build/test/lint zielone — [command: yarn build && yarn test && yarn lint]

How to verify

1. yarn dev — otwórz /schools-out i /coin-collector: układ identyczny, treści różne
2. Gra widoczna bez scrolla na obu rozdzielczościach (DevTools responsive)
3. Zagraj krótko w obie gry — sterowanie i działanie bez zmian
4. Kliknij „Play next" — przechodzi do drugiej gry
5. yarn build && yarn test && yarn lint — exit 0

Blocked by

• Design tokens + layout shell (dark default, glass header, footer, bez StickyBar) #56 (design tokens + layout shell)

User stories addressed

• User story 7 (wejście w gry z Products)
• User story 8 (gra nad foldem + sekcje edukacyjne)
• User story 9 (identyczny układ obu stron gier)