From b8d46d0021b53dc8e4d3313ae819a3630c723445 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 13 Jul 2025 03:33:08 +0700
Subject: [PATCH] update

---
 src/assets/main.css             |  9 ---------
 src/components/AdminWindow.vue  | 15 +++++++++++----
 src/components/EditorWindow.vue | 25 +++++++++++++++++++++++--
 src/components/GamesWindow.vue  |  8 ++++++--
 src/components/HeaderBlock.vue  | 20 ++++++++++++++++++++
 src/components/TeamQRCode.vue   |  2 +-
 6 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 src/components/HeaderBlock.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index b9b0bfe..e696df8 100644
--- a/src/assets/main.css
+++ b/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; /* обязательно! */
diff --git a/src/components/AdminWindow.vue b/src/components/AdminWindow.vue
index 5f1cad6..94be30d 100644
--- a/src/components/AdminWindow.vue
+++ b/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>
diff --git a/src/components/EditorWindow.vue b/src/components/EditorWindow.vue
index aa2c14a..1423a5d 100644
--- a/src/components/EditorWindow.vue
+++ b/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>
diff --git a/src/components/GamesWindow.vue b/src/components/GamesWindow.vue
index 8a170b7..c718b1c 100644
--- a/src/components/GamesWindow.vue
+++ b/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>
diff --git a/src/components/HeaderBlock.vue b/src/components/HeaderBlock.vue
new file mode 100644
index 0000000..0ee124b
--- /dev/null
+++ b/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>
diff --git a/src/components/TeamQRCode.vue b/src/components/TeamQRCode.vue
index 8074d45..9fd77c4 100644
--- a/src/components/TeamQRCode.vue
+++ b/src/components/TeamQRCode.vue
@@ -20,7 +20,7 @@
 <style scoped>
   .qr {
     position: absolute;
-    top: 80px;
+    top: 130px;
     right: 30px;
     text-align: center;
     width: 120px;