#12 【React.jsで、BlackJackを作る】：プレイヤーの処理を実装する③

これまで

前回は、プレイヤーがバーストするようにしました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

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

#16 after - CodeSandbox

交通整理をしました

今回は、プレイヤーが HIT or STAND したときの細かい処理を見直します。

具体的には、以下のように修正します。
・プレイヤーが STAND したら NEXT ボタンを表示する
・state isDeclaredStand → state isTurnEnd に変更
・勝敗チェックをする処理を関数 reducer() に追加

プレイヤーが STAND したら NEXT ボタンを表示する

プレイヤーが STAND しても NEXT ボタンが表示されないので、次のターンに進めない状態でした。
関数 getButtons() で GameProgressButton コンポーネントを返却する際の条件を修正します。

isDeclaredStand → isTurnEnd

state isDeclaredStand は、「STAND したとき」以外にも、「HIT → バーストしたとき」にも更新されるようになり、意味合いが変わってしまいました。
他にも、ディーラーやプレイヤーが「ブラックジャックになったとき」という場合も考えられますね。

なので、state の名前を「ターンが終わったかどうか 」という意味の「isTurnEnd」に変更します。

ターン終了チェックの処理を関数 reducer() に追加しました

以下の状態になったとき、そのターンは終わります。
・ディーラー or プレイヤーがブラックジャックになった
・ディーラー or プレイヤーのハンドのスコアが 21 になった
・プレイヤーがバーストした

初期表示時、HIT ボタンを押したとき、NEXT ボタンを押したとき、それぞれにターン終了チェック処理を追加しました。

関数 reducer()

function reducer(state, action) {
  switch (action.type) {
 
  省略
  
  case "check": {
     // ディーラーまたはプレイヤーがブラックジャック
     if (
       BlackJackUtilities.isBlackJack(state.dealersHand) ||
       BlackJackUtilities.isBlackJack(state.playersHand)
     ) {
       return { ...state, isTurnEnd: true };
     }
     // プレイヤーのハンドのスコアが 21 以上になった
     if (BlackJackUtilities.getTotal(state.playersHand) >= 21) {
       return { ...state, isTurnEnd: true };
     }
     return { ...state };
  }
  default:
 }
}

useEffect(() => {
 dispatch({ type: "init" });
 dispatch({ type: "check" });
}, []);

function doHit() {
 dispatch({ type: "hit" });
 dispatch({ type: "check" });
}

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

現在の画面

今回の修正で画面は以下のようになりました。
プレイヤーのスコアが 21 に達して、そのターンが終了したところです。

詳しい変更はこちら

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

#12 揃 hakolab/blackjack@32aeb00

次回

これでだいぶブラックジャックらしくなってきましたね！
次回は、スコアの表示の見直しと勝敗の表示をします。