add collapse item

src/components/GameWindow.vue

@@ -17,6 +17,8 @@ type Action = {
   name: string
   text: string
   applications: Application[]
+
+  isOpen: boolean
 }
 
 type Team = {
@@ -72,8 +74,16 @@ function getTeam() {
       return res
     })
     .then(data => {
+      const oldActions = team.value.actions
+
       team.value = data
       const newActions = team.value?.actions
+      newActions.forEach(item => {
+        item.isOpen = true
+      })
+      for (let i = 0; i < actions.value.length; i++) {
+        newActions[i].isOpen = oldActions[i].isOpen
+      }
       if (actions.value.length !== newActions?.length) {
         actions.value = newActions
       }
@@ -216,14 +226,18 @@ onMounted(() => {
             <div class="message-cloud">
               <div class="message-header">
                 {{ action.place }}: {{ action.name }}
+                <span class="collapse-icon" @click="action.isOpen = !action.isOpen" style="float: right;">{{
+                  action.isOpen ? '−' : '+' }}</span>
               </div>
-              <hr class="hr" />
+              <div v-show="action.isOpen">
-              <div class="message-content">
+                <hr class="hr" />
+                <div class="message-content">
                   {{ action.text }}
-              </div>
+                </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">
+                <div class="message-footer" v-for="application in action.applications" :key="application.name">
-                Приложение: {{ application.name }}
+                  Приложение: {{ application.name }}
+                </div>
               </div>
             </div>
           </div>
@@ -326,4 +340,9 @@ body {
   text-align: center;
   width: 200px;
 }
+
+.collapse-icon {
+  padding: 0 15px;
+  cursor: pointer;
+}
 </style>