generated from VLADIMIR/template_frontend
72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useMessage } from 'naive-ui'
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { getAuthClient } from '@/api/auth_client'
|
|
import type { Game } from '@/api/generated/crabs/evening_detective_server'
|
|
import HeaderMenu from '@/components/HeaderMenu.vue'
|
|
|
|
const client = getAuthClient()
|
|
const message = useMessage()
|
|
const router = useRouter()
|
|
|
|
const games = ref<Game[]>([])
|
|
|
|
async function getGames() {
|
|
games.value = []
|
|
const res = await client.GetGames({})
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
games.value = res.games || []
|
|
}
|
|
getGames()
|
|
|
|
async function toGame(id: number) {
|
|
router.push('/games/' + id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="center-block-custom">
|
|
<div class="width1200">
|
|
<div v-for="game in games" :key="game.id" class="game-block" @click="toGame(game.id!)">
|
|
<div class="game-title">
|
|
{{ game.name }}
|
|
</div>
|
|
<div class="game-description">
|
|
{{ game.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<HeaderMenu active="games" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.game-block {
|
|
background-color: #222;
|
|
border-radius: 10px;
|
|
margin: 10px 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.game-block:hover {
|
|
color: #63e2b7;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.game-title {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.game-description {
|
|
color: #aaa;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|