#34 勝敗を表示する①:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、ディーラーのスコアを表示しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・勝敗を表示する Chip を実装する
実装の前に
・「Chip」は Material-UI のコンポーネントだよ!
・タグとかアバターで使われているのを見かけるよ!
今回の設計書
src/components/PlayArea.js
プレイヤー用チップ取得
// function getPlayersChip() を見つけてください
-----
1. プレイヤーがバーストしたとき
1.1 以下のコンポーネントを返却する
<Chip label="BUSTED!!" className={classes.winOrLose} />
2. props.isPlayersTurnEnd が true のとき
2.1 以下のコンポーネントを返却する
<Chip label="" className={classes.winOrLose} />
2.2 「 2.1 」で返却する Chip の label 属性に、以下の関数を設定する
BlackJackUtils.judge(dealersHand, playersHand)
3. それ以外
3.1 null を返却する
ヒント
・「バーストしたとき」は「スコアが 21 を超えたとき」のことだよ!
・プレイヤーとディーラーのハンドは props で渡されてくるよ!
実装例
Chip の実装はできましたか?
プレイヤーがバーストしたとき、「BUSTED!!」と画面に表示されると思います!
次回
次回は、judge(dealersHand, playersHand) を実装します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。