Ache o seu peão: maiores, e ainda cabem seis por casa
Os peões do tabuleiro tinham 15 pixels e se perdiam de vista. Agora são uma vez e meia maiores — e se empilham ao longo da casa em vez de transbordar dela.
Em palavras simples
Os pontos coloridos que circulam pelo tabuleiro tinham 15 pixels de largura. No celular, com outros cinco jogadores no mesmo tabuleiro, achar o seu dava trabalho de verdade — e saber onde você está é a coisa mais básica que um jogo de tabuleiro pede da sua tela.
Agora eles têm 23 pixels, cerca de uma vez e meia maiores, com o anel branco, o halo do jogador da vez e a animação do salto ampliados na mesma proporção. Nada mais mudou no tabuleiro: as mesmas cores, as mesmas casas, o mesmo layout.
Para os mais técnicos
A mudança de tamanho coube num único componente: diâmetro, espessura do anel e halo derivam do mesmo token, e o arco do salto subiu na mesma medida. A folha de estilos compilada confirma que o valor antigo sumiu, e não que foi apenas sobrescrito.
A correção de layout foi a metade interessante. Os peões eram dispostos como uma linha flex horizontal — certo para um peão, errado para quatro: nas casas estreitas de cima e de baixo, e no canto, que pode receber os seis, eles simplesmente vazavam para fora da borda, e o fluxo flex ainda dobrava o deslocamento que deveria abri-los em leque.
// Board.tsx — absolute-centred, offset along the cell's LONG axis
const offset = (i - (count - 1) / 2) * STACK_STEP;
const style = vertical
? { transform: `translate(-50%, calc(-50% + ${offset}px))` } // top/bottom + corners
: { transform: `translate(calc(-50% + ${offset}px), -50%)` }; // left/right columnsVerificar isso exigia um navegador, não um teste: o layout foi renderizado nas dimensões reais das casas para cada quantidade de dois a seis e para cada orientação, e inspecionado em busca de cortes. Foi assim também que o transbordamento original apareceu — ele é invisível em qualquer teste unitário, porque nada nele está errado até ser pintado.