add catalog

2026-07-26 03:02:05 +07:00
parent 4663493c66
commit 6d5766092b
14 changed files with 338 additions and 5 deletions
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { NTag } from 'naive-ui'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getAuthClient } from '@/api/auth_client'
+import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
+import HeaderMenu from '@/components/HeaderMenu.vue'
+
+const client = getAuthClient()
+
+const scenarios = ref<Scenario[]>([])
+
+const router = useRouter()
+
+async function getScenarios() {
+    scenarios.value = []
+    const res = await client.GetScenariosCatalog({})
+    scenarios.value = res.scenarios!
+}
+
+async function toScenarioInfo(id: number) {
+    router.push('/scenarios/' + id)
+}
+
+getScenarios()
+</script>
+
+<template>
+    <div class="center-block-custom-big content-block">
+        <div class="scenarios-container">
+            <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioInfo(scenario.id!)"
+                v-bind:key="scenario.id">
+                <div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }">
+                </div>
+
+                <div class="scenario-content-block">
+                    <p class="scenario-title">{{ scenario.name }}</p>
+
+                    <p class="scenario-description">{{ scenario.description }}</p>
+
+                    <p class="scenario-label">
+                        <n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
+                            }}</n-tag>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <HeaderMenu :add-logout="true" active="catalog" />
+</template>
+
+<style scoped>
+.scenarios-container {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    overflow-y: auto;
+    padding: 0;
+    height: calc(100vh - 150px);
+
+    /* border: 1px solid red; */
+}
+
+.scenario-block {
+    position: relative;
+    margin: 10px;
+    width: 160px;
+    height: 300px;
+    cursor: pointer;
+    border-radius: 12px;
+
+    /* background-color: #553333; */
+    background-color: #333;
+
+    border: 2px solid #333;
+}
+
+.scenario-content-block {
+    padding: 2px 10px;
+}
+
+.scenario-block:hover {
+    color: #63e2b7;
+    border: 2px solid #63e2b7;
+}
+
+.scenario-image-block {
+    background-color: #111;
+    height: 160px;
+    border-radius: 10px;
+}
+
+.scenario-image {
+    background-size: cover;
+    background-position: center;
+}
+
+.scenario-title {
+    padding: 5px 0;
+}
+
+.scenario-description {
+    color: #aaa;
+    display: none;
+}
+
+.status-block {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+}
+
+@media (width >=1024px) {
+    .scenarios-container {
+        height: calc(100vh - 70px);
+    }
+
+    .scenario-block {
+        width: 250px;
+        height: 400px;
+    }
+
+    .scenario-image-block {
+        height: 250px;
+    }
+
+    .scenario-content-block {
+        padding: 4px 10px;
+    }
+
+    .scenario-description {
+        color: #aaa;
+        display: block;
+    }
+}
+</style>