feat: Jogo da Vida Solana — board game multiplayer online com termos do SDK

[lglucas]

Summary

Jogo da Vida Solana — multiplayer online board game (2-8 players) built on @stbr/solana-glossary SDK. Players traverse a 50-space board learning Solana ecosystem terms through event cards and challenge quizzes.

This PR shares infrastructure with PR #23 (Escape Room Solana). Both games live in the same examples/escape-room-solana/ app, sharing wallet, leaderboard, audio, and i18n systems.

Live Demo: https://aceleradora.eco.br/solanabr-glossario/ (click "Jogo da Vida" on the portal)

3 Board Experiences — Completely Different UX

Each board is a completely different experience — different layout, interaction patterns, fonts, backgrounds, and UX. Not just a color swap.

Board	UX Style	SDK Categories
De Normie a Validator	Neon Cockpit — 2-column layout, glassmorphic HUD, circular glow nodes, visual dice	blockchain-general, core-protocol, network, infrastructure
Startup Solana	Terminal CLI — > execute roll() text command instead of dice, matrix rain background, green monochrome, process table player list	token-ecosystem, defi, web3, solana-ecosystem
A Timeline	Arcade 8-bit — pixel dice in fixed bottom HUD bar, Press Start 2P font, segmented timer, chunky pixel tiles	programming-model, dev-tools, security

Screenshots

Board Selection	Lobby	Gameplay

SDK Integration

Event Cards (every ~4th space)

When a player lands on an Event space, the game:

1. Calls getTermsByCategory() for the board's categories
2. Picks a random term with valid definition
3. Shows the term name + definition to teach the player
4. Applies a random game effect (advance, retreat, bonus points, penalty)

Challenge Quizzes (every ~6th space)

When a player lands on a Challenge space:

1. Pulls 4 terms from the board's SDK categories
2. Shows a definition → player picks the correct term from 4 options
3. Correct answer = advance bonus, wrong = stay

Categories per Board

• Normie: blockchain-general, core-protocol, network, infrastructure
• Startup: token-ecosystem, defi, web3, solana-ecosystem
• Timeline: programming-model, dev-tools, security

All terms served via getLocalizedTerms() in pt-BR and es.

Multiplayer System

• Room creation: Host creates room, gets 6-character code
• Invite: Share code or link (/vida/sala/{theme}/{code})
• Sync model: Active player computes locally and saves to Supabase; waiting players poll every 1.5s
• Turn timer: Host chooses Relax (60s) / Normal (30s) / Speed (15s) in lobby
• Disconnect handling: Turn timeout → auto-skip → 3 consecutive timeouts = player ejected, game ends
• Score submission: Winner submits to shared leaderboard (same as Escape Room)

Architecture (Jogo da Vida module)

src/vida/
├── components/
│   ├── GameBoard.tsx       # Logic dispatcher (hooks, sync, navigation)
│   ├── GameUiNormie.tsx    # Neon cockpit UI (2-column, visual dice)
│   ├── GameUiStartup.tsx   # Terminal CLI UI (text commands, ASCII timer)
│   ├── GameUiTimeline.tsx  # Arcade 8-bit UI (bottom HUD, pixel dice)
│   ├── BoardNormie.tsx     # Circular neon nodes (10 cols)
│   ├── BoardStartup.tsx    # Terminal cells (5 cols)
│   ├── BoardTimeline.tsx   # Pixel tiles (8 cols)
│   ├── Board.tsx           # Dispatcher (picks board variant by theme)
│   ├── BoardBgNeon.tsx     # Animated neon grid background
│   ├── BoardBgMatrix.tsx   # Matrix digital rain background
│   ├── BoardBgPixel.tsx    # Pixel star field background
│   ├── Lobby.tsx           # Room creation, join, timer selection
│   ├── Dice.tsx            # Visual dice (used by Normie)
│   ├── EventCardModal.tsx  # Event card display (SDK term + definition)
│   └── ChallengeModal.tsx  # Quiz challenge (definition → pick term)
├── engine/
│   ├── types.ts            # GameState, Player, TurnTimerOption
│   ├── turns.ts            # State machine (roll → move → resolve → next)
│   ├── board.ts            # Board generation (deterministic by theme)
│   ├── dice.ts             # Random dice (1-6)
│   ├── events.ts           # Event card generation from SDK
│   ├── challenges.ts       # Quiz generation from SDK
│   ├── themes.ts           # Board configs + ThemeVisual palettes
│   └── rooms.ts            # Supabase room CRUD + game state sync
├── hooks/
│   └── useVidaGame.ts      # Core hook: state, sync, timer, auto-skip, SFX
└── pages/
    ├── VidaPlay.tsx         # Lobby → gameplay router
    ├── VidaResult.tsx       # Results + score submission
    └── VidaHome.tsx         # Board selection (3 cards)

Tech Stack

• Vite + React 18 + TypeScript + Tailwind CSS v4 + Framer Motion
• Supabase (multiplayer rooms, game state sync, leaderboard)
• @solana/wallet-adapter-react (Phantom, Solflare)
• Web Audio API (synthesized SFX per space type + BGM per board)
• react-i18next (pt-BR + es)

Credits

• Developer: Lucas Galvao (@lg_lucas) — Tokenfy.me
• SDK: @stbr/solana-glossary by Superteam Brazil

Test Plan

• Visit https://aceleradora.eco.br/solanabr-glossario/ → click "Jogo da Vida"
• Create room in each board theme → verify completely different UX (not just colors)
• Normie: 2-column layout, visual dice, neon glow nodes
• Startup: terminal text > execute roll(), green monochrome, matrix rain
• Timeline: pixel dice in bottom bar, Press Start 2P font, chunky tiles
• Multiplayer: join from 2nd device using invite code → verify turn sync
• Event card: land on event space → verify SDK term + definition displayed
• Challenge quiz: land on challenge space → verify 4-option multiple choice with real SDK terms
• Timer: test Relax (60s) / Normal (30s) / Speed (15s) options
• Disconnect: let timer expire 3x → verify player ejected
• Leaderboard: win game → verify score in ranking under Jogo da Vida tab