up

src/assets/base.css

@@ -88,4 +88,6 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-image: url("@/assets/forest.png");
+  background-size: cover;
 }

src/assets/main.css

@@ -9,6 +9,11 @@ body {
   src: url('@/assets/a_OldTyper.ttf');
 }
 
+@font-face {
+  font-family: main;
+  src: url('@/assets/main.ttf');
+}
+
 .center-message {
   display: flex;
   justify-content: center; /* горизонтальное центрирование */

src/components/GameWindow.vue

@@ -149,7 +149,6 @@ onMounted(() => {
 .body-custom {
   font-size: medium;
   height: calc(100vh - 100px);
-  background-color: gray;
 }
 
 .game-input-form-shadow {

src/components/MessageCloud.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Action } from './models';
 import { apiLetsgo } from './client';
+import MetalPlate from './MetalPlate.vue';
 
 interface Props {
   action: Action
@@ -37,10 +38,12 @@ async function letsgo(place: string) {
         </div>{{ props.action.text }}
       </div>
       <hr class="hr" v-if="props.action.buttons?.length" />
-      <button v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
-        :disabled="gameState !== 'RUN' || !door.show">
+      <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 class="button-dialog-text">
           {{ door.name }}
-      </button>
+        </div>
+      </MetalPlate>
       <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 }}
@@ -51,22 +54,27 @@ async function letsgo(place: string) {
 
 <style scoped>
 .hr {
-  margin: 7px 0;
+  margin: 10px 0;
+  border: dashed 1px;
+  border-color: black;
 }
 
 .message-cloud {
-  border: 1px solid #444444;
   border-radius: 15px;
   margin: 12px 10px;
   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;
 }
 
 .message-header {
-  font-size: large;
-  font-weight: 200;
+  font-size: 24px;
 }
 
 .collapse-icon {
@@ -87,15 +95,11 @@ async function letsgo(place: string) {
 }
 
 .button-dialog {
-  background-color: var(--main-color);
+  display: inline-block;
   font-weight: 600;
-  color: white;
-
-  padding: 6px 14px;
-  border: 1px solid #ddd;
-  border-radius: 15px;
+  border-radius: 5px;
   font-size: 16px;
-  margin-right: 6px;
+  margin-top: 10px;
 }
 
 .button-dialog:hover {
@@ -107,6 +111,10 @@ async function letsgo(place: string) {
   opacity: 0.5;
 }
 
+.button-dialog-text {
+  padding: 5px 12px;
+}
+
 .message-footer {
   font-weight: 400;
   color: var(--second-color);

src/components/MetalPlate.vue

@@ -16,7 +16,6 @@
 
 <style scoped>
 .plate-block {
-  border-radius: 4px;
   position: relative;
   box-shadow: 0px 0px 10px black;
 }
@@ -26,6 +25,7 @@
   background-image: url("@/assets/metal.png");
   background-size: cover;
   position: relative;
+  border-radius: 4px;
 }
 
 .pin {