From 31d93a9916b1e0ec5c64c48f63071a0232e83eeb Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 4 Oct 2026 16:07:41 +0700
Subject: [PATCH] up

---
 src/components/GameMapPanel.vue       | 357 ++++++++++++
 src/components/GamePage.vue           | 774 ++++++++------------------
 src/components/GameScreensPanel.vue   | 342 ++++++++++++
 src/components/GameTeamsPanel.vue     | 103 ++++
 src/components/ScreenBindingModal.vue | 134 +++++
 5 files changed, 1181 insertions(+), 529 deletions(-)
 create mode 100644 src/components/GameMapPanel.vue
 create mode 100644 src/components/GameScreensPanel.vue
 create mode 100644 src/components/GameTeamsPanel.vue
 create mode 100644 src/components/ScreenBindingModal.vue

diff --git a/src/components/GameMapPanel.vue b/src/components/GameMapPanel.vue
new file mode 100644
index 0000000..0157464
--- /dev/null
+++ b/src/components/GameMapPanel.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { NButton, NFlex, NSpace, NText } from 'naive-ui'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import type {
+  Application,
+  MapItem,
+  ResultsQuestion,
+  ScreenState,
+  Team,
+  TeamResult,
+} from '@/api/generated/crabs/evening_detective_server'
+import ScreenPreview from '@/components/ScreenPreview.vue'
+
+const props = defineProps<{
+  mapItems: MapItem[]
+  teams: Team[]
+  screens: ScreenState[]
+  previewQuestions: ResultsQuestion[]
+  previewTeams: TeamResult[]
+}>()
+
+const emit = defineEmits<{
+  saveItem: [item: MapItem, hidden?: boolean]
+  giveApplication: [team: Team, application: Application]
+}>()
+
+const mapScale = ref(1)
+const mapOffset = ref({ x: 0, y: 0 })
+const previewScreen = computed(
+  () => props.screens.find((screen) => screen.status === 'connected') || props.screens[0],
+)
+const teamsNeedingApplications = computed(
+  () =>
+    new Map(props.teams.filter((team) => team.applications?.length).map((team) => [team.ID, team])),
+)
+let dragState:
+  { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
+let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
+
+function startMapDrag(item: MapItem, event: PointerEvent) {
+  dragState = {
+    item,
+    startX: event.clientX,
+    startY: event.clientY,
+    itemX: item.x || 0,
+    itemY: item.y || 0,
+  }
+  window.addEventListener('pointermove', moveMapDrag)
+  window.addEventListener('pointerup', 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
+}
+
+function endMapDrag() {
+  if (!dragState) return
+  const item = dragState.item
+  dragState = undefined
+  window.removeEventListener('pointermove', moveMapDrag)
+  emit('saveItem', item)
+}
+
+function toggleMapItem(item: MapItem) {
+  item.hidden = !item.hidden
+  emit('saveItem', item, item.hidden)
+}
+
+function changeMapScale(delta: number) {
+  mapScale.value = Math.min(2, Math.max(0.5, Number((mapScale.value + delta).toFixed(2))))
+}
+
+function resetMapView() {
+  mapScale.value = 1
+  mapOffset.value = { x: 0, y: 0 }
+}
+
+function startMapPan(event: PointerEvent) {
+  if (event.button !== 0) return
+  panState = {
+    startX: event.clientX,
+    startY: event.clientY,
+    offsetX: mapOffset.value.x,
+    offsetY: mapOffset.value.y,
+  }
+  window.addEventListener('pointermove', moveMapPan)
+  window.addEventListener('pointerup', endMapPan, { once: true })
+}
+
+function moveMapPan(event: PointerEvent) {
+  if (!panState) return
+  mapOffset.value = {
+    x: panState.offsetX + event.clientX - panState.startX,
+    y: panState.offsetY + event.clientY - panState.startY,
+  }
+}
+
+function endMapPan() {
+  panState = undefined
+  window.removeEventListener('pointermove', moveMapPan)
+}
+
+function zoomMap(event: WheelEvent) {
+  event.preventDefault()
+  changeMapScale(event.deltaY < 0 ? 0.1 : -0.1)
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', moveMapDrag)
+  window.removeEventListener('pointermove', moveMapPan)
+})
+</script>
+
+<template>
+  <div class="map-preview-layout">
+    <div class="map-block">
+      <n-flex align="center" justify="space-between">
+        <p class="screens-title">Карта помещения</p>
+        <n-space>
+          <n-button size="small" @click="changeMapScale(-0.1)">−</n-button>
+          <n-text>{{ Math.round(mapScale * 100) }}%</n-text>
+          <n-button size="small" @click="changeMapScale(0.1)">+</n-button>
+          <n-button size="small" @click="resetMapView">Сбросить</n-button>
+        </n-space>
+      </n-flex>
+      <div class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
+        <div
+          class="map-canvas"
+          :style="{ transform: `translate(${mapOffset.x}px, ${mapOffset.y}px) scale(${mapScale})` }"
+        >
+          <div
+            v-for="item in mapItems"
+            v-show="!item.hidden"
+            :key="`${item.kind}-${item.itemID}`"
+            class="map-item"
+            :class="[
+              item.kind === 'screen'
+                ? 'map-screen'
+                : item.kind === 'organizer_desk'
+                  ? 'map-organizer-desk'
+                  : 'map-team',
+              {
+                'map-team-needs-applications':
+                  item.kind === 'team' && teamsNeedingApplications.has(item.itemID),
+              },
+            ]"
+            :style="{ left: `${item.x || 0}px`, top: `${item.y || 0}px` }"
+            @pointerdown.stop="item.kind !== 'team' && startMapDrag(item, $event)"
+          >
+            <div
+              v-if="item.kind === 'team'"
+              class="map-team-handle"
+              @pointerdown.stop="startMapDrag(item, $event)"
+            />
+            <span>{{ item.label }}</span>
+            <n-space
+              v-if="item.kind === 'team' && teamsNeedingApplications.has(item.itemID)"
+              class="map-team-applications"
+              vertical
+            >
+              <n-button
+                v-for="application in teamsNeedingApplications.get(item.itemID)?.applications"
+                :key="application.name"
+                size="small"
+                @click="
+                  emit('giveApplication', teamsNeedingApplications.get(item.itemID)!, application)
+                "
+              >
+                Выдать: {{ application.name }}
+              </n-button>
+            </n-space>
+            <small v-if="item.kind === 'screen'"
+              >{{ item.status }}{{ item.soundEnabled ? ' · звук' : '' }}</small
+            >
+            <button
+              class="map-item-hide"
+              type="button"
+              @pointerdown.stop
+              @click.stop="toggleMapItem(item)"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      </div>
+      <n-space v-if="mapItems.some((item) => item.hidden)" class="map-hidden-items">
+        <n-button
+          v-for="item in mapItems.filter((item) => item.hidden)"
+          :key="`hidden-${item.kind}-${item.itemID}`"
+          size="small"
+          @click="toggleMapItem(item)"
+        >
+          Добавить {{ item.label }}
+        </n-button>
+      </n-space>
+    </div>
+    <aside class="screen-preview-panel">
+      <p class="screens-title">Превью экрана</p>
+      <ScreenPreview
+        v-if="previewScreen?.status === 'connected'"
+        :state="previewScreen"
+        :questions="previewQuestions"
+        :teams="previewTeams"
+      />
+      <div v-else class="screen-preview-placeholder">Экран не подключён</div>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.map-preview-layout {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
+}
+
+.map-block,
+.screen-preview-panel {
+  background-color: #222;
+  border-radius: 10px;
+  margin: 12px 0;
+  padding: 16px;
+}
+
+.screens-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.screen-preview-placeholder {
+  align-items: center;
+  aspect-ratio: 16 / 9;
+  background-color: #111;
+  color: #aaa;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.map-field {
+  background-color: #151515;
+  border: 1px dashed rgb(255 255 255 / 20%);
+  cursor: grab;
+  height: 420px;
+  min-height: 200px;
+  overflow: hidden;
+  position: relative;
+  resize: vertical;
+  touch-action: none;
+}
+
+.map-field:active {
+  cursor: grabbing;
+}
+
+.map-canvas {
+  background-image:
+    linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px);
+  background-size: 20px 20px;
+  height: 1000px;
+  position: absolute;
+  transform-origin: 0 0;
+  width: 2000px;
+}
+
+.map-item {
+  border-radius: 6px;
+  cursor: grab;
+  min-width: 90px;
+  padding: 8px 24px 8px 10px;
+  position: absolute;
+  user-select: none;
+}
+
+.map-item:active {
+  cursor: grabbing;
+}
+
+.map-screen {
+  background-color: #355b75;
+}
+
+.map-organizer-desk {
+  background-color: #48633a;
+}
+
+.map-team {
+  background-color: #222;
+}
+
+.map-team,
+.map-team:active {
+  cursor: default;
+}
+
+.map-team-handle {
+  background-color: #48633a;
+  border-radius: 6px 6px 0 0;
+  cursor: grab;
+  margin: -8px -24px 8px -10px;
+  padding: 8px 24px 8px 10px;
+}
+
+.map-team-handle:active {
+  cursor: grabbing;
+}
+
+.map-team-applications {
+  margin-top: 8px;
+}
+
+.map-team-needs-applications {
+  outline: 2px solid gold;
+}
+
+.map-item small {
+  display: block;
+  opacity: 0.75;
+}
+
+.map-item-hide {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-size: 16px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+.map-team .map-item-hide {
+  line-height: 16px;
+  padding: 0 2px;
+  top: 0;
+}
+
+.map-hidden-items {
+  margin-top: 10px;
+}
+
+@media (width < 1024px) {
+  .map-preview-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/components/GamePage.vue b/src/components/GamePage.vue
index b22c77a..40bf064 100644
--- a/src/components/GamePage.vue
+++ b/src/components/GamePage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Flag, Pause, Play, Reset, Settings, Trophy } from '@vicons/carbon'
 import { Icon } from '@vicons/utils'
-import { NAlert, NButton, NTag } from 'naive-ui'
+import { NButton, NTag } from 'naive-ui'
 import {
   NCard,
   NFlex,
@@ -15,7 +15,7 @@ import {
   NText,
 } from 'naive-ui'
 import { useMessage } from 'naive-ui'
-import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { getAuthClient } from '@/api/auth_client'
@@ -38,8 +38,10 @@ import type {
   Ticket,
 } from '@/api/generated/crabs/evening_detective_server'
 import { getURL } from '@/api/generated/crabs/evening_detective_server/client'
+import GameMapPanel from '@/components/GameMapPanel.vue'
+import GameScreensPanel from '@/components/GameScreensPanel.vue'
+import GameTeamsPanel from '@/components/GameTeamsPanel.vue'
 import HeaderMenu from '@/components/HeaderMenu.vue'
-import ScreenPreview from '@/components/ScreenPreview.vue'
 import { useSimplePolling } from '@/composables/useSimplePolling'
 import { applicationFileType, applicationFileURL } from '@/utils/application'
 import { formatGameDateTime, parseDateWithoutTimezone } from '@/utils/datetime'
@@ -70,15 +72,7 @@ const showIssueTicketsModal = ref(false)
 const ticketCount = ref(1)
 const issuedTickets = ref<Ticket[]>([])
 const isIssuingTickets = ref(false)
-const showScreenScanner = ref(false)
-const screenScannerError = ref('')
-const screenScannerVideo = ref<HTMLVideoElement>()
 const screenBinding = ref(false)
-const screenScanning = ref(false)
-let screenScannerStream: MediaStream | undefined
-let screenScannerFrame = 0
-
-type BarcodeDetector = { detect(video: HTMLVideoElement): Promise<{ rawValue: string }[]> }
 
 const game = ref<Game>({
   ID: undefined,
@@ -99,14 +93,6 @@ const participationOptions = [
 const activeTeamCount = computed(
   () => (game.value.teams || []).filter((team) => team.participationStatus !== 'cancelled').length,
 )
-const teamsNeedingApplications = computed(
-  () =>
-    new Map(
-      (game.value.teams || [])
-        .filter((team) => team.applications?.length)
-        .map((team) => [team.ID, team]),
-    ),
-)
 const screens = ref<ScreenState[]>([])
 const screenPlan = ref<ScreenPlan>()
 const screenPlanDraft = ref<ScreenPlanStep[]>([])
@@ -114,31 +100,12 @@ const screenPlanDirty = ref(false)
 const screenPlanSaving = ref(false)
 const screenPlanMode = ref<'use' | 'edit'>('use')
 let screenPlanRequestVersion = 0
-const screenPlanStepKeys = new WeakMap<ScreenPlanStep, number>()
-let nextScreenPlanStepKey = 0
 const previewQuestions = ref<ResultsQuestion[]>([])
 const previewTeams = ref<TeamResult[]>([])
 const mapItems = ref<MapItem[]>([])
 const mapSaving = ref(false)
 const screenVolume = ref(100)
 const screenPosition = ref(0)
-const previewScreen = computed(() => screens.value.find((screen) => screen.status === 'connected') || screens.value[0])
-const hasDisconnectedScreen = computed(() => screens.value.some((screen) => screen.status === 'disconnected'))
-const screenPlanModeOptions = [
-  { label: 'Обложка', value: 'SCREEN_MODE_COVER' },
-  { label: 'Введение', value: 'SCREEN_MODE_INTRO' },
-  { label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
-  { label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
-  { label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
-  { label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
-  { label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
-  { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
-]
-const mapScale = ref(1)
-const mapOffset = ref({ x: 0, y: 0 })
-let dragState:
-  { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
-let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
 
 async function getGame(id: number) {
   const res = await client.GetGame({ ID: id })
@@ -175,7 +142,9 @@ getGame(Number(gameId))
 async function getGameScreens() {
   const res = await client.GetGameScreens({ gameID: Number(gameId) })
   screens.value = res.screens || []
-  if (previewScreen.value?.mode === 'SCREEN_MODE_RESULTS') {
+  const previewScreen =
+    screens.value.find((screen) => screen.status === 'connected') || screens.value[0]
+  if (previewScreen?.mode === 'SCREEN_MODE_RESULTS') {
     const result = await client.GetGameResults({ gameID: Number(gameId) })
     previewQuestions.value = result.questions || []
     previewTeams.value = result.teams || []
@@ -191,9 +160,9 @@ function isScreenPlanEditing() {
 }
 
 async function getScreenPlan() {
-  console.log("getScreenPlan")
+  console.log('getScreenPlan')
   if (isScreenPlanEditing() || screenPlanDirty.value) return
-  console.log("no skip getScreenPlan")
+  console.log('no skip getScreenPlan')
   const requestVersion = ++screenPlanRequestVersion
   const res = await client.GetScreenPlan({ gameID: Number(gameId) })
   if (
@@ -249,13 +218,9 @@ function markScreenPlanDirty() {
   screenPlanDirty.value = true
 }
 
-function getScreenPlanStepKey(step: ScreenPlanStep) {
-  let key = screenPlanStepKeys.get(step)
-  if (key === undefined) {
-    key = nextScreenPlanStepKey++
-    screenPlanStepKeys.set(step, key)
-  }
-  return key
+function clearScreenPlan() {
+  screenPlanDraft.value = []
+  markScreenPlanDirty()
 }
 
 async function saveScreenPlan() {
@@ -298,7 +263,9 @@ async function setScreenPlanStep(index: number) {
 async function sendScreenPlanCommand(mode: ScreenMode | undefined, command: ScreenCommand) {
   if (
     screenPlanDirty.value ||
-    (mode !== 'SCREEN_MODE_TIMER' && mode !== 'SCREEN_MODE_INTRO' && mode !== 'SCREEN_MODE_CONCLUSION')
+    (mode !== 'SCREEN_MODE_TIMER' &&
+      mode !== 'SCREEN_MODE_INTRO' &&
+      mode !== 'SCREEN_MODE_CONCLUSION')
   ) {
     return
   }
@@ -315,30 +282,6 @@ async function sendScreenPlanCommand(mode: ScreenMode | undefined, command: Scre
   }
 }
 
-function stopScreenScanner() {
-  cancelAnimationFrame(screenScannerFrame)
-  screenScannerStream?.getTracks().forEach((track) => track.stop())
-  screenScannerStream = undefined
-  screenScanning.value = false
-}
-
-function closeScreenScanner() {
-  stopScreenScanner()
-  showScreenScanner.value = false
-}
-
-function parseScreenQRCode(rawValue: string) {
-  try {
-    const url = new URL(rawValue, window.location.origin)
-    const screenID = url.searchParams.get('screenId')
-    const accessToken = url.searchParams.get('accessToken')
-    if (url.pathname !== '/screen' || !screenID || !accessToken) return
-    return { screenID, accessToken }
-  } catch {
-    return
-  }
-}
-
 async function bindScannedScreen(screenID: string, accessToken: string) {
   if (screenBinding.value) return
   screenBinding.value = true
@@ -346,7 +289,6 @@ async function bindScannedScreen(screenID: string, accessToken: string) {
     await client.BindScreen({ screenID, accessToken, gameID: Number(gameId) })
     message.success('Экран привязан к игре')
     await getGameScreens()
-    closeScreenScanner()
   } catch (err) {
     message.error(err instanceof Error ? err.message : 'Не удалось привязать экран')
   } finally {
@@ -354,51 +296,8 @@ async function bindScannedScreen(screenID: string, accessToken: string) {
   }
 }
 
-async function startScreenScanner() {
-  const DetectorClass = (window as Window & { BarcodeDetector?: new () => BarcodeDetector }).BarcodeDetector
-  if (!DetectorClass || !navigator.mediaDevices?.getUserMedia) {
-    screenScannerError.value = 'Сканирование камерой не поддерживается в этом браузере.'
-    showScreenScanner.value = true
-    return
-  }
-  showScreenScanner.value = true
-  screenScannerError.value = ''
-  try {
-    screenScannerStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
-    screenScanning.value = true
-    await nextTick()
-    if (!screenScannerVideo.value) return
-    screenScannerVideo.value.srcObject = screenScannerStream
-    await screenScannerVideo.value.play()
-    const detector = new DetectorClass()
-    const scan = async () => {
-      if (!screenScannerVideo.value || !screenScannerStream) return
-      try {
-        const code = (await detector.detect(screenScannerVideo.value))[0]?.rawValue
-        if (code) {
-          const screen = parseScreenQRCode(code)
-          if (screen) {
-            stopScreenScanner()
-            await bindScannedScreen(screen.screenID, screen.accessToken)
-            return
-          }
-          screenScannerError.value = 'Это не QR-код экрана.'
-        }
-        screenScannerFrame = requestAnimationFrame(scan)
-      } catch {
-        screenScannerError.value = 'Не удалось распознать QR-код.'
-        stopScreenScanner()
-      }
-    }
-    screenScannerFrame = requestAnimationFrame(scan)
-  } catch {
-    screenScannerError.value = 'Не удалось открыть камеру.'
-    stopScreenScanner()
-  }
-}
-
 async function getGameMap() {
-  if (dragState || mapSaving.value) return
+  if (mapSaving.value) return
   const res = await client.GetGameMap({ gameID: Number(gameId) })
   mapItems.value = res.items || []
 }
@@ -420,82 +319,11 @@ async function saveMapItem(item: MapItem, hidden = item.hidden) {
   }
 }
 
-function startMapDrag(item: MapItem, event: PointerEvent) {
-  dragState = {
-    item,
-    startX: event.clientX,
-    startY: event.clientY,
-    itemX: item.x || 0,
-    itemY: item.y || 0,
-  }
-  window.addEventListener('pointermove', moveMapDrag)
-  window.addEventListener('pointerup', 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
-}
-
-async function endMapDrag() {
-  if (!dragState) return
-  const item = dragState.item
-  dragState = undefined
-  window.removeEventListener('pointermove', moveMapDrag)
-  await saveMapItem(item)
+async function saveMapItemAndReload(item: MapItem, hidden = item.hidden) {
+  await saveMapItem(item, hidden)
   await getGameMap()
 }
 
-async function toggleMapItem(item: MapItem) {
-  item.hidden = !item.hidden
-  await saveMapItem(item)
-}
-
-function changeMapScale(delta: number) {
-  mapScale.value = Math.min(2, Math.max(0.5, Number((mapScale.value + delta).toFixed(2))))
-}
-
-function resetMapView() {
-  mapScale.value = 1
-  mapOffset.value = { x: 0, y: 0 }
-}
-
-function startMapPan(event: PointerEvent) {
-  if (event.button !== 0) return
-  panState = {
-    startX: event.clientX,
-    startY: event.clientY,
-    offsetX: mapOffset.value.x,
-    offsetY: mapOffset.value.y,
-  }
-  window.addEventListener('pointermove', moveMapPan)
-  window.addEventListener('pointerup', endMapPan, { once: true })
-}
-
-function moveMapPan(event: PointerEvent) {
-  if (!panState) return
-  mapOffset.value = {
-    x: panState.offsetX + event.clientX - panState.startX,
-    y: panState.offsetY + event.clientY - panState.startY,
-  }
-}
-
-function endMapPan() {
-  panState = undefined
-  window.removeEventListener('pointermove', moveMapPan)
-}
-
-function zoomMap(event: WheelEvent) {
-  event.preventDefault()
-  changeMapScale(event.deltaY < 0 ? 0.1 : -0.1)
-}
-
 async function setSoundScreen(screen: ScreenState) {
   await client.SetScreenSound({ screenID: screen.ID, soundEnabled: true })
   await getGameScreens()
@@ -663,6 +491,10 @@ function getTeamStoryURL(id: number, password: string): string {
   return getURL() + '/team-story/' + id + '?password=' + password
 }
 
+function openTeamQR(team: Team) {
+  openQR(getTeamStoryURL(team.ID!, team.password!), 'Подсмотреть игру')
+}
+
 async function openQR(url: string, text: string) {
   urlQR.value = url
   titleQR.value = text
@@ -699,8 +531,6 @@ useSimplePolling(() => {
   getGameMap()
 }, 2000)
 
-onBeforeUnmount(stopScreenScanner)
-
 async function resetGame() {
   await client.ResetGame({
     ID: game.value.ID,
@@ -872,8 +702,13 @@ useSimplePolling(() => {
               </Icon>
               Итоги
             </n-button>
-            <n-button v-if="activeTeamCount" quaternary :loading="isDownloadingQR" :disabled="isDownloadingQR"
-              @click="downloadTeamQR()">
+            <n-button
+              v-if="activeTeamCount"
+              quaternary
+              :loading="isDownloadingQR"
+              :disabled="isDownloadingQR"
+              @click="downloadTeamQR()"
+            >
               QR команд
             </n-button>
             <n-button quaternary @click="openSettings()">
@@ -882,7 +717,12 @@ useSimplePolling(() => {
               </Icon>
               Настройки
             </n-button>
-            <n-button v-if="(game.teams?.length || 0) == 0" type="error" quaternary @click="showDeleteGameModal = true">
+            <n-button
+              v-if="(game.teams?.length || 0) == 0"
+              type="error"
+              quaternary
+              @click="showDeleteGameModal = true"
+            >
               Удалить игру
             </n-button>
 
@@ -917,304 +757,97 @@ useSimplePolling(() => {
         </n-flex>
       </div>
 
-      <div class="screens-block">
-        <n-flex align="center" justify="space-between">
-          <p class="screens-title">Экраны</p>
-          <n-button size="small" type="primary" @click="startScreenScanner">Привязать экран</n-button>
-        </n-flex>
-        <n-alert v-if="hasDisconnectedScreen" type="warning" title="Проверьте подключение экрана">
-          Один или несколько экранов не выходят на связь более минуты.
-        </n-alert>
-        <p v-if="screens.length === 0" class="screen-empty">К игре пока не привязаны экраны.</p>
-        <template v-else>
-          <div v-for="screen in screens" :key="screen.ID" class="screen-row">
-            <div>
-              <div>Экран {{ screen.ID }}</div>
-              <div class="screen-status">
-                {{ screen.status === 'connected' ? 'Онлайн' : 'Оффлайн' }}
-              </div>
-              <div v-if="screen.error" class="screen-error">{{ screen.error }}</div>
-            </div>
-            <n-flex justify="end">
-              <n-tag v-if="screen.soundEnabled" type="success">Со звуком</n-tag>
-              <n-button v-else size="small" @click="setSoundScreen(screen)">Назначить звук</n-button>
-              <n-button size="small" type="error" ghost @click="unbindScreen(screen)">
-                Отвязать
-              </n-button>
-            </n-flex>
-          </div>
-          <div class="screen-plan">
-            <n-flex align="center" justify="space-between">
-              <p class="screens-title">План экранов</p>
-              <n-space>
-                <n-button v-if="!screenPlan && screenPlanMode === 'use'" size="small" @click="addScreenPlanStep">
-                  Создать план
-                </n-button>
-                <template v-if="screenPlan && screenPlanMode === 'use'">
-                  <n-button size="small" @click="editScreenPlan">Редактировать</n-button>
-                </template>
-                <template v-if="screenPlanMode === 'edit'">
-                  <n-button size="small" :disabled="screenPlanSaving" @click="cancelScreenPlanEdit">
-                    Отменить
-                  </n-button>
-                  <n-button size="small" type="primary" :loading="screenPlanSaving" :disabled="screenPlanSaving"
-                    @click="saveScreenPlan">
-                    Сохранить план
-                  </n-button>
-                </template>
-              </n-space>
-            </n-flex>
-            <p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">План экранов ещё не создан.</p>
-            <template v-else-if="screenPlanMode === 'edit'">
-              <n-space v-for="(step, index) in screenPlanDraft" :key="getScreenPlanStepKey(step)" align="center" wrap>
-                <n-text>{{ index + 1 }}</n-text>
-                <n-select v-model:value="step.mode" :options="screenPlanModeOptions" :disabled="screenPlanSaving"
-                  size="small" style="width: 180px" @update:value="markScreenPlanDirty" />
-                <n-input v-if="step.mode === 'SCREEN_MODE_TEXT'" v-model:value="step.text" :disabled="screenPlanSaving"
-                  size="small" placeholder="Текст экрана" style="min-width: 240px"
-                  @update:value="markScreenPlanDirty" />
-                <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
-                  <n-input v-model:value="step.timerLabel" :disabled="screenPlanSaving" size="small"
-                    placeholder="Надпись таймера" @update:value="markScreenPlanDirty" />
-                  <n-input-number v-model:value="step.timerDurationSeconds" :min="1" :max="86400"
-                    :disabled="screenPlanSaving" size="small" placeholder="Секунды"
-                    @update:value="markScreenPlanDirty" />
-                </template>
-                <n-button size="small" :disabled="screenPlanSaving || index === 0"
-                  @click="moveScreenPlanStep(index, -1)">
-                  ↑
-                </n-button>
-                <n-button size="small" :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
-                  @click="moveScreenPlanStep(index, 1)">
-                  ↓
-                </n-button>
-                <n-button size="small" type="error" ghost :disabled="screenPlanSaving"
-                  @click="removeScreenPlanStep(index)">
-                  Удалить
-                </n-button>
-              </n-space>
-              <n-space>
-                <n-button size="small" :disabled="screenPlanSaving" @click="addScreenPlanStep">
-                  Добавить шаг
-                </n-button>
-                <n-button v-if="screenPlanDraft.length" size="small" :disabled="screenPlanSaving"
-                  @click="screenPlanDraft = []; markScreenPlanDirty()">
-                  Удалить план
-                </n-button>
-              </n-space>
-            </template>
-            <template v-else-if="screenPlan">
-              <n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
-                <n-text>{{ index + 1 }}</n-text>
-                <n-text>{{screenPlanModeOptions.find((option) => option.value === step.mode)?.label}}
-                  <template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
-                  <template v-else-if="step.mode === 'SCREEN_MODE_TIMER'">
-                    : {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)
-                  </template>
-                </n-text>
-                <n-button size="small" :type="screenPlan.currentStep === index ? 'primary' : 'default'"
-                  :disabled="screenPlan.currentStep === index" @click="setScreenPlanStep(index)">
-                  Показать
-                </n-button>
-                <template v-if="screenPlan.currentStep === index">
-                  <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_TIMER_START')">
-                      Старт
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')">
-                      Пауза
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_TIMER_RESUME')">
-                      Продолжить
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_TIMER_RESET')">
-                      Сбросить
-                    </n-button>
-                  </template>
-                  <template v-else-if="step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'">
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_PLAY')">
-                      Запуск
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_PAUSE')">
-                      Пауза
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_RESUME')">
-                      Продолжить
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_STOP')">
-                      Стоп
-                    </n-button>
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_REPLAY')">
-                      Повтор
-                    </n-button>
-                    <n-input-number v-model:value="screenVolume" :min="0" :max="100" :step="5" size="small" />
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_VOLUME')">
-                      Громкость
-                    </n-button>
-                    <n-input-number v-model:value="screenPosition" :min="0" :step="5" size="small" />
-                    <n-button size="small" @click="sendScreenPlanCommand(step.mode, 'SCREEN_COMMAND_SEEK')">
-                      Перемотать
-                    </n-button>
-                  </template>
-                </template>
-              </n-space>
-            </template>
-          </div>
-        </template>
-      </div>
-
-      <div class="map-preview-layout">
-        <div class="map-block">
-          <n-flex align="center" justify="space-between">
-            <p class="screens-title">Карта помещения</p>
-            <n-space>
-              <n-button size="small" @click="changeMapScale(-0.1)">−</n-button>
-              <n-text>{{ Math.round(mapScale * 100) }}%</n-text>
-              <n-button size="small" @click="changeMapScale(0.1)">+</n-button>
-              <n-button size="small" @click="resetMapView">Сбросить</n-button>
-            </n-space>
-          </n-flex>
-          <div class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
-            <div class="map-canvas" :style="{
-              transform: `translate(${mapOffset.x}px, ${mapOffset.y}px) scale(${mapScale})`,
-            }">
-              <div v-for="item in mapItems" v-show="!item.hidden" :key="`${item.kind}-${item.itemID}`" class="map-item"
-                :class="[
-                  item.kind === 'screen'
-                    ? 'map-screen'
-                    : item.kind === 'organizer_desk'
-                      ? 'map-organizer-desk'
-                      : 'map-team',
-                  {
-                    'map-team-needs-applications':
-                      item.kind === 'team' && teamsNeedingApplications.has(item.itemID),
-                  },
-                ]" :style="{ left: `${item.x || 0}px`, top: `${item.y || 0}px` }"
-                @pointerdown.stop="item.kind !== 'team' && startMapDrag(item, $event)">
-                <div v-if="item.kind === 'team'" class="map-team-handle"
-                  @pointerdown.stop="startMapDrag(item, $event)" />
-                <span>{{ item.label }}</span>
-                <n-space v-if="item.kind === 'team' && teamsNeedingApplications.has(item.itemID)"
-                  class="map-team-applications" vertical>
-                  <n-button v-for="application in teamsNeedingApplications.get(item.itemID)?.applications"
-                    :key="application.name" size="small"
-                    @click="giveApplication(teamsNeedingApplications.get(item.itemID)!, application)">
-                    Выдать: {{ application.name }}
-                  </n-button>
-                </n-space>
-                <small v-if="item.kind === 'screen'">{{ item.status }}{{ item.soundEnabled ? ' · звук' : '' }}</small>
-                <button class="map-item-hide" type="button" @pointerdown.stop @click.stop="toggleMapItem(item)">
-                  ×
-                </button>
-              </div>
-            </div>
-          </div>
-          <n-space v-if="mapItems.some((item) => item.hidden)" class="map-hidden-items">
-            <n-button v-for="item in mapItems.filter((item) => item.hidden)" :key="`hidden-${item.kind}-${item.itemID}`"
-              size="small" @click="toggleMapItem(item)">
-              Добавить {{ item.label }}
-            </n-button>
-          </n-space>
-        </div>
-        <aside class="screen-preview-panel">
-          <p class="screens-title">Превью экрана</p>
-          <ScreenPreview v-if="previewScreen?.status === 'connected'" :state="previewScreen"
-            :questions="previewQuestions" :teams="previewTeams" />
-          <div v-else class="screen-preview-placeholder">Экран не подключён</div>
-        </aside>
-      </div>
-
-      <div class="team-block team-block-hover" @click="showAddTeamModal = true">
-        <p class="place-image-plus">+</p>
-      </div>
-
-      <div v-for="team in game.teams" :key="team.ID" class="team-block">
-        <div class="team-content-block">
-          <n-flex justify="space-between">
-            <div class="title-block">
-              <span class="team-name-block">
-                {{ team.name }}
-                <small v-if="team.captainEmail"> — {{ team.captainEmail }}</small>
-                <small v-if="team.participantsCount">
-                  · Участников: {{ team.participantsCount }}</small>
-              </span>
-              <div v-if="team.captainEmail || team.participationStatus !== 'pending'">
-                {{
-                  participationOptions.find((option) => option.value === team.participationStatus)
-                    ?.label
-                }}<span v-if="team.participationSource === 'automatic'"> · автоматически</span>
-              </div>
-              <div v-if="!team.captainEmail">Почта капитана не указана</div>
-              <div v-else-if="team.participationEmailError">
-                Ошибка отправки: {{ team.participationEmailError }}
-              </div>
-              <div v-else-if="team.participationEmailSent">Письмо отправлено</div>
-              <div v-if="team.participationStatus !== 'cancelled'">
-                Поездки: {{ team.actionsCount }}
-              </div>
-            </div>
-
-            <n-flex justify="end">
-              <n-button v-if="team.participationStatus !== 'cancelled'"
-                @click="openQR(getTeamStoryURL(team.ID!, team.password!), 'Подсмотреть игру')">
-                QR
-              </n-button>
-              <n-button v-if="team.participationStatus !== 'cancelled'"
-                @click="toTeamStory(team.ID!, team.password!, true)">
-                Подсмотреть игру
-              </n-button>
-              <n-button type="error" ghost @click="deleteTeam(team)"> Удалить </n-button>
-            </n-flex>
-          </n-flex>
-
-          <n-button v-for="application in team.applications" :key="application.name" class="link-button"
-            @click="giveApplication(team, application)">
-            Выдать: {{ application.name }}
-          </n-button>
-        </div>
-      </div>
+      <GameScreensPanel
+        :screens="screens"
+        :screen-plan="screenPlan"
+        :screen-plan-draft="screenPlanDraft"
+        :screen-plan-dirty="screenPlanDirty"
+        :screen-plan-saving="screenPlanSaving"
+        :screen-plan-mode="screenPlanMode"
+        :screen-volume="screenVolume"
+        :screen-position="screenPosition"
+        :screen-binding="screenBinding"
+        @bind="bindScannedScreen"
+        @set-sound="setSoundScreen"
+        @unbind="unbindScreen"
+        @add-step="addScreenPlanStep"
+        @edit="editScreenPlan"
+        @cancel="cancelScreenPlanEdit"
+        @remove-step="removeScreenPlanStep"
+        @move-step="moveScreenPlanStep"
+        @dirty="markScreenPlanDirty"
+        @clear-plan="clearScreenPlan"
+        @save="saveScreenPlan"
+        @set-step="setScreenPlanStep"
+        @command="sendScreenPlanCommand"
+        @update:screen-volume="screenVolume = $event ?? 0"
+        @update:screen-position="screenPosition = $event ?? 0"
+      />
+      <GameMapPanel
+        :map-items="mapItems"
+        :teams="game.teams || []"
+        :screens="screens"
+        :preview-questions="previewQuestions"
+        :preview-teams="previewTeams"
+        @save-item="saveMapItemAndReload"
+        @give-application="giveApplication"
+      />
+      <GameTeamsPanel
+        :teams="game.teams || []"
+        :participation-options="participationOptions"
+        @add="showAddTeamModal = true"
+        @open-qr="openTeamQR"
+        @preview="(id, password) => toTeamStory(id, password, true)"
+        @delete="deleteTeam"
+        @give-application="giveApplication"
+      />
     </div>
   </div>
 
-  <n-modal v-model:show="showScreenScanner" @after-leave="stopScreenScanner">
-    <n-card style="width: min(600px, 94vw)" title="Привязать экран" :bordered="false" size="huge" role="dialog"
-      aria-modal="true">
-      <template #header-extra>
-        <n-button @click="closeScreenScanner"> x </n-button>
-      </template>
-      <n-space vertical>
-        <video ref="screenScannerVideo" class="screen-scanner-video" muted playsinline />
-        <n-alert v-if="screenScannerError" type="error">{{ screenScannerError }}</n-alert>
-        <n-button v-if="!screenScanning && !screenBinding" type="primary" @click="startScreenScanner">
-          Сканировать QR-код
-        </n-button>
-        <n-button v-if="screenScanning" @click="stopScreenScanner">Остановить камеру</n-button>
-        <n-button v-if="screenBinding" type="primary" loading>Привязка…</n-button>
-      </n-space>
-    </n-card>
-  </n-modal>
-
   <!-- Окно настроек -->
   <n-modal v-model:show="showSettingsModal">
-    <n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      title="Настройки игры"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="closeSettings()"> x </n-button>
       </template>
       <n-space vertical>
         <p>Название</p>
-        <n-input v-model:value="settingsDraft.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
+        <n-input
+          v-model:value="settingsDraft.name"
+          type="text"
+          placeholder='Дело №0 "Следствие ведут овечки"'
+        />
 
         <p class="settings-header">Формат игры</p>
-        <n-select v-model:value="settingsDraft.format" :options="[
-          { label: 'Online', value: 'online' },
-          { label: 'Offline', value: 'offline' },
-        ]" aria-label="Формат игры" />
+        <n-select
+          v-model:value="settingsDraft.format"
+          :options="[
+            { label: 'Online', value: 'online' },
+            { label: 'Offline', value: 'offline' },
+          ]"
+          aria-label="Формат игры"
+        />
 
         <p class="settings-header">Описание</p>
-        <n-input v-model:value="settingsDraft.description" type="textarea" placeholder="Убийство пастуха..." />
+        <n-input
+          v-model:value="settingsDraft.description"
+          type="textarea"
+          placeholder="Убийство пастуха..."
+        />
 
         <p class="settings-header">Место проведения</p>
-        <n-input v-model:value="settingsDraft.location" type="text" placeholder="Оставьте пустым для онлайн-игры" />
+        <n-input
+          v-model:value="settingsDraft.location"
+          type="text"
+          placeholder="Оставьте пустым для онлайн-игры"
+        />
       </n-space>
       <template #footer>
         <n-flex justify="end">
@@ -1226,7 +859,14 @@ useSimplePolling(() => {
 
   <!-- Окно выдачи улик -->
   <n-modal v-model:show="showGiveApplicationModal">
-    <n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      title="Настройки игры"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showGiveApplicationModal = false"> x </n-button>
       </template>
@@ -1237,22 +877,38 @@ useSimplePolling(() => {
         <p>Улика</p>
         <h3>{{ giveApplicationApplication.name }}</h3>
 
-        <div v-if="
-          applicationFileType(giveApplicationApplication) == 'image' &&
-          giveApplicationApplication.image
-        " class="give-application-image-block">
-          <img :src="applicationFileURL(giveApplicationApplication.image)" class="give-application-image" />
+        <div
+          v-if="
+            applicationFileType(giveApplicationApplication) == 'image' &&
+            giveApplicationApplication.image
+          "
+          class="give-application-image-block"
+        >
+          <img
+            :src="applicationFileURL(giveApplicationApplication.image)"
+            class="give-application-image"
+          />
         </div>
-        <audio v-else-if="
-          applicationFileType(giveApplicationApplication) == 'audio' &&
-          giveApplicationApplication.image
-        " :src="applicationFileURL(giveApplicationApplication.image)" controls preload="none"
-          class="give-application-audio"></audio>
-        <a v-else-if="
-          applicationFileType(giveApplicationApplication) == 'pdf' &&
-          giveApplicationApplication.image
-        " :href="applicationFileURL(giveApplicationApplication.image)" target="_blank" rel="noopener"
-          class="give-application-pdf-link">
+        <audio
+          v-else-if="
+            applicationFileType(giveApplicationApplication) == 'audio' &&
+            giveApplicationApplication.image
+          "
+          :src="applicationFileURL(giveApplicationApplication.image)"
+          controls
+          preload="none"
+          class="give-application-audio"
+        ></audio>
+        <a
+          v-else-if="
+            applicationFileType(giveApplicationApplication) == 'pdf' &&
+            giveApplicationApplication.image
+          "
+          :href="applicationFileURL(giveApplicationApplication.image)"
+          target="_blank"
+          rel="noopener"
+          class="give-application-pdf-link"
+        >
           PDF
         </a>
       </n-space>
@@ -1266,16 +922,33 @@ useSimplePolling(() => {
 
   <!-- Окно создания команды -->
   <n-modal v-model:show="showAddTeamModal">
-    <n-card style="width: 600px" title="Создание команды" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      title="Создание команды"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showAddTeamModal = false"> x </n-button>
       </template>
       <n-space vertical>
         <n-input v-model:value="newTeamName" type="text" placeholder="Три дебила" />
-        <n-input v-model:value="newTeamEmail" :input-props="{ type: 'email', autocomplete: 'email' }"
-          placeholder="Почта капитана (необязательно)" aria-label="Почта капитана (необязательно)" />
-        <n-input-number v-model:value="newTeamParticipants" :min="1" :max="8" :precision="0"
-          placeholder="Количество игроков" aria-label="Количество игроков" />
+        <n-input
+          v-model:value="newTeamEmail"
+          :input-props="{ type: 'email', autocomplete: 'email' }"
+          placeholder="Почта капитана (необязательно)"
+          aria-label="Почта капитана (необязательно)"
+        />
+        <n-input-number
+          v-model:value="newTeamParticipants"
+          :min="1"
+          :max="8"
+          :precision="0"
+          placeholder="Количество игроков"
+          aria-label="Количество игроков"
+        />
       </n-space>
       <template #footer>
         <n-flex justify="end">
@@ -1287,7 +960,14 @@ useSimplePolling(() => {
 
   <!-- Окно создания команды -->
   <n-modal v-model:show="showDeleteTeamModal">
-    <n-card style="width: 600px" title="Удаление команды" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      title="Удаление команды"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showDeleteTeamModal = false"> x </n-button>
       </template>
@@ -1311,7 +991,14 @@ useSimplePolling(() => {
 
   <!-- Окно удаления игры -->
   <n-modal v-model:show="showDeleteGameModal">
-    <n-card style="width: 600px" title="Удаление игры" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      title="Удаление игры"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showDeleteGameModal = false"> x </n-button>
       </template>
@@ -1320,7 +1007,11 @@ useSimplePolling(() => {
           Введите название игры
           <n-text class="name-text" strong>{{ game.name }}</n-text> чтобы удалить её
         </p>
-        <n-input v-model:value="deletedGameName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
+        <n-input
+          v-model:value="deletedGameName"
+          type="text"
+          placeholder='Дело №0 "Следствие ведут овечки"'
+        />
       </n-space>
 
       <template #footer>
@@ -1335,14 +1026,25 @@ useSimplePolling(() => {
 
   <!-- Окно qr -->
   <n-modal v-model:show="showIssueTicketsModal">
-    <n-card style="width: min(94vw, 700px)" title="Выпуск билетов" :bordered="false" size="huge" role="dialog"
-      aria-modal="true">
+    <n-card
+      style="width: min(94vw, 700px)"
+      title="Выпуск билетов"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showIssueTicketsModal = false"> x </n-button>
       </template>
       <n-space vertical>
         <n-input-number v-model:value="ticketCount" :min="1" :max="100" />
-        <n-button type="primary" :loading="isIssuingTickets" :disabled="isIssuingTickets" @click="issueTickets()">
+        <n-button
+          type="primary"
+          :loading="isIssuingTickets"
+          :disabled="isIssuingTickets"
+          @click="issueTickets()"
+        >
           Выпустить
         </n-button>
         <div v-for="ticket in issuedTickets" :key="ticket.ID" class="issued-ticket">
@@ -1357,7 +1059,14 @@ useSimplePolling(() => {
   </n-modal>
 
   <n-modal v-model:show="showQR">
-    <n-card style="width: 600px" :title="titleQR" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      style="width: 600px"
+      :title="titleQR"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <template #header-extra>
         <n-button @click="showQR = false"> x </n-button>
       </template>
@@ -1373,8 +1082,15 @@ useSimplePolling(() => {
 
   <!-- Окно ответов команд и оценки -->
   <n-modal v-model:show="showAnswersModal">
-    <n-card style="width: min(94vw, 900px)" title="Ответы команд" :bordered="false" size="huge" role="dialog"
-      aria-modal="true" :content-style="{ maxHeight: '70vh', overflow: 'auto' }">
+    <n-card
+      style="width: min(94vw, 900px)"
+      title="Ответы команд"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+      :content-style="{ maxHeight: '70vh', overflow: 'auto' }"
+    >
       <template #header-extra>
         <n-button @click="showAnswersModal = false"> x </n-button>
       </template>
@@ -1393,9 +1109,12 @@ useSimplePolling(() => {
           <div class="answers-team-answer">
             {{ teamAnswer(team, question.code) || '—' }}
           </div>
-          <n-input-number :value="scores[scoreKey(team.team?.ID, question.code)]"
-            @update:value="onScoreUpdate(scoreKey(team.team?.ID, question.code), $event)" placeholder="Балл"
-            class="answers-score-input" />
+          <n-input-number
+            :value="scores[scoreKey(team.team?.ID, question.code)]"
+            @update:value="onScoreUpdate(scoreKey(team.team?.ID, question.code), $event)"
+            placeholder="Балл"
+            class="answers-score-input"
+          />
         </div>
       </div>
       <template #footer>
@@ -1409,14 +1128,23 @@ useSimplePolling(() => {
   </n-modal>
 
   <n-modal v-model:show="showReviewsModal">
-    <n-card style="width: min(94vw, 800px)" title="Отзывы игры" :bordered="false" size="huge" role="dialog"
-      aria-modal="true" :content-style="{ maxHeight: '70vh', overflow: 'auto' }">
+    <n-card
+      style="width: min(94vw, 800px)"
+      title="Отзывы игры"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+      :content-style="{ maxHeight: '70vh', overflow: 'auto' }"
+    >
       <template #header-extra>
         <n-button @click="showReviewsModal = false"> x </n-button>
       </template>
       <n-flex align="center" class="reviews-summary">
         <n-rate :value="reviewsAverage" readonly allow-half />
-        <span>{{ reviewsCount ? `${reviewsAverage.toFixed(1)} · ${reviewsCount}` : 'Пока нет отзывов' }}</span>
+        <span>{{
+          reviewsCount ? `${reviewsAverage.toFixed(1)} · ${reviewsCount}` : 'Пока нет отзывов'
+        }}</span>
       </n-flex>
       <div v-if="gameReviews.length == 0" class="answers-empty">Отзывов пока нет.</div>
       <div v-for="review in gameReviews" :key="review.ID" class="review-row">
@@ -1429,7 +1157,9 @@ useSimplePolling(() => {
         <p>{{ review.text }}</p>
         <n-flex v-if="review.status == 'pending'" justify="end">
           <n-button type="success" @click="moderateReview(review, 'approved')">Одобрить</n-button>
-          <n-button type="error" ghost @click="moderateReview(review, 'rejected')">Отклонить</n-button>
+          <n-button type="error" ghost @click="moderateReview(review, 'rejected')"
+            >Отклонить</n-button
+          >
         </n-flex>
         <n-flex v-else-if="review.status == 'approved'" justify="end">
           <n-button type="error" ghost @click="moderateReview(review, 'hidden')">Скрыть</n-button>
@@ -1442,13 +1172,6 @@ useSimplePolling(() => {
 </template>
 
 <style scoped>
-.team-block {
-  background-color: #222;
-  border: 1px solid #222;
-  border-radius: 10px;
-  margin: 10px 0;
-}
-
 .reviews-summary {
   margin-bottom: 20px;
 }
@@ -1624,13 +1347,6 @@ useSimplePolling(() => {
   font-size: 13px;
 }
 
-.screen-scanner-video {
-  aspect-ratio: 1;
-  background-color: #000;
-  object-fit: cover;
-  width: 100%;
-}
-
 .map-preview-layout {
   display: grid;
   gap: 12px;
diff --git a/src/components/GameScreensPanel.vue b/src/components/GameScreensPanel.vue
new file mode 100644
index 0000000..b27e9c5
--- /dev/null
+++ b/src/components/GameScreensPanel.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import {
+  NAlert,
+  NButton,
+  NFlex,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NTag,
+  NText,
+} from 'naive-ui'
+import { ref } from 'vue'
+
+import type {
+  ScreenCommand,
+  ScreenMode,
+  ScreenPlan,
+  ScreenPlanStep,
+  ScreenState,
+} from '@/api/generated/crabs/evening_detective_server'
+import ScreenBindingModal from '@/components/ScreenBindingModal.vue'
+
+const props = defineProps<{
+  screens: ScreenState[]
+  screenPlan?: ScreenPlan
+  screenPlanDraft: ScreenPlanStep[]
+  screenPlanDirty: boolean
+  screenPlanSaving: boolean
+  screenPlanMode: 'use' | 'edit'
+  screenVolume: number
+  screenPosition: number
+  screenBinding: boolean
+}>()
+
+const emit = defineEmits<{
+  bind: [screenID: string, accessToken: string]
+  setSound: [screen: ScreenState]
+  unbind: [screen: ScreenState]
+  addStep: []
+  edit: []
+  cancel: []
+  removeStep: [index: number]
+  moveStep: [index: number, offset: number]
+  dirty: []
+  clearPlan: []
+  save: []
+  setStep: [index: number]
+  command: [mode: ScreenMode | undefined, command: ScreenCommand]
+  'update:screenVolume': [value: number | null]
+  'update:screenPosition': [value: number | null]
+}>()
+
+const showBindingModal = ref(false)
+
+const screenPlanModeOptions = [
+  { label: 'Обложка', value: 'SCREEN_MODE_COVER' },
+  { label: 'Введение', value: 'SCREEN_MODE_INTRO' },
+  { label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
+  { label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
+  { label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
+  { label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
+  { label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
+  { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
+]
+</script>
+
+<template>
+  <div class="screens-block">
+    <n-flex align="center" justify="space-between">
+      <p class="screens-title">Экраны</p>
+      <n-button size="small" type="primary" @click="showBindingModal = true">
+        Привязать экран
+      </n-button>
+    </n-flex>
+    <n-alert
+      v-if="screens.some((screen) => screen.status === 'disconnected')"
+      type="warning"
+      title="Проверьте подключение экрана"
+    >
+      Один или несколько экранов не выходят на связь более минуты.
+    </n-alert>
+    <p v-if="screens.length === 0" class="screen-empty">К игре пока не привязаны экраны.</p>
+    <template v-else>
+      <div v-for="screen in screens" :key="screen.ID" class="screen-row">
+        <div>
+          <div>Экран {{ screen.ID }}</div>
+          <div class="screen-status">
+            {{ screen.status === 'connected' ? 'Онлайн' : 'Оффлайн' }}
+          </div>
+          <div v-if="screen.error" class="screen-error">{{ screen.error }}</div>
+        </div>
+        <n-flex justify="end">
+          <n-tag v-if="screen.soundEnabled" type="success">Со звуком</n-tag>
+          <n-button v-else size="small" @click="emit('setSound', screen)">Назначить звук</n-button>
+          <n-button size="small" type="error" ghost @click="emit('unbind', screen)"
+            >Отвязать</n-button
+          >
+        </n-flex>
+      </div>
+      <div class="screen-plan">
+        <n-flex align="center" justify="space-between">
+          <p class="screens-title">План экранов</p>
+          <n-space>
+            <n-button
+              v-if="!screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('addStep')"
+            >
+              Создать план
+            </n-button>
+            <n-button
+              v-if="screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('edit')"
+            >
+              Редактировать
+            </n-button>
+            <template v-if="screenPlanMode === 'edit'">
+              <n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')"
+                >Отменить</n-button
+              >
+              <n-button
+                size="small"
+                type="primary"
+                :loading="screenPlanSaving"
+                :disabled="screenPlanSaving"
+                @click="emit('save')"
+              >
+                Сохранить план
+              </n-button>
+            </template>
+          </n-space>
+        </n-flex>
+        <p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">
+          План экранов ещё не создан.
+        </p>
+        <template v-else-if="screenPlanMode === 'edit'">
+          <n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
+            <n-text>{{ index + 1 }}</n-text>
+            <n-select
+              v-model:value="step.mode"
+              :options="screenPlanModeOptions"
+              :disabled="screenPlanSaving"
+              size="small"
+              style="width: 180px"
+              @update:value="emit('dirty')"
+            />
+            <n-input
+              v-if="step.mode === 'SCREEN_MODE_TEXT'"
+              v-model:value="step.text"
+              :disabled="screenPlanSaving"
+              size="small"
+              placeholder="Текст экрана"
+              style="min-width: 240px"
+              @update:value="emit('dirty')"
+            />
+            <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+              <n-input
+                v-model:value="step.timerLabel"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Надпись таймера"
+                @update:value="emit('dirty')"
+              />
+              <n-input-number
+                v-model:value="step.timerDurationSeconds"
+                :min="1"
+                :max="86400"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Секунды"
+                @update:value="emit('dirty')"
+              />
+            </template>
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === 0"
+              @click="emit('moveStep', index, -1)"
+              >↑</n-button
+            >
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
+              @click="emit('moveStep', index, 1)"
+              >↓</n-button
+            >
+            <n-button
+              size="small"
+              type="error"
+              ghost
+              :disabled="screenPlanSaving"
+              @click="emit('removeStep', index)"
+              >Удалить</n-button
+            >
+          </n-space>
+          <n-space>
+            <n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')"
+              >Добавить шаг</n-button
+            >
+            <n-button
+              v-if="screenPlanDraft.length"
+              size="small"
+              :disabled="screenPlanSaving"
+              @click="emit('clearPlan')"
+              >Удалить план</n-button
+            >
+          </n-space>
+        </template>
+        <template v-else-if="screenPlan">
+          <n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
+            <n-text>{{ index + 1 }}</n-text>
+            <n-text>
+              {{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
+              <template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
+              <template v-else-if="step.mode === 'SCREEN_MODE_TIMER'"
+                >: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)</template
+              >
+            </n-text>
+            <n-button
+              size="small"
+              :type="screenPlan.currentStep === index ? 'primary' : 'default'"
+              :disabled="screenPlan.currentStep === index"
+              @click="emit('setStep', index)"
+              >Показать</n-button
+            >
+            <template v-if="screenPlan.currentStep === index">
+              <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
+                  >Старт</n-button
+                >
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
+                  >Пауза</n-button
+                >
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
+                  >Продолжить</n-button
+                >
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
+                  >Сбросить</n-button
+                >
+              </template>
+              <template
+                v-else-if="
+                  step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
+                "
+              >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')"
+                  >Запуск</n-button
+                >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')"
+                  >Пауза</n-button
+                >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')"
+                  >Продолжить</n-button
+                >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')"
+                  >Стоп</n-button
+                >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')"
+                  >Повтор</n-button
+                >
+                <n-input-number
+                  :value="screenVolume"
+                  :min="0"
+                  :max="100"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenVolume', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')"
+                  >Громкость</n-button
+                >
+                <n-input-number
+                  :value="screenPosition"
+                  :min="0"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenPosition', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')"
+                  >Перемотать</n-button
+                >
+              </template>
+            </template>
+          </n-space>
+        </template>
+      </div>
+    </template>
+  </div>
+  <ScreenBindingModal
+    v-model:show="showBindingModal"
+    :binding="props.screenBinding"
+    @scanned="(screenID, accessToken) => emit('bind', screenID, accessToken)"
+  />
+</template>
+
+<style scoped>
+.screens-block {
+  background-color: #222;
+  border-radius: 10px;
+  margin: 12px 0;
+  padding: 16px;
+}
+
+.screens-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.screen-row {
+  align-items: center;
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 12px 0;
+}
+
+.screen-status {
+  color: #aaa;
+  font-size: 13px;
+}
+
+.screen-empty {
+  color: #aaa;
+  margin: 12px 0 0;
+}
+
+.screen-error {
+  color: #f2a2a2;
+  font-size: 13px;
+}
+</style>
diff --git a/src/components/GameTeamsPanel.vue b/src/components/GameTeamsPanel.vue
new file mode 100644
index 0000000..1102488
--- /dev/null
+++ b/src/components/GameTeamsPanel.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { NButton, NFlex } from 'naive-ui'
+
+import type { Application, Team } from '@/api/generated/crabs/evening_detective_server'
+
+defineProps<{
+  teams: Team[]
+  participationOptions: { label: string; value: string }[]
+}>()
+
+const emit = defineEmits<{
+  add: []
+  openQR: [team: Team]
+  preview: [id: number, password: string]
+  delete: [team: Team]
+  giveApplication: [team: Team, application: Application]
+}>()
+</script>
+
+<template>
+  <div class="team-block team-block-hover" @click="emit('add')">
+    <p class="place-image-plus">+</p>
+  </div>
+  <div v-for="team in teams" :key="team.ID" class="team-block">
+    <div class="team-content-block">
+      <n-flex justify="space-between">
+        <div class="title-block">
+          <span class="team-name-block">
+            {{ team.name }}
+            <small v-if="team.captainEmail"> — {{ team.captainEmail }}</small>
+            <small v-if="team.participantsCount"> · Участников: {{ team.participantsCount }}</small>
+          </span>
+          <div v-if="team.captainEmail || team.participationStatus !== 'pending'">
+            {{
+              participationOptions.find((option) => option.value === team.participationStatus)
+                ?.label
+            }}<span v-if="team.participationSource === 'automatic'"> · автоматически</span>
+          </div>
+          <div v-if="!team.captainEmail">Почта капитана не указана</div>
+          <div v-else-if="team.participationEmailError">
+            Ошибка отправки: {{ team.participationEmailError }}
+          </div>
+          <div v-else-if="team.participationEmailSent">Письмо отправлено</div>
+          <div v-if="team.participationStatus !== 'cancelled'">
+            Поездки: {{ team.actionsCount }}
+          </div>
+        </div>
+        <n-flex justify="end">
+          <n-button v-if="team.participationStatus !== 'cancelled'" @click="emit('openQR', team)"
+            >QR</n-button
+          >
+          <n-button
+            v-if="team.participationStatus !== 'cancelled'"
+            @click="emit('preview', team.ID!, team.password!)"
+            >Подсмотреть игру</n-button
+          >
+          <n-button type="error" ghost @click="emit('delete', team)">Удалить</n-button>
+        </n-flex>
+      </n-flex>
+      <n-button
+        v-for="application in team.applications"
+        :key="application.name"
+        class="link-button"
+        @click="emit('giveApplication', team, application)"
+      >
+        Выдать: {{ application.name }}
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.team-block {
+  background-color: #222;
+  border: 1px solid #222;
+  border-radius: 10px;
+  margin: 10px 0;
+}
+
+.team-block-hover:hover {
+  background-color: #333;
+  cursor: pointer;
+}
+
+.team-content-block {
+  padding: 16px;
+}
+
+.team-name-block {
+  font-size: 20px;
+}
+
+.link-button {
+  margin: 6px 6px 0 0;
+}
+
+.place-image-plus {
+  font-size: 32px;
+  margin: 0;
+  padding: 12px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/ScreenBindingModal.vue b/src/components/ScreenBindingModal.vue
new file mode 100644
index 0000000..b181a4d
--- /dev/null
+++ b/src/components/ScreenBindingModal.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { NAlert, NButton, NCard, NModal, NSpace } from 'naive-ui'
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+defineProps<{
+  binding: boolean
+}>()
+
+const show = defineModel<boolean>('show', { required: true })
+
+const emit = defineEmits<{
+  scanned: [screenID: string, accessToken: string]
+}>()
+
+type BarcodeDetector = { detect(video: HTMLVideoElement): Promise<{ rawValue: string }[]> }
+
+const scannerError = ref('')
+const scannerVideo = ref<HTMLVideoElement>()
+const scanning = ref(false)
+let scannerStream: MediaStream | undefined
+let scannerFrame = 0
+
+function stopScanning() {
+  cancelAnimationFrame(scannerFrame)
+  scannerStream?.getTracks().forEach((track) => track.stop())
+  scannerStream = undefined
+  scanning.value = false
+}
+
+function parseScreenQRCode(rawValue: string) {
+  try {
+    const url = new URL(rawValue, window.location.origin)
+    const screenID = url.searchParams.get('screenId')
+    const accessToken = url.searchParams.get('accessToken')
+    if (url.pathname !== '/screen' || !screenID || !accessToken) return
+    return { screenID, accessToken }
+  } catch {
+    return
+  }
+}
+
+async function startScanning() {
+  const DetectorClass = (window as Window & { BarcodeDetector?: new () => BarcodeDetector })
+    .BarcodeDetector
+  if (!DetectorClass || !navigator.mediaDevices?.getUserMedia) {
+    scannerError.value = 'Сканирование камерой не поддерживается в этом браузере.'
+    return
+  }
+  scannerError.value = ''
+  try {
+    scannerStream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'environment' },
+    })
+    scanning.value = true
+    await nextTick()
+    if (!scannerVideo.value) return
+    scannerVideo.value.srcObject = scannerStream
+    await scannerVideo.value.play()
+    const detector = new DetectorClass()
+    const scan = async () => {
+      if (!scannerVideo.value || !scannerStream) return
+      try {
+        const code = (await detector.detect(scannerVideo.value))[0]?.rawValue
+        if (code) {
+          const screen = parseScreenQRCode(code)
+          if (screen) {
+            stopScanning()
+            show.value = false
+            emit('scanned', screen.screenID, screen.accessToken)
+            return
+          }
+          scannerError.value = 'Это не QR-код экрана.'
+        }
+        scannerFrame = requestAnimationFrame(scan)
+      } catch {
+        scannerError.value = 'Не удалось распознать QR-код.'
+        stopScanning()
+      }
+    }
+    scannerFrame = requestAnimationFrame(scan)
+  } catch {
+    scannerError.value = 'Не удалось открыть камеру.'
+    stopScanning()
+  }
+}
+
+function close() {
+  stopScanning()
+  show.value = false
+}
+
+watch(show, (isShown) => {
+  if (isShown) startScanning()
+  else stopScanning()
+})
+
+onBeforeUnmount(stopScanning)
+</script>
+
+<template>
+  <n-modal v-model:show="show">
+    <n-card
+      style="width: min(600px, 94vw)"
+      title="Привязать экран"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header-extra>
+        <n-button @click="close"> x </n-button>
+      </template>
+      <n-space vertical>
+        <video ref="scannerVideo" class="screen-scanner-video" muted playsinline />
+        <n-alert v-if="scannerError" type="error">{{ scannerError }}</n-alert>
+        <n-button v-if="!scanning && !binding" type="primary" @click="startScanning">
+          Сканировать QR-код
+        </n-button>
+        <n-button v-if="scanning" @click="stopScanning">Остановить камеру</n-button>
+        <n-button v-if="binding" type="primary" loading>Привязка…</n-button>
+      </n-space>
+    </n-card>
+  </n-modal>
+</template>
+
+<style scoped>
+.screen-scanner-video {
+  aspect-ratio: 1;
+  background-color: #000;
+  max-height: 60vh;
+  object-fit: cover;
+  width: 100%;
+}
+</style>