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

★前回の記事

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

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

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@システムエンジニア