![見出し画像](https://assets.st-note.com/production/uploads/images/53730928/rectangle_large_type_2_d63f5805e8bac5d95ea4a76eca3d9b8f.jpeg?width=1200)
#38 デッキをシャッフルする①:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、ディーラーの Chip を実装しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・デッキの枚数が少なくなったら、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 で定義しているよ!
実装例
reducer() にディスパッチできましたか?
動作確認する場合は、デッキの枚数をコンソールに出力してみましょう。
デッキの枚数が 32枚以下になったときに、「Shuffled!!」とトーストが出力されればオッケーです!
// シャッフルタイム
useEffect(() => {
console.log(state.deck.length);
// 今回実装した処理
次回
まだ reducer() にディスパッチしただけなので、デッキはまだシャッフルされていません。
次回は、実際にシャッフルする処理を実装します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。