Última atualização: fev 2026
Aplicativo web para ranking de partidas ARAM (League of Legends) entre amigos.
Este repositório contém duas versões:
| Versão | Descrição |
|---|---|
| ARAM Ranked 1 | Versão completa (KDA, campeões, destaques, conquistas). Código em aram-ranked-v1/ e em src/*-cabare-v1.ts. |
| ARAM Ranked 2 | Versão simplificada (esta raiz): ranking, sortear times, histórico, comparar jogadores, gráficos. Sem KDA/campeões no fluxo. |
→ Ver documentation/README.md para detalhes das duas versões e como rodar cada uma.
| Seção | Descrição |
|---|---|
| Destaques | Cards com mais vitórias, melhor K/D, mais abates, campeão mais vencedor e equivalentes negativos. |
| Ranking | Tabela com posição, jogador, ELO, V/D, últimos resultados, Win%, KDA, ratio e campeões. |
| Sortear times | Seleção de jogadores e divisão aleatória em dois times. |
| Histórico | Lista de partidas com data/hora, expansível para detalhes. |
| Piques | Campeões mais usados por jogador com ícones e win rate. |
| Perfil | Modal do jogador com estatísticas, destaques e campeões. |
| Conquistas | Conquistas desbloqueadas (abates, mortes, assistências, vitórias, win rate, especiais). |
 |
 |
|---|---|
| Destaques | Histórico de partidas |
 |
 |
|---|---|
| Sortear times | Piques – Campeões mais usados |
 |
 |
|---|---|
| Perfil do jogador | Conquistas |
(Clique nas imagens para ampliar.)
| Recurso | Descrição |
|---|---|
| Ranking | Tabela com posição, jogador, ELO (patente LoL), V/D, últimos resultados, Win%, KDA, ratio e campeões mais jogado/melhor |
| Destaques | Cards com Mais vitórias, Melhor K/D, Mais abates, Campeão mais vencedor, Mais derrotas, Pior K/D, Mais mortes, Campeão mais perdedor |
| Sortear times | Seleção de jogadores → divisão aleatória em dois times + escolha de campeão por jogador → registro da partida |
| Histórico | Lista de partidas com vencedores, perdedores e KDA por jogador (cards recolhíveis) |
| Perfil | Modal por jogador com estatísticas, destaques atuais, campeões e conquistas |
| Piques | Seção “Campeões mais usados” por jogador com ícones (Data Dragon) e win rate |
| Temporada | Nome da temporada exibido; botão “Nova temporada” (modo admin) |
| Filtro | Visualizar ranking “Geral” ou “Últimas 10” partidas |
| Exportar / imprimir | Layout preparado para impressão do ranking |
- Vite + TypeScript
- Tailwind CSS
- Dados:
public/ranking.json(fonte principal; no GitHub Pages o app carrega esse arquivo do próprio site) +localStorage(merge no carregamento) - Ícones: Data Dragon (campeões) e Community Dragon (emblemas de patente)
- Node.js 18+ (recomendado 20+)
npm
git clone https://github.com/Gleidisonjr/Aram-Ranked-APP.git
cd Aram-Ranked-APP
npm installnpm run devAbre em http://localhost:5173 (ou a porta indicada no terminal).
npm run buildA saída fica em dist/. Essa pasta é usada para publicar no GitHub Pages, Netlify ou Vercel.
npm run previewO repositório já inclui o workflow GitHub Actions para publicar no GitHub Pages.
- No repositório: Settings → Pages → em Build and deployment, em Source escolha GitHub Actions.
- Faça push na branch
main. O workflow Deploy to GitHub Pages roda automaticamente. - O site ficará em:
https://gleidisonjr.github.io/Aram-Ranked-APP/
Para mais opções (Netlify, Vercel, passo a passo detalhado), veja COMO-PUBLICAR.md.
No site publicado, os botões Restaurar dados e Nova temporada não aparecem para quem acessa o link normal.
Para ver e usar esses botões, acesse:
Guarde esse link para uso pessoal; para o Discord e para os amigos use o link sem ?admin=1.
Aram-Ranked-APP/
├── aram-ranked-v1/ # ARAM Ranked 1 — versão completa (ver README dentro da pasta)
├── documentation/ # Documentação das duas versões (README.md)
├── .github/workflows/
│ └── deploy-pages.yml # Deploy automático no GitHub Pages
├── public/
│ └── ranking.json # Dados do ranking (jogadores + partidas)
├── src/
│ ├── main.ts # ARAM Ranked 2 — UI e lógica (versão simplificada)
│ ├── store.ts # Dados, ranking (v2)
│ ├── types.ts # Tipos TypeScript (v2)
│ ├── main-cabare-v1.ts # Backup: ARAM Ranked 1 — entrada completa
│ ├── store-cabare-v1.ts # Backup: store v1
│ ├── types-cabare-v1.ts # Backup: types v1
│ ├── ddragon.ts # Ícones de campeões e emblemas de patente
│ └── style.css # Estilos + Tailwind
├── docs/
│ └── ICONS-LOL.md # Referência de ícones (Data Dragon, Community Dragon)
├── COMO-PUBLICAR.md # Guia de publicação
├── COMO-USAR-PRINT.md # Uso de prints de partida
├── IDEIAS-FEATURES.md # Ideias de features
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
- docs/PUBLICAR-GITHUB-PAGES.md — Passo a passo para subir atualizações e publicar no GitHub Pages.
- COMO-PUBLICAR.md — Publicar no GitHub Pages, Netlify ou Vercel e compartilhar o link.
- COMO-USAR-PRINT.md — Como usar prints de partida e atualizar o ranking.
- docs/RIOT-API-REMODEL.md — Plano para buscar partidas direto da API da Riot (por match ID).
- docs/ICONS-LOL.md — Uso de ícones de campeões e patentes (LoL).
- IDEIAS-FEATURES.md — Ideias e sugestões de evolução do app.
| Comando | Descrição |
|---|---|
npm run dev |
Sobe o servidor de desenvolvimento (Vite). |
npm run build |
Gera o build de produção em dist/. |
npm run preview |
Serve a pasta dist/ localmente para testar o build. |