Loading repository data…
Loading repository data…
caiquenovaes1994 / repository
Uma plataforma interativa premium para acompanhar e simular todos os jogos da Copa do Mundo da FIFA 2026™.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
O Simulador Copa do Mundo 2026 é uma aplicação web interativa e de código aberto para acompanhar e simular todos os jogos da Copa do Mundo da FIFA 2026™ — o maior torneio da história, com 48 seleções divididas em 12 grupos, disputado nos Estados Unidos, México e Canadá entre 11 de junho e 19 de julho de 2026.
A aplicação calcula automaticamente classificações e progressão no chaveamento seguindo estritamente os critérios oficiais de desempate da FIFA, incluindo a regra de melhor terceiro colocado que classifica 8 das 12 terceiras posições.
Todo o progresso da simulação é salvo localmente no navegador via localStorage — sem necessidade de conta ou servidor.
| Camada | Tecnologia |
|---|---|
| Framework | Vue 3 com <script setup> e Composition API |
| Linguagem | TypeScript 6 (modo estrito) |
| Estado global | Pinia 3 |
| Roteamento | Vue Router 4 com lazy-loading por rota |
| Build | Vite 8 |
| Estilos | CSS Vanilla com variáveis customizadas (design system próprio) |
| Fontes | Oswald via Google Fonts |
| Persistência | localStorage (sem backend) |
| Imagens | WebP otimizado via sharp |
src/
├── assets/
│ └── styles/
│ ├── main.css # Estilos globais e componentes
│ └── variables.css # Design tokens (cores, espaçamentos, tipografia)
├── components/
│ ├── ConfirmModal.vue # Modal de confirmação reutilizável
│ ├── GroupTable.vue # Tabela de classificação + jogos do grupo
│ ├── KnockoutMatch.vue # Card de partida do mata-mata
│ ├── MatchCard.vue # Card de partida da fase de grupos
│ ├── MatchSummaryModal.vue # Modal interativo de resumo das partidas
│ ├── PlayerStatsModal.vue # Modal de estatísticas detalhadas por jogador
│ ├── RefereeModal.vue # Modal de detalhes e jogos do árbitro
│ ├── TeamBadge.vue # Bandeira + nome da seleção
│ ├── ThirdPlaceTable.vue # Ranking dos melhores terceiros colocados
│ ├── VenueModal.vue # Modal de detalhes e jogos do estádio
│ └── YearStatsModal.vue # Modal com pódio e sedes das antigas edições da Copa
├── composables/
│ └── useBroadcasters.ts # Lógica de emissoras de TV (reutilizável)
├── data/
│ ├── appearances.json # Histórico de participações em Copas por seleção
│ ├── coaches.json # Técnicos das 48 seleções
│ ├── historical_scorers.json # Base de dados com os maiores artilheiros de Copas passadas
│ ├── knockoutRules.ts # Template e regras do mata-mata
│ ├── matches.ts # 48 partidas da fase de grupos com datas e sedes
│ ├── referees.ts # Árbitros oficiais por confederação
│ ├── squads.json # Elencos das 48 seleções (~300KB, chunk separado)
│ ├── stats2026.ts # Dados da edição atual (Gols, Assistências, Cartões)
│ ├── summaries.ts # Resumo detalhado (linha do tempo) de cada partida
│ ├── teams.ts # Seleções com grupo e ranking FIFA
│ ├── tournamentInfo.ts # Dados dos mascotes e bola oficial
│ └── venues.ts # 16 estádios com capacidade e imagem
├── router/
│ └── index.ts # Rotas com lazy-loading por view
├── stores/
│ ├── knockoutStore.ts # Estado e lógica do mata-mata (Pinia)
│ └── matchStore.ts # Estado e classificações da fase de grupos (Pinia)
├── types/
│ └── index.ts # Interfaces TypeScript (Team, Venue, GroupMatch…)
├── views/
│ ├── GroupsView.vue # /grupos
│ ├── HomeView.vue # /
│ ├── KnockoutView.vue # /mata-mata
│ ├── RefereesView.vue # /arbitros
│ ├── SquadsView.vue # /convocados
│ ├── StatisticsView.vue # /estatisticas
│ ├── TournamentInfoView.vue # /sobre-torneio
│ └── VenuesView.vue # /estadios
├── App.vue # Layout raiz com navbar
└── main.ts # Bootstrap da aplicação
# 1. Clone o repositório
git clone https://github.com/caiquenovaes1994/WorldCup2026.git
cd WorldCup2026
# 2. Instale as dependências
npm install
# 3. Inicie o servidor de desenvolvimento
npm run dev
Acesse http://localhost:5173 no navegador.
| Comando | Descrição |
|---|---|
npm run dev | Inicia o servidor de desenvolvimento com HMR |
npm run build | Compila TypeScript e gera o bundle de produção em dist/ |
npm run preview | Serve o bundle de produção localmente para validação |
Windows: use
iniciar_worldcup.batpara iniciar o servidor com um duplo clique.
| Rota | View | Descrição |
|---|---|---|
/ | HomeView | Página inicial com calendário interativo e visão geral dos grupos |
/grupos | GroupsView | Fase de grupos com placares editáveis e classificações automáticas |
/mata-mata | KnockoutView | Chaveamento completo do mata-mata com propagação de resultados |
/estadios | VenuesView | Galeria dos 16 estádios oficiais com modal de jogos por sede |
/arbitros | RefereesView | Lista dos árbitros por confederação com modal de jogos atribuídos |
/convocados | SquadsView | Elencos das 48 seleções com carrossel de navegação |
/sobre-torneio | TournamentInfoView | Mascotes oficiais e bola Adidas Trionda |
/estatisticas | StatisticsView | Rankings de artilheiros, assistências, cartões, treinadores, atletas por país e histórico de Copas |
Contribuições são bem-vindas! Antes de abrir um Pull Request, leia:
# 1. Faça um fork do repositório
# 2. Crie uma branch descritiva
git checkout -b feat/nome-da-funcionalidade
# 3. Faça suas alterações e commit
git commit -m "feat: descrição cl