From cfb58ca82c7854fa9eeecd29ed56bd0fd2a10b41 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Tue, 24 Mar 2026 02:19:53 +0700
Subject: [PATCH] fix

---
 src/components/GameWindow.vue   |  2 +-
 src/components/MessageCloud.vue | 95 +++++++++++++++++++++++----------
 2 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue
index e56c237..d9db320 100644
--- a/src/components/GameWindow.vue
+++ b/src/components/GameWindow.vue
@@ -168,7 +168,7 @@ onMounted(() => {
   overflow-y: auto;
   scrollbar-width: none;
   position: relative;
-  padding: 5px 0 15px 0;
+  padding: 5px 10px 15px 10px;
 }
 
 .center-message {
diff --git a/src/components/MessageCloud.vue b/src/components/MessageCloud.vue
index 044d41f..570d051 100644
--- a/src/components/MessageCloud.vue
+++ b/src/components/MessageCloud.vue
@@ -26,39 +26,47 @@ async function letsgo(place: string) {
 </script>
 
 <template>
-  <div class="message-cloud">
-    <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">
-      <hr class="hr" />
-      <div class="message-content">
-        <div v-if="props.action.image.length">
-          <div class="message-image-border">
-            <img v-bind:src="props.action.image" class="message-image" />
-          </div>
-        </div>{{ props.action.text }}
+  <div class="main">
+    <div class="message-cloud-3"></div>
+    <div class="message-cloud-2"></div>
+    <div class="message-cloud">
+      <div class="message-header">
+        {{ props.action.place }}: {{ props.action.name }}
+        <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
       </div>
-      <div v-if="index == count - 1">
-        <hr class="hr" v-if="props.action.buttons?.length" />
-        <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
-          :disabled="gameState !== 'RUN' || !door.show">
-          <div class="button-dialog-text">
-            {{ door.name }}
+      <div v-show="props.action.isOpen">
+        <hr class="hr" />
+        <div class="message-content">
+          <div v-if="props.action.image.length">
+            <div class="message-image-border">
+              <img v-bind:src="props.action.image" class="message-image" />
+            </div>
+          </div>{{ props.action.text }}
+        </div>
+        <div v-if="index == count - 1">
+          <hr class="hr" v-if="props.action.buttons?.length" />
+          <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog"
+            v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
+            <div class="button-dialog-text">
+              {{ door.name }}
+            </div>
           </div>
         </div>
-      </div>
-      <hr class="hr" v-if="props.action.applications.length" />
-      <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
-        Приложение: {{ application.name }}
-        <div class="application-label">{{ application.number }}</div>
+        <hr class="hr" v-if="props.action.applications.length" />
+        <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
+          Приложение: {{ application.name }}
+          <div class="application-label">{{ application.number }}</div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.main {
+  position: relative;
+}
+
 .hr {
   margin: 10px 0;
   border: dashed 1px;
@@ -66,17 +74,45 @@ async function letsgo(place: string) {
 }
 
 .message-cloud {
-  /* border-radius: 15px; */
-  margin: 12px 10px;
+  margin: 15px 0;
   padding: 16px;
-  display: flow-root;
-  background-image: url("@/assets/paper.jpg");
-  background-size: cover;
   font-family: main;
   color: black;
   line-height: 20px;
   font-size: 18px;
   font-weight: 900;
+  position: relative;
+}
+
+.message-cloud,
+.message-cloud-2,
+.message-cloud-3 {
+  border-radius: 5px;
+  background-image: url("@/assets/paper.jpg");
+  background-size: cover;
+  display: flow-root;
+  box-shadow: 0px 0 5px black;
+}
+
+.message-cloud-2,
+.message-cloud-3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.message-cloud-2 {
+  transform: rotate(-3deg);
+  filter: brightness(50%);
+  height: 100%;
+  width: 100%;
+}
+
+.message-cloud-3 {
+  transform: rotate(2deg);
+  filter: brightness(80%);
+  height: 100%;
+  width: 100%;
 }
 
 .message-header {
@@ -115,6 +151,7 @@ async function letsgo(place: string) {
   border-radius: 5px;
   font-size: 16px;
   margin-top: 10px;
+  margin-right: 10px;
   background-image: url("@/assets/belt.png");
   background-size: cover;
   color: #bfa07d;