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 give applications

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-08-01 02:20:44 +07:00
parent fc5fcd3ade
commit 47d43d61a8
5 changed files with 2479 additions and 2399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/assets/index-D9n48hm7.css → dist/assets/index-C6QiWdi-.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-D3SxW14E.js
Vendored
+2384
View File
File diff suppressed because one or more lines are too long
dist/assets/index-dK2aD98P.js
Vendored
-2384
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-dK2aD98P.js"></script> <script type="module" crossorigin src="/assets/index-D3SxW14E.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D9n48hm7.css"> <link rel="stylesheet" crossorigin href="/assets/index-C6QiWdi-.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
src/components/GamePage.vue
+92 -12
View File
@@ -4,8 +4,8 @@ import { Settings } 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 } from 'naive-ui'
import type { Game } from '@/api/generated/crabs/evening_detective_server'; import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
import { NCard, NInput, NModal, NSpace } from 'naive-ui' import { NCard, NInput, NModal, NSpace, NFlex } from 'naive-ui'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui';
import { ref } from 'vue'; import { ref } from 'vue';
@@ -19,6 +19,7 @@ const gameId = route.params.id
const message = useMessage() const message = useMessage()
const showSettingsModal = ref(false) const showSettingsModal = ref(false)
const showGiveApplicationModal = ref(false)
const game = ref<Game>({ const game = ref<Game>({
id: undefined, id: undefined,
@@ -59,6 +60,39 @@ async function updateGame() {
await getGame(game.value.id!) await getGame(game.value.id!)
showSettingsModal.value = false showSettingsModal.value = false
} }
const giveApplicationTeam = ref<Team>({
id: 0,
name: '',
status: '',
password: '',
actionsCount: 0,
applications: []
})
const giveApplicationApplication = ref<Application>({
name: '',
image: ''
})
function giveApplication(team: Team, application: Application) {
giveApplicationTeam.value = team
giveApplicationApplication.value = application
showGiveApplicationModal.value = true
}
async function confirmGiveApplication() {
const res = await client.GiveTeamApplications({
id: giveApplicationTeam.value.id,
name: giveApplicationApplication.value.name,
})
if (res.error != '') {
message.error(res.error!)
return
}
await getGame(game.value.id!)
showGiveApplicationModal.value = false
}
</script> </script>
<template> <template>
@@ -66,7 +100,7 @@ async function updateGame() {
<div class="width1200"> <div class="width1200">
<div class="settings-block"> <div class="settings-block">
{{ game.name }} Команд: {{ game.teams?.length }}
<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 />
@@ -75,9 +109,19 @@ async function updateGame() {
</n-button> </n-button>
</div> </div>
<div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)"> <div v-for="team in game.teams" class="team-block">
<div class="team-title"> <div class="team-content-block">
{{ team.name }} <div class="team-name-block">
{{ team.name }}
<n-button class="team-url" @click="toTeamStory(team.id!, team.password!)">
Подсмотреть игру
</n-button>
</div>
<div>Поездки: {{ team.actionsCount }}</div>
<n-button v-for="application in team.applications" :key="application.name" class="link-button"
@click="giveApplication(team, application)">
Выдать: {{ application.name }}
</n-button>
</div> </div>
</div> </div>
</div> </div>
@@ -97,8 +141,32 @@ async function updateGame() {
<p class="settings-header">Описание</p> <p class="settings-header">Описание</p>
<n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." /> <n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
<n-button @click="updateGame()" ghost> Сохранить изменения </n-button> <n-flex justify="end">
<n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
</n-flex>
</n-space>
<template #footer> </template>
</n-card>
</n-modal>
<!-- Окно выдачи улик -->
<n-modal v-model:show="showGiveApplicationModal">
<n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
aria-modal="true">
<template #header-extra>
<n-button @click="showGiveApplicationModal = false"> x </n-button>
</template>
<n-space vertical>
<p>Команда</p>
<h3>{{ giveApplicationTeam.name }}</h3>
<p>Улика</p>
<h3>{{ giveApplicationApplication.name }}</h3>
<n-flex justify="end">
<n-button @click="confirmGiveApplication()" ghost> Выдать </n-button>
</n-flex>
</n-space> </n-space>
<template #footer> </template> <template #footer> </template>
</n-card> </n-card>
@@ -110,19 +178,26 @@ async function updateGame() {
<style scoped> <style scoped>
.team-block { .team-block {
margin: 10px 0; margin: 10px 0;
padding: 20px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #444; border: 1px solid #444;
} }
.team-block:hover { .team-url {
margin-left: 10px;
}
.team-url:hover {
cursor: pointer; cursor: pointer;
color: #63e2b7; color: #63e2b7;
} }
.team-title { .team-content-block {
font-size: 24px; padding: 20px;
margin-bottom: 10px; }
.team-name-block {
font-weight: 600;
font-size: 20px;
} }
.settings-block { .settings-block {
@@ -136,4 +211,9 @@ async function updateGame() {
.settings-icon { .settings-icon {
width: 20px; width: 20px;
} }
.link-button {
margin-top: 10px;
width: 100%;
}
</style> </style>