feat: adjust game piece margin and add cell spacers to game board layout

Infight-io · Dec 21, 2024 · 0653e1d · 0653e1d
1 parent 8b569b6
commit 0653e1d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/public/img/clear.png b/public/img/clear.png
diff --git a/src/components/GamePiece.vue b/src/components/GamePiece.vue
@@ -72,7 +72,7 @@ export default {
 .gamePiece {
     /* background-color: #212529; */
     aspect-ratio: 1;
-    margin: 5px;
+    margin: 1px;
     z-index: 20;
     transition: 300ms;
     container-type: size;

diff --git a/src/views/gameBoard.vue b/src/views/gameBoard.vue
@@ -551,6 +551,12 @@ export default {
                             </template>
                         </template>
 
+                        <template v-for="x in game.boardWidth">
+                            <template v-for="y in game.boardHeight">
+                                <div class="gameBoardCellSpacer" :style="{ gridRowStart: x, gridColumnStart: y }"></div>
+                            </template>
+                        </template>
+
                         <template v-for="target in targetSquares">
                             <div :class="'highlightCell highlight_' + queuedAction"
                                 :style="{ gridColumnStart: target[0] + 1, gridRowStart: target[1] + 1 }"
@@ -676,6 +682,12 @@ export default {
     height: 1fr;
     z-index: 10;
 }
+.gameBoardCellSpacer {
+    aspect-ratio: 1;
+    margin: 1px;
+    z-index: 10;
+    transition: 300ms;
+}
 
 .highlightCell {
     z-index: 30;