#38 デッキをシャッフルする①：React でプロプラ！ Vol.3 「BlackJack」

「React.js でプログラミング・プラモデル」の連載第３弾。
React.js で、カジノゲーム「BlackJack」を作ろう！

これまで

前回は、ディーラーの Chip を実装しました。

現時点の Sandbox

前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。

BlackJack #37 - CodeSandbox

今回のゴール

・デッキの枚数が少なくなったら、reducer() にディスパッチする

実装の前に

・デッキの枚数が少なくなったときにカードを切り直すことを「シャッフル」というよ！
・デッキのカードを 80% 引いたらシャッフルするよ！

※参考

今回の設計書

src/BlackJack.js

BlackJack コンポーネント
// コメントで「シャッフルタイム」
// と書かれている useEffect() を見つけてください
-----
1. デッキの枚数が最少枚数以下になったとき
 1.1 reducer() に以下のオブジェクトを引数で渡してディスパッチする
     { type: "shuffle" }
 1.2 関数 toast() に、以下の引数を渡して呼び出す
   第一引数："Shuffled!!"
   第二引数：style: {
		     borderRadius: "10px",
		     background: "#737373",
		     color: "#ffffff"
		   }
2. useEffect() の第二引数の配列に、以下の state をセットする
 - state.deck
 - state.minimumNumber

ヒント

・デッキの最少枚数は、state.minimumNumber で定義しているよ！

実装例

BlackJack #38 - CodeSandbox

reducer() にディスパッチできましたか？
動作確認する場合は、デッキの枚数をコンソールに出力してみましょう。
デッキの枚数が 32枚以下になったときに、「Shuffled!!」とトーストが出力されればオッケーです！

// シャッフルタイム
useEffect(() => {
 console.log(state.deck.length);
 // 今回実装した処理

次回

まだ reducer() にディスパッチしただけなので、デッキはまだシャッフルされていません。
次回は、実際にシャッフルする処理を実装します！