#4 【React.jsで、BlackJackを作る】：HITしてみる

これまで

前回は、カードの大きさを小さくして、HIT, STAND ボタンを表示しました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

HIT する

「HIT」は「もう一枚引く」ということです。
HIT ボタンが押されたとき、デッキからカードを一枚引いて、プレイヤーのハンドに加えるという処理を行います。

src/BlackJack.js

では、早速実装していきましょう！
元のコードはこちらです。

  function doHit() {
   const _card = getCard();
   setCard(_card);

   const isWin = getRankNum(_card.rank) > 7;
   setIsWin(isWin);

   isWin ? setWinCount(winCount + 1) : setLoseCount(loseCount + 1);
   setAnswered(true);
 }

state isWin, answered を更新しているところは、処理が大きく変わるので消してしまいます。
「デッキからカードを一枚引いて、プレイヤーのハンドに加える」を全部やると、以下のようになります。

  function doHit() {
   const _card = getCard();
   const newPlayersHand = playersHand.slice()
   newPlayersHand.push(_card)
   setPlayersHand(newPlayersHand)
 }

HIT してみる

上記のコードでも HIT は可能です。
試しに HIT ボタンを押してみると、以下の画面になります。

でも、ちょっと考えみてください。

ディーラーも HIT する

プレイヤーが STAND すると、ディーラーも HIT してカードを引きます。
関数 doHit() で、「デッキからカードを一枚引いて、プレイヤーのハンドに加える」ことを全部やろうとすると、ディーラーの処理を作るときに同じようなコードを作ることになってしまいます。

「HIT する」を別の処理に抽出する

プレイヤーとディーラーで共通するのは、どちらも「HIT する」ということなので、その処理を抽出します。

function hit() {
   return getCard();
 }

 function doHit() {
   const newPlayersHand = playersHand.slice();
   newPlayersHand.push(hit());
   setPlayersHand(newPlayersHand);
 }

「関数 getCard() があるからそれ使えばいいんじゃない？」と思う方がいるかもしれませんね。
もちろんそれでもよいかと思います。
ただ「カードを引く」のと「HIT する」という行為は、やっていることは同じでも少し意味合いが違うと思うので、私はこのようにしました。

現在の画面

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

このように、ポチポチしすぎると画面が少し崩れてしまいますが、追々直していきましょう。

詳しい変更はこちら

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

#4 揃 hakolab/blackjack@3073bc9

次回

ポチポチしすぎると画面が崩れてしまうので、次回はカードを重ねて表示するようにしてみましょう。