Add hr

src/components/GameWindow.vue

@@ -10,6 +10,7 @@ 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();
@@ -173,24 +174,22 @@ onMounted(() => {
         <div v-else>
           <div v-for="action in team.actions" :key="action.id">
             <MessageCloud :action="action">
-              <div v-show="action.isOpen">
-                <hr class="hr" />
+                <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>
-                <hr class="hr" v-if="action.buttons?.length" />
+                <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>
 
-                <hr class="hr" v-if="action.applications.length" />
+                <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>
-              </div>
             </MessageCloud>
           </div>
         </div>
@@ -202,10 +201,6 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.hr {
-  margin: 7px 0;
-}
-
 .body-custom {
   font-size: medium;
   height: calc(100vh - 100px);

src/components/HRLine.vue

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

src/components/MessageCloud.vue

@@ -11,7 +11,9 @@ const props = withDefaults(defineProps<Props>(), {})
 <template>
   <div class="message-cloud">
     <MessageCloudHeader :action="props.action"></MessageCloudHeader>
-    <slot></slot>
+    <div v-show="props.action.isOpen">
+      <slot></slot>
+    </div>
   </div>
 </template>