Lig 4 ao vivo
Lig 4 (Connect Four) multiplayer para jogar pelo celular durante uma palestra: a plateia entra por QR code, joga em duplas e o telão mostra as partidas e o placar em tempo real.
- Next.js (App Router) + TypeScript + Tailwind, animação com Framer Motion
- Supabase: Postgres guarda o estado das salas; Realtime sincroniza os celulares
- Sem login: cada jogador tem um UUID anônimo no
localStorage + um apelido
- Servidor é a autoridade: o cliente manda só
{ roomId, playerId, column } para /api/move
| Rota | O que é |
|---|
/ | Criar sala / entrar com código de 4 letras |
/sala/ABCD | Partida: 1º a entrar = vermelho, 2º = amarelo, o resto assiste |
/bot | Contra o bot (minimax com poda alfa-beta, 3 níveis, roda só no navegador) |
/telao | Partidas ao vivo + placar, para projetor |
1. Configurar o Supabase
- Crie um projeto em supabase.com.
- No painel, abra SQL Editor → New query, cole o conteúdo de
supabase/migrations/0001_init.sql e clique em Run. Isso cria as tabelas, liga o RLS (o cliente só lê) e adiciona rooms e wins ao Realtime.
- Em Project Settings → API, copie a URL do projeto, a chave pública (
anon / publishable) e a chave secreta (service_role / secret).
2. Rodar local
Requer Node 20.9+.
npm install
cp .env.example .env.local # e preencha as 3 variáveis do Supabase
npm run dev:lan
dev:lan escuta em todas as interfaces, para os celulares no mesmo Wi-Fi acessarem http://IP-DA-MÁQUINA:3000. Em dev, o QR code já usa o IP da rede mesmo se você abrir pelo localhost. Se ele escolher a placa de rede errada, force com LAN_IP=192.168.0.10 npm run dev:lan. No Windows, permita o Node no firewall quando ele perguntar (rede privada).
Sem as variáveis do Supabase o app sobe mesmo assim, só com o modo contra o bot.
npm test # testes da lógica do jogo (vitória, empate, bot)
npm run typecheck
3. Deploy na Vercel
- Importe o repositório na Vercel (framework detectado: Next.js).
- Em Settings → Environment Variables, cadastre:
| Variável | Valor |
|---|
NEXT_PUBLIC_SUPABASE_URL | URL do projeto Supabase |
NEXT_PUBLIC_SUPABASE_ANON_KEY | chave pública (anon / publishable) |
SUPABASE_SERVICE_ROLE_KEY | chave secreta (service_role / secret). Nunca com prefixo NEXT_PUBLIC_ |
NEXT_PUBLIC_SITE_URL | opcional: URL pública usada no QR (ex.: https://lig4.vercel.app) |
- Faça o deploy. Não precisa de servidor WebSocket: o Realtime é do Supabase e as jogadas passam por Route Handlers serverless.
Como funciona
- Lógica pura em
lib/game: playMove, findWinner, isDraw e o bot, sem React nem Supabase. A API e o bot usam o mesmo código.
- Concorrência otimista: o
UPDATE da jogada só passa se move_count no banco ainda for o lido. Dois toques ao mesmo tempo → o segundo recebe 409 e o cliente re-sincroniza.
- Segurança: RLS ligado; o anon só lê
rooms (ativas nas últimas 2h) e wins. Os UUIDs dos jogadores ficam em room_seats, que o anon não lê, para ninguém jogar no lugar de outro. Toda escrita usa a service role, só no servidor.
- Rede instável: se o canal Realtime cair, o cliente re-assina com backoff, re-sincroniza ao voltar online ou à aba, e faz polling (a cada 4s desconectado, 20s conectado).
- Limpeza: salas sem atividade há 2h somem da leitura pública (RLS) e são apagadas quando alguém cria uma sala nova. O placar fica.
