add message cloud

src/components/GameWindow.vue

@@ -10,7 +10,6 @@ import { UnauthorizedError } from './UnauthorizedError';
 import WelcomeGameBlock from './WelcomeGameBlock.vue';
 import HeaderText from './HeaderText.vue';
 import MessageCloud from './MessageCloud.vue';
-import HRLine from './HRLine.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -60,21 +59,17 @@ async function getTeam() {
   }
 }
 
-function addAction() {
+async function addAction() {
   inputPlace.value = true
   const placeValue = place.value.trim()
   if (placeValue === "") {
     place.value = ""
     return
   }
-  letsgo(placeValue)
+  await apiLetsgo(login.value, password.value, placeValue)
   place.value = ""
 }
 
-async function letsgo(place: string) {
-  await apiLetsgo(login.value, password.value, place)
-}
-
 const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
   await nextTick();
   if (scrollContainer.value) {
@@ -155,8 +150,9 @@ onMounted(() => {
                   :disabled="gameState !== 'RUN'">
               </div>
               <div class="game-button-run-shadow"></div>
-              <button class="game-button-run" type="submit"
+              <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
-                :disabled="gameState !== 'RUN'"><HeaderText>Поехали</HeaderText></button>
+                <HeaderText>Поехали</HeaderText>
+              </button>
             </div>
           </form>
         </div>
@@ -173,24 +169,7 @@ onMounted(() => {
         </div>
         <div v-else>
           <div v-for="action in team.actions" :key="action.id">
-            <MessageCloud :action="action">
+            <MessageCloud :action="action" :gameState="gameState" :login="login" :password="password"></MessageCloud>
-                <HRLine></HRLine>
-                <div class="message-content">
-                  <div v-if="action.image.length">
-                    <img v-bind:src="action.image" class="message-image" />
-                  </div>{{ action.text }}
-                </div>
-                <HRLine v-if="action.buttons?.length"></HRLine>
-                <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>
-
-                <HRLine v-if="action.applications.length"></HRLine>
-                <div class="message-footer" v-for="application in action.applications" :key="application.name">
-                  {{ application.number }} Приложение: {{ application.name }}
-                </div>
-            </MessageCloud>
           </div>
         </div>
       </div>
@@ -233,22 +212,6 @@ onMounted(() => {
   background-color: black;
 }
 
-.message-content {
-  font-weight: 500;
-  white-space: pre-wrap;
-}
-
-.message-image {
-  width: 40%;
-  float: left;
-  margin-right: 15px;
-}
-
-.message-footer {
-  font-weight: 400;
-  color: var(--second-color);
-}
-
 .messages-block {
   top: 95px;
   height: calc(100dvh - 100px - 76px);
@@ -388,25 +351,4 @@ onMounted(() => {
 .controller-metal-right {
   right: -15px;
 }
-
-.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;
-}
 </style>

src/components/HRLine.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-/* код */
-</script>
-
-<template>
-  <hr class="hr" />
-</template>
-
-<style scoped>
-.hr {
-  margin: 7px 0;
-}
-</style>

src/components/MessageCloud.vue

@@ -1,23 +1,56 @@
 <script setup lang="ts">
-import MessageCloudHeader from './MessageCloudHeader.vue';
 import type { Action } from './models';
+import { apiLetsgo } from './client';
 
 interface Props {
   action: Action
+  gameState: string
+  login: string
+  password: string
 }
 const props = withDefaults(defineProps<Props>(), {})
+
+function clickCollapse() {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.action.isOpen = !props.action.isOpen
+}
+
+async function letsgo(place: string) {
+  await apiLetsgo(props.login, props.password, place)
+}
 </script>
 
 <template>
   <div class="message-cloud">
-    <MessageCloudHeader :action="props.action"></MessageCloudHeader>
+    <div class="message-header">
+      {{ props.action.place }}: {{ props.action.name }}
+      <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
+    </div>
     <div v-show="props.action.isOpen">
-      <slot></slot>
+      <hr class="hr" />
+      <div class="message-content">
+        <div v-if="props.action.image.length">
+          <img v-bind:src="props.action.image" class="message-image" />
+        </div>{{ props.action.text }}
+      </div>
+      <hr class="hr" v-if="props.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.number }} Приложение: {{ application.name }}
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.hr {
+  margin: 7px 0;
+}
+
 .message-cloud {
   border: 1px solid #444444;
   border-radius: 15px;
@@ -26,4 +59,52 @@ const props = withDefaults(defineProps<Props>(), {})
   background-color: var(--main-back-item-color);
   display: flow-root;
 }
+
+.message-header {
+  font-size: large;
+  font-weight: 200;
+}
+
+.collapse-icon {
+  float: right;
+  padding: 0 15px;
+  cursor: pointer;
+}
+
+.message-content {
+  font-weight: 500;
+  white-space: pre-wrap;
+}
+
+.message-image {
+  width: 40%;
+  float: left;
+  margin-right: 15px;
+}
+
+.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;
+}
+
+.message-footer {
+  font-weight: 400;
+  color: var(--second-color);
+}
 </style>

src/components/MessageCloudHeader.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { Action } from './models';
-
-interface Props {
-  action: Action
-}
-const props = withDefaults(defineProps<Props>(), {})
-
-function clickCollapse() {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.action.isOpen = !props.action.isOpen
-}
-</script>
-
-<template>
-  <div>
-    <div class="message-header">
-      {{ props.action.place }}: {{ props.action.name }}
-      <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.message-header {
-  font-size: large;
-  font-weight: 200;
-}
-
-.collapse-icon {
-  float: right;
-  padding: 0 15px;
-  cursor: pointer;
-}
-</style>