From 6b261804fdc81470550921b025f5ece573140723 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 22 Mar 2026 02:30:23 +0700
Subject: [PATCH] Game input form start

---
 src/assets/main.css              |  7 +++
 src/components/GameInputForm.vue | 48 +++++++++++++++++++++
 src/components/GameWindow.vue    | 73 +++++++-------------------------
 3 files changed, 70 insertions(+), 58 deletions(-)
 create mode 100644 src/components/GameInputForm.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index bf1605c..16c103c 100644
--- a/src/assets/main.css
+++ b/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;
+  }
+}
diff --git a/src/components/GameInputForm.vue b/src/components/GameInputForm.vue
new file mode 100644
index 0000000..8d602b1
--- /dev/null
+++ b/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>
diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue
index 57ef118..eb6ff65 100644
--- a/src/components/GameWindow.vue
+++ b/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,28 +135,21 @@ onMounted(() => {
 
     <GameHeader></GameHeader>
 
-    <!-- Форма ввода -->
-    <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">
-                <div class="game-input-run-left"></div>
-                <input id="run" class="game-input-run" v-model="place" type="text" placeholder="Место назначения"
-                  :disabled="gameState !== 'RUN'">
-              </div>
-              <div class="game-button-run-shadow"></div>
-              <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
-                <HeaderText>Поехали</HeaderText>
-              </button>
-            </div>
-          </form>
+    <GameInputForm>
+      <form @submit.prevent="addAction">
+        <div class="controller">
+          <div class="game-input">
+            <div class="game-input-run-left"></div>
+            <input id="run" class="game-input-run" v-model="place" type="text" placeholder="Место назначения"
+              :disabled="gameState !== 'RUN'">
+          </div>
+          <div class="game-button-run-shadow"></div>
+          <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
+            <HeaderText>Поехали</HeaderText>
+          </button>
         </div>
-      </BeltBlock>
-    </div>
+      </form>
+    </GameInputForm>
 
     <!-- Действия -->
     <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>