updates

src/components/GameWindow.vue

@@ -217,8 +217,12 @@ onMounted(() => {
       </BeltMiniBlock>
       <BeltBlock class="game-header-belt center-bold-text">
         <div class="position-right-center">
-          <!-- Вечерний детектив -->
-          <MetalPlate class="team-name-block text-truncate">{{ team.name }}</MetalPlate>
+          <span class="logo-text">Вечерний детектив</span>
+          <MetalPlate class="team-name-block">
+            <div class="text-middle-wrapper text-truncate">
+              <p>...</p>
+            </div>
+          </MetalPlate>
         </div>
       </BeltBlock>
     </div>
@@ -226,6 +230,8 @@ onMounted(() => {
     <!-- Форма ввода -->
     <div class="form-custom">
       <BeltBlock class="game-input-form">
+        <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
+        <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
         <div class="center-block-custom">
           <form @submit.prevent="addAction">
             <div class="controller">
@@ -294,6 +300,11 @@ body {
   background-color: gray;
 }
 
+@font-face {
+  font-family: a_OldTyper;
+  src: url('@/assets/a_OldTyper.ttf');
+}
+
 .hr {
   margin: 7px 0;
 }
@@ -346,12 +357,10 @@ body {
 
 .message-content {
   font-weight: 500;
-  /* white-space: pre-line; */
   white-space: pre-wrap;
 }
 
 .message-image {
-  /* width: 150px; */
   width: 40%;
   float: left;
   margin-right: 15px;
@@ -394,8 +403,22 @@ body {
 
 .team-name-block {
   margin-right: 10px;
-  width: 150px;
+  width: 50px;
   height: 40px;
+  font-family: a_OldTyper;
+}
+
+.text-middle-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.text-middle-wrapper p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%)
 }
 
 .text-truncate {
@@ -497,7 +520,33 @@ body {
 }
 
 .game-input-run {
+  margin-top: 14px;
+  margin-left: 25px;
   height: 50px;
   width: calc(100% - 150px);
 }
+
+.controller-metal {
+  width: 30px;
+  height: calc(100% + 2px);
+  position: absolute;
+  top: -1px;
+}
+
+.controller-metal-left {
+  left: -15px;
+}
+
+.controller-metal-right {
+  right: -15px;
+}
+
+.logo-text {
+  font-family: a_OldTyper;
+  line-height: 20px;
+  font-size: 22px;
+  color: #a1825f;
+  font-weight: 600;
+  letter-spacing: 2px;
+}
 </style>

src/components/MetalPlate.vue

@@ -29,8 +29,8 @@
 }
 
 .pin {
-  width: 5px;
-  height: 5px;
+  width: 7px;
+  height: 7px;
   position: absolute;
   background-image: url("@/assets/pin.png");
   background-size: cover;