#10 【React.jsで、BlackJackを作る】：プレイヤーの処理を実装する① ハンドのスコアを表示する

これまで

前回は、ディーラーがカードを引く処理を実装しました。

BlackJack アプリの sandbox

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

BlackJack - CodeSandbox

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

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

#16 after - CodeSandbox

プレイヤーのハンドのスコアを表示する

自分のハンドのスコアが表示されていた方がゲームとして親切ですよね。
プレイヤーのハンドの下に吹き出しを作り、そこにスコアを表示してみます。

今回は、Material-UI の Tooltip を使用してみます。

React Tooltip component - Material-UI

吹き出しにするために arrow の設定をして、スタイルを少しカスタマイズします。

src/components/PlayArea.js

const useTooltipStyles = makeStyles({
 tooltip: {
   fontSize: "1em"
 }
})

export default function PlayArea(props) {
 const classes = useStyles();
 const tooltipClasses = useTooltipStyles()
 
	省略

	<Grid item>
	  <Tooltip title="6 | 16" open={true} classes={tooltipClasses} arrow>
	    <Grid container direction="row">
	      {props.playersHand.map((card, index) => {
	        let marginLeft = index === 0 ? "0px" : "-50px";
	        return (
	          <Grid item key={index} style={{ marginLeft: marginLeft }}>
	            <Card card={card} hide={false} />
	          </Grid>
	        );
	      })}
	    </Grid>
	  </Tooltip>
	</Grid>

ハンドの計算処理などを utility ファイルに抽出する

さて、ハンドの計算をする関数 getTotal() があるのでそれを使いたいところですね。
BlackJack.js にあるので、utility ファイルを作ってそこに移動しましょう。

src/utilities/BlackJackUtilities.js

見出しのように作成しました。

「複数形ってどうなの？」
「BlackJack って付ける必要ある？」
のように、賛否が分かれるところだと思います。

このようにしたのは、以下のような理由があります。
・フォルダ名が複数形なのは、複数ファイルが入る可能性があるから
・BlackJack が付いているのも上に同じ
・ファイル名が複数形なのは、中に複数の処理が入るから

ただ移動しただけなので、コードは載せません。
別ファイルに移動したので、export は忘れないようにしましょう。

使う側

import * as BlackJackUtilities from "../utilities/BlackJackUtilities";

<Tooltip
 title={BlackJackUtilities.getTotal(props.playersHand)}
 open={true}
 classes={tooltipClasses}
 arrow
>

現在の画面

詳しい変更はこちら

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

#10 揃 hakolab/blackjack@17fe8e1

次回

次回は、プレイヤーのハンドのスコアが 21 を超えたときにバーストするようにします。