add input form
This commit is contained in:
parent
6b261804fd
commit
f4964e6355
@ -1,6 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import BeltBlock from './BeltBlock.vue';
|
||||
import { apiLetsgo } from './client';
|
||||
import MetalPlate from './MetalPlate.vue';
|
||||
import HeaderText from './HeaderText.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const place = ref("")
|
||||
|
||||
interface Props {
|
||||
gameState: string
|
||||
login: string
|
||||
password: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const isPlaceFilled = defineModel<boolean>();
|
||||
|
||||
async function addAction() {
|
||||
isPlaceFilled.value = true
|
||||
const placeValue = place.value.trim()
|
||||
if (placeValue === "") {
|
||||
place.value = ""
|
||||
return
|
||||
}
|
||||
await apiLetsgo(props.login, props.password, placeValue)
|
||||
place.value = ""
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -9,7 +34,19 @@ import MetalPlate from './MetalPlate.vue';
|
||||
<MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
|
||||
<MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
|
||||
<div class="center-block-custom">
|
||||
<slot></slot>
|
||||
<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="props.gameState !== 'RUN'">
|
||||
</div>
|
||||
<div class="game-button-run-shadow"></div>
|
||||
<button class="game-button-run" type="submit" :disabled="props.gameState !== 'RUN'">
|
||||
<HeaderText>Поехали</HeaderText>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</BeltBlock>
|
||||
</div>
|
||||
@ -45,4 +82,78 @@ import MetalPlate from './MetalPlate.vue';
|
||||
.controller-metal-right {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.controller {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game-input {
|
||||
position: relative;
|
||||
top: 14px;
|
||||
left: 25px;
|
||||
height: 50px;
|
||||
width: calc(100% - 150px - 50px);
|
||||
}
|
||||
|
||||
.game-input-run-left {
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-image: url("@/assets/input_left.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.game-input-run {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 15px;
|
||||
padding-left: 12px;
|
||||
background-image: url("@/assets/input_center.png");
|
||||
background-size: cover;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
font-family: a_OldTyper;
|
||||
}
|
||||
|
||||
.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/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:hover {
|
||||
/* TODO */
|
||||
}
|
||||
|
||||
.game-button-run:disabled {
|
||||
/* TODO */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,20 +3,18 @@ import { ref, nextTick, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import GameHeader from './GameHeader.vue';
|
||||
import type { Action, Door, Team } from './models';
|
||||
import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
|
||||
import { apiGetGame, apiGetTeam } from './client';
|
||||
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();
|
||||
|
||||
const inputPlace = ref(false)
|
||||
const isPlaceFilled = ref(false)
|
||||
const login = ref("")
|
||||
const password = ref("")
|
||||
const place = ref("")
|
||||
const team = ref<Team>({ name: "", actions: [] })
|
||||
const actions = ref<Action[]>([])
|
||||
const scrollContainer = ref<HTMLDivElement | null>();
|
||||
@ -58,17 +56,6 @@ async function getTeam() {
|
||||
}
|
||||
}
|
||||
|
||||
async function addAction() {
|
||||
inputPlace.value = true
|
||||
const placeValue = place.value.trim()
|
||||
if (placeValue === "") {
|
||||
place.value = ""
|
||||
return
|
||||
}
|
||||
await apiLetsgo(login.value, password.value, placeValue)
|
||||
place.value = ""
|
||||
}
|
||||
|
||||
const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
|
||||
await nextTick();
|
||||
if (scrollContainer.value) {
|
||||
@ -96,11 +83,11 @@ async function getGame() {
|
||||
|
||||
// Автоматическая прокрутка при изменении items
|
||||
watch(actions, () => {
|
||||
if (inputPlace.value === false) {
|
||||
if (isPlaceFilled.value === false) {
|
||||
return
|
||||
}
|
||||
scrollToBottom();
|
||||
inputPlace.value = false
|
||||
isPlaceFilled.value = false
|
||||
}, { deep: true });
|
||||
|
||||
let intervalId = 0
|
||||
@ -135,21 +122,7 @@ onMounted(() => {
|
||||
|
||||
<GameHeader></GameHeader>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</GameInputForm>
|
||||
<GameInputForm v-model="isPlaceFilled" :gameState="gameState" :login="login" :password="password"></GameInputForm>
|
||||
|
||||
<!-- Действия -->
|
||||
<div class="messages-block" ref="scrollContainer">
|
||||
@ -161,7 +134,8 @@ onMounted(() => {
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="action in team.actions" :key="action.id">
|
||||
<MessageCloud :action="action" :gameState="gameState" :login="login" :password="password"></MessageCloud>
|
||||
<MessageCloud v-model="isPlaceFilled" :action="action" :gameState="gameState" :login="login"
|
||||
:password="password"></MessageCloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -178,8 +152,6 @@ onMounted(() => {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.game-input-form-shadow {
|
||||
height: 90px;
|
||||
width: 120%;
|
||||
@ -234,78 +206,4 @@ onMounted(() => {
|
||||
/* Добавляем троеточие */
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.controller {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game-button-run {
|
||||
background-image: url("@/assets/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-shadow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -5px;
|
||||
height: 80px;
|
||||
width: 150px;
|
||||
box-shadow: -5px 5px 10px black;
|
||||
}
|
||||
|
||||
.game-button-run:hover {
|
||||
/* TODO */
|
||||
}
|
||||
|
||||
.game-button-run:disabled {
|
||||
/* TODO */
|
||||
}
|
||||
|
||||
.game-input {
|
||||
position: relative;
|
||||
top: 14px;
|
||||
left: 25px;
|
||||
height: 50px;
|
||||
width: calc(100% - 150px - 50px);
|
||||
}
|
||||
|
||||
.game-input-run-left {
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-image: url("@/assets/input_left.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.game-input-run {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 15px;
|
||||
padding-left: 12px;
|
||||
background-image: url("@/assets/input_center.png");
|
||||
background-size: cover;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
font-family: a_OldTyper;
|
||||
}
|
||||
|
||||
.game-input-run::placeholder {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.game-input-run:focus {
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,12 +10,15 @@ interface Props {
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const isPlaceFilled = defineModel<boolean>();
|
||||
|
||||
function clickCollapse() {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.action.isOpen = !props.action.isOpen
|
||||
}
|
||||
|
||||
async function letsgo(place: string) {
|
||||
isPlaceFilled.value = true
|
||||
await apiLetsgo(props.login, props.password, place)
|
||||
}
|
||||
</script>
|
||||
@ -33,12 +36,12 @@ async function letsgo(place: string) {
|
||||
<img v-bind:src="props.action.image" class="message-image" />
|
||||
</div>{{ props.action.text }}
|
||||
</div>
|
||||
<hr class="hr" v-if="props.action.buttons?.length"/>
|
||||
<hr class="hr" v-if="props.action.buttons?.length" />
|
||||
<button v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
|
||||
:disabled="gameState !== 'RUN' || !door.show">
|
||||
{{ door.name }}
|
||||
</button>
|
||||
<hr class="hr" v-if="props.action.applications.length"/>
|
||||
<hr class="hr" v-if="props.action.applications.length" />
|
||||
<div class="message-footer" v-for="application in props.action.applications" :key="application.name">
|
||||
{{ application.number }} Приложение: {{ application.name }}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user