Q: 如何畫出五子棋棋盤？
在寫圈圈叉叉的時候每個格子都是一個 div 元素。但現在要畫在線上，沒想法。
參考了 Jason 同學的作品。先產生正常的 19 x 19 的棋盤。每個格子都是一個元素。這個狀態跟圈圈叉叉一樣。但之後會在每個格子元素下，再多一個子元素。子元素會偏移。
Q: onClick 要掛在誰身上？
應該是會偏移的子元素，因為點框框本身不會有反應。要點在交叉點上。
Q: 怎麼存棋盤資料？裡面的資料長什麼樣子？
用二維陣列去存棋盤資料。
我本來以為裡面可能是一個物件。{position: [x, y],color:null} 裡面會存棋的位置和有沒有被下。有被下話變成{color: black || white} 。但後來發覺好像不需要 position ，因為陣列裡面的 index 就等於他們的位置了。
Q: React 是改變資料從而渲染畫面，那要怎麼下棋（點擊）時改變對應的資料？
我本來想一開始應該是一個二維的空陣列，被點擊的元素回傳自己的座標位置，並改變二維陣列。
同學的做法更好：會把舊的二維陣列拷貝一份。點擊時產生的座標分為 x, y。並用 useState 監控。為什麼要隨時監控 x, y 的值？為了判斷勝利條件。每一次下一步棋就會去檢查那步棋有沒有達成勝利條件。
如果不這樣存的話，就變成檢查勝利條件時，要整張棋盤都檢查。所以記下現在的座標應該是比較好的方法。
另外是關於把舊得陣列拷貝一份。我本來是想直接修改資料。方法就用 .map 遍歷所有子元素，把符合 id 的元素改成對應棋子。但這樣寫起來不會比直接拷貝一份簡潔，而且資料裡面沒存位置的話這就行不通。以 Jason 同學的棋盤為例，二維陣列裡面只存字串，像是 "black" 代表顏色。
更新：關於把舊得陣列拷貝一份，原來是老師的提示。
