fix

dist/assets/TicketScannerView-CCl0qPXf.css

@@ -1 +0,0 @@
-.scanner-page[data-v-42390d77]{padding:20px}.scanner-card[data-v-42390d77]{width:100%;max-width:700px}.scanner-video[data-v-42390d77]{aspect-ratio:1;object-fit:cover;background:#000;width:100%}

dist/assets/TicketView-DiF8fUez.css

@@ -1 +0,0 @@
-.ticket-page.center-block-custom[data-v-f8e89dbd]{height:100dvh;margin-top:0}.ticket-card[data-v-f8e89dbd]{margin:15px 0}.ticket-kicker[data-v-f8e89dbd]{letter-spacing:1px;margin-bottom:14px;font-size:12px}h1[data-v-f8e89dbd],h2[data-v-f8e89dbd]{font-weight:400}h1[data-v-f8e89dbd]{margin-bottom:24px;font-size:26px}h2[data-v-f8e89dbd]{margin-bottom:20px;font-size:18px}hr[data-v-f8e89dbd]{border:0;border-top:1px dashed;margin:18px 0}dl[data-v-f8e89dbd]{gap:12px;display:grid}dt[data-v-f8e89dbd]{color:var(--second-color);font-size:13px}dd[data-v-f8e89dbd]{margin:0}.qr-block[data-v-f8e89dbd]{background-color:#fff;width:fit-content;margin:28px auto;padding:12px;line-height:0;display:block}.error[data-v-f8e89dbd],.used[data-v-f8e89dbd]{color:var(--second-color)}.active[data-v-f8e89dbd]{color:#000}

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Вечерний детектив</title>
-    <script type="module" crossorigin src="/assets/index-oex1uI7H.js"></script>
+    <script type="module" crossorigin src="/assets/index-BJtueuGL.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/client-CT8bsOZT.js">
     <link rel="modulepreload" crossorigin href="/assets/light-DhgSQSdG.js">
     <link rel="modulepreload" crossorigin href="/assets/light-DW22zwJY.js">

src/components/GameMapPanel.vue

@@ -32,8 +32,11 @@ const props = defineProps<{
   screenPosition: number
 }>()
 
+const GRID_SIZE = 20
+
 const emit = defineEmits<{
   saveItem: [item: MapItem, hidden?: boolean]
+  dragging: [value: boolean]
   giveApplication: [team: Team, application: Application]
   addStep: []
   edit: []
@@ -51,6 +54,7 @@ const emit = defineEmits<{
 
 const mapScale = ref(1)
 const mapOffset = ref({ x: 0, y: 0 })
+const mapField = ref<HTMLElement>()
 const previewScreen = computed(
   () => props.screens.find((screen) => screen.status === 'connected') || props.screens[0],
 )
@@ -69,30 +73,39 @@ const screenPlanModeOptions = [
   { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
 ]
 let dragState:
-  { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
+  { item: MapItem; offsetX: number; offsetY: number } | undefined
 let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
 
+function getMapCoordinate(event: PointerEvent) {
+  const field = mapField.value
+  if (!field) return
+  const rect = field.getBoundingClientRect()
+  return {
+    x: (event.clientX - rect.left - field.clientLeft - mapOffset.value.x) / mapScale.value,
+    y: (event.clientY - rect.top - field.clientTop - mapOffset.value.y) / mapScale.value,
+  }
+}
+
 function startMapDrag(item: MapItem, event: PointerEvent) {
+  const point = getMapCoordinate(event)
+  if (!point) return
   dragState = {
     item,
-    startX: event.clientX,
+    offsetX: point.x - (item.x || 0),
-    startY: event.clientY,
+    offsetY: point.y - (item.y || 0),
-    itemX: item.x || 0,
-    itemY: item.y || 0,
   }
+  emit('dragging', true)
   window.addEventListener('pointermove', moveMapDrag)
   window.addEventListener('pointerup', endMapDrag, { once: true })
+  window.addEventListener('pointercancel', endMapDrag, { once: true })
 }
 
 function moveMapDrag(event: PointerEvent) {
   if (!dragState) return
-  const step = dragState.item.kind === 'team' ? 20 : 1
+  const point = getMapCoordinate(event)
-  dragState.item.x =
+  if (!point) return
-    Math.round((dragState.itemX + (event.clientX - dragState.startX) / mapScale.value) / step) *
+  dragState.item.x = Math.round((point.x - dragState.offsetX) / GRID_SIZE) * GRID_SIZE
-    step
+  dragState.item.y = Math.round((point.y - dragState.offsetY) / GRID_SIZE) * GRID_SIZE
-  dragState.item.y =
-    Math.round((dragState.itemY + (event.clientY - dragState.startY) / mapScale.value) / step) *
-    step
 }
 
 function endMapDrag() {
@@ -100,6 +113,9 @@ function endMapDrag() {
   const item = dragState.item
   dragState = undefined
   window.removeEventListener('pointermove', moveMapDrag)
+  window.removeEventListener('pointerup', endMapDrag)
+  window.removeEventListener('pointercancel', endMapDrag)
+  emit('dragging', false)
   emit('saveItem', item)
 }
 
@@ -148,8 +164,12 @@ function zoomMap(event: WheelEvent) {
 }
 
 onBeforeUnmount(() => {
+  if (dragState) emit('dragging', false)
   window.removeEventListener('pointermove', moveMapDrag)
+  window.removeEventListener('pointerup', endMapDrag)
+  window.removeEventListener('pointercancel', endMapDrag)
   window.removeEventListener('pointermove', moveMapPan)
+  window.removeEventListener('pointerup', endMapPan)
 })
 </script>
 
@@ -165,7 +185,7 @@ onBeforeUnmount(() => {
           <n-button size="small" @click="resetMapView">Сбросить</n-button>
         </n-space>
       </n-flex>
-      <div class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
+      <div ref="mapField" class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
         <div
           class="map-canvas"
           :style="{ transform: `translate(${mapOffset.x}px, ${mapOffset.y}px) scale(${mapScale})` }"

src/components/GamePage.vue

@@ -124,6 +124,7 @@ const previewQuestions = ref<ResultsQuestion[]>([])
 const previewTeams = ref<TeamResult[]>([])
 const mapItems = ref<MapItem[]>([])
 const mapSaving = ref(false)
+const mapDragging = ref(false)
 const screenVolume = ref(100)
 const screenPosition = ref(0)
 
@@ -326,8 +327,9 @@ async function bindScannedScreen(screenID: string, accessToken: string) {
 }
 
 async function getGameMap() {
-  if (mapSaving.value) return
+  if (mapSaving.value || mapDragging.value) return
   const res = await client.GetGameMap({ gameID: Number(gameId) })
+  if (mapSaving.value || mapDragging.value) return
   mapItems.value = res.items || []
 }
 getGameMap()
@@ -870,6 +872,7 @@ useSimplePolling(() => {
               :screen-volume="screenVolume"
               :screen-position="screenPosition"
               @save-item="saveMapItemAndReload"
+              @dragging="mapDragging = $event"
               @give-application="giveApplication"
               @add-step="addScreenPlanStep"
               @edit="editScreenPlan"

src/components/TicketPage.vue

@@ -94,6 +94,10 @@ onMounted(load)
   margin-top: 0;
 }
 
+.ticket-page > .width700 {
+  max-width: calc(100% - 16px);
+}
+
 .ticket-card {
   margin: 15px 0;
 }