add message cloud v1

src/components/GameWindow.vue

@@ -9,6 +9,7 @@ import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
 import { UnauthorizedError } from './UnauthorizedError';
 import WelcomeGameBlock from './WelcomeGameBlock.vue';
 import HeaderText from './HeaderText.vue';
+import MessageCloud from './MessageCloud.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -171,12 +172,7 @@ onMounted(() => {
         </div>
         <div v-else>
           <div v-for="action in team.actions" :key="action.id">
-            <div class="message-cloud">
+            <MessageCloud :action="action">
-              <div class="message-header">
-                {{ action.place }}: {{ action.name }}
-                <span class="collapse-icon" @click="action.isOpen = !action.isOpen" style="float: right;">{{
-                  action.isOpen ? '−' : '+' }}</span>
-              </div>
               <div v-show="action.isOpen">
                 <hr class="hr" />
                 <div class="message-content">
@@ -195,7 +191,7 @@ onMounted(() => {
                   {{ application.number }} Приложение: {{ application.name }}
                 </div>
               </div>
-            </div>
+            </MessageCloud>
           </div>
         </div>
       </div>
@@ -242,20 +238,6 @@ onMounted(() => {
   background-color: black;
 }
 
-.message-cloud {
-  border: 1px solid #444444;
-  border-radius: 15px;
-  margin: 12px 10px;
-  padding: 16px;
-  background-color: var(--main-back-item-color);
-  display: flow-root;
-}
-
-.message-header {
-  font-size: large;
-  font-weight: 200;
-}
-
 .message-content {
   font-weight: 500;
   white-space: pre-wrap;
@@ -292,11 +274,6 @@ onMounted(() => {
   height: calc(100dvh - 140px);
 }
 
-.collapse-icon {
-  padding: 0 15px;
-  cursor: pointer;
-}
-
 .team-name-block {
   margin-right: 10px;
   width: 50px;

src/components/MessageCloud.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import MessageCloudHeader from './MessageCloudHeader.vue';
+import type { Action } from './models';
+
+interface Props {
+  action: Action
+}
+const props = withDefaults(defineProps<Props>(), {})
+</script>
+
+<template>
+  <div class="message-cloud">
+    <MessageCloudHeader :action="props.action"></MessageCloudHeader>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.message-cloud {
+  border: 1px solid #444444;
+  border-radius: 15px;
+  margin: 12px 10px;
+  padding: 16px;
+  background-color: var(--main-back-item-color);
+  display: flow-root;
+}
+</style>

src/components/MessageCloudHeader.vue

@@ -0,0 +1,35 @@
+<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>