Game input form start

src/assets/main.css

@@ -16,3 +16,10 @@ body {
   height: calc(100dvh - 100px);
   text-align: center;     /* центрирование текста */
 }
+
+@media (min-width: 1025px) {
+  .center-block-custom {
+    width: 700px;
+    margin: 0 auto;
+  }
+}

src/components/GameInputForm.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import BeltBlock from './BeltBlock.vue';
+import MetalPlate from './MetalPlate.vue';
+</script>
+
+<template>
+  <div class="form-custom">
+    <BeltBlock class="input-form">
+      <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
+      <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
+      <div class="center-block-custom">
+        <slot></slot>
+      </div>
+    </BeltBlock>
+  </div>
+</template>
+
+<style scoped>
+.form-custom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: white;
+  z-index: 1000;
+}
+
+.input-form {
+  height: 76px;
+  position: relative;
+  z-index: 1000;
+}
+
+.controller-metal {
+  width: 30px;
+  height: calc(100% + 2px);
+  position: absolute;
+  top: -1px;
+}
+
+.controller-metal-left {
+  left: -15px;
+}
+
+.controller-metal-right {
+  right: -15px;
+}
+</style>

src/components/GameWindow.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ref, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import BeltBlock from './BeltBlock.vue';
-import MetalPlate from './MetalPlate.vue';
 import GameHeader from './GameHeader.vue';
 import type { Action, Door, Team } from './models';
 import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
@@ -10,6 +8,7 @@ import { UnauthorizedError } from './UnauthorizedError';
 import WelcomeGameBlock from './WelcomeGameBlock.vue';
 import HeaderText from './HeaderText.vue';
 import MessageCloud from './MessageCloud.vue';
+import GameInputForm from './GameInputForm.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -136,12 +135,7 @@ onMounted(() => {
 
     <GameHeader></GameHeader>
 
-    <!-- Форма ввода -->
+    <GameInputForm>
-    <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">
           <div class="game-input">
@@ -155,9 +149,7 @@ onMounted(() => {
           </button>
         </div>
       </form>
-        </div>
+    </GameInputForm>
-      </BeltBlock>
-    </div>
 
     <!-- Действия -->
     <div class="messages-block" ref="scrollContainer">
@@ -186,20 +178,7 @@ onMounted(() => {
   background-color: gray;
 }
 
-.form-custom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  color: white;
-  z-index: 1000;
-}
 
-.game-input-form {
-  height: 76px;
-  position: relative;
-  z-index: 1000;
-}
 
 .game-input-form-shadow {
   height: 90px;
@@ -221,13 +200,6 @@ onMounted(() => {
   padding: 5px 0 15px 0;
 }
 
-@media (min-width: 1025px) {
-  .center-block-custom {
-    width: 700px;
-    margin: 0 auto;
-  }
-}
-
 .center-message {
   height: calc(100dvh - 140px);
 }
@@ -336,19 +308,4 @@ onMounted(() => {
   border: 0;
   outline: none;
 }
-
-.controller-metal {
-  width: 30px;
-  height: calc(100% + 2px);
-  position: absolute;
-  top: -1px;
-}
-
-.controller-metal-left {
-  left: -15px;
-}
-
-.controller-metal-right {
-  right: -15px;
-}
 </style>