画面の状態を考える (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

画面の状態遷移について考えます。画面の状態とは、"ピースの選択中"や"解いている"という状態です。

"ピースの選択中"と"解いている"、"解けた"、"解けなかった"の状態遷移は以下のようになります。

f:id:yucatio:20191012221340p:plain

今回は一時停止ができるので、その状態を追加します。

f:id:yucatio:20191012221354p:plain

各エリアの状態は以下の通りになります。

  • ピースの選択エリア
画面の状態 パーツの状態
ピースの選択中 ピースを動かせるようにする
解いている ピースを動かせないようにする。フィールドに置いてあるピースは非表示にする
解けた ピースを動かせないようにする。フィールドに置いてあるピースは非表示にする
解けなかった ピースを動かせないようにする
一時停止中 ピースを動かせないようにする
  • ボタン
画面の状態 パーツの状態
ピースの選択中 ピースが3つ以上選択されている場合はスタートボタン、そうでない場合はもっとピースをおくボタンを表示する
解いている スタートボタンを押せない状態で表示する
解けた ピースを選び直すボタンを表示する
解けなかった ピースを選び直すボタンを表示する
一時停止中 ピースを選び直すボタンを表示する
  • フィールド
画面の状態 パーツの状態
ピースの選択中 空のフィールドを表示する
解いている 解いている過程を表示する
解けた 解けた組み合わせを表示する
解けなかった 空のフィールドを表示する
一時停止中 解いている過程を表示する

画面の状態ごとにどのようなパーツを表示すれば分かりやすくなりました。

初期状態はピースの選択のなので、これをstate.jsに追加します。

js/state.js

const state = {
  // One of "selectPiece", "solving", "solvedSuccess", "solvedFailed", "pause"
  solverState: "selectPiece",
}

以上で画面の状態を考えることができました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com