diff --git a/dist/assets/TicketScannerView-CCl0qPXf.css b/dist/assets/TicketScannerView-CCl0qPXf.css deleted file mode 100644 index d6b6ec9..0000000 --- a/dist/assets/TicketScannerView-CCl0qPXf.css +++ /dev/null @@ -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%} diff --git a/dist/assets/TicketView-DiF8fUez.css b/dist/assets/TicketView-DiF8fUez.css deleted file mode 100644 index d5762ae..0000000 --- a/dist/assets/TicketView-DiF8fUez.css +++ /dev/null @@ -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} diff --git a/dist/index.html b/dist/index.html index 025a5bd..82454d1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,7 +5,7 @@ Вечерний детектив - + diff --git a/src/components/GameMapPanel.vue b/src/components/GameMapPanel.vue index a25f1f1..e26fd23 100644 --- a/src/components/GameMapPanel.vue +++ b/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() 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, - startY: event.clientY, - itemX: item.x || 0, - itemY: item.y || 0, + offsetX: point.x - (item.x || 0), + offsetY: point.y - (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 - dragState.item.x = - Math.round((dragState.itemX + (event.clientX - dragState.startX) / mapScale.value) / step) * - step - dragState.item.y = - Math.round((dragState.itemY + (event.clientY - dragState.startY) / mapScale.value) / step) * - step + const point = getMapCoordinate(event) + if (!point) return + dragState.item.x = Math.round((point.x - dragState.offsetX) / GRID_SIZE) * GRID_SIZE + dragState.item.y = Math.round((point.y - dragState.offsetY) / GRID_SIZE) * GRID_SIZE } 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) }) @@ -165,7 +185,7 @@ onBeforeUnmount(() => { Сбросить -
+
([]) const previewTeams = ref([]) const mapItems = ref([]) 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" diff --git a/src/components/TicketPage.vue b/src/components/TicketPage.vue index fdba415..4ffefe9 100644 --- a/src/components/TicketPage.vue +++ b/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; }