add input form

src/components/BeltBlock.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <div class="shadow shadow-top"></div>
+    <div class="shadow shadow-bottom"></div>
+    <div class="belt-block">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.belt-block {
+  height: 100%;
+  background-color: rgb(0, 0, 0);
+  background-image: url("@/assets/images/belt.png");
+  background-size: cover;
+  position: relative;
+}
+
+.shadow {
+  height: 10px;
+  width: 100%;
+  position: absolute;
+  background-color: black;
+}
+
+.shadow-top {
+  top: 0px;
+  box-shadow: 0px -5px 10px black;
+}
+
+.shadow-bottom {
+  bottom: 0px;
+  box-shadow: 0px 5px 10px black;
+}
+</style>

src/components/GameInputForm.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import BeltBlock from './BeltBlock.vue';
+import MetalPlate from './MetalPlate.vue';
+import HeaderText from './HeaderText.vue';
+import { ref, type PropType } from 'vue';
+
+const code = ref('')
+
+const props = defineProps({
+  addAction: {
+    type: Function as PropType<(param: string) => void>,
+    required: true,
+  }
+})
+
+async function addClickButton() {
+  await props.addAction(code.value)
+  code.value = ''
+}
+
+</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">
+        <div class="controller">
+          <div class="game-input">
+            <input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения">
+          </div>
+          <div class="game-button-run-shadow"></div>
+          <button class="game-button-run" type="submit" :disabled="code.length == 0" v-on:click="addClickButton">
+            <HeaderText>Поехали</HeaderText>
+          </button>
+        </div>
+      </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;
+  margin: 0 auto;
+  max-width: 1920px;
+}
+
+.controller-metal {
+  width: 30px;
+  height: calc(100% + 2px);
+  position: absolute;
+  top: -1px;
+}
+
+.controller-metal-left {
+  left: -30px;
+}
+
+.controller-metal-right {
+  right: -30px;
+}
+
+.controller {
+  display: flex;
+  position: relative;
+}
+
+.game-input {
+  position: relative;
+  top: 14px;
+  left: 15px;
+  height: 50px;
+  width: calc(100% - 150px - 25px);
+}
+
+.game-input-run {
+  height: 100%;
+  width: 100%;
+  padding-left: 27px;
+  background-image: url("@/assets/images/input_center.png");
+  background-size: cover;
+  border: 0;
+  font-size: 18px;
+  font-family: a_OldTyper;
+  background-color: transparent;
+}
+
+.game-input-run::placeholder {
+  color: #333333;
+}
+
+.game-input-run:focus {
+  border: 0;
+  outline: none;
+}
+
+.game-button-run-shadow {
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 150px;
+  box-shadow: -5px 5px 10px black;
+}
+
+.game-button-run {
+  background-image: url("@/assets/images/button.png");
+  background-size: cover;
+  font-size: 1.5em;
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 155px;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+.game-button-run {
+  cursor: pointer;
+}
+</style>

src/components/HeaderText.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/* код */
+</script>
+
+<template>
+  <span class="text-with-font"><slot></slot></span>
+</template>
+
+<style scoped>
+.text-with-font {
+  font-family: a_OldTyper;
+  color: #bfa07d;
+  font-weight: 600;
+  letter-spacing: 2px;
+  line-height: 20px;
+  font-size: 22px;
+}
+</style>

src/components/MetalPlate.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="plate-block">
+    <div class="metal-plate-block">
+      <slot></slot>
+    </div>
+    <div class="pin pin-top-left"></div>
+    <div class="pin pin-top-right"></div>
+    <div class="pin pin-bottom-right"></div>
+    <div class="pin pin-bottom-left"></div>
+  </div>
+</template>
+
+<style scoped>
+.plate-block {
+  position: relative;
+  box-shadow: 0px 0px 10px black;
+}
+
+.metal-plate-block {
+  height: 100%;
+  background-image: url("@/assets/images/metal.png");
+  background-size: cover;
+  position: relative;
+  border-radius: 4px;
+}
+
+.pin {
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-image: url("@/assets/images/pin.png");
+  background-size: cover;
+}
+
+.pin-top-left {
+  top: 3px;
+  left: 3px;
+}
+
+.pin-top-right {
+  top: 3px;
+  right: 3px;
+}
+
+.pin-bottom-right {
+  bottom: 3px;
+  right: 3px;
+}
+
+.pin-bottom-left {
+  bottom: 3px;
+  left: 3px;
+}
+</style>

src/components/TeamStoryPage.vue

@@ -7,6 +7,7 @@ import { useMessage } from 'naive-ui';
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import PlaceBlock from '@/components/PlaceBlock.vue'
+import GameInputForm from '@/components/GameInputForm.vue'
 
 const client = getAuthClient()
 const message = useMessage()
@@ -67,14 +68,11 @@ type AdvancedPlace = {
 <template>
     <div class="center-block-custom-big">
         <div class="places-container">
+            <GameInputForm :addAction="addAction"></GameInputForm>
+
             <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
                 v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
             </PlaceBlock>
-
-            <n-space vertical>
-                <n-input v-model:value="code" type="text" placeholder="Ы-1" />
-                <n-button @click="addAction(code)" ghost>Поехали</n-button>
-            </n-space>
         </div>
     </div>
 
@@ -96,7 +94,7 @@ type AdvancedPlace = {
 @media (width >=1024px) {
     .places-container {
         padding: 20px 250px;
-        height: calc(100vh - 70px);
+        height: calc(100vh - 70px - 75px);
     }
 }
 </style>