Refactor to use css var for cell width

frontend/src/components/BoardGrid.vue

@@ -6,12 +6,10 @@
   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)))
 
@@ -48,10 +46,7 @@
         return
       }
       const piece_data = JSON.parse(raw_data)
-      const cellRect = evt.target.getBoundingClientRect()
-      const amendX = Math.floor((evt.clientX - cellRect.left - piece_data.offsetX) / props.cellSize)
-      const amendY = Math.floor((evt.clientY - cellRect.top - piece_data.offsetY) / props.cellSize)
-      const corrected_index = index + piece_data.dx + amendX + (piece_data.dy + amendY)*props.width
+      const corrected_index = index + piece_data.dx + piece_data.dy*props.width
       emit('install', piece_data.pieceId, piece_data.rotationId, corrected_index)
   }
 

frontend/src/components/PieceItem.vue

@@ -5,14 +5,11 @@
 
   const props = defineProps({
     piece: Object,
-    cellSize: Number
   })
   const emit = defineEmits(['pieceTouch', 'changeVersion'])
 
   const cells = ref([])
 
-  const cell_width = `${props.cellSize - 2}px`
-
   const hovering = ref(false)
 
   const rotation = computed(() => props.piece.rotations[props.piece.base_version]) 
@@ -22,7 +19,6 @@
   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 canRotate = computed(() => props.piece.rotations.length > 1)
@@ -55,9 +51,10 @@
       console.log('dragging piece')
       const [dy, dx] = divmod(mouse_index.value, width.value)
       const pieceRect = evt.target.getBoundingClientRect()
-      const halfSize = props.cellSize / 2
-      const offsetX = Math.round(evt.clientX - pieceRect.left) % props.cellSize - halfSize
-      const offsetY = Math.round(evt.clientY - pieceRect.top) % props.cellSize - halfSize
+      const cellSize = Math.max(pieceRect.height, pieceRect.width) / diameter.value      
+      const halfSize = cellSize / 2
+      const offsetX = Math.round(evt.clientX - pieceRect.left) % cellSize - halfSize
+      const offsetY = Math.round(evt.clientY - pieceRect.top) % cellSize - halfSize
       const piece_data = {
         dy: -dy,
         dx: -dx - minX.value,
@@ -156,9 +153,7 @@
   }
   .piece-cell {
     aspect-ratio: 1/ 1;
-    /* width: v-bind(cell_width); */
     width: calc(var(--cell-width) - 2px);
-    /* display: flex; */
     margin: 1px;
   }
   .colored {

frontend/src/components/PiecePalette.vue

@@ -3,7 +3,6 @@
 
     const props = defineProps({
         availablePieces: Array,
-        cellSize: Number
     })
 
     const emit = defineEmits(["pieceTouch", "changeVersion"])
@@ -28,7 +27,6 @@
                 @changeVersion="(versionIndex) => emit('changeVersion', versionIndex, index)"
                 @piece-touch="onPieceTouch"
                 :piece="piece"
-                :cell-size="cellSize"
             />
         </div>
     </div>

frontend/src/views/GameView.vue

@@ -20,7 +20,6 @@
 
     const hintbox = ref(null)
 
-    const cellSize = 30
     const loading = ref(false)
     const error = ref(null)
     const game = ref(null)
@@ -239,9 +238,9 @@
                 <p>Доска заполнена!</p>
             </div>
         </div>
-        <BoardGrid id="board" ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
+        <BoardGrid id="board" ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :installed_pieces="installedPieces" />
         <HintBox id="hintbox" ref="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
-        <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
+        <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces"/>
     </div>
     <GameTour v-if="game && hintbox" :hasHint="hintbox.hasHint" :hasPieces="availablePieces.length > 0"/>    
 </template>