Javaエンジニア、React+Firebaseでアプリを作る

趣味で作ったものいろいろ

ピースの再選択を実装する (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

"ピースをえらびなおす"ボタンが押されたときの動作をプログラミングしていきます。

フィールドに置かれているピース(placedPieces)を空にして、画面の状態(solverState)をピースの選択中(selectPiece)に変更します。

actionの登録

"ピースをえらびなおす"ボタンが押されてたときに、action.newPieceSelectionを呼び出します。(この関数はまだ定義していません)

js/main.js

// 前略

const initializer = {
  setEvent: () => {
    // 中略
    // 追加ここから
    $("#reset-button").on("click", () => {
      action.newPieceSelection()
    })
    // 追加ここまで
  }, 
}

actionの実装

action.newPieceSelectionを実装します。フィールドに置かれているピース(placedPieces)を空にして、画面の状態(solverState)をピースの選択中(selectPiece)に変更します。

js/action.js

const action = {
  // 前略
  // 追加ここから
  newPieceSelection: () => {
    stateManager.setPlacedPieces([])
    stateManager.setSolverState("selectPiece")
  },
  // 追加ここまで
}

実行結果

実行結果です。"ピースをえらびなおす"ボタンを押すと、フィールド上のピースが消え、スタートボタンが表示され、ピースがドラッグアンドドロップできるようになっています。ピースの選択ができるようになり、他の組み合わせも試すことができるようになりました。

f:id:yucatio:20191017093918p:plain

以上でピースの再選択を実装できました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com