Encuentra tu ficha: más grandes y aun así caben seis por casilla
Las fichas del tablero medían 15 píxeles y se perdían de vista. Ahora son la mitad más grandes, y se apilan a lo largo de la casilla en vez de desbordarla.
En palabras sencillas
Los puntos de color que recorren el tablero medían 15 píxeles. En un móvil, con otros cinco jugadores en el mismo tablero, encontrar el tuyo costaba de verdad, y saber dónde estás es lo más básico que un juego de mesa le pide a su pantalla.
Ahora miden 23 píxeles, alrededor de la mitad más, con el anillo blanco, el halo del jugador activo y la animación de salto escalados en la misma proporción. Nada más del tablero cambió: mismos colores, mismas casillas, mismo diseño.
Para los más técnicos
El cambio de tamaño fue un solo componente: diámetro, grosor del anillo y halo derivan de un mismo token, y el arco del salto se elevó en consecuencia. La hoja de estilos compilada confirma que el valor antiguo desapareció, no que simplemente esté sobrescrito.
El arreglo de la disposición fue la mitad interesante. Las fichas se colocaban como una fila flex horizontal, algo correcto para una ficha y equivocado para cuatro: en las casillas estrechas de arriba y abajo —y en la esquina, que puede albergar las seis— simplemente se salían del borde, y el flujo flex duplicaba el desplazamiento que debía abrirlas en abanico.
// 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 columnsComprobarlo requería un navegador y no una prueba: se renderizó la disposición con las dimensiones reales de las casillas para cada cantidad de dos a seis y para cada orientación, y se revisó que no hubiera recortes. Así se encontró también el desbordamiento original: es invisible en cualquier prueba unitaria, porque nada en él está mal hasta que se pinta.