fix

src/components/GameWindow.vue

@@ -1,57 +1,57 @@
 <script setup lang="ts">
-  import { ref, nextTick, watch, onMounted } from 'vue';
+import { ref, nextTick, watch, onMounted } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
-  import { encodeUTF8ToBase64, getApiUrl } from './utils';
+import { encodeUTF8ToBase64, getApiUrl } from './utils';
-  import VueQrcode from '@chenfengyuan/vue-qrcode';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 
-  const router = useRouter();
+const router = useRouter();
-  const route = useRoute();
+const route = useRoute();
 
-  type Application = {
+type Application = {
   name: string
-  }
+}
 
-  type Action = {
+type Action = {
   id: string
   place: string
   name: string
   text: string
   applications: Application[]
-  }
+}
 
-  type Team = {
+type Team = {
   name: string
   actions: Action[]
-  }
+}
 
-  const login = ref("")
+const login = ref("")
-  const password = ref("")
+const password = ref("")
-  const place = ref("")
+const place = ref("")
-  const team = ref<Team>({name: "", actions: []})
+const team = ref<Team>({ name: "", actions: [] })
-  const actions = ref<Action[]>([])
+const actions = ref<Action[]>([])
-  const scrollContainer = ref<HTMLDivElement | null>();
+const scrollContainer = ref<HTMLDivElement | null>();
-  const gameState = ref("STOP")
+const gameState = ref("STOP")
-  const gameStateText = ref("")
+const gameStateText = ref("")
 
-  const qrurl = ref("-")
+const qrurl = ref("-")
-    interface QROptions {
+interface QROptions {
   width?: number;
   margin?: number;
   color?: {
     dark: string;
     light: string;
   };
-  }
+}
-  const qrOptions = ref<QROptions>({
+const qrOptions = ref<QROptions>({
   width: 200,
   margin: 1,
   color: {
     dark: '#303030',
     light: 'f0f0f0'
   }
-  });
+});
 
-  function getTeam() {
+function getTeam() {
   fetch(
     getApiUrl("/team"),
     {
@@ -67,7 +67,9 @@
         router.push('/login');
         return
       }
-      return response.json()
+      const res = response.json()
+      console.log(res)
+      return res
     })
     .then(data => {
       team.value = data
@@ -79,9 +81,9 @@
     .catch(error => {
       console.error('Ошибка:', error)
     });
-  }
+}
 
-  function addAction() {
+function addAction() {
   const placeValue = place.value.trim()
   if (placeValue === "") {
     place.value = ""
@@ -100,10 +102,10 @@
       })
     }
   )
-    .then(async () => {place.value = ""})
+    .then(async () => { place.value = "" })
-  }
+}
 
-  const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
+const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
   await nextTick();
   if (scrollContainer.value) {
     scrollContainer.value.scrollTo({
@@ -111,9 +113,9 @@
       behavior
     });
   }
-  };
+};
 
-  function getGame() {
+function getGame() {
   qrurl.value = location.href
   fetch(
     getApiUrl("/game")
@@ -134,15 +136,15 @@
     .catch(error => {
       console.error('Ошибка:', error)
     });
-  }
+}
 
-  // Автоматическая прокрутка при изменении items
+// Автоматическая прокрутка при изменении items
-  watch(actions, () => {
+watch(actions, () => {
   scrollToBottom();
-  }, { deep: true });
+}, { deep: true });
 
-  let intervalId = 0
+let intervalId = 0
-  onMounted(() => {
+onMounted(() => {
   login.value = sessionStorage.getItem("teamId") || ""
   password.value = sessionStorage.getItem("password") || ""
   if (login.value == "") {
@@ -157,13 +159,17 @@
   intervalId = setInterval(() => {
     getTeam()
     getGame()
-    }, 1000);
+  }, 2000);
 
   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
+            <input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
-              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
+            <button class="button-custom" type="submit" :disabled="gameState !== 'RUN'">Поехали</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
+              <VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-                :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 }}
               </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>
-