フィールドに置かれたピースを選択エリアから消す

★前回の記事

yucatio.hatenablog.com

ピースの表示をもう少し工夫してみましょう。 KATAMINOを遠いている最中、フィールドに置かれたピースをピースの選択エリアから消します。これによって、ピースの選択エリアにあるピースを取ってフィールドに置いているような効果が得られます。

f:id:yucatio:20191025094600p:plain

displayの実装

フィールドに置かれたピースを削除するために、 state.placedPiecesを引数に追加します。はじめに全てのピースを表示し、フィールドに置かれたピースを隠します。

const display = {
  // 前略

  // 引数の追加
  updateDraggablePieces: ({solverState, placedPieces}) => {
    $(".draggable-piece").draggable(solverState === "selectPiece" ? "enable" : "disable")

    // 追加ここから
    $(".draggable-piece").children("img").show()
    placedPieces.forEach((place) => {
      $("#piece_" + place.pieceId + ">img").hide()
    })
    // 追加ここまで
  },
  // 後略
}

stateManagerへの追加

stateManagerへ登録します。

js/stateManager.js

const stateManager = {
  // 中略

  setPlacedPieces: (placedPieces) => {
    state.placedPieces = placedPieces

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

ここまでの実行結果

ここまでの実行結果です。フィールドに置かれたピースはピースの選択画面から消えました。

しかし、使うピースのcardコンポーネントの高さがピースを出したり隠したりするたびに変わり、上下に揺れて見辛いです。また、消したことにより、消したピース以外のピースが左右に揺れ、こちらも見辛いです。

f:id:yucatio:20191021224344p:plain

フィールドの高さの固定

使うピース/使わないピースのcardコンポーネントの高さを変化させないようにするため、読み込み時の高さに固定します。画像が読み込まれた後に処理を実行するので、$(window).on('load')のコールバックを使用します。

js/main.js

// 前略

$(window).on('load', () => {
  initializer.setLayout()
})

const initializer = {
  // 前略

  // 追加ここから
  setLayout: () => {
    $("#unused-piece-droppable").height($("#unused-piece-droppable").height())
    $("#used-piece-droppable").height($("#used-piece-droppable").height())
  },
  // 追加ここまで
}

ピースの位置の固定

ピースが左右にぶれないようにするため、ピースの画像を囲んでいるspan要素の幅を、初期値で固定します。display: inline-block;を追加して、幅を指定できようにします。また、ピースが上下にぶれないようにするため、vertical-align: top;を追加します。

css/main.css

.draggable-piece {
  z-index: 10;
  /* 追加ここから */
  display: inline-block;
  vertical-align: top;
  /* 追加ここまで */
}

js/main.js

// 前略

const initializer = {
  // 前略

  setLayout: () => {
    $("#unused-piece-droppable").height($("#unused-piece-droppable").height())
    $("#used-piece-droppable").height($("#used-piece-droppable").height())
    // 追加ここから
    $(".draggable-piece").each((index, piece) => {
      $(piece).width($(piece).width())
    })
    // 追加ここまで
  },
}