#14 【React.jsで、BlackJackを作る】：全体的な処理の点検

これまで

前回は、スコアの表示を見直して、勝敗を表示するようにしました。

BlackJack アプリの sandbox

BlackJack アプリの sandbox は以下です。

BlackJack - CodeSandbox

この sandbox は、連載が進むのと同時に更新されていきます。
「私も作りたい！」という方は、フォークして一緒に作り始めることができます。

はじめから作りたい方はこちら

#16 after - CodeSandbox

主にスコア計算周りを見直しました

画面表示も一部見直しましたが、今回はスコア計算周りの修正が主でした。

src/components/PlayArea.js

コンポーネントを返却するリターン文を見つけてください。
プレイヤーのスコアを吹き出しで表示している箇所は、元々以下のコードでした。

<Box className="arrow_box_common arrow_box_player">
       {BJUtilities.getTotal(props.playersHand)}
       {BJUtilities.isSoftHand(props.playersHand) &&
         ` | ${BJUtilities.getTotal(props.playersHand) + 10}`}
</Box>

修正後はこちらです。
初期表示のときにハンドが空の配列で渡されてくるため、「ハンドが空でなければ関数 getScoreForDisplay(hand) を呼び出す」ようにしました。

<Box className="arrow_box_common arrow_box_player" mt="20px">
 {props.playersHand.length !== 0 &&
   BJUtilities.getScoreForDisplay(props.playersHand)}
</Box>

関数 getScoreForDisplay(hand)

実装は以下のようになっています。
関数 getScore(hand) から返却された値に従って、ソフトハンドであればランクを「 | 」で区切って表示するようにしています。

export function getScoreForDisplay(hand) {
 let score = getScore(hand);
 if (isSoftHand(hand)) {
   return `${score[0]} | ${score[1]}`;
 }
 return score[0];
}

ディーラーのスコアは別に用意していた関数 getScoreForDealer(hand) を使用していましたが、わざわざ分ける必要もないかなと思ったのでまとめました。

<Box
 className="arrow_box_common arrow_box_dealer"
 visibility={props.isTurnEnd ? "visible" : "hidden"}
>
 {props.dealersHand.length !== 0 &&
   BJUtilities.getScoreForDisplay(props.dealersHand)}
</Box>

関数 getScore(hand)

では、関数 getScore(hand) の実装も見てみましょう。

export function getScore(hand) {
 if (isBlackJack(hand)) {
   return [21];
 }
 if (isSoftHand(hand)) {
   return [getTotal(hand), getTotal(hand) + 10];
 }
 return [getTotal(hand)];
}

関数 getScore(hand) からは配列を返すようにしています。
ソフトハンドのときは + 10 した値をプッシュして返却しています。

現在の画面

今回の修正で、画面は以下のようになりました。

詳しい変更はこちら

Codesandbox は GitHub連携ができます。
以下は今回のコミットによる差分です。

#14 揃 hakolab/blackjack@5803139

次回

これで一通りゲームができるようになりましたね。

次回は最終回を予定しています。
カードが無くなると例外が起きてしまうので、カードが少なくなったらデッキをシャッフルする処理を実装します。