add label

src/components/GameWindow.vue

@@ -133,9 +133,9 @@ onMounted(() => {
           </div>
         </div>
         <div v-else>
-          <div v-for="action in team.actions" :key="action.id">
+          <div v-for="(action, index) in team.actions" :key="action.id">
             <MessageCloud v-model="isPlaceFilled" :action="action" :gameState="gameState" :login="login"
-              :password="password"></MessageCloud>
+              :password="password" :index="index" :count="team.actions.length"></MessageCloud>
           </div>
         </div>
       </div>

src/components/MessageCloud.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { Action } from './models';
 import { apiLetsgo } from './client';
-import MetalPlate from './MetalPlate.vue';
 
 interface Props {
   action: Action
   gameState: string
   login: string
   password: string
+  index: number
+  count: number
 }
 const props = withDefaults(defineProps<Props>(), {})
 
@@ -37,16 +38,19 @@ async function letsgo(place: string) {
           <img v-bind:src="props.action.image" class="message-image" />
         </div>{{ props.action.text }}
       </div>
+      <div v-if="index == count - 1">
         <hr class="hr" v-if="props.action.buttons?.length" />
-      <MetalPlate 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 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>
-      </MetalPlate>
+        </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.number }} Приложение: {{ application.name }}
+        Приложение: {{ application.name }}
+        <div class="application-label">{{ application.number }}</div>
       </div>
     </div>
   </div>
@@ -60,7 +64,7 @@ async function letsgo(place: string) {
 }
 
 .message-cloud {
-  border-radius: 15px;
+  /* border-radius: 15px; */
   margin: 12px 10px;
   padding: 16px;
   display: flow-root;
@@ -100,15 +104,9 @@ async function letsgo(place: string) {
   border-radius: 5px;
   font-size: 16px;
   margin-top: 10px;
-}
-
-.button-dialog:hover {
-  background-color: var(--main-color);
-  opacity: 0.9;
-}
-
-.button-dialog:disabled {
-  opacity: 0.5;
+  background-image: url("@/assets/belt.png");
+  background-size: cover;
+  color: #bfa07d;
 }
 
 .button-dialog-text {
@@ -118,5 +116,22 @@ async function letsgo(place: string) {
 .message-footer {
   font-weight: 400;
   color: var(--second-color);
+  position: relative;
+}
+
+.application-label {
+  background-image: url("@/assets/label.png");
+  background-size: cover;
+  width: 30px;
+  height: 52px;
+  text-align: center;
+  padding-top: 22px;
+  color: black;
+  position: absolute;
+  bottom: -10px;
+  right: 5px;
+  transform: rotate(9deg);
+  font-size: 30px;
+  font-family: sans-serif;
 }
 </style>