The_evening_detective/evening_detective_client
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Game input form start

Browse Source
This commit is contained in:
Владимир Фёдоров 2026-03-22 02:30:23 +07:00
parent 7a1480b810
commit 6b261804fd
3 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/main.css
View File

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

48
src/components/GameInputForm.vue Normal file
View File

@ -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>

73
src/components/GameWindow.vue
View File

@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, watch, onMounted } from 'vue'; import { ref, nextTick, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import BeltBlock from './BeltBlock.vue';
import MetalPlate from './MetalPlate.vue';
import GameHeader from './GameHeader.vue'; import GameHeader from './GameHeader.vue';
import type { Action, Door, Team } from './models'; import type { Action, Door, Team } from './models';
import { apiGetGame, apiGetTeam, apiLetsgo } from './client'; import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
@ -10,6 +8,7 @@ import { UnauthorizedError } from './UnauthorizedError';
import WelcomeGameBlock from './WelcomeGameBlock.vue'; import WelcomeGameBlock from './WelcomeGameBlock.vue';
import HeaderText from './HeaderText.vue'; import HeaderText from './HeaderText.vue';
import MessageCloud from './MessageCloud.vue'; import MessageCloud from './MessageCloud.vue';
import GameInputForm from './GameInputForm.vue';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -136,28 +135,21 @@ onMounted(() => {
<GameHeader></GameHeader> <GameHeader></GameHeader>
<!-- Форма ввода --> <GameInputForm>
<div class="form-custom"> <form @submit.prevent="addAction">
<BeltBlock class="game-input-form"> <div class="controller">
<MetalPlate class="controller-metal controller-metal-left"></MetalPlate> <div class="game-input">
<MetalPlate class="controller-metal controller-metal-right"></MetalPlate> <div class="game-input-run-left"></div>
<div class="center-block-custom"> <input id="run" class="game-input-run" v-model="place" type="text" placeholder="Место назначения"
<form @submit.prevent="addAction"> :disabled="gameState !== 'RUN'">
<div class="controller"> </div>
<div class="game-input"> <div class="game-button-run-shadow"></div>
<div class="game-input-run-left"></div> <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
<input id="run" class="game-input-run" v-model="place" type="text" placeholder="Место назначения" <HeaderText>Поехали</HeaderText>
:disabled="gameState !== 'RUN'"> </button>
</div>
<div class="game-button-run-shadow"></div>
<button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
<HeaderText>Поехали</HeaderText>
</button>
</div>
</form>
</div> </div>
</BeltBlock> </form>
</div> </GameInputForm>
<!-- Действия --> <!-- Действия -->
<div class="messages-block" ref="scrollContainer"> <div class="messages-block" ref="scrollContainer">
@ -186,20 +178,7 @@ onMounted(() => {
background-color: gray; 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 { .game-input-form-shadow {
height: 90px; height: 90px;
@ -221,13 +200,6 @@ onMounted(() => {
padding: 5px 0 15px 0; padding: 5px 0 15px 0;
} }
@media (min-width: 1025px) {
.center-block-custom {
width: 700px;
margin: 0 auto;
}
}
.center-message { .center-message {
height: calc(100dvh - 140px); height: calc(100dvh - 140px);
} }
@ -336,19 +308,4 @@ onMounted(() => {
border: 0; border: 0;
outline: none; 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> </style>