Single Play機制

昨天完成判斷勝負功能之後，我們剩下最後一個功能，就是讓玩家可以跟電腦對弈，回憶一下 Day03 的時候，我們有設計一個 isSinglePlay 的參數來幫助我們切換目前是跟電腦對弈，還是兩個玩家對戰。因為是兩種模式的切換，所以我想要使用 Toggle Switch Button。關於 Toggle Switch 以及 Checkbox 的使用時機，下面有一篇不錯的文章跟大家分享，會想要選擇使用 Toggle Switch 是因為下面文章的建議

• Use Toggle switch when user is toggling independent features or behaviors.
• A single selection is required and you want to offer two options for an on/off type of decision.
  Checkbox vs Toggle Switch

這邊是我自己刻的 Toggle Switch ，完整程式碼可以參考我的 github ，這邊簡單說明我的作法。
我傳入兩個參數給 Toggle Switch ，一個是 isSinglePlay ，按照 isSinglePlay 是 true 或是 false ，會呈現不同的樣式。

另外一個參數是 handleOnToggleSwitchClick ，這是一個函數，當 Toggle Switch 被點擊的時候，會透過這個函數來切換 isSinglePlay ，如果我透過這個函數取得的當下狀態是 true 就把 isSinglePlay 切換成 false ，反之切換成 true。得到 isSinglePlay 當下的值的原理跟 Day05 說明的事件處理是一樣的。

有了 Toggle Switch 之後，接下來要實作電腦下棋的功能，記得在 Day07 的時候，我們有提到 redux-observable 的 Epic 這個函數，我希望在每次判斷完勝負之後，檢查 isSinglePlay 這個參數是否為 true ，若為 true ，則讓電腦成為叉叉的角色，也就是 currentRole 要轉換成 -1 ，當電腦判斷目前的模式是 isSinglePlay 為 true ，而且當前的角色是叉叉，就會透過電腦的演算法來挑選一個 block id ，這個 block id 是還沒有被下過棋的，然後把這個 block的owner 設為 -1 ，也就是叉叉，然後再把 currentRole 換回 1 ，也就是圈圈，讓玩家來下棋，整個流程大概是這樣。

另外一方面，我有多做一件事情，就是我允許下棋下到一半，不用重新開始遊戲，就可以切換成電腦自動下棋，或是切換成兩人對戰遊戲。我的做法是，在我們的 Toggle Switch 被按下去的時候，會發送一個 type 為 SET_IS_SINGLE_PLAYER 來切換 isSinglePlay 參數之外，同時 Epic 函數 setOnPlayModeToggle 也會監聽這個 action，然後就會執行勝負判斷，電腦自動下棋的流程。

然後下棋的演算法我寫在這邊，目前是用很笨的隨機挑選格子下棋演算法

到目前為止我們已經完成了讓電腦自動下棋的功能，未來如果要讓電腦下棋的策略變得更聰明，直接修改 getBlockId() 的內容就可以了。

Tic Tac Toe最終成果

到這邊，我們已經把這次我們想要伸縮自如的圈圈叉叉遊戲所有功能都完成啦！
下面來demo一下我們這 10 天來辛苦的的成果！

Tic Tac Toe - Github

明天之後會進入下一個階段開始一個新的遊戲！