KATAMINOを解くのが終了したときの遷移 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

KATAMINOを解くのが終わったときに、解けた(solvedSuccess)または解けなかった(solvedFailed)へ状態を遷移させます。解けたか解けなかったかはsolverの中でわかるので、コールバックを使用してstateを更新します。

終了時のコールバックの定義

表示用コールバックを定義したのと同様に、KATAMINOが解けたとき・解けなかったときのコールバックを定義します。

js/action.js

const action = {
  // 中略
  startSolve: () => {
    solver.init(state.targetPieces)

    solver.solve({
      onUpdatePieces: (placedPieces) => stateManager.setPlacedPieces(placedPieces),
      // 追加ここから
      onSolved: () => stateManager.setSolverState("solvedSuccess"),
      onNotSolved: () => stateManager.setSolverState("solvedFailed"),
      // 追加ここまで
    })

    stateManager.setSolverState("solving")
  },
}

終了時にコールバックを呼び出す

KATAMINOが解けたときと、解けなかったときにコールバックを呼び出します。

js/solver.js

const solver = {
  // 前略
  solve : (options) => {
    // 変更前
    // const {onUpdatePieces = (placedPieces)=>{},} = options
    // 変更後
    const {onUpdatePieces = (placedPieces)=>{}, onSolved = ()=>{}, onNotSolved = ()=>{}} = options

    if (solver.solverStack.length <= 0) {
      console.log("解けなかった")
      // 追加
      onNotSolved()
      return
    }

    // 中略

    if (nextUnPlaced.length <= 0) {
      console.log("完成")
      // 追加
      onSolved()
      return
    }

    // 後略
  },
  // 後略
}

ボタンの更新

KATAMINOを解くのを終了したときのボタンの表示を変更します。

解き終わったときは、 "ピースを選び直すボタン"を表示します。"ピースを選び直すボタン"は解くのが終わったときと、一時停止のときに表示されます。

スタートボタンはピースを選択しているときと解いているときのみ表示するように表示の条件を変更します。

js/display.js

const display = {
  updateStartButtons: ({solverState, targetPieces}) => {
    $("#start-button").prop(
      "disabled", solverState === "solving"
    ).toggle(
      // 変更前
      // targetPieces.length >= 3
      // 変更後
      (solverState === "selectPiece" && targetPieces.length >= 3) || solverState === "solving"
    )

    $("#more-piece-button").toggle(targetPieces.length < 3)
    // 追加ここから
    $("#reset-button").toggle(
      solverState === "solvedSuccess" || solverState === "solvedFailed" || solverState === "pause"
    )
    // 追加ここまで
  },
  // 後略
}