#3 【React.jsで、BlackJackを作る】：カードを小さくして、ボタンを表示する

これまで

前回は、初期表示としてディーラーとプレイヤーのカードを表示してみました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

カードを小さくする

HIT or STAND を選択するボタンを表示したいのですが、カードが少し大きすぎるので小さくしようと思います。

src/components/Card.js

フック useCardStyles() を見つけてください。
元のコードはこちらです。

const useCardStyles = makeStyles({
 root: {
   width: "140px",
   height: "200px"
 },
 content: {
   width: "100%",
   height: "100%"
 },
 top: {
   height: "30px",
   marginLeft: "10px"
 },
 middle: {
   fontSize: "30px",
   height: "140px",
   lineHeight: "140px"
 },
 bottom: {
   height: "30px",
   marginRight: "10px"
 }
});

カードの大きさはこのフック内で指定しています。
ここは数値を変更するだけですので詳述しません。

「❤」または「♦」のときは文字を赤くする

何か足りないと思っていたら、「❤」と「♦」のカードの文字が赤くなっていませんでした。
「❤」または「♦」のときは文字を赤くするようにします。
先ほどのフック useCardStyles() を以下のように修正します。

const useCardStyles = makeStyles({
 root: {
   width: "105px",
   height: "150px",
   color: (props) => {
     if (props.card === null) {
       return "black";
     }
     switch (props.card.suit) {
       case "❤":
       case "♦":
         return "red";
       default:
         return "black";
     }
   }
 },
 以下省略

export default function Card(props) { // 呼び出すときに props を渡す
 const classes = useCardStyles(props);

このように、Material-UI の関数 makeStyles() にはパラメータを渡すことで、動的にスタイルを設定することができます。
便利ですね！

HIT, STAND ボタンを表示する

関連するファイルは、以下です。

・src/BlackJack.js
・src/components/BlackJackButtons.js

src/BlackJack.js

ボタンを表示するための関数 getButtons() を見つけてください。
元のコードはこちらです。

function getButtons() {
   // prettier-ignore
   return answered ? <GameProgressButton onClickNext={next} isTheLastGame={deck.length === 0} />
                   : <BlackJackButtons onClickOver={checkOver} onClick7={check7} onClickUnder={checkUnder} />;
 }

state answered の値で条件分岐をしていますが、この処理は少し変わりそうなので、ひとまず単純な形に直します。
BlackJackButtons コンポーネントだけを返却するようにします。

ボタンを押したときの処理も大きく変わりますね。
Border7 では、数字の大きさを比較していたので関数名に check という言葉を使っていました。
ですが、BlackJack では、「HIT する」「STAND する」という処理になるので、do を付けてみました。

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

prettier-ignore

ちなみに、Codesandbox ではデフォルトで prettier というコード整形ツールがついてきます。

Prettier · Opinionated Code Formatter

基本的には便利なのですが、ときに余計に直されてしまいます。
そんなときはコメントで prettier-ignore と書いてあげると、次の行の整形をスキップしてくれます。

現在の画面

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

詳しい変更はこちら

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

#3 揃 hakolab/blackjack@6a26797

次回

次回は、関数 doHit() の処理を実装して、カードを一枚ずつ引いてく処理を実装しようと思います。