#34 勝敗を表示する①：React でプロプラ！ Vol.3 「BlackJack」

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

これまで

前回は、ディーラーのスコアを表示しました。

現時点の Sandbox

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

BlackJack #33 - CodeSandbox

今回のゴール

・勝敗を表示する Chip を実装する

実装の前に

・「Chip」は Material-UI のコンポーネントだよ！
・タグとかアバターで使われているのを見かけるよ！

React Chip component - 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 で渡されてくるよ！

実装例

BlackJack #34 - CodeSandbox

Chip の実装はできましたか？
プレイヤーがバーストしたとき、「BUSTED!!」と画面に表示されると思います！

次回

次回は、judge(dealersHand, playersHand) を実装します！