updates
This commit is contained in:
parent
f5fb8f6a1a
commit
d667590862
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Вечерний детектив</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -19,6 +19,12 @@
|
|||||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
--vt-c-text-dark-1: var(--vt-c-white);
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
--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 */
|
/* semantic color variables for this project */
|
||||||
@ -36,7 +42,7 @@
|
|||||||
--section-gap: 160px;
|
--section-gap: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
/* @media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--color-background: var(--vt-c-black);
|
--color-background: var(--vt-c-black);
|
||||||
--color-background-soft: var(--vt-c-black-soft);
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
@ -48,7 +54,7 @@
|
|||||||
--color-heading: var(--vt-c-text-dark-1);
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
--color-text: var(--vt-c-text-dark-2);
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
@ -59,9 +65,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100dvh;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: var(--color-background);
|
background: var(--main-back-color);
|
||||||
transition:
|
transition:
|
||||||
color 0.5s,
|
color 0.5s,
|
||||||
background-color 0.5s;
|
background-color 0.5s;
|
||||||
|
|||||||
@ -1,35 +1,47 @@
|
|||||||
@import './base.css';
|
@import './base.css';
|
||||||
|
|
||||||
#app {
|
.header-block {
|
||||||
max-width: 1280px;
|
height: 50px;
|
||||||
margin: 0 auto;
|
background-color: var(--main-color);
|
||||||
padding: 2rem;
|
font-size: large;
|
||||||
font-weight: normal;
|
color: white;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 10px 0 10px 16px;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
.input-custom {
|
||||||
.green {
|
width: 100%;
|
||||||
text-decoration: none;
|
box-sizing: border-box; /* обязательно! */
|
||||||
color: hsla(160, 100%, 37%, 1);
|
margin-bottom: 15px;
|
||||||
transition: 0.4s;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
.button-custom {
|
||||||
a:hover {
|
margin-left: auto;
|
||||||
background-color: hsla(160, 100%, 37%, 0.2);
|
background-color: var(--main-color);
|
||||||
}
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
.button-custom:hover {
|
||||||
body {
|
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;
|
display: flex;
|
||||||
place-items: center;
|
}
|
||||||
}
|
|
||||||
|
.center-message {
|
||||||
#app {
|
display: flex;
|
||||||
display: grid;
|
justify-content: center; /* горизонтальное центрирование */
|
||||||
grid-template-columns: 1fr 1fr;
|
align-items: center; /* вертикальное центрирование */
|
||||||
padding: 0 2rem;
|
height: calc(100dvh - 100px);
|
||||||
}
|
text-align: center; /* центрирование текста */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,19 @@
|
|||||||
<script setup lang="ts">
|
<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 = {
|
type Application = {
|
||||||
name: string
|
name: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type Action = {
|
type Action = {
|
||||||
id: string
|
id: string
|
||||||
place: string;
|
place: string
|
||||||
|
name: string
|
||||||
text: string
|
text: string
|
||||||
applications: Application[]
|
applications: Application[]
|
||||||
}
|
}
|
||||||
@ -17,44 +22,195 @@ import { ref } from 'vue';
|
|||||||
actions: Action[]
|
actions: Action[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const place = ref("")
|
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() {
|
function getTeam() {
|
||||||
fetch("http://localhost:8090/team", {
|
fetch(
|
||||||
|
host+"/team",
|
||||||
|
{
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"X-Id": "1",
|
"X-Id": sessionStorage.getItem("teamId") || "",
|
||||||
"X-Password": "pass"
|
"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) => {
|
.catch(error => {
|
||||||
team.value = await response.json()
|
router.push('/login');
|
||||||
})
|
console.error('Ошибка:', error)
|
||||||
.then((json) => console.log(json));
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addAction() {
|
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()
|
getTeam()
|
||||||
|
|
||||||
|
intervalId = setInterval(() => {getTeam()}, 2000);
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</div>
|
||||||
<template v-else>
|
|
||||||
<div v-for="action in team.actions" :key="action.id">
|
|
||||||
<p>{{ action.text }}</p>
|
|
||||||
</div>
|
</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>
|
</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 { createRouter, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '../views/HomeView.vue'
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
@ -9,6 +10,11 @@ const router = createRouter({
|
|||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView,
|
component: HomeView,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginView,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'about',
|
name: 'about',
|
||||||
|
|||||||
@ -1,12 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import GameWindow from '@/components/GameWindow.vue';
|
import GameWindow from '@/components/GameWindow.vue';
|
||||||
|
|
||||||
// import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
|
||||||
<!-- <TheWelcome /> -->
|
|
||||||
<GameWindow />
|
<GameWindow />
|
||||||
</main>
|
|
||||||
</template>
|
</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