Найдите свою фишку: крупнее, но вшестером всё ещё помещаются в клетку
Фишки на поле были шириной 15 пикселей, и потерять свою было легко. Теперь они в полтора раза больше — и складываются вдоль клетки, а не вываливаются из неё.
Простыми словами
Цветные точки, которые двигаются по полю, были шириной 15 пикселей. На телефоне, когда на том же поле ещё пять игроков, найти свою стоило заметных усилий, — а понимать, где ты находишься, это самое базовое, чего настольная игра требует от своего экрана.
Теперь они 23 пикселя, примерно в полтора раза больше, вместе с белым кольцом, ореолом активного игрока и анимацией прыжка, увеличенными в той же пропорции. Больше на поле ничего не изменилось: те же цвета, те же клетки, та же раскладка.
Для тех, кому интересны детали
Изменение размера уместилось в один компонент: диаметр, толщина кольца и ореол выводятся из одного токена, а дуга прыжка поднята соответственно. Скомпилированные стили подтверждают, что старое значение исчезло, а не просто перекрыто.
Интереснее оказалась вторая половина — раскладка. Фишки выкладывались горизонтальным flex-рядом: для одной это нормально, для четырёх — нет. На узких верхних и нижних клетках, а также в углу, который может держать все шесть, они попросту вылезали за край, а flex-поток ещё и удваивал смещение, которым их пытались развести веером.
// 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 columnsДля проверки нужен был браузер, а не тест: раскладку отрисовали в реальных размерах клеток для каждого количества от двух до шести и для каждой ориентации клетки, а затем проверили на обрезание. Так же нашлось и исходное переполнение — в юнит-тесте оно невидимо, потому что до отрисовки в нём ничего не выглядит неправильным.