在 Day05 我們已經把該有的事件都做得差不多了，接下來我們希望把圈圈元件和叉叉元件加上去，讓我們點擊下去的時候，1會顯示圈圈，-1會顯示叉叉。

這邊先講一下我的想法再開始實作。要顯示出圖案，最簡單的做法就是把英文字母O和X當作圈圈叉叉，但是這樣字體改變的時候，顯示出來的樣式就會改變。

第二個我想分享的方法，是使用 Font Awesome。對工程師來說，在網頁加入一些小 icon 會造成一些額外的困擾，例如我們找到的圈圈和叉叉圖片風格會不一樣，造成美觀上的落差。此外，因為所有的icon是使用圖示顯示，所以可能會增加網站流量，嚴重可能會造成網站變慢，而且因為是圖片的關係，放大縮小的時候容易失真。

Font Awesome 提供的服務，幫我們把圖示 icon 都製作成文字的字型，然後再透過 CSS 去呼叫圖示 icon 出來，裡面的 icon 相當豐富，使用上很簡單方便。所以我們要使用圈圈叉叉的圖示，裡面也有提供。

Font Awesome
react-fontawesome

雖然 Font Awesome 很方便，我也很常用，但是其實我還是不滿足，因為我希望我們伸縮自如的圈圈叉叉遊戲是個很吸睛，很潮，很炫炮的遊戲，所以我私心希望我的圈圈和叉叉符號可以做更多的變化。未來，我希望我的圈圈和叉叉看起來有活著的感覺，不是死板板的躺在那裡，就像 RPG遊戲裡面的 NPC，他不會死板板的站在那裡等你來跟他說話，你不跟他互動的時候，NPC也會在那邊左搖右晃，做自己想做的事。

我希望我的圈圈和叉叉，很像動物園裡的動物，或是家裡的貓咪狗狗，平常沒事的時候，他可以自己在那邊晃來晃去，旋轉啊，變形啊，抖一抖，跳一跳啊，獲勝的時候還會很興奮地跳起來歡呼，好像是個活生生的可愛小動物，這樣我們的圈圈叉叉就會很有生命力，過年回家拿給小朋友玩的時候，他們會覺得很驚艷，用很崇拜的眼光看你，玩你做的遊戲玩得津津有味，就算你不包紅包給他，他也可以開心的過一個好年，這就是我們的目標。

為了讓這個目標得以實現，我想要自己用 html 和 css 客製出圈圈和叉叉，這樣我們可以控制圈圈叉叉的粗細，形狀，行為，甚至叉叉的兩條直線我們也可以分別控制，今天我們會製作完圈圈叉叉的棋子，之後讓他動來動去的動畫，大家可以按照自己的心意添加。

製作圈圈元件

因為他們是獨立的元件，所以我把它們放在components資料夾內，分別新增Circle和Cross，首先我們來製作Circle。

這邊我分享我的方法，核心的概念就是我需要一個長寬一樣的 div，然後讓 border-radius 屬性是100%，這樣就可以變成一個圓形的圈圈。

然後有一個要注意的地方是 border 的寬度，如果 border 的寬度是一個定值的話，當圈圈大小隨著棋盤的 gameScale 改變的時候，border 看起來就會很不成比例，例如小的圈圈 border 看起來很粗，或是大的圈圈 border 看起來很細。

所以這邊我的做法會跟 Day04 我們在調整棋盤方格的間距的時候一樣，我希望 border 的寬度可以隨著 gameScale 的調整而變粗或變細。

styled-components - Theming

然後這邊我想要補充一下 styled-components 的進階用法，styled-components 除了允許我們可以把變數透過props 的方式傳進去，根據 props 來做相對應的樣式改變之外，我們還能為 styled-components 訂製主題，所以元件就能根據我們定義的主題樣式做改變，而不用為了改變不同的樣式，傳了很多不同的 props 進來，然後在裡面寫了很多條件判斷式，導致狀況越多，裡面條件判斷式就越複雜。
Advanced Usage - Theming

製作叉叉元件

接下來我要分享叉叉的做法，叉叉可以分解成兩個元素構成的，兩條線交叉，所以一條線可以是一個 div tag，但是這邊我不想要寫兩個 div tag，我只想要用一個 div tag，然後搭配 CSS 偽元素 ( before 與 after )來達到這件事。
CSS 偽元素 ( before 與 after )

同樣的，叉叉的粗細跟 gameScale 有關，所以這邊 border 的做法跟圈圈是一樣的。另一方面，由於交叉的兩條線，基本上他的樣式是相同的，唯一的差別是他們旋轉角度不同，所以一條線是左上右下，另一條線是右上左下。但是這邊我不想要重複寫相同的 css 樣式，為了讓程式更好維護，同樣的東西只寫一次，styled-components 允許我們在裡面寫類似 SASS mixin 的語法，我的作法如下，提供給大家參考。

製作資訊看板 - InfoBoard

接下來我們要快速地用兩句話來實做我們的 InfoBoard，也就是目前輪到誰下棋，就顯示什麼符號。所以按照我們的定義，使用者 currentRole 是 1 的，我們就給他圈圈，currentRole 是 -1 的，我們就給他叉叉。大家按照自己的心意調整 style 就可以了，我的作法如下，提供給大家參考。

今日成果

最後demo一下今天辛苦的成果

Tic Tac Toe - Github