#32 ハンドのスコアを表示する④：React でプロプラ！ Vol.3 「BlackJack」

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

これまで

前回は、ハンドに Ace が含まれているかを判定しました。

現時点の Sandbox

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

BlackJack #31 - CodeSandbox

今回のゴール

・プレイヤーのスコアを画面に表示する

今回の設計書

src/components/PlayArea.js

プレイエリアコンポーネント
// JSX内のコメントで
// {/* Task 4 */} を見つけてください。
-----
1. コメント {/* Task 4 */} を以下の処理で置き換える
 props.playersHand.length が 2 以上であれば、ハンドのスコアを表示する

ヒント

・React の条件つきレンダーという技術が必要だよ！

条件付きレンダー – React

実装例

BlackJack #32 - CodeSandbox

プレイヤーのスコアは表示できましたか？
ソフトハンドのときに「3 | 13」のように表示されるか確認してみましょう！

次回

次回は、ディーラーのスコアを画面に表示します！