★前回の記事
現在のUIでは、解くのをスタートさせたときに、どの位置までKATAMINOが置かれるべきかわかりにくいです。今回はこれを改善します。
本物のKATAMINOでは区切りとなる位置にバーを置いて、どの範囲の中にピースを収めるのかをわかりやすくしています。 今回のアプリでは、ピースが置かれないフィールドを暗くして、置かれる場所をわかりやすくします。
マスクするためのdiv要素の追加
ピースが置かれない場所を暗くするため、今回は背景が半透明の灰色のdiv
要素をフィールドの画像に重ねます。
index.html
<!-- 前略 --> <div class="card my-2"> <div class="card-body"> <div id="katamino-field" class="mx-auto p-0"> <img src="img/field/field.jpg" width="352" height="177"/> <!-- 追加 --> <div id="field-mask"></div> <img id="piece_0_0" class="katamino-piece" src="img/piece/piece_0_0.png" width="125px" /> <img id="piece_0_1" class="katamino-piece" src="img/piece/piece_0_1.png" width="25px" /> <!-- 後略 -->
背景色と透明度を指定します。position: absolute
を指定して、topとleftを、親要素からの相対位置で指定できるようにします。
css/main.css
#field-mask { position: absolute; background-color: #666666; opacity: 0.7; }
マスクの初期位置を指定します。以下の図のように指定します。
css/main.css
#field-mask { position: absolute; /* 追加ここから */ top: 26px; left: 151px; width: 175px; height: 125px; /* 追加ここまで */ background-color: #666666; opacity: 0.7; }
ここまでの実行結果
実行結果です。6から12の部分が暗くなりました。
displayへの追加
マスクするフィールドは使用するピースの個数によって変わります。使用するピースの数が変わったときにマスクの幅を変える必要があります。マスクの幅は、(12 - 選択されたピースの数) * セルのピクセル数
です。また、左からの位置(left
)も変更する必要があります。左からの位置は選択されたピースの数 * セルのピクセル数 + offset
で表すことができます。
js/display.js
const display = { // 前略 // 追加ここから updateFieldMask: ({targetPieces}) => { $("#field-mask").css( "left", targetPieces.length * config.cellSize + config.fieldOffset.left ).css( "width", (12 - targetPieces.length) * config.cellSize ) }, // 追加ここまで }
stateManagerへの追加
stateManagerへ登録します。
js/stateManager.js
const stateManager = { // 中略 setTargetPieces: (targetPieces) => { state.targetPieces = targetPieces display.updateStartButtons(state) // 追加 display.updateFieldMask(state) }, // 中略 }
実行結果
実行結果です。使用するピースを変更すると、その数に応じてマスクされる部分が変化します。
使うピースが4個のとき↓
使うピースが7個のとき↓
解いてる途中で、どこまで埋まるかわかりやすくなりました。
以上でピースが置かれないフィールドをマスクすることができました。
★次回の記事
★目次