KATAMINOを解いているときの表示 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

フィールド上のピースの表示を行います。また、KATAMINOを解いているときのピースの選択エリアやボタンの部分も変更します。

フィールドに置かれているピースの表示

前回、表示に必要な情報をstate.placedPiecesに格納したので、今回は表示していきます。 placedPiecesの各オブジェクトには、pieceId、spinId、offset(左上のマスからの距離)が格納されています。

f:id:yucatio:20191014165139p:plain

これをcssで表現するには、topとleftプロパティを使います。 x方向にずらすのはtopプロパティを使用します。 y方向にずらすにはleftプロパティを使用します。 offsetにはずらすマス目の数が入っているので、実際にtopとleftに指定する値は、それぞれ、x * (1マスのピクセル数(今回は25px))、y * (1マスのピクセル数(今回は25px))になります。また、今回はフィールドの画像の左上からマス目の左上まで距離があるので、そのぶんのピクセル数も加算する必要があります。フィールドの周りの余白は上左26pxです。

f:id:yucatio:20191014165206p:plain

1マスの幅やフィールドの余白の数値はconfigにまとめておきましょう。

js/config.js

// 追加ここから
const config = {
  cellSize: 25,
  fieldOffset: {top: 26, left: 26},
}
// 追加ここまで

フィールドにピースを表示する関数display.updateFieldPieceを実装します。 placedPiecesそれぞれについてpieceIdとspinIdから対応する画像を取得したあと、topと

updateFieldPieceはフィールドが更新されるたびに呼ばれるので、最初に全てのピースを非表示しておく必要があります。

js/display.js

const display = {
  // 前略

  updateFieldPieces : ({placedPieces}) => {
    $(".katamino-piece").hide()

    placedPieces.forEach((piece) => {
      $("#piece_" + piece.pieceId + "_" + piece.spinId
      ).css("top", piece.offset.x * config.cellSize + config.fieldOffset.top
      ).css("left", piece.offset.y * config.cellSize + config.fieldOffset.left
      ).show()
    })
  },
}

stateMangerにupdateFieldPieceを登録します。

js/stateManger.js

const stateManager = {
  // 中略
  setPlacedPieces: (placedPieces) => {
    state.placedPieces = placedPieces

    // console.log("state.placedPieces", state.placedPieces) は削除してもよい
    // 追加
    display.updateFieldPieces(state)
  },
}

ここまでの実行結果

実行結果です。解いている過程が表示されました。画像になったので見やすくなりました。

f:id:yucatio:20191014175137p:plain

ピースの選択部分とボタンの挙動

ピースの選択部分と、ボタンの表示の挙動は下記のリンク先に書いてある通り、以下のような動作をします。

ピースの選択部分 : ピースを動かせないようにする
ボタン : スタートボタンを押せない状態で表示する

yucatio.hatenablog.com

ピースの選択部分の更新

ピースの選択部分のピースは、ピースの選択中(selectPiece)の時のみドラッグ可能です。ドラッグ要素のdraggable関数に""enanble"または"disable"を指定することでドラッグ可能かどうかを切り替えます。

js/display.js

const display = {
  // 中略

  updateDraggablePieces: ({solverState}) => {
    $(".draggable-piece").draggable(solverState === "selectPiece" ? "enable" : "disable")
  },
}

stateManager.setSolverStateに作成した関数を登録します。

js/stateManager

const stateManager = {
  setSolverState: (solverState) => {
    state.solverState = solverState

    // console.log("state.solverState", state.solverState) は削除してもよい
    // 追加
    display.updateDraggablePieces(state)
  },

  // 中略
}

ボタンの更新

解いている最中のボタンは、スタートボタンを押せない状態(disabled)にします。スタートボタン要素にprop("disabled", ...) を追加します。

js/display.js

const display = {
  // 仮引数を変更
  updateStartButtons: ({solverState, targetPieces}) => {
    // prop("disabled", ...) を追加
    $("#start-button").prop(
      "disabled", solverState === "solving"
    ).toggle(
      targetPieces.length >= 3
    )
    $("#more-piece-button").toggle(
      targetPieces.length < 3
    )
  },
  // 後略
}

solverStateが変更された際にボタンの再描画を行うようにします。

js/stateManager

const stateManager = {
  // 前略

  setSolverState: (solverState) => {
    state.solverState = solverState

    display.updateDraggablePieces(state)
    // 追加
    display.updateStartButtons(state)
  },

  // 後略
}