Enlarge game board

frontend/src/components/Board.vue

@@ -1,15 +1,17 @@
 <script setup>
-  import {computed, ref, watch } from 'vue';
+  import {ref, watch } from 'vue';
 
   import divmod from '@/utils/divmod';
 
   const props = defineProps({
     width: Number,
     height: Number,
+    cellSize: Number,
     installed_pieces: Array
   })
   const emit = defineEmits(['install', 'remove'])
 
+  const cell_width = `${props.cellSize}px`
   const board = ref(null)
   const grid = ref(Array(props.height).fill().map(()=>Array(props.width).fill(0xffffff)))
 
@@ -65,7 +67,7 @@
   }
   .square {
     aspect-ratio: 1/ 1;
-    width: 20px;
+    width: v-bind(cell_width);
     border: 1px solid gray;
   }
   .centered {

frontend/src/components/HintBox.vue

@@ -66,6 +66,12 @@
     }
 </script>
 
+<style scoped>
+.hint-box{
+    padding: 1rem;
+}
+</style>
+
 <template>
     <div class="hint-box">
         <p @click="hintActive = !hintActive" class="hint-item transparent-button">🤖</p>

frontend/src/components/Piece.vue

@@ -4,10 +4,13 @@
   import divmod from '@/utils/divmod'
 
   const props = defineProps({
-    piece: Object
+    piece: Object,
+    cellSize: Number
   })
   const emit = defineEmits(['pieceTouch'])
 
+  const cell_width = `${props.cellSize - 2}px`
+
   const hovering = ref(false)
 
   const rotationIndex = ref(0)
@@ -18,6 +21,7 @@
   const minX = computed(() => Math.min(...points.value.map((point) => point[1])))
   const maxY = computed(() => Math.max(...points.value.map((point) => point[0])))
   const diameter = computed(() => (1 + Math.max(maxX.value - minX.value, maxY.value)))
+  const box_width = computed(() => `${diameter.value*(props.cellSize)}px`)
   const grid = computed(make_grid)
   const width = computed(() => maxX.value - minX.value + 1)
   const canFlip = computed(() => props.piece.rotations.length > 4)
@@ -118,7 +122,7 @@
   }
   .piece-cell {
     aspect-ratio: 1/ 1;
-    width: 18px;
+    width: v-bind(cell_width);
     display: flex;
     /* justify-content: center; */
     margin: 1px;
@@ -134,8 +138,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: v-bind(18*diameter + "px");
-    height: 100px;
+    width: v-bind(box_width);
+    height: v-bind(box_width);
   }
   .invisible {
     visibility: hidden;

frontend/src/components/PiecePalette.vue

@@ -2,7 +2,8 @@
     import Piece from '@/components/Piece.vue';
 
     const props = defineProps({
-        availablePieces: Array
+        availablePieces: Array,
+        cellSize: Number
     })
 
     const emit = defineEmits(["pieceTouch"])
@@ -15,7 +16,7 @@
 <template>
 	<div class="piece-palette" v-auto-animate>
         <div class="palette-item" :key="piece.id" v-for="piece in props.availablePieces">
-            <Piece @piece-touch="onPieceTouch" :piece="piece"/>
+            <Piece @piece-touch="onPieceTouch" :piece="piece" :cell-size="cellSize"/>
         </div>
     </div>
 </template>

frontend/src/views/GameView.vue

@@ -11,7 +11,7 @@
     const props = defineProps({
         id: String
     })
-
+    const cellSize = 30
     const loading = ref(false)
     const error = ref(null)
     const game = ref(null)
@@ -219,8 +219,8 @@
                 <p>Доска заполнена!</p>
             </div>
         </div>
-        <Board ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :installed_pieces="installedPieces" />
+        <Board ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
         <HintBox @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
-        <PiecePalette @piece-touch="onPieceTouch" :availablePieces="availablePieces" />            
+        <PiecePalette @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>            
     </div>
 </template>