add scroll

src/components/ScreenPage.vue

@@ -18,6 +18,10 @@ const screenId = ref('')
 const accessToken = ref('')
 const state = ref<ScreenState>()
 const resultTeams = ref<TeamResult[]>([])
+const resultQuestions = ref<{ code: string | undefined; text: string | undefined }[]>([])
+const resultsContainer = ref<HTMLElement>()
+let resultsScrollTimer: number | undefined
+let resultsScrollStarted = false
 const games = ref<Game[]>([])
 const selectedGameId = ref<number | null>(null)
 const prepared = ref(false)
@@ -96,7 +100,25 @@ async function loadState() {
 async function loadResults() {
   if (!screenId.value || !accessToken.value) return
   const res = await client.GetScreenResults({ screenId: screenId.value, accessToken: accessToken.value })
-  if (res.error == '') resultTeams.value = res.teams || []
+  if (res.error == '') {
+    resultQuestions.value = res.questions || []
+    resultTeams.value = res.teams || []
+    if (!resultsScrollStarted) {
+      resultsScrollStarted = true
+      await nextTick()
+      const container = resultsContainer.value
+      if (container) {
+        container.scrollTop = container.scrollHeight
+        resultsScrollTimer = window.setInterval(() => {
+          container.scrollTop = Math.max(0, container.scrollTop - 32)
+          if (container.scrollTop === 0 && resultsScrollTimer != null) {
+            window.clearInterval(resultsScrollTimer)
+            resultsScrollTimer = undefined
+          }
+        }, 1000)
+      }
+    }
+  }
 }
 
 async function loadGames() {
@@ -213,6 +235,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   if (pollTimer != null) window.clearInterval(pollTimer)
+  if (resultsScrollTimer != null) window.clearInterval(resultsScrollTimer)
   cancelAnimationFrame(visualizerFrame)
   void audioContext?.close()
 })
@@ -265,14 +288,17 @@ onUnmounted(() => {
         <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION'" class="screen-message">Видео закрывашки не задано</div>
         <div v-else-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-if="screenMode === 'SCREEN_MODE_RESULTS'" class="results-screen">
+        <div v-else-if="screenMode === 'SCREEN_MODE_RESULTS'" ref="resultsContainer" class="results-screen">
           <h1>Результаты</h1>
           <table>
-            <thead><tr><th>Место</th><th>Команда</th><th>Баллы</th><th>Ходы</th></tr></thead>
+            <thead><tr><th>Место</th><th>Команда</th><th v-for="question in resultQuestions" :key="question.code">{{ question.text }}</th><th>Сумма</th><th>Ходы</th></tr></thead>
             <tbody>
               <tr v-for="result in resultTeams" :key="result.team?.id">
                 <td>{{ result.place }}</td>
                 <td>{{ result.team?.name }}</td>
+                <td v-for="question in resultQuestions" :key="question.code">
+                  {{ result.answers?.find(answer => answer.questionCode === question.code)?.score ?? 0 }}
+                </td>
                 <td>{{ result.totalScore }}</td>
                 <td>{{ result.actionsCount }}</td>
               </tr>
@@ -402,6 +428,30 @@ onUnmounted(() => {
   font-size: 32px;
 }
 
+.results-screen {
+  max-height: 90dvh;
+  max-width: 96vw;
+  overflow: hidden;
+  width: 1400px;
+}
+
+.results-screen h1 {
+  font-size: clamp(28px, 5vw, 64px);
+}
+
+.results-screen table {
+  border-collapse: collapse;
+  font-size: clamp(14px, 2vw, 28px);
+  width: 100%;
+}
+
+.results-screen th,
+.results-screen td {
+  border-bottom: 1px solid rgb(255 255 255 / 18%);
+  padding: 8px 12px;
+  text-align: left;
+}
+
 .cassette {
   background: #303030;
   border: 8px solid #555;