#33 ディーラーのスコアを表示する:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、プレイヤーのスコアを表示しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・ディーラーのスコアを画面に表示する
実装の前に
プレイヤーのターンが終わるまで、ディーラーの2枚目のカードは伏せられています。
なので、ディーラーのスコアは「プレイヤーのターンが終わってから」表示します!
今回の設計書
src/components/PlayArea.js
プレイエリアコンポーネント
// JSX内のコメントで
// {/* Task 1 */} を見つけてください。
-----
■表示条件の設定
1. 親要素(Box)の visibility 属性に以下の式を設定する
props.isPlayersTurnEnd が true のとき "visible"、false のとき "hidden"
■処理詳細
1. props.dealersHand.length が 2 以上のとき
1.1 ディーラーのスコアを表示する
ヒント
・属性に式を設定するときは { } で囲むよ!
・if 文は文なので式としては使えないよ!そんなときは三項演算子で書こう!
実装例
ディーラーのスコアは表示できましたか?
条件付きレンダーは、いろんな表示をするときに便利なのでぜひ身につけておきましょう!
次回
次回から複数回に分けて、勝敗を表示します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。