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

add statuses game

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-08-04 02:28:16 +07:00
parent 2241c33902
commit 33cde1d28b
12 changed files with 537 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/assets/index-BreLDq9T.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-DaRs3nRs.js → dist/assets/index-nOa26MN3.js
Vendored
+94 -94
View File
File diff suppressed because one or more lines are too long
dist/assets/index-x53yzfRc.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
dist/index.html
Vendored
+2 -2
View File
@@ -5,8 +5,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>Вечерний детектив</title> <title>Вечерний детектив</title>
<script type="module" crossorigin src="/assets/index-DaRs3nRs.js"></script> <script type="module" crossorigin src="/assets/index-nOa26MN3.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-x53yzfRc.css"> <link rel="stylesheet" crossorigin href="/assets/index-BreLDq9T.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
proto/main.proto
+97
View File
@@ -366,6 +366,61 @@ service EveningDetectiveServer {
}; };
} }
rpc StartGame(StartGameReq) returns (StartGameRsp) {
option (google.api.http) = {
put : "/api/games/{id}/start"
body: "*"
};
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
tags : "Игры";
summary: "Начать игру";
};
}
rpc PauseGame(PauseGameReq) returns (PauseGameRsp) {
option (google.api.http) = {
put : "/api/games/{id}/pause"
body: "*"
};
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
tags : "Игры";
summary: "Остановить игру";
};
}
rpc PlayGame(PlayGameReq) returns (PlayGameRsp) {
option (google.api.http) = {
put : "/api/games/{id}/play"
body: "*"
};
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
tags : "Игры";
summary: "Продолжить игру";
};
}
rpc FinishGame(FinishGameReq) returns (FinishGameRsp) {
option (google.api.http) = {
put : "/api/games/{id}/finish"
body: "*"
};
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
tags : "Игры";
summary: "Закончить игру";
};
}
rpc ResetGame(ResetGameReq) returns (ResetGameRsp) {
option (google.api.http) = {
put : "/api/games/{id}/reset"
body: "*"
};
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
tags : "Игры";
summary: "Сбросить игру";
};
}
rpc DeleteGame(DeleteGameReq) returns (DeleteGameRsp) { rpc DeleteGame(DeleteGameReq) returns (DeleteGameRsp) {
option (google.api.http) = { option (google.api.http) = {
delete: "/api/games/{id}" delete: "/api/games/{id}"
@@ -743,6 +798,8 @@ message Game {
string status = 5; string status = 5;
Scenario scenario = 6; Scenario scenario = 6;
repeated Team teams = 7; repeated Team teams = 7;
optional google.protobuf.Timestamp started_at = 8;
optional google.protobuf.Timestamp ended_at = 9;
} }
message Team { message Team {
@@ -775,6 +832,46 @@ message UpdateGameRsp {
string error = 1; string error = 1;
} }
message StartGameReq {
int32 id = 1;
}
message StartGameRsp {
string error = 1;
}
message PauseGameReq {
int32 id = 1;
}
message PauseGameRsp {
string error = 1;
}
message PlayGameReq {
int32 id = 1;
}
message PlayGameRsp {
string error = 1;
}
message FinishGameReq {
int32 id = 1;
}
message FinishGameRsp {
string error = 1;
}
message ResetGameReq {
int32 id = 1;
}
message ResetGameRsp {
string error = 1;
}
message DeleteGameReq { message DeleteGameReq {
int32 id = 1; int32 id = 1;
} }
src/api/generated/crabs/evening_detective_server/index.ts
+147
View File
@@ -301,6 +301,8 @@ export type Game = {
status: string | undefined; status: string | undefined;
scenario: Scenario | undefined; scenario: Scenario | undefined;
teams: Team[] | undefined; teams: Team[] | undefined;
startedAt?: wellKnownTimestamp;
endedAt?: wellKnownTimestamp;
}; };
export type Team = { export type Team = {
@@ -333,6 +335,46 @@ export type UpdateGameRsp = {
error: string | undefined; error: string | undefined;
}; };
export type StartGameReq = {
id: number | undefined;
};
export type StartGameRsp = {
error: string | undefined;
};
export type PauseGameReq = {
id: number | undefined;
};
export type PauseGameRsp = {
error: string | undefined;
};
export type PlayGameReq = {
id: number | undefined;
};
export type PlayGameRsp = {
error: string | undefined;
};
export type FinishGameReq = {
id: number | undefined;
};
export type FinishGameRsp = {
error: string | undefined;
};
export type ResetGameReq = {
id: number | undefined;
};
export type ResetGameRsp = {
error: string | undefined;
};
export type DeleteGameReq = { export type DeleteGameReq = {
id: number | undefined; id: number | undefined;
}; };
@@ -438,6 +480,11 @@ export interface EveningDetectiveServer {
GetGames(request: GetGamesReq): Promise<GetGamesRsp>; GetGames(request: GetGamesReq): Promise<GetGamesRsp>;
GetGame(request: GetGameReq): Promise<GetGameRsp>; GetGame(request: GetGameReq): Promise<GetGameRsp>;
UpdateGame(request: UpdateGameReq): Promise<UpdateGameRsp>; UpdateGame(request: UpdateGameReq): Promise<UpdateGameRsp>;
StartGame(request: StartGameReq): Promise<StartGameRsp>;
PauseGame(request: PauseGameReq): Promise<PauseGameRsp>;
PlayGame(request: PlayGameReq): Promise<PlayGameRsp>;
FinishGame(request: FinishGameReq): Promise<FinishGameRsp>;
ResetGame(request: ResetGameReq): Promise<ResetGameRsp>;
DeleteGame(request: DeleteGameReq): Promise<DeleteGameRsp>; DeleteGame(request: DeleteGameReq): Promise<DeleteGameRsp>;
AddTeam(request: AddTeamReq): Promise<AddTeamRsp>; AddTeam(request: AddTeamReq): Promise<AddTeamRsp>;
UpdateTeam(request: UpdateTeamReq): Promise<UpdateTeamRsp>; UpdateTeam(request: UpdateTeamReq): Promise<UpdateTeamRsp>;
@@ -1024,6 +1071,106 @@ export function createEveningDetectiveServerClient(
method: "UpdateGame", method: "UpdateGame",
}) as Promise<UpdateGameRsp>; }) as Promise<UpdateGameRsp>;
}, },
StartGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) {
throw new Error("missing required field request.id");
}
const path = `api/games/${request.id}/start`; // eslint-disable-line quotes
const body = JSON.stringify(request);
const queryParams: string[] = [];
let uri = path;
if (queryParams.length > 0) {
uri += `?${queryParams.join("&")}`
}
return handler({
path: uri,
method: "PUT",
body,
}, {
service: "EveningDetectiveServer",
method: "StartGame",
}) as Promise<StartGameRsp>;
},
PauseGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) {
throw new Error("missing required field request.id");
}
const path = `api/games/${request.id}/pause`; // eslint-disable-line quotes
const body = JSON.stringify(request);
const queryParams: string[] = [];
let uri = path;
if (queryParams.length > 0) {
uri += `?${queryParams.join("&")}`
}
return handler({
path: uri,
method: "PUT",
body,
}, {
service: "EveningDetectiveServer",
method: "PauseGame",
}) as Promise<PauseGameRsp>;
},
PlayGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) {
throw new Error("missing required field request.id");
}
const path = `api/games/${request.id}/play`; // eslint-disable-line quotes
const body = JSON.stringify(request);
const queryParams: string[] = [];
let uri = path;
if (queryParams.length > 0) {
uri += `?${queryParams.join("&")}`
}
return handler({
path: uri,
method: "PUT",
body,
}, {
service: "EveningDetectiveServer",
method: "PlayGame",
}) as Promise<PlayGameRsp>;
},
FinishGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) {
throw new Error("missing required field request.id");
}
const path = `api/games/${request.id}/finish`; // eslint-disable-line quotes
const body = JSON.stringify(request);
const queryParams: string[] = [];
let uri = path;
if (queryParams.length > 0) {
uri += `?${queryParams.join("&")}`
}
return handler({
path: uri,
method: "PUT",
body,
}, {
service: "EveningDetectiveServer",
method: "FinishGame",
}) as Promise<FinishGameRsp>;
},
ResetGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) {
throw new Error("missing required field request.id");
}
const path = `api/games/${request.id}/reset`; // eslint-disable-line quotes
const body = JSON.stringify(request);
const queryParams: string[] = [];
let uri = path;
if (queryParams.length > 0) {
uri += `?${queryParams.join("&")}`
}
return handler({
path: uri,
method: "PUT",
body,
}, {
service: "EveningDetectiveServer",
method: "ResetGame",
}) as Promise<ResetGameRsp>;
},
DeleteGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars DeleteGame(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
if (!request.id) { if (!request.id) {
throw new Error("missing required field request.id"); throw new Error("missing required field request.id");
src/components/CatalogPage.vue
+2 -2
View File
@@ -62,9 +62,9 @@ getScenarios()
border-radius: 12px; border-radius: 12px;
/* background-color: #553333; */ /* background-color: #553333; */
background-color: #333; background-color: #222;
border: 2px solid #333; border: 2px solid #222;
} }
.scenario-content-block { .scenario-content-block {
src/components/GamePage.vue
+155 -6
View File
@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Settings } from '@vicons/carbon' import { Settings, Play, Pause, Reset, Flag } from '@vicons/carbon'
import { getAuthClient } from '@/api/auth_client'; import { getAuthClient } from '@/api/auth_client';
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { NButton } from 'naive-ui' import { NButton, NTag } from 'naive-ui'
import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server'; import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
import { NCard, NInput, NModal, NSpace, NFlex, NText, NQrCode } from 'naive-ui' import { NCard, NInput, NModal, NSpace, NFlex, NText, NQrCode } from 'naive-ui'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
@@ -179,6 +179,113 @@ async function openQR(url: string) {
useSimplePolling(() => { useSimplePolling(() => {
getGame(Number(gameId)) getGame(Number(gameId))
}, 2000); }, 2000);
async function resetGame() {
const res = await client.ResetGame({
id: game.value.id
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
}
async function startGame() {
const res = await client.StartGame({
id: game.value.id
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
}
async function pauseGame() {
const res = await client.PauseGame({
id: game.value.id
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
}
async function playGame() {
const res = await client.PlayGame({
id: game.value.id
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
}
async function finishGame() {
const res = await client.FinishGame({
id: game.value.id
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
}
function parseDateWithoutTimezone(dateStr: string): Date {
// Разбираем ISO строку: "2024-01-01T12:30:00"
let [datePart, timePart] = dateStr.split('T');
const [year, month, day] = datePart.split('-').map(Number);
timePart = timePart.split('.')[0]
const [hours, minutes, seconds] = (timePart || '00:00:00').split(':').map(Number);
// Создаем дату в UTC, чтобы избежать сдвига
return new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds || 0));
}
function getCurrentUTC(): Date {
const now = new Date();
return new Date(now.getTime() - now.getTimezoneOffset() * 60000);
}
function getTimeDiff(startStr: string, endStr: string): string {
if (startStr == '') {
return 'Игра ещё не началась'
}
const start = parseDateWithoutTimezone(startStr)
let endTime = getCurrentUTC();
if (endStr != '') {
endTime = parseDateWithoutTimezone(endStr);
}
const diffMs = endTime.getTime() - start.getTime();
if (diffMs < 0) return 'Игра ещё не началась';
const seconds = Math.floor(diffMs / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const months = Math.floor(days / 30);
const years = Math.floor(days / 365);
if (years > 0) return `${years}г ${days % 365}д`;
if (months > 0) return `${months}мес ${days % 30}д`;
if (days > 0) return `${days}д ${hours % 24}ч`;
if (hours > 0) return `${hours}ч ${minutes % 60}м`;
if (minutes > 0) return `${minutes}м ${seconds % 60}с`;
return `${seconds}с`;
}
const timeString = ref('')
useSimplePolling(() => {
timeString.value = getTimeDiff(game.value.startedAt || '', game.value.endedAt || '')
}, 1000);
</script> </script>
<template> <template>
@@ -186,13 +293,53 @@ useSimplePolling(() => {
<div class="width1200"> <div class="width1200">
<div class="settings-block"> <div class="settings-block">
<n-flex justify="space-between">
<n-space>
<n-tag :bordered="false" type="info">
Команд: {{ game.teams?.length }} Команд: {{ game.teams?.length }}
</n-tag>
<n-tag type="info">
{{ timeString }}
</n-tag>
</n-space>
<div>
<n-button quaternary @click="showSettingsModal = true" class="settings-button"> <n-button quaternary @click="showSettingsModal = true" class="settings-button">
<Icon class="settings-icon"> <Icon class="settings-icon">
<Settings /> <Settings />
</Icon> </Icon>
Настройки Настройки
</n-button> </n-button>
<n-space>
<n-button type="info" v-if="game.status != 'draft'" dashed @click="resetGame()">
<Icon>
<Reset />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'draft'" dashed @click="startGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'pause'" dashed @click="playGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'run'" dashed @click="pauseGame()">
<Icon>
<Pause />
</Icon>
</n-button>
<n-button type="info" v-if="game.status != 'finish'" dashed @click="finishGame()">
<Icon>
<Flag />
</Icon>
</n-button>
</n-space>
</div>
</n-flex>
</div> </div>
<div class="team-block team-block-hover" @click="showAddTeamModal = true"> <div class="team-block team-block-hover" @click="showAddTeamModal = true">
@@ -201,6 +348,8 @@ useSimplePolling(() => {
<div v-for="team in game.teams" class="team-block"> <div v-for="team in game.teams" class="team-block">
<div class="team-content-block"> <div class="team-content-block">
<n-flex justify="space-between">
<div class="title-block"> <div class="title-block">
<span class="team-name-block"> <span class="team-name-block">
{{ team.name }} {{ team.name }}
@@ -222,6 +371,8 @@ useSimplePolling(() => {
</n-button> </n-button>
</n-flex> </n-flex>
</n-flex>
<n-button v-for="application in team.applications" :key="application.name" class="link-button" <n-button v-for="application in team.applications" :key="application.name" class="link-button"
@click="giveApplication(team, application)"> @click="giveApplication(team, application)">
Выдать: {{ application.name }} Выдать: {{ application.name }}
@@ -345,7 +496,7 @@ useSimplePolling(() => {
.team-block { .team-block {
margin: 10px 0; margin: 10px 0;
border-radius: 10px; border-radius: 10px;
border: 1px solid #444; background-color: #222;
} }
.team-block-hover:hover { .team-block-hover:hover {
@@ -375,9 +526,7 @@ useSimplePolling(() => {
width: 20px; width: 20px;
} }
.title-block { .title-block {}
margin-bottom: 20px;
}
.link-button { .link-button {
margin-top: 20px; margin-top: 20px;
src/components/GamesPage.vue
+1 -1
View File
@@ -50,7 +50,7 @@ async function toGame(id: number) {
margin: 10px 0; margin: 10px 0;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #444; background-color: #222;
} }
.game-block:hover { .game-block:hover {
src/components/PlaceBlock.vue
+2 -1
View File
@@ -284,7 +284,8 @@ function onCreateKey(): Key {
margin: 10px 0; margin: 10px 0;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #444; border: 1px solid #222;
background-color: #222;
} }
.place-block-hover:hover { .place-block-hover:hover {
src/components/ScenariosPage.vue
+2 -2
View File
@@ -99,9 +99,9 @@ getScenarios()
border-radius: 12px; border-radius: 12px;
/* background-color: #553333; */ /* background-color: #553333; */
background-color: #333; background-color: #222;
border: 2px solid #333; border: 2px solid #222;
} }
.scenario-content-block { .scenario-content-block {
src/components/UsersPage.vue
+1 -1
View File
@@ -77,7 +77,7 @@ async function deleteRole(userId: number, role: string) {
<style scoped> <style scoped>
.user-block { .user-block {
border: 1px solid #444; background-color: #222;
border-radius: 10px; border-radius: 10px;
margin: 0 0 20px; margin: 0 0 20px;
padding: 20px; padding: 20px;