Guias de matchup

Site de fã com guias de matchup de vários campeões, cada um feito a partir da planilha de um jogador. Sem servidor e sem dependências: abra o index.html com dois cliques.

Guias atuais:

• Akshan mid: 48 matchups da planilha "Akshan Matchups - Peteruso", lida ao vivo no site publicado.
• Mordekaiser top: 139 matchups da planilha do Meowdekaiser, mais as outras abas dela (sobre, itens, runas, setups, criadores) como páginas do guia.
• Illaoi top: 57 matchups da planilha do Hachiragi, mais as páginas geral, itens, runas e dicas.
• Kayle top e mid: 171 matchups da planilha do UJard, mais nove páginas (geral, runas, builds, macro, dicas, habilidades, ameaças, Inspiração e notas). Escala original de 1 a 10; o aviso do autor de setembro de 2026 sobre a planilha estar desatualizada aparece no guia.
• Fiora top: 66 matchups da "Fiora Bible 2026" do Sad, mais três páginas (geral, runas e itens). Cada matchup tem duas notas, ameaça na rota e ameaça na partida (Lane Threat e Game Threat, de muito fácil a muito difícil); a borda e os filtros usam a da rota. Runas e feitiços são imagens na planilha, reconhecidas pelo md5; a página inteira de cada runa principal vem dos quatro prints de páginas do próprio Sad. Ainda sem modelo 3D e sons (precisa do PC com o LoL).
• K'Sante top: 60 matchups do guia de K'Sante da comunidade (planilha com aviso de "não republicar versões modificadas"; o autor autorizou em 2026-10-29 pedindo que nada o cite, só o link da planilha). Nota de 0 a 10, runas em 2-3 opções com o texto original embaixo, build principal e alternativa, seções Resumo, Fase de rotas, Trocas e lutas, Nível 6+, Informações extras e VODs. Sem nome de autor no site: "autor": "" e "credito_minimo": true no guias.json (o crédito vira "planilha da comunidade" + link).
• Akali mid e top: 98 matchups (53 mid, 45 top) da planilha do SupremeG0at, com "o que fazer", "cuidado com" e "timers"; dificuldade pela cor da célula (a legenda dele tem "counter temático", que entra como difícil). Runas, feitiços e itens são os da aba "Runes/items/summoners" (uma página de runas e uma build para todas as matchups). Filtro Mid/Top na lista. A planilha bloqueia download: atualização à mão, ver scripts/atualizar_akali.py.
• Garen mid: 120 matchups do guia de Garen mid do Triton (season 15), com dificuldade de 0 a 10, feitiços (a primeira dupla e as outras opções), fragmentos de cada matchup, habilidade para maximizar, se dá para fazer split, estratégia e build (core e situacionais com o motivo). A página de runas é a do FAQ (Ímpeto Gradual, com a troca que o autor anotou: Arcanista do Axioma). A planilha bloqueia o xlsx, mas o CSV do Google (gviz) abre: entra no workflow diário.
• Azir mid: 55 matchups dos slides de Azir do Eleyte e do Lord Laki (season 11, 2021): dificuldade e dicas de rota, com as dicas de jogo agressivo (rosa nos slides) numa seção à parte. As runas e os itens de cada matchup são da era dos itens míticos e ficam de fora (decisão do dono); no quadro de setup aparece só a dificuldade. Página Geral: sobre o campeão, dicas gerais e o estilo agressivo.

Um guia pode ser escondido com "oculto": true em src/guias.json (os dados continuam no repositório).

Português e inglês

• O botão PT/EN no topo troca a língua do site inteiro e fica salvo no navegador. Na primeira visita vale a língua do navegador.
• As notas do Akshan em inglês ficam em src/guias/akshan/traducao_en.json (linhas: cada linha da planilha → tradução; celulas: nomes de runas e itens das colunas de setup).
• Quando o Peteruso muda uma linha, ela aparece em português no modo EN até ganhar tradução. python scripts/atualizar_akshan.py lista essas linhas.
• Os guias escritos em inglês (Mordekaiser, Illaoi) têm o caminho inverso em src/guias/<guia>/traducao_pt.json: textos (cada frase da planilha → português, inclusive cooldowns e páginas), nomes (ícone → nome do item ou runa no cliente em português) e titulos_en (título de cada campeão em inglês). python scripts/traducao_pt.py atualiza os nomes e os títulos e diz quantas frases estão sem tradução; com --faltando lista quais. Frase nova aparece em inglês no modo PT até ganhar tradução.

Como navegar

• Seleção de guia: na primeira visita (sem guia salvo e sem link de guia) o site abre numa tela no layout e nas cores da seleção de campeões do cliente do LoL: seu time à esquerda, a grade com ícones de posição e busca no meio, as cinco matchups mais difíceis do campeão marcado à direita (tocar numa já abre a matchup), a splash dele na tela toda e o Confirmar, que toca o som e a fala do campeão. Depois ela volta tocando no campeão do topo.
• Teclado: / vai para a busca; ← → trocam para o matchup anterior/próximo; ↑ ↓ andam uma linha na grade de campeões (no celular, um campeão).
• O site sempre abre no último guia usado (fica salvo no navegador).
• Cada guia e cada matchup tem link próprio: index.html#mordekaiser, index.html#mordekaiser/aatrox. Links antigos do Akshan (#ahri) continuam funcionando.

Arquivos

• src/template.html: HTML, CSS e JS do site. É aqui que se edita. Os marcadores /*FONTS*/ e /*GUIAS*/ recebem as fontes e os dados.
• src/guias.json: a lista de guias (ordem do menu, autor, créditos, formato e pasta dos dados). acompanhe lista os canais do bloco "Acompanhe mono …" embaixo da lista de campeões (nome, link e o texto do canal).
• src/guias/akshan/: rows.js no formato [campeão, runa, secundária, feitiço, bota, build, lembrete, noGuia(1/0)], meta.json com ids, títulos (pt e en), ícones e mira (ponto do splash, em % de largura e altura, onde fica o centro da mira do card; escolhido à mão para pegar rosto + corpo. Campeão novo sem mira usa 50, 38), e traducao_en.json.
• scripts/atualizar_akshan.py: baixa a planilha do Peteruso para a cópia embutida (a que aparece sem internet), lê os ícones de cada célula, acrescenta campeões novos e lista linhas sem tradução. Depois rode o build.
• .github/workflows/atualizar-planilha.yml: o GitHub roda o atualizar_akshan.py e o build todo dia às 6h (horário de Brasília) e faz o commit se a planilha mudou; a Vercel publica sozinha. Dá para rodar na hora pela aba Actions do GitHub. Tradução de linha nova continua sendo à mão (até lá ela aparece em português no modo EN).
• scripts/icones_planilha.py e src/guias/akshan/icones_planilha.json: a dificuldade de cada matchup é a cor da célula do campeão na planilha (classificação do Peteruso: vermelho escuro muito difícil, vermelho claro difícil, amarelo médio, verde fácil, ciano muito fácil) e aparece na borda do retrato, nos filtros e no card do inimigo. Os ícones de runa, secundária, bota e build saem das imagens coladas na planilha (só vêm no xlsx; o CSV traz só o texto). Cada imagem é reconhecida pelo md5 em meta.json > imagens e vira uma peça de meta.json > pecas (nome em pt e en). Se o Peteruso mudar o texto de uma célula, o site usa texto_pecas até a próxima leitura; imagem nova aparece na saída do script para cadastrar.
• src/guias/mordekaiser/: planilha.csv (cópia da planilha) e matchups.json (a planilha separada em runas, itens, dificuldade e seções).
• src/fonts/: Cinzel e Hanken Grotesk (subconjunto latino), embutidas no HTML pelo build.
• modelo/akshan.glb: o Akshan 3D do jogo (malha, esqueleto, texturas e as animações de idle, dança, provocação, risada, ataque e recall). Aparece numa coluna à direita só em tela de 1720 px ou mais, no guia do Akshan e no site publicado. Arrastar gira, clique faz uma emote e os botões embaixo tocam cada animação (sequências em no template). O X no canto da caixa esconde a coluna e centraliza tudo; escondido, uma alça na borda direita traz de volta (vem ligado; fica salvo no navegador). O three.js vem do jsDelivr e só é baixado nesse caso.

App da seleção de campeões (Windows)

app/ tem um programa de bandeja para Windows: quando o jogador trava um campeão que tem guia no site (lista em guias-app.json), ele adivinha o inimigo da mesma rota (entre os inimigos que estão no guia, o que mais joga nela) e mostra o guia numa janela própria, direto na matchup (#<guia>/<slug>). A janela some quando a partida começa. Pela API local do cliente, lê a seleção e grava a página de runas e o conjunto de itens da matchup (como o Porofessor; dá para desligar no menu); nunca escolhe, bane nem aceita fila. Inicia com o Windows (dá para desligar no menu da bandeja).

• Download: releases do GitHub (AkshanMatchups.exe, um arquivo só, não precisa de Python). O botão "App para PC" fica no card "Acompanhe" de todos os guias, só no desktop (APP_URL no template aponta para a release mais nova).
• Código, testes e como gerar o .exe: app/README.md (python app/gerar_exe.py; testes com python -m unittest app/test_akshan_app.py).
• A pasta app/ não vai para a Vercel (.vercelignore).

Adicionar um guia novo

1. Coloque os dados em src/guias/<campeão>/. Planilhas no formato do Akshan usam "formato": "simples"; planilhas grandes como a do Meowdekaiser usam "formato": "completo" com um matchups.json (copie o atualizar_mordekaiser.py e ajuste as colunas).
2. Acrescente o guia em src/guias.json.
3. Se quiser uma paleta própria, crie o bloco :root[data-guia="<id>"] (e o do tema claro) no src/template.html, como o do Mordekaiser.
4. Rode python scripts/build.py.

Regras

1. Nunca edite o index.html direto: ele é gerado.
2. Não mude o texto das notas das planilhas; só a forma de mostrar.
3. Precisa funcionar com dois cliques (file://), sem npm nem framework.
4. Celular primeiro: teste a 390 px e a 1440 px. A página nunca pode rolar para o lado.
5. Mantenha o aviso de site de fã, sem ligação com a Riot, e o crédito de cada planilha.

As imagens de campeões, runas, feitiços e itens vêm do Data Dragon da Riot (precisa de internet). Se uma falhar, o site esconde a imagem e mostra a inicial do campeão na lista. Os sons tocam no Chrome, Edge, Firefox e Android; Safari antigo pode ficar sem som (os arquivos são Ogg Vorbis).