fix

src/components/GamePage.vue

@@ -26,15 +26,18 @@ import type {
   GameReview,
   MapItem,
   Question,
+  ResultsQuestion,
   ScreenCommand,
   ScreenMode,
   ScreenState,
   Team,
   TeamAnswers,
+  TeamResult,
   Ticket,
 } from '@/api/generated/crabs/evening_detective_server'
 import { getURL } from '@/api/generated/crabs/evening_detective_server/client'
 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'
@@ -93,6 +96,8 @@ const teamsNeedingApplications = computed(
     ),
 )
 const screens = ref<ScreenState[]>([])
+const previewQuestions = ref<ResultsQuestion[]>([])
+const previewTeams = ref<TeamResult[]>([])
 const mapItems = ref<MapItem[]>([])
 const mapSaving = ref(false)
 const screenVolume = ref(100)
@@ -106,6 +111,7 @@ const currentScreenMode = computed<ScreenMode | undefined>(() => {
   return modes[0] as ScreenMode
 })
 const timerScreen = computed(() => screens.value[0])
+const previewScreen = computed(() => screens.value.find((screen) => screen.status === 'connected') || screens.value[0])
 const timerStateLabel = computed(() => {
   switch (timerScreen.value?.timerState) {
     case 'SCREEN_TIMER_STATE_RUNNING':
@@ -175,6 +181,16 @@ async function getGameScreens() {
     timerLabel.value = screens.value[0].timerLabel || 'Перерыв'
     timerFormInitialized.value = true
   }
+  if (previewScreen.value?.mode === 'SCREEN_MODE_RESULTS') {
+    const result = await client.GetGameResults({ gameId: Number(gameId) })
+    if (result.error == '') {
+      previewQuestions.value = result.questions || []
+      previewTeams.value = result.teams || []
+    }
+  } else {
+    previewQuestions.value = []
+    previewTeams.value = []
+  }
 }
 getGameScreens()
 
@@ -911,6 +927,7 @@ useSimplePolling(() => {
         </n-space>
       </div>
 
+      <div class="map-preview-layout">
       <div class="map-block">
         <n-flex align="center" justify="space-between">
           <p class="screens-title">Карта помещения</p>
@@ -992,6 +1009,17 @@ useSimplePolling(() => {
           </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>
@@ -1590,13 +1618,30 @@ useSimplePolling(() => {
   margin-top: 12px;
 }
 
-.map-block {
+.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;
 }
 
+.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%);
@@ -1700,6 +1745,12 @@ useSimplePolling(() => {
   margin-top: 10px;
 }
 
+@media (width < 1024px) {
+  .map-preview-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
 .issued-ticket {
   align-items: center;
   border-top: 1px solid #777;