Tìm ra quân của bạn: to hơn mà vẫn đủ chỗ cho sáu quân một ô
Quân cờ trên bàn chỉ rộng 15 pixel và rất dễ lạc mất. Giờ chúng lớn hơn khoảng một nửa — và xếp chồng dọc theo ô thay vì tràn ra ngoài.
Nói đơn giản
Những chấm màu di chuyển quanh bàn cờ chỉ rộng 15 pixel. Trên điện thoại, khi có thêm năm người chơi khác trên cùng bàn cờ, việc tìm ra quân của mình thực sự tốn công — trong khi biết mình đang ở đâu là điều cơ bản nhất mà một trò chơi cờ bàn đòi hỏi ở màn hình của nó.
Nay chúng rộng 23 pixel, lớn hơn khoảng một nửa, cùng với vòng viền trắng, quầng sáng của người đang tới lượt và hiệu ứng nhảy đều được phóng theo cùng tỷ lệ. Không có gì khác trên bàn cờ thay đổi: vẫn màu ấy, ô ấy, bố cục ấy.
Cho người thích chi tiết kỹ thuật
Thay đổi kích thước gói gọn trong một thành phần: đường kính, độ dày vòng viền và quầng sáng đều bắt nguồn từ cùng một token, còn vòng cung nhảy được nâng lên tương ứng. Bảng định kiểu sau khi biên dịch xác nhận giá trị cũ đã biến mất chứ không chỉ bị ghi đè.
Nửa thú vị nằm ở phần sửa bố cục. Các quân cờ vốn được xếp thành một hàng flex nằm ngang — ổn với một quân, sai với bốn quân: ở các ô hẹp phía trên và phía dưới — và ở ô góc vốn có thể chứa cả sáu quân — chúng đơn giản là tràn ra khỏi mép, còn luồng flex lại nhân đôi độ lệch lẽ ra dùng để xòe chúng ra.
// 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 columnsViệc kiểm chứng cần một trình duyệt chứ không phải một bài kiểm thử: bố cục được kết xuất ở đúng kích thước ô thật cho mọi số lượng từ hai đến sáu và cho từng hướng ô, rồi soi xem có bị cắt xén không. Lỗi tràn ban đầu cũng được phát hiện đúng theo cách đó — nó vô hình trong mọi bài kiểm thử đơn vị, bởi chẳng có gì sai cho tới khi nó được vẽ ra.