#37 ディーラーの Chip を表示する:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、画面に勝敗を表示しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・ディーラーの Chip を画面に表示する
実装の前に
・Chip は、Material-UI のコンポーネントだよ!
・以下の場合のみ、ディーラーの Chip を表示しよう!
1. ディーラーがバーストしたとき
2. ディーラーのハンドがブラックジャックだったとき
今回の設計書
src/components/PlayArea.js
ディーラー用チップ取得
// function getDealersChip() を見つけてください
-----
1. ディーラーのハンドがブラックジャックのとき
1.1 以下のコンポーネントを返却する
<Chip label="BLACK JACK!!" className={classes.winOrLose} />
2. ディーラーがバーストしたとき
2.1 以下のコンポーネントを返却する
<Chip label="BUSTED!!" className={classes.winOrLose} />
3. それ以外
3.1 null を返却する
ヒント
・「ブラックジャック判定」は、BlackJackUtils.js の処理を使おう!
・「バーストしたとき」は「ハンドの合計が 21 を超えたとき」のことだよ!
実装例
ディーラーの Chip は表示できましたか?
Material-UI のような CSS フレームワークを使うと、このようにサクッといい感じの UI を作れます。
他にも色々なものがあるので、色々使ってみましょう!
次回
次回は、カードが少なくなったらシャッフルする処理を実装します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。