Mesa Quente — 3D com servidor de partidas
Editar as cartas
- Cartas 18+:
server/cartas-quentes.js (QUENTE = galera adulta, CASAL = jogo a dois). Copie o arquivo para public/cartas-quentes.js depois de editar.
- Cartas leves e sérias:
server/editorial.js (mesma regra: copie para public/editorial.js).
- Nomes, objetivo, regras, pontuação dos minijogos e pacotes prontos: final de
public/catalogo.js (copie para server/catalogo.js).
- Em Verdade ou Desafio, as listas
truth e dare precisam ter o mesmo tamanho.
- Rode
npm test para conferir.
Para ativar esta versão, siga ATIVAR-ONLINE.md. O site fica em public/ e requer a API da Vercel. As regras e credenciais precisam ser configuradas antes do uso.
Guia histórico da versão anterior
O conteúdo abaixo descreve a versão antiga sem proteção; não use suas regras abertas na versão nova.
Mesa Quente — Etapa 1: Esqueleto de Sala
Esta é a Etapa 1 do projeto: só a parte de criar sala, entrar em sala e
ver os jogadores aparecendo em tempo real. Nenhuma carta ou mecânica de jogo
ainda.
Arquivos do projeto
mesa-quente/
├── index.html → tela inicial (criar sala / entrar em sala)
├── lobby.html → tela de lobby (código da sala + lista de jogadores)
├── style.css → visual (compartilhado pelas duas telas)
├── sala.js → toda a lógica de comunicação com o Firebase
├── app.js → lógica da tela inicial
├── lobby.js → lógica da tela de lobby
├── firebase-config.js → suas chaves do Firebase (você vai editar este)
└── database.rules.json → regras de segurança do banco (você vai colar no site do Firebase)
Nenhum comando de terminal é necessário para este projeto — é tudo HTML/CSS/JS
puro, sem instalação de nada. Os únicos lugares onde você vai "mexer" são:
sites (Firebase e Vercel) e os arquivos de texto acima.
PARTE 1 — Criar sua conta Firebase gratuita
- Acesse https://console.firebase.google.com e faça login com uma conta
Google (pode ser a sua conta pessoal do Gmail).
- Clique em "Criar projeto" (ou "Add project").
- Dê um nome, por exemplo
mesa-quente. Clique em Continuar.
- Ele vai perguntar sobre o Google Analytics — pode desativar
(não precisamos disso). Clique em Criar projeto e aguarde.
- Quando terminar, clique em Continuar.
Ativar o Realtime Database
- No menu lateral esquerdo, procure "Compilação" (ou "Build") e clique em
"Realtime Database".
- Clique em "Criar banco de dados".
- Escolha a localização (qualquer uma serve, ex:
us-central1). Clique em
Avançar.
- Quando perguntar sobre regras de segurança, escolha "Iniciar no modo de
teste" por enquanto — vamos colar nossas próprias regras já ajustadas no
próximo passo. Clique em Ativar.
Colar as regras de segurança
- Ainda na tela do Realtime Database, clique na aba "Regras" (Rules), no
topo.
- Apague o conteúdo que estiver lá e cole o conteúdo do arquivo
database.rules.json (está neste projeto).
- Clique em Publicar (Publish).
Essas regras liberam leitura/escrita em /salas/* para qualquer um — ok
para este estágio de teste com amigos. Antes de lançar publicamente pra
desconhecidos, dá pra reforçar isso depois.
Pegar as chaves de configuração
-
No menu lateral, clique na engrenagem (⚙️) ao lado de "Visão geral do
projeto" → "Configurações do projeto".
-
Role até "Seus aplicativos" e clique no ícone </> (Web).
-
Dê um apelido ao app, ex: mesa-quente-web. Não marque a opção de
Firebase Hosting aqui (vamos usar a Vercel, é mais simples). Clique em
Registrar app.
-
Ele vai te mostrar um bloco de código parecido com este:
const firebaseConfig = {
apiKey: "AIzaSy...",
authDomain: "mesa-quente-xxxx.firebaseapp.com",
databaseURL: "https://mesa-quente-xxxx-default-rtdb.firebaseio.com",
projectId: "mesa-quente-xxxx",
storageBucket: "mesa-quente-xxxx.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:abcdef123456"
};
-
Copie esses valores e cole no arquivo firebase-config.js deste
projeto, substituindo os textos "COLE_AQUI...".
-
Salve o arquivo.
Pronto — o app já está conectado ao seu banco de dados.
PARTE 2 — Publicar num link público e gratuito (Vercel)
Vamos usar a Vercel porque ela permite publicar direto pelo navegador,
sem precisar mexer em terminal.
- Acesse https://vercel.com e crie uma conta gratuita (dá pra usar login
do Google/GitHub).
- Depois de logado, clique em "Add New..." → "Project".
- A Vercel vai pedir para conectar a um repositório do GitHub. Se você não
tem um GitHub ainda:
- Crie uma conta gratuita em https://github.com.
- Crie um novo repositório (botão "New repository"), dê um nome como
mesa-quente, deixe como Público ou Privado (tanto faz), e
clique em Create repository.
- Na página do repositório recém-criado, clique em "uploading an
existing file" (ou "Add file" → "Upload files").
- Arraste todos os arquivos deste projeto (menos este README, se quiser)
para a área de upload:
index.html, lobby.html, style.css,
sala.js, app.js, lobby.js, firebase-config.js (já com suas
chaves preenchidas).
- Clique em Commit changes para salvar.
- Volte para a Vercel, clique em "Import Git Repository", autorize o
acesso ao GitHub se pedir, e selecione o repositório
mesa-quente.
- Nas configurações de deploy, não precisa mudar nada — é um site
estático simples. Clique em Deploy.
- Em menos de um minuto, a Vercel te dá um link público, algo como:
https://mesa-quente-seunome.vercel.app
Esse é o link que você manda pros seus amigos testarem, cada um no celular
dele. Toda vez que você alterar um arquivo no GitHub, a Vercel republica o
site automaticamente.
Nenhum comando de terminal é necessário
Este projeto foi montado propositalmente sem build tools (sem npm, sem
Node.js) para que você consiga publicar só arrastando arquivos nos sites
acima. Se em alguma etapa futura eu (ou outra IA) sugerir algum comando de
terminal, ele vai te avisar exatamente qual comando copiar e colar — não é
o caso aqui.
Testando
- Abra o link da Vercel no seu celular → clique Criar Sala → digite seu
nome.
- Você cai na tela de lobby, vê o código da sala (ex:
AB3X) e o botão
Iniciar Partida.
- Peça pra um amigo abrir o mesmo link no celular dele → Entrar em
Sala → digitar o código + o nome dele.
- Assim que ele confirmar, o nome dele aparece na sua tela na hora, sem
precisar recarregar a página — e vice-versa.
- Se você fechar o navegador e abrir o link de novo com o mesmo código, seu
nome não duplica na lista (o app lembra quem você é usando o celular).
- Só quem criou a sala (o host) vê o botão Iniciar Partida. Ao clicar,
todo mundo na sala vê a mensagem de que a partida começou.
O que vem nas próximas etapas (ainda não implementado)
A estrutura de dados do banco já reserva um espaço chamado partida dentro
de cada sala, pronta para receber, sem precisar reescrever nada da Etapa 1:
- Baralhos ativos
- Carta atual
- Jogador líder da rodada
- Reconexão automática / herança de host se o host cair
Quando você quiser seguir pra Etapa 2, é só pedir.
