From 9bde8ff7ee66a3edae99cf7290825fc70fdc6901 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 7 Dec 2025 23:09:35 +0700
Subject: [PATCH] fix

---
 src/components/GameWindow.vue | 270 +++++++++++++++++-----------------
 1 file changed, 132 insertions(+), 138 deletions(-)

diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue
index 6ad6736..c2018f2 100644
--- a/src/components/GameWindow.vue
+++ b/src/components/GameWindow.vue
@@ -1,73 +1,75 @@
 <script setup lang="ts">
-  import { ref, nextTick, watch, onMounted } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { encodeUTF8ToBase64, getApiUrl } from './utils';
-  import VueQrcode from '@chenfengyuan/vue-qrcode';
+import { ref, nextTick, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { encodeUTF8ToBase64, getApiUrl } from './utils';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 
-  const router = useRouter();
-  const route = useRoute();
+const router = useRouter();
+const route = useRoute();
 
-  type Application = {
-    name: string
+type Application = {
+  name: string
+}
+
+type Action = {
+  id: string
+  place: string
+  name: string
+  text: string
+  applications: Application[]
+}
+
+type Team = {
+  name: string
+  actions: Action[]
+}
+
+const login = ref("")
+const password = ref("")
+const place = ref("")
+const team = ref<Team>({ name: "", actions: [] })
+const actions = ref<Action[]>([])
+const scrollContainer = ref<HTMLDivElement | null>();
+const gameState = ref("STOP")
+const gameStateText = ref("")
+
+const qrurl = ref("-")
+interface QROptions {
+  width?: number;
+  margin?: number;
+  color?: {
+    dark: string;
+    light: string;
+  };
+}
+const qrOptions = ref<QROptions>({
+  width: 200,
+  margin: 1,
+  color: {
+    dark: '#303030',
+    light: 'f0f0f0'
   }
+});
 
-  type Action = {
-    id: string
-    place: string
-    name: string
-    text: string
-    applications: Application[]
-  }
-
-  type Team = {
-    name: string
-    actions: Action[]
-  }
-
-  const login = ref("")
-  const password = ref("")
-  const place = ref("")
-  const team = ref<Team>({name: "", actions: []})
-  const actions = ref<Action[]>([])
-  const scrollContainer = ref<HTMLDivElement | null>();
-  const gameState = ref("STOP")
-  const gameStateText = ref("")
-
-  const qrurl = ref("-")
-    interface QROptions {
-    width?: number;
-    margin?: number;
-    color?: {
-      dark: string;
-      light: string;
-    };
-  }
-  const qrOptions = ref<QROptions>({
-    width: 200,
-    margin: 1,
-    color: {
-      dark: '#303030',
-      light: 'f0f0f0'
+function getTeam() {
+  fetch(
+    getApiUrl("/team"),
+    {
+      method: "GET",
+      headers: {
+        "X-Id": encodeUTF8ToBase64(login.value),
+        "X-Password": password.value
+      },
     }
-  });
-
-  function getTeam() {
-    fetch(
-      getApiUrl("/team"),
-      {
-        method: "GET",
-        headers: {
-          "X-Id": encodeUTF8ToBase64(login.value),
-          "X-Password": password.value
-        },
-      }
-    )
+  )
     .then(response => {
       if (response.status == 401) {
         router.push('/login');
         return
       }
-      return response.json()
+      const res = response.json()
+      console.log(res)
+      return res
     })
     .then(data => {
       team.value = data
@@ -79,45 +81,45 @@
     .catch(error => {
       console.error('Ошибка:', error)
     });
+}
+
+function addAction() {
+  const placeValue = place.value.trim()
+  if (placeValue === "") {
+    place.value = ""
+    return
   }
-
-  function addAction() {
-    const placeValue = place.value.trim()
-    if (placeValue === "") {
-      place.value = ""
-      return
+  fetch(
+    getApiUrl("/team/actions"),
+    {
+      method: "POST",
+      headers: {
+        "X-Id": encodeUTF8ToBase64(login.value),
+        "X-Password": password.value
+      },
+      body: JSON.stringify({
+        "place": placeValue
+      })
     }
-    fetch(
-      getApiUrl("/team/actions"),
-      {
-        method: "POST",
-        headers: {
-          "X-Id": encodeUTF8ToBase64(login.value),
-          "X-Password": password.value
-        },
-        body: JSON.stringify({
-          "place": placeValue
-        })
-      }
-    )
-    .then(async () => {place.value = ""})
+  )
+    .then(async () => { place.value = "" })
+}
+
+const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
+  await nextTick();
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTo({
+      top: scrollContainer.value.scrollHeight,
+      behavior
+    });
   }
+};
 
-  const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
-    await nextTick();
-    if (scrollContainer.value) {
-      scrollContainer.value.scrollTo({
-        top: scrollContainer.value.scrollHeight,
-        behavior
-      });
-    }
-  };
-
-  function getGame() {
-    qrurl.value = location.href
-    fetch(
-        getApiUrl("/game")
-    )
+function getGame() {
+  qrurl.value = location.href
+  fetch(
+    getApiUrl("/game")
+  )
     .then(response => response.json())
     .then(data => {
       gameState.value = data.state
@@ -134,36 +136,40 @@
     .catch(error => {
       console.error('Ошибка:', error)
     });
+}
+
+// Автоматическая прокрутка при изменении items
+watch(actions, () => {
+  scrollToBottom();
+}, { deep: true });
+
+let intervalId = 0
+onMounted(() => {
+  login.value = sessionStorage.getItem("teamId") || ""
+  password.value = sessionStorage.getItem("password") || ""
+  if (login.value == "") {
+    login.value = route.query["name"]?.toString() || ""
+    password.value = route.query["password"]?.toString() || ""
+    sessionStorage.setItem("teamId", login.value)
+    sessionStorage.setItem("password", password.value)
   }
 
-  // Автоматическая прокрутка при изменении items
-  watch(actions, () => {
-    scrollToBottom();
-  }, { deep: true });
-
-  let intervalId = 0
-  onMounted(() => {
-    login.value = sessionStorage.getItem("teamId") || ""
-    password.value = sessionStorage.getItem("password") || ""
-    if (login.value == "") {
-      login.value = route.query["name"]?.toString() || ""
-      password.value = route.query["password"]?.toString() || ""
-      sessionStorage.setItem("teamId", login.value)
-      sessionStorage.setItem("password", password.value)
-    }
+  getTeam()
 
+  intervalId = setInterval(() => {
     getTeam()
+    getGame()
+  }, 2000);
 
-    intervalId = setInterval(() => {
-      getTeam()
-      getGame()
-    }, 1000);
-
-    router.beforeEach((to, from, next) => {
-      clearInterval(intervalId);
-      next();
-    });
+  router.beforeEach((to, from, next) => {
+    clearInterval(intervalId);
+    next();
   });
+});
+
+// function formatText(text: string) {
+//   return text.replaceAll(' ', '&nbsp;')
+// }
 </script>
 
 <template>
@@ -181,19 +187,12 @@
       <div class="center-block-custom">
         <form @submit.prevent="addAction">
           <div>
-            <input
-              class="input-custom"
-              v-model="place"
-              type="text"
-              placeholder="Место назначения (А-1, а-1, а1)"
+            <input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
               :disabled="gameState !== 'RUN'">
           </div>
           <div class="button-container">
             <div class="second-color info-custom">{{ gameStateText }}</div>
-            <button
-              class="button-custom"
-              type="submit"
-              :disabled="gameState !== 'RUN'">Поехали</button>
+            <button class="button-custom" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
           </div>
         </form>
       </div>
@@ -205,12 +204,7 @@
         <div v-if="!team || !team.actions.length">
           <div class="center-message">
             <div class="qr">
-              <VueQrcode
-                :value="qrurl"
-                :options="qrOptions"
-                tag="svg"
-                class="qr-code"
-              />
+              <VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
               <div>
                 Пора решать загадку
               </div>
@@ -223,11 +217,11 @@
               <div class="message-header">
                 {{ action.place }}: {{ action.name }}
               </div>
-              <hr class="hr"/>
+              <hr class="hr" />
               <div class="message-content">
-                {{ action.text }}
+                  {{ action.text }}
               </div>
-              <hr class="hr" v-if="action.applications.length"/>
+              <hr class="hr" v-if="action.applications.length" />
               <div class="message-footer" v-for="application in action.applications" :key="application.name">
                 Приложение: {{ application.name }}
               </div>
@@ -298,7 +292,8 @@ body {
 
 .message-content {
   font-weight: 500;
-  white-space: pre-line;
+  /* white-space: pre-line; */
+  white-space: pre-wrap;
 }
 
 .message-footer {
@@ -332,4 +327,3 @@ body {
   width: 200px;
 }
 </style>
-