#15 React.js でプログラミング・プラモデル Vol.2 「Border7」：ゲームを仕上げよう！

これまで

前回は、ゲーム進行ボタンを実装しました。

現時点のコード

前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。

#14 after - CodeSandbox

今回のタスク

・ゲームが終わっているのに FINISH ボタンが表示され続けるバグの解消
・総点検

では、早速始めましょう！

ゲームが終わっているのに FINISH ボタンが表示され続けるバグ

現在のコードの状態で、カードが無くなるまでプレイすると、以下のような状態になります。

最後のカードの数字を予想した後

FINISH ボタンをクリックしてゲームを終了した後

このように、ゲームが終了しているのにも関わらず、FINISH ボタンが表示され続けています。
なので、「ゲームが終了したときはボタンを表示しない」ように修正しましょう！

src/Border7.js を開く

Border7.js を開いたら、Border7 コンポーネントを返却する return文を見つけてください。

  /**
  * Border7 コンポーネント返却
  *
  * 返却内容
  *  - PlayArea コンポーネント
  *    ※ props には以下の値を設定する
  *     - card: state card
  *
  *  - getMessage() から返却される Message コンポーネント
  *
  *  - state isGameFinished が false の場合
  *     - getButtons() から返却されるボタンコンポーネント
  *
  */
 return (
   <Box>
     <PlayArea card={card} />
     <Box /* className={classes.messageArea} */>
       {getMessage()}
       {getButtons()}
     </Box>
   </Box>
 );

処理詳細の関数 getButtons() のところの記述を見てみると、表示する際の条件が書かれています。

  *  - state isGameFinished が false の場合
  *     - getButtons() から返却されるボタンコンポーネント

これを参考にして、処理を実装してください。
また、スタイル設定のための className 属性がコメントアウトされたままなので、こちらも解除しておきましょう。

正しく実装できていると、以下のような画面になりゲームは終了します。

総点検

以上で、Border7 ゲームは完成ですが、念の為、最後にバグやおかしなところが無いかを確認しておきましょう。

早速ありました

確認してみたら早速ありました。

このように、Codesandbox はコードの静的チェックも行ってくれます。
Problems に「initialDeck が未使用」だと警告が出ていました。

src/Border7.js の冒頭で state deck の初期値用に、定数 initialDeck を定義していましたが使っていませんでした。

const initialDeck = getDeck();

state deck を宣言しているところを見つけてください。
そして、初期値に定数 initialDeck を使用するように修正してください。

const [deck, setDeck] = useState(initialDeck);

このような作り方は好みが分かれるところだと思います。
実際のところ修正しなくても問題なく動きますし、このように手数も増えてしまいます。そして私のように忘れたり…。
ただ、それでも私は、初期値用に定数として定義しておいたほうが、役割としてわかりやすくていいかなと考えています。

完成イメージ

今回のタスクの実装例は以下です。

#15 after - CodeSandbox

完成です！お疲れさまでした！

いかがだったでしょうか？
ゲームの開発難易度は易しめだと思いますが、ゲーム自体の難易度は思いの外高くなってしまいましたね笑
「 カードが 7 のとき」を予想するのが特に難しいです。

次回

次回は、Border7Buttons.js や GameProgressButtons.js の CHALLENGE TASK!! の解答例をご紹介します！