#2 【React.jsで、BlackJackを作る】：カードの見た目を変えてみる

これまで

前回は、BlackJack アプリを作っていく環境作りをしました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

まずはなんとなく枠組みを作る

具体的な処理の実装は置いといて、まずはラフ画を書くように画面を BlackJack っぽくしてみようと思います。

src/BlackJack.js

BlackJack.js のコンポーネントを返却するreturn文は以下のようになっていました。

return (
   <Box>
     <PlayArea card={card} />
     <Box className={classes.messageArea}>
       {getMessage()}
       {!isGameFinished && getButtons()}
     </Box>
   </Box>
 );

画面にカードを表示するためには、PlayArea コンポーネントに card オブジェクトを渡します。

この仕組みは BlackJack も同じでよいと思います。
ただ、BlackJack にはディーラーとプレイヤーがいて、それぞれ「ハンド」という手札を持ちます。
そして、ハンドのカードはだんだん増えていくので、配列で渡そうと思います。
ということは、自ずと state の定義も必要になります。

// 初期値はとりあえず決め打ち
const [dealersHand, setDealersHand] = useState([
   { suit: "♠", rank: "A" },
   null
 ]);
 const [playersHand, setPlayersHand] = useState([
   { suit: "♠", rank: "A" },
   { suit: "♣", rank: "5" }
 ]);

  return (
   <Box>
     <PlayArea dealersHand={dealersHand} playersHand={playersHand} />
     <Box className={classes.messageArea}>
       {/* getMessage() */}
       {/* !isGameFinished && getButtons() */}
     </Box>
   </Box>
 );

src/components/PlayArea.js

PlayArea は、トランプのカードを表示するためのコンポーネントです。
元は以下のコードです。

      <Grid container direction="row" spacing={2} alignItems="center" justify="center">
       <Grid item>
         <Card card={props.card} />
       </Grid>
     </Grid>

props で渡されてくる値が変わったので修正します。
上部にディーラーのハンド、下部にプレイヤーのハンドを表示するようにします。

カードは Material-UI の Grid を使用します。
これは画面スペースや見栄えの都合で変更するかもしれません。

      <Grid
       container
       direction="column"
       spacing={5}
       alignItems="center"
       justify="center"
     >
       <Grid item>
         <Grid container direction="row" spacing={1}>
           {props.dealersHand.map((card, index) => {
             return (
               <Grid item key={index}>
                 <Card card={card} />
               </Grid>
             );
           })}
         </Grid>
       </Grid>
       <Grid item>
         <Grid container direction="row" spacing={1}>
           {props.playersHand.map((card, index) => {
             return (
               <Grid item key={index}>
                 <Card card={card} />
               </Grid>
             );
           })}
         </Grid>
       </Grid>
     </Grid>

Grid はレスポンシブ対応をするにはとても便利なのですが、ご覧の通り少しコードが増えてしまいます。
そこらへんも変更を考える理由です。

現在の画面

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

詳しい変更はこちら

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

#2 揃 hakolab/blackjack@aceb2e7

次回

次回は、メッセージやボタンを表示するために、カードを少し小さくしようと思います。