add screen mode

src/components/ScreenPage.vue

@@ -38,6 +38,7 @@ const gameOptions = computed(() =>
     value: game.id!,
   })),
 )
+const screenMode = computed(() => state.value?.mode || 'SCREEN_MODE_COVER')
 
 function saveSession() {
   sessionStorage.setItem(sessionKey, JSON.stringify({ screenId: screenId.value, accessToken: accessToken.value }))
@@ -166,12 +167,14 @@ onUnmounted(() => {
           <n-button v-if="!prepared" type="primary" @click="prepareScreen">Подготовить экран</n-button>
         </n-card>
       </div>
-      <div v-else class="screen-center">
-        <n-card class="ready-card">
-          <p class="ready-title">Экран подключён</p>
+      <div v-else class="screen-content">
+        <div v-if="screenMode === 'SCREEN_MODE_INTRO_DONE'" class="screen-message">Успехов</div>
+        <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION_DONE'" class="screen-message">Спасибо за игру!</div>
+        <div v-else class="screen-cover">
+          <p class="cover-label">Обложка дела</p>
           <p>Игра №{{ state.gameId }}</p>
           <n-button v-if="!prepared" type="primary" @click="prepareScreen">Подготовить экран</n-button>
-        </n-card>
+        </div>
       </div>
     </template>
   </div>
@@ -227,4 +230,28 @@ onUnmounted(() => {
   color: #eee;
   min-height: 100dvh;
 }
+
+.screen-content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100dvh;
+  text-align: center;
+}
+
+.screen-cover {
+  background: rgb(255 255 255 / 8%);
+  border-radius: 16px;
+  padding: 48px;
+}
+
+.cover-label {
+  font-size: clamp(28px, 6vw, 72px);
+  margin: 0 0 20px;
+}
+
+.screen-message {
+  font-size: clamp(42px, 10vw, 140px);
+  font-weight: 700;
+}
 </style>