#14 React.js でプログラミング・プラモデル Vol.2 「Border7」：ゲーム進行ボタンを実装する

これまで

前回は、Message コンポーネントの実装をして、画面にメッセージが出力されるようにしました。

現時点のコード

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

#13 after - CodeSandbox

今回のタスク

・src/components/GameProgressButton.js の処理を実装する
・src/Border7.js の関数 next() の処理を実装する
・GameProgressButton.js を呼び出す

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

GameProgressButton.js を開く

jsDoc の処理詳細を参考にして、処理を実装してください。

ここにも CHALLENGE TASK!! がありますね。
Border7Buttons.js のときと同様、このタスクはキーボード操作でボタンを押せるようにするための処理です。
余力があれば、ぜひチャレンジしてみてください！

/**
* ゲーム進行ボタンコンポーネント
*
* 処理概要
*  - ゲームを進めるためのボタンを作成する
*
* 処理詳細
*  - Button コンポーネントの onClick プロパティに props.onClickNext を設定する
*
*  - props.isTheLastGame の値に従って、ボタンの名称を設定する
*     - props.isTheLastGame が true の場合
*        - "FINISH"
*  - props.isTheLastGame が false の場合
*     - "NEXT"
*
* CHALLENGE TASK!!
*   省略
*
* @param {*} props
*/

src/Border7.js を開き、関数 next() を見つける

続いて、関数 next() の処理を実装しましょう。
jsDoc を参考にして、処理を実装してください。

  /**
  * ゲーム進行関数
  *
  * 処理概要
  *  - next ボタン, finish ボタンが押されたときの処理を行う
  *
  * 処理詳細
  *  - state deck の長さが 0 の場合
  *     - satate isGameFinished を true に更新する
  *  - それ以外の場合
  *     - state card の値を null に更新する
  *     - state answered の値を false に更新する
  *
  */
 function next() {}

GameProgressButton.js を呼び出す

関数 next() の実装が完了したら早速呼び出してみましょう！
Border7.js の関数 getButtons() を見つけてください。

      /**
  * ボタンコンポーネント取得関数
  *
  * 処理概要
  * state answered の値に従って、ボタンコンポーネントを返却する
  *
  * 処理詳細
  *  - state answered が true の場合
  *     - ゲーム進行ボタンコンポーネント GameProgressButton を返却する
  *       ※ props には以下の関数、値を設定する
  *        - onClickNext: next()
  *        - isTheLastGame: deck.length が 0 かどうか
  *
  *  - state answered が false の場合
  *     - Border7 ボタンコンポーネント Border7Buttons を返却する
  *       ※ props には以下の関数を設定する
  *        - onClickOver: chechOver()
  *        - onClick7: check7()
  *        - onClickUnder: checkUnder()
  *
  * 参考
  *   省略
  *
  * @return {component} <GameProgressButton /> or <Border7Buttons />
  */
 function getButtons() {
   省略

関数 getButtons() はすでに手を加えていましたね。
jsDoc の処理詳細を参考にして、条件分岐を追加して表示分けされるようにしましょう。

完成イメージ

今回のタスクの実装例を以下に示します。

#14 after - CodeSandbox

今回のタスクを実装すると、ほぼほぼゲームとしては完成です。
数字選択をして、勝ち負けを確認して、それを NEXT ボタンで繰り返せるようになりました。

ただ、ゲームを最後まで進めると以下のような画面になります。

ゲームが終わったのにも関わらず FINISH ボタンが表示されています。

次回

次回はこの不具合を修正しましょう。
そして、最終的な確認をして Border7 ゲームは完成です！