設計
一眼找到自己的棋子:更大,卻仍能六個共處一格
棋盤上的棋子原本只有 15 畫素寬,很容易看丟。現在它們大了約一半——而且會沿著格子排開,而不是溢位格外。

通俗版
在棋盤上移動的彩色圓點原本只有 15 畫素寬。在手機上,當同一張棋盤還有另外五名玩家時,找到自己的棋子要費一番功夫——而知道自己在哪,是一款棋盤遊戲對其畫面最基本的要求。
現在它們是 23 畫素,約大了一半,白色描邊、當前玩家光暈和跳躍動畫也按同樣比例放大。棋盤的其他部分毫無變化:同樣的顏色、同樣的格子、同樣的佈局。

更大的棋子讓第二個問題變得顯眼:多名玩家同處一格。現在它們會沿著格子的長邊像扇形排開的硬幣一樣疊壓,因此即便六個棋子同在起點角,也仍待在格內。
技術細節
尺寸改動只涉及一個元件:直徑、描邊寬度和光暈都由同一個設計變數推導而來,跳躍弧線也相應抬高。編譯後的樣式表可以確認舊值確實消失了,而不只是被覆蓋。
佈局修復才是有意思的那一半。棋子原本以水平 flex 行排列,這對一個棋子沒問題,對四個就不對了:在狹窄的上下格——以及可能容納全部六個棋子的角格——它們乾脆溢位邊界,而 flex 的排布方式還把本應讓它們呈扇形展開的偏移量放大了一倍。
tsx
// 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驗證它需要的是瀏覽器而不是測試:按真實格子尺寸,把從兩個到六個的每種數量、每種格子朝向都渲染一遍,檢查有沒有被裁切。最初的溢位問題也正是這樣發現的——它在任何單元測試裡都不可見,因為在被繪製出來之前,一切看起來都沒有錯。
