#13 【React.jsで、BlackJackを作る】：スコア表示の見直し、勝敗を表示する

これまで

前回は、プレイヤーが STAND したときの処理など、細かい部分を調整しました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

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

#16 after - CodeSandbox

スコアの表示の見直し

プレイヤーのスコア表示に、Material-UI の Tooltip を使用していますが、React の StrictMode でこれを使用すると警告が出ます。
Tooltip はやめて、今回は以下のサイトを使用させて頂きました。
ありがとうございます！

吹き出しデザインジェネレーター

ディーラーとプレイヤー両方に吹き出しを出しています。
吹き出しの三角が上下逆に出るように調整しています。

.arrow_box_common {
 position: relative;
 background: #005f9e;
 padding: 0px;
 text-align: center;
 color: #ffffff;
 border-radius: 10px;
}
.arrow_box_common:after {
 border: solid transparent;
 content: "";
 height: 0;
 width: 0;
 pointer-events: none;
 position: absolute;
 border-color: rgba(0, 95, 158, 0);
 border-top-width: 10px;
 border-bottom-width: 10px;
 border-left-width: 10px;
 border-right-width: 10px;
 margin-left: -10px;
}
.arrow_box_player {
 font-size: 1em;
 width: 80px;
 height: 40px;
 line-height: 40px;
}
.arrow_box_player:after {
 bottom: 100%;
 left: 50%;
 border-bottom-color: #005f9e;
}
.arrow_box_dealer {
 font-size: 0.9em;
 width: 70px;
 height: 30px;
 line-height: 30px;
}
.arrow_box_dealer:after {
 top: 100%;
 left: 50%;
 border-top-color: #005f9e;
}

勝敗を表示する

state isTurnEnd の値を参照して、ターンが終わったら勝敗を表示するようにします。

src/components/PlayArea.js

<Box visibility={props.isTurnEnd ? "visible" : "hidden"}>
 <Chip
   label={BJUtilities.judge(props.dealersHand, props.playersHand)}
   className={classes.winOrLose}
 />
</Box>

src/utilities/BlackJackUtilities.js

export function judge(dealersHand, playersHand) {
 const dealersScore = getScore(dealersHand);
 const playersScore = getScore(playersHand);

 // プレイヤーがバースト時は無条件で負け
 if (getTotal(playersHand) > 21) {
   return "LOSE!!";
 }
 // 引き分け
 if (dealersScore === playersScore) {
   return "PUSH";
 }
 // プレイヤーがブラックジャック
 if (isBlackJack(playersHand)) {
   return "BLACK JACK!!";
 }
 // ディーラーがブラックジャック
 if (isBlackJack(dealersHand)) {
   return "LOSE!!";
 }
 // ディーラーがバースト
 if (dealersScore > 21) {
   return "WIN!!";
 }
 if (dealersScore < playersScore) {
   return "WIN!!";
 }
 if (dealersScore > playersScore) {
   return "LOSE!!";
 }
 return "WIN!!";
}

現在の画面

詳しい変更はこちら

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

#13 揃 hakolab/blackjack@38738da

次回

これでゲームとしてはほぼほぼ完成です。
次回は全体的に処理を見直して、おかしな表示の修正をしたり、重複している処理をまとめたりします。