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"
-                :disabled="gameState !== 'RUN'"><HeaderText>Поехали</HeaderText></button>
+              <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
+                <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">
-                <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>
+            <MessageCloud :action="action" :gameState="gameState" :login="login" :password="password"></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>