#37 ディーラーの Chip を表示する：React でプロプラ！ Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第３弾。
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 を作れます。
他にも色々なものがあるので、色々使ってみましょう！
次回
次回は、カードが少なくなったらシャッフルする処理を実装します！
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします！ より良い記事をお届けできるよう、活動費に充てさせていただきます。