add doors

src/assets/main.css

@@ -32,6 +32,27 @@
   opacity: 0.5;
 }
 
+.button-dialog {
+  background-color: var(--main-color);
+  font-weight: 600;
+  color: white;
+
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  font-size: 16px;
+  margin-right: 6px;
+}
+
+.button-dialog:hover {
+  background-color: var(--main-color);
+  opacity: 0.9;
+}
+
+.button-dialog:disabled {
+  opacity: 0.5;
+}
+
 .input-custom, .button-custom {
   padding: 12px 16px;
   border: 1px solid #ddd;

src/components/GameWindow.vue

@@ -11,14 +11,23 @@ type Application = {
   name: string
 }
 
+type Door = {
+  code: string
+  name: string
+  show: boolean
+}
+
 type Action = {
   id: string
   place: string
   name: string
   text: string
   applications: Application[]
+  hidden: boolean
+  doors: Door[]
 
   isOpen: boolean
+  buttons: Door[]
 }
 
 type Team = {
@@ -71,7 +80,6 @@ function getTeam() {
         return
       }
       const res = response.json()
-      console.log(res)
       return res
     })
     .then(data => {
@@ -88,6 +96,10 @@ function getTeam() {
       if (actions.value.length !== newActions?.length) {
         actions.value = newActions
       }
+      for (let i = 0; i < team.value.actions.length; i++) {
+        const element = team.value.actions[i];
+        team.value.actions[i].buttons = element.doors.filter((door) => { return door.show })
+      }
     })
     .catch(error => {
       console.error('Ошибка:', error)
@@ -101,6 +113,12 @@ function addAction() {
     place.value = ""
     return
   }
+  letsgo(placeValue)
+  place.value = ""
+}
+
+function letsgo(place: string) {
+  console.log("letsgo to " + place)
   fetch(
     getApiUrl("/team/actions"),
     {
@@ -110,11 +128,10 @@ function addAction() {
         "X-Password": password.value
       },
       body: JSON.stringify({
-        "place": placeValue
+        "place": place
       })
     }
   )
-    .then(async () => { place.value = "" })
 }
 
 const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
@@ -237,6 +254,12 @@ onMounted(() => {
                 <div class="message-content">
                   {{ action.text }}
                 </div>
+                <hr class="hr" v-if="action.buttons?.length" />
+                <button v-for="door in action.buttons" :key="door.code" class="button-dialog"
+                  v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
+                  {{ door.name }}
+                </button>
+
                 <hr class="hr" v-if="action.applications.length" />
                 <div class="message-footer" v-for="application in action.applications" :key="application.name">
                   Приложение: {{ application.name }}
@@ -357,9 +380,12 @@ body {
 .text-truncate {
   width: 100px;
   text-align: center;
-  white-space: nowrap;        /* Запрещаем перенос текста */
-  overflow: hidden;           /* Обрезаем все, что не помещается */
-  text-overflow: ellipsis;    /* Добавляем троеточие */
+  white-space: nowrap;
+  /* Запрещаем перенос текста */
+  overflow: hidden;
+  /* Обрезаем все, что не помещается */
+  text-overflow: ellipsis;
+  /* Добавляем троеточие */
   padding: 2px 7px;
   margin: 0 20px;
   background: rgb(40, 69, 87);

src/components/utils.ts

@@ -1,6 +1,5 @@
 export function getApiUrl(path: string) {
   const url =  "http://" + window.location.host.split(":")[0] + ":8090" + path
-  console.log(url)
   return url
 }