{"id":51606227,"url":"https://github.com/nathadriele/tictactoe-online","last_synced_at":"2026-07-12T02:30:48.438Z","repository":{"id":367406929,"uuid":"1280675842","full_name":"nathadriele/tictactoe-online","owner":"nathadriele","description":"Aquele clássico jogo de tabuleiro e estratégia para dois jogadores.  O jogador que conseguir alinhar primeiro três de suas marcas ( \"X\" ou \"O\") em uma linha horizontal, vertical ou diagonal vence a partida.","archived":false,"fork":false,"pushed_at":"2026-06-25T22:00:17.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-25T22:14:15.529Z","etag":null,"topics":["css3","expressjs","gamedev","html5","javascript","mobile","nodejs","render-deployment","socketio-server","tictactoe-game"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathadriele.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-25T20:34:42.000Z","updated_at":"2026-06-25T22:00:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nathadriele/tictactoe-online","commit_stats":null,"previous_names":["nathadriele/tictactoe-online"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/nathadriele/tictactoe-online","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathadriele%2Ftictactoe-online","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathadriele%2Ftictactoe-online/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathadriele%2Ftictactoe-online/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathadriele%2Ftictactoe-online/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathadriele","download_url":"https://codeload.github.com/nathadriele/tictactoe-online/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathadriele%2Ftictactoe-online/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35380480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-12T02:00:06.386Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","expressjs","gamedev","html5","javascript","mobile","nodejs","render-deployment","socketio-server","tictactoe-game"],"created_at":"2026-07-12T02:30:47.910Z","updated_at":"2026-07-12T02:30:48.433Z","avatar_url":"https://github.com/nathadriele.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Jogo da Velha Multiplayer Online 2026\n\nJogo da velha multiplayer em tempo real, feito com Node.js, Express e Socket.io.\n\nhttps://tictactoe-online-hffd.onrender.com\n\n[demo.webm](https://github.com/user-attachments/assets/3cc664b5-af0a-4a04-be68-df9c0e212a72)\n\n## Stack\n\n- **Backend:** Node.js 18+, Express 4.x, Socket.io 4.x\n- **Frontend:** HTML5, CSS3, JavaScript vanilla (sem frameworks)\n- **Hospedagem:** Render.com (plano Free, sem cartão de crédito)\n\n## Demonstração rápida\n\n### Tela Inicial: Criar ou Entrar em Sala\n\nTela de entrada da aplicação com título \"JOGO DA VELHA\", subtítulo \"Multiplayer Online em Tempo Real\", campo de nome e botões para criar ou entrar em uma sala existente.\n\u003cimg width=\"1154\" height=\"890\" alt=\"3\" src=\"https://github.com/user-attachments/assets/0f6b8757-7f2b-43fd-b915-bc719a82bf2f\" /\u003e\n\n\n### Tela de Entrada em Sala: Campo de Código\n\nTela de acesso com campos para nome do jogador e código da sala (formato ABC123), exibida após clicar em \"Entrar em Sala\" na tela inicial.\n\u003cimg width=\"972\" height=\"804\" alt=\"10\" src=\"https://github.com/user-attachments/assets/0ce60843-ea62-42cc-945f-ea7e93e71bac\" /\u003e\n\n### Partida Iniciada: Tabuleiro Vazio, Vez de Adriele\n\nTela de jogo com os dois jogadores conectados (Adriele X e Felipe O), cronômetro ativo no painel de Adriele e tabuleiro limpo aguardando a primeira jogada.\n\u003cimg width=\"1154\" height=\"890\" alt=\"4\" src=\"https://github.com/user-attachments/assets/cc9e3e2e-e8dd-42a6-8dee-058d6cc683aa\" /\u003e\n\n### Partida em Andamento: Tabuleiro Quase Completo\n\nJogo com 8 das 9 células preenchidas, cronômetros e tempo médio por jogada visíveis para ambos os jogadores, uma célula restante para a jogada decisiva.\n\u003cimg width=\"1154\" height=\"890\" alt=\"5\" src=\"https://github.com/user-attachments/assets/fc3461a7-5ceb-442f-83dc-5c2c29738a1d\" /\u003e\n\n### Resultado: Empate Registrado no Placar\n\nTela de resultado exibindo \"EMPATE!\" com placar atualizado (Empates: 1) e botão \"Jogar Novamente\" disponível para ambos os jogadores reiniciarem a partida.\n\u003cimg width=\"1154\" height=\"890\" alt=\"6\" src=\"https://github.com/user-attachments/assets/40a5f577-93d4-4638-9125-b416c298251b\" /\u003e\n\n### Vitória: Adriele Vence a Rodada\n\nTela de vitória com animação de confetti, placar atualizado (Adriele 1 × Felipe 0, Empates: 1) e tempo médio de resposta registrado para cada jogador.\n\u003cimg width=\"1154\" height=\"890\" alt=\"7\" src=\"https://github.com/user-attachments/assets/2ecf7383-3ca3-4822-b783-a784743b54cd\" /\u003e\n\n### Sala Criada: Aguardando Oponente com Código Copiado\n\nTela de espera exibindo o código da sala (4FW2FY) em destaque, feedback visual \"Copiado! ✓\" após clicar no botão, spinner de carregamento e instrução para compartilhar o código com o oponente.\n\u003cimg width=\"977\" height=\"769\" alt=\"8\" src=\"https://github.com/user-attachments/assets/9723100f-23c6-40ed-948e-c44898c23b70\" /\u003e\n\n### Validação de Sala Cheia: Tentativa de Entrada Bloqueada\n\nTela de entrada preenchida com nome \"Vhagar\" e código \"SUTM48\", exibindo o toast de erro \"Sala cheia\" ao tentar entrar em uma sala que já possui dois jogadores ativos.\n\u003cimg width=\"972\" height=\"804\" alt=\"9\" src=\"https://github.com/user-attachments/assets/d11db1b3-f807-4f71-9145-1b751c9dfa1e\" /\u003e\n\n---\n\n## Como testar localmente? Vem comigo que eu te mostro como fazer:\n\n```bash\ngit clone https://github.com/nathadriele/tictactoe-online\ncd tictactoe-online\nnpm install\nnode server.js\n```\n\nDepois abra **duas abas** (ou dois navegadores) em:\n\n```\nhttp://localhost:3000\n```\n\n- Na primeira aba: digite seu nome e clique em **Criar Sala**.\n- Copie o código de 6 caracteres.\n- Na segunda aba: digite outro nome, clique em **Entrar em Sala**, cole o código.\n- O jogo começa automaticamente.\n\n---\n\n## Como fazer deploy no Render.com\n\n### 1. Criar conta\n- Acesse https://render.com e crie uma conta (pode usar GitHub/Google).\n- **Não é necessário cartão de crédito.**\n\n### 2. Subir o código no GitHub\n```bash\ngit init\ngit add .\ngit commit -m \"Jogo da velha multiplayer online\"\ngit branch -M main\ngit remote add origin https://github.com/seu-usuario/tictactoe-online.git\ngit push -u origin main\n```\n\n### 3. Criar Web Service no Render\n1. No painel do Render, clique em **New +** → **Web Service**.\n2. Conecte seu repositório do GitHub (`tictactoe-online`).\n3. Preencha:\n   - **Name:** `tictactoe-online` (ou o nome que preferir)\n   - **Branch:** `main`\n   - **Runtime:** Node (detectado automaticamente)\n   - **Build Command:** `npm install`\n   - **Start Command:** `node server.js`\n   - **Plan:** **Free**\n4. Clique em **Create Web Service**.\n5. Aguarde o deploy (2–3 minutos na primeira vez).\n\n### 4. Acessar a URL pública\nApós o deploy, o Render gera uma URL no formato:\n\n```\nhttps://tictactoe-online-xxxx.onrender.com\n```\n\nEsta URL é permanente e pode ser acessada de qualquer lugar.\n\n---\n\n## Aviso sobre Cold Start (Render Free)\n\nNo plano gratuito, o servidor **hiberna após 15 minutos** sem acesso.\nO primeiro acesso após hibernação pode levar **30–50 segundos** para \"acordar\".\n\n**Como lidar:**\n- Abra a URL no navegador e **aguarde o carregamento completo** antes de chamar o oponente.\n- A aplicação já inclui **retry automático** com Socket.io (10 tentativas com backoff).\n- Se aparecer \"Conectando ao servidor...\", basta aguardar, a conexão será restabelecida.\n\n---\n\n## Como jogar online\n\n1. **Jogador 1:**\n   - Acessa a URL pública.\n   - Digita seu nome.\n   - Clica em **Criar Sala**.\n   - Copia o código de 6 caracteres exibido na tela.\n   - Envia o código para o oponente.\n\n2. **Jogador 2:**\n   - Acessa a **mesma URL**.\n   - Digita seu nome.\n   - Clica em **Entrar em Sala**.\n   - Cola o código de 6 caracteres.\n   - O jogo começa automaticamente quando ambos estão conectados.\n\n3. **Durante o jogo:**\n   - O tabuleiro mostra de quem é a vez.\n   - Clique em uma célula vazia para marcar.\n   - O cronômetro mostra quanto tempo cada jogador leva.\n   - Ao final, clique em **Jogar Novamente** para revanche.\n\n---\n\n## Estrutura do projeto atual\n\n```\ntictactoe-online/\n├── server.js          # Servidor Node.js + Socket.io\n├── public/\n│   └── index.html     # Frontend completo (HTML+CSS+JS)\n├── package.json       # Dependências e scripts\n├── render.yaml        # Configuração do Render\n├── .gitignore\n└── README.md\n```\n\n---\n\n## Recursos atuais\n\n- Salas com código único de 6 caracteres\n- Reconexão automática (desconexão temporária)\n- Persistência de sessão via `localStorage`\n- Cronômetro e estatísticas de tempo por jogador\n- Indicador de conexão (Online/Offline) em tempo real\n- Revanche com votação e timeout de 30s\n- Placar de vitórias e empates\n- Design responsivo (mobile-first)\n- Celebração com confetti em vitórias\n- Suporte a `prefers-reduced-motion`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathadriele%2Ftictactoe-online","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathadriele%2Ftictactoe-online","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathadriele%2Ftictactoe-online/lists"}