evening_detective_frontend/src/components/CatalogPage.vue

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