#11 【React.jsで、BlackJackを作る】：プレイヤーの処理を実装する② バーストするようにする

これまで

前回は、プレイヤーのハンドのスコアを計算し、画面に表示しました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

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

#16 after - CodeSandbox

findDOMNode is deprecated in StrictMode.

前回実装した Material-UI の Tooltip ですが、React の StrictMode をオンにしてこれを使うと「findDOMNode is deprecated in StrictMode.」という警告が出てしまいますね。
これについては後で考えることにします。

バーストするようにする

メッセージ出力の際に、バーストしているかどうかをチェックするようにします。

src/BlackJack.js

関数 getMessage() を見つけてください。
元のコードはこちらです。

function getMessage() {
 let message = [];
 if (isGameFinished) {
   message.push("Thank you for playing!");
   message.push(`Win: ${winCount} Lose: ${loseCount}`);
 } else if (answered) {
   message.push(isWin ? "Win!" : "Lose!");
 } else {
   message.push("Hit or Stand?");
 }
 return <Message>{message}</Message>;
}

この関数にプレイヤーのハンドを渡して、スコアが 21 を超えていたら「BUSTED!!」と表示してみます。

function getMessage(playersHand) {
 let message = [];
 if (BlackJackUtilities.getTotal(playersHand) > 21) {
   message.push("BUSTED!!");
 } else {
   message.push("Hit or Stand?");
 }
 return <Message>{message}</Message>;
}

バースト後の処理を実装する

プレイヤーがバーストしたら、そのターンは終わりです。
HIT or STAND ボタンを隠して、NEXT ボタンを表示します。

関数 getButtons() を見つけてください。
元のコードはこちらです。

function getButtons() {
 // prettier-ignore
 return <BlackJackButtons onClickHit={doHit} onClickStand={doStand} />;
}

今は単純に BlackJackButtons コンポーネントのみを返却しています。
プレイヤーがバーストしたときは GameProgressButtons コンポーネントを返却します。

function getButtons(playersHand) {
 if (BlackJackUtilities.getTotal(playersHand) > 21) {
   return <GameProgressButton onClickNext={next} />;
 } else {
   return <BlackJackButtons onClickHit={doHit} onClickStand={doStand} />;
 }
}

次のターンに進む

プレイヤーがバーストしてそのターンが終わったら、次のターンを始めたいですよね。
NEXT ボタンを押したら、カードを配り直して次のターンに進むようにします。

関数 next() を見つけてください。
元のコードはこちらです。

function next() {
 if (deck.length === 0) {
   setIsGameFinished(true);
 } else {
   setCard(null);
   setAnswered(false);
 }
}

次のように修正します。

function next() {
 dispatch({ type: "init" });
}

関数 initDealersHand(), initPlayersHand() を修正する

今のままだと、NEXT ボタンを押す度にカードが2枚ずつ増えていってしまいます。
関数 deal に、現在のハンドを渡してしまっているためです。

function initDealersHand(state) {
 const [newDeck, newHand] = deal(state.deck, state.dealersHand, 2);
 return { ...state, deck: newDeck, dealersHand: newHand };
}

以下のように修正します。

function initDealersHand(state) {
 const [newDeck, newHand] = deal(state.deck, [], 2);
 return { ...state, deck: newDeck, dealersHand: newHand };
}
//関数 initPlayersHand() も同様に修正する

現在の画面

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

プレイヤーがバーストしたあと。

NEXT ボタンを押したあと。

詳しい変更はこちら

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

#11 揃 hakolab/blackjack@e8c4b9d

次回

HIT ボタン、NEXT ボタンを押すことで、ターンを繰り返すことができるようになりました。
ただし、まだ STAND ボタンを押したときの処理やディーラーの ホールカード（伏せてあるカード）の表示をどうするかなど、まだまだ交通整理が必要です。

次回はそのあたりの処理を見直してみます。