updates
This commit is contained in:
parent
f5fb8f6a1a
commit
d667590862
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>Вечерний детектив</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -19,6 +19,12 @@
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
|
||||
/* Главный цвет */
|
||||
--main-color: rgba(115, 185, 83, 1);
|
||||
--second-color: rgba(98, 156, 68, 1);
|
||||
--main-back-color: rgba(240, 240, 240, 1);
|
||||
--main-back-item-color: rgba(254, 254, 254, 1);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
@ -36,7 +42,7 @@
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
@ -48,7 +54,7 @@
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
@ -59,9 +65,9 @@
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
background: var(--main-back-color);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
|
||||
@ -1,35 +1,47 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
.header-block {
|
||||
height: 50px;
|
||||
background-color: var(--main-color);
|
||||
font-size: large;
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
padding: 10px 0 10px 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
.input-custom {
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* обязательно! */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
.button-custom {
|
||||
margin-left: auto;
|
||||
background-color: var(--main-color);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
.button-custom:hover {
|
||||
background-color: var(--second-color);
|
||||
}
|
||||
|
||||
.input-custom, .button-custom {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.center-message {
|
||||
display: flex;
|
||||
justify-content: center; /* горизонтальное центрирование */
|
||||
align-items: center; /* вертикальное центрирование */
|
||||
height: calc(100dvh - 100px);
|
||||
text-align: center; /* центрирование текста */
|
||||
}
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// Типы лучше вынести в отдельный файлик, конечно
|
||||
// я их для наглядности оставил
|
||||
import { ref, nextTick, watch, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const host = "http://192.168.0.110:8090"
|
||||
|
||||
type Application = {
|
||||
name: string
|
||||
}
|
||||
|
||||
type Action = {
|
||||
id: string
|
||||
place: string;
|
||||
place: string
|
||||
name: string
|
||||
text: string
|
||||
applications: Application[]
|
||||
}
|
||||
@ -17,44 +22,195 @@ import { ref } from 'vue';
|
||||
actions: Action[]
|
||||
}
|
||||
|
||||
|
||||
const place = ref("")
|
||||
const team = ref<Team | null>(null)
|
||||
const team = ref<Team>({actions: []})
|
||||
const actions = ref<Action[]>([])
|
||||
const scrollContainer = ref<HTMLDivElement | null>();
|
||||
|
||||
function getTeam() {
|
||||
fetch("http://localhost:8090/team", {
|
||||
fetch(
|
||||
host+"/team",
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Id": "1",
|
||||
"X-Password": "pass"
|
||||
"X-Id": sessionStorage.getItem("teamId") || "",
|
||||
"X-Password": sessionStorage.getItem("password") || ""
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
team.value = data
|
||||
const newActions = team.value?.actions
|
||||
if (actions.value.length !== newActions?.length) {
|
||||
actions.value = newActions
|
||||
}
|
||||
})
|
||||
.then(async (response) => {
|
||||
team.value = await response.json()
|
||||
})
|
||||
.then((json) => console.log(json));
|
||||
.catch(error => {
|
||||
router.push('/login');
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
}
|
||||
|
||||
function addAction() {
|
||||
console.log(place.value)
|
||||
// сходить в сеть
|
||||
fetch(host+"/team/actions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-Id": sessionStorage.getItem("teamId") || "",
|
||||
"X-Password": sessionStorage.getItem("password") || ""
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"place": place.value
|
||||
})
|
||||
})
|
||||
.then(async () => {place.value = ""})
|
||||
}
|
||||
|
||||
const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
|
||||
await nextTick();
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.scrollTo({
|
||||
top: scrollContainer.value.scrollHeight,
|
||||
behavior
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Автоматическая прокрутка при изменении items
|
||||
watch(actions, () => {
|
||||
scrollToBottom();
|
||||
}, { deep: true });
|
||||
|
||||
let intervalId = 0
|
||||
onMounted(() => {
|
||||
getTeam()
|
||||
|
||||
intervalId = setInterval(() => {getTeam()}, 2000);
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
clearInterval(intervalId);
|
||||
next();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!team">
|
||||
|
||||
<div class="body-custom">
|
||||
|
||||
<div class="header-block">
|
||||
Вечерний детектив
|
||||
</div>
|
||||
|
||||
<!-- Форма ввода -->
|
||||
<div class="form-custom form-block">
|
||||
<div class="center-block-custom">
|
||||
<form @submit.prevent="addAction">
|
||||
<div>
|
||||
<input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)">
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="button-custom" type="submit">Поехали</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Действия -->
|
||||
<div class="messages-block" ref="scrollContainer">
|
||||
<div class="center-block-custom">
|
||||
<div v-if="!team || !team.actions.length">
|
||||
<div class="center-message">
|
||||
Пора решать загадку
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-for="action in team.actions" :key="action.id">
|
||||
<p>{{ action.text }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else>
|
||||
<div v-for="action in team.actions" :key="action.id">
|
||||
<div class="message-cloud">
|
||||
<div class="message-header">
|
||||
{{ action.place }}: {{ action.name }}
|
||||
</div>
|
||||
<hr class="hr"/>
|
||||
<div class="message-content">
|
||||
{{ action.text }}
|
||||
</div>
|
||||
<hr class="hr" v-if="action.applications.length"/>
|
||||
<div class="message-footer" v-for="application in action.applications" :key="application.name">
|
||||
Приложение: {{ application.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input v-model="place" placeholder="Место назначения (Пример А-1, регистр не важен, тире можно опустить)" />
|
||||
<button v-on:click="addAction">Поехали</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hr {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.body-custom {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.form-custom {
|
||||
border: 1px solid #444444;
|
||||
background-color: var(--main-back-color);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message-cloud {
|
||||
border: 1px solid #444444;
|
||||
border-radius: 15px;
|
||||
margin: 12px 0;
|
||||
padding: 16px;
|
||||
background-color: var(--main-back-item-color);
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
.form-block {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.messages-block {
|
||||
height: calc(100dvh - 140px - 50px);
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.center-block-custom {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.center-message {
|
||||
height: calc(100dvh - 140px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
59
src/components/LoginWindow.vue
Normal file
59
src/components/LoginWindow.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const host = "http://192.168.0.110:8090"
|
||||
|
||||
const login = ref("")
|
||||
const password = ref("")
|
||||
|
||||
function onClickLogin() {
|
||||
fetch(
|
||||
host+"/team",
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Id": login.value,
|
||||
"X-Password": password.value
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(response => {
|
||||
if (response.status == 200) {
|
||||
sessionStorage.setItem("teamId", login.value)
|
||||
sessionStorage.setItem("password", password.value)
|
||||
router.push('/');
|
||||
}
|
||||
})
|
||||
.catch(error => {console.error('Ошибка:', error)});
|
||||
}
|
||||
|
||||
onClickLogin()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header-block">
|
||||
Вечерний детектив
|
||||
</div>
|
||||
|
||||
<div class="center-message">
|
||||
<form @submit.prevent="onClickLogin">
|
||||
<div>
|
||||
<input class="input-custom" v-model="login" type="text" placeholder="Название команды">
|
||||
</div>
|
||||
<div>
|
||||
<input class="input-custom" v-model="password" type="text" placeholder="Пароль" autocapitalize="off">
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="button-custom" type="submit">Вход</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@ -9,6 +10,11 @@ const router = createRouter({
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import GameWindow from '@/components/GameWindow.vue';
|
||||
|
||||
// import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<!-- <TheWelcome /> -->
|
||||
<GameWindow />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
||||
7
src/views/LoginView.vue
Normal file
7
src/views/LoginView.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import LoginWindow from '@/components/LoginWindow.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LoginWindow />
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user