update

src/assets/main.css

@@ -1,14 +1,5 @@
 @import './base.css';
 
-.header-block {
-  background-color: var(--main-color);
-  font-size: large;
-  color: white;
-  vertical-align: middle;
-  padding: 10px 0 10px 16px;
-  font-weight: 700;
-}
-
 .input-custom {
   width: 100%;
   box-sizing: border-box; /* обязательно! */

src/components/AdminWindow.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import router from '@/router';
-import type { Game, Teams } from './models';
+import type { Game, Team, Teams } from './models';
 import { apiGetTeams, apiAddTeam, apiGetGame, apiStartGame, apiStopGame, apiGaveApplication, apiDownloadQrCodesFile } from './client';
 import TeamQRCode from '../components/TeamQRCode.vue'
+import HeaderBlock from './HeaderBlock.vue';
 
 const qrurl = ref("-")
 const qrteam = ref("-")
@@ -42,12 +43,17 @@ async function getGame() {
   }
 }
 
+function compareTeams(a: Team, b: Team): number {
+  return b.applications.length - a.applications.length
+}
+
 let intervalId = 0
 onMounted(async () => {
   teams.value = await apiGetTeams()
 
   intervalId = setInterval(async () => {
     teams.value = await apiGetTeams()
+    teams.value.teams.sort(compareTeams)
     await getGame()
   }, 2000);
 
@@ -59,15 +65,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="header-block">
+  <HeaderBlock>
     <div>
       Вечерний детектив - {{ gameState }}
     </div>
     <div class="buttons-block">
       <button v-on:click="startGame" class="button-menu button-custom-inline">Начать</button>
       <button v-on:click="stopGame" class="button-menu button-custom-inline">Остановить</button>
+      <button v-on:click="apiDownloadQrCodesFile" class="button-menu button-custom-inline">Скачать&nbsp;qr‑ы</button>
     </div>
-  </div>
+  </HeaderBlock>
 
   <TeamQRCode :data="qrurl" :title="qrteam" />
 
@@ -78,7 +85,7 @@ onMounted(async () => {
         <th>Название команды</th>
         <th>Поездки</th>
         <th>Приложения</th>
-        <th><button v-on:click="apiDownloadQrCodesFile" class="button-custom-inline">Скачать&nbsp;qr‑ы</button></th>
+        <th>Qr</th>
       </tr>
     </thead>
     <tbody>

src/components/EditorWindow.vue

@@ -1,11 +1,32 @@
 <script setup lang="ts">
-
+  import HeaderBlock from './HeaderBlock.vue';
 </script>
 
 <template>
-  <p>Я редактор сценариев</p>
+  <HeaderBlock>
+    <div>
+      Редактор сценариев
+    </div>
+  </HeaderBlock>
+
+  <div class="three-columns">
+    <div class="column left">Левая (узкая)</div>
+    <div class="column center">Центральная (широкая)</div>
+    <div class="column right">Правая (узкая)</div>
+  </div>
 </template>
 
 <style scoped>
+  .three-columns {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
+    gap: 20px;
+    height: 100%;
+  }
 
+  .column {
+    border: 1px solid #e0e0e0;
+    padding: 20px;
+    margin: 5px;
+  }
 </style>

src/components/GamesWindow.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-
+  import HeaderBlock from './HeaderBlock.vue';
 </script>
 
 <template>
-  <p>Я каталог игр</p>
+  <HeaderBlock>
+    <div>
+      Каталог игр
+    </div>
+  </HeaderBlock>
 </template>
 
 <style scoped>

src/components/HeaderBlock.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="header-block">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.header-block {
+  background-color: var(--main-color);
+  font-size: large;
+  color: white;
+  vertical-align: middle;
+  padding: 10px 0 10px 16px;
+  font-weight: 700;
+}
+</style>

src/components/TeamQRCode.vue

@@ -20,7 +20,7 @@
 <style scoped>
   .qr {
     position: absolute;
-    top: 80px;
+    top: 130px;
     right: 30px;
     text-align: center;
     width: 120px;