evening_detective_frontend/src/components/ScenarioPage.vue

<script setup lang="ts">
import { NRate, NTag, useMessage } from 'naive-ui'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

import { getAuthClient } from '@/api/auth_client'
import type { GameReview, Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue'

const message = useMessage()
const client = getAuthClient()
const route = useRoute()

const scenarioId = route.params.id
const reviews = ref<GameReview[]>([])

const scenario = ref<Scenario>({
  ID: undefined,
  name: undefined,
  story: undefined,
  author: undefined,
  status: undefined,
  updatedAt: undefined,
  createdAt: undefined,
  publishedAt: undefined,
  averageRating: undefined,
  reviewsCount: undefined,
  difficulty: undefined,
})

async function getScenario(id: number) {
  try {
    const res = await client.GetScenario({ ID: id })
    scenario.value = res.scenario!
  } catch (err) {
    message.error(err instanceof Error ? err.message : 'Не удалось загрузить сценарий')
  }
}
getScenario(Number(scenarioId))

async function getReviews(id: number) {
  try {
    const res = await client.GetScenarioReviews({ scenarioID: id })
    reviews.value = res.reviews || []
  } catch (err) {
    message.error(err instanceof Error ? err.message : 'Не удалось загрузить отзывы')
  }
}
getReviews(Number(scenarioId))
</script>

<template>
  <div class="center-block-custom">
    <div class="width700">
      <section class="scenario-card">
        <div class="scenario-heading">
          <p class="scenario-kicker">ДЕЛО ИЗ КАТАЛОГА</p>
          <h1 class="scenario-title">{{ scenario.name }}</h1>
        </div>
        <div class="scenario-image-frame">
          <img class="scenario-image" :src="scenario.image" :alt="scenario.name" />
        </div>
        <div class="scenario-details">
          <p class="scenario-description">{{ scenario.description }}</p>
          <div class="scenario-rating">
            <n-rate
              v-if="scenario.reviewsCount"
              :value="scenario.averageRating"
              readonly
              allow-half
              size="small"
            />
            <span v-if="scenario.reviewsCount">{{ scenario.averageRating?.toFixed(1) }} · {{ scenario.reviewsCount }} отзывов</span>
            <span v-else>Пока нет оценок</span>
          </div>
          <div v-if="scenario.difficulty" class="scenario-difficulty">Сложность: {{ scenario.difficulty }}</div>
          <div class="scenario-author">
            <n-tag :bordered="false" type="success" class="status-block">
              Автор: {{ scenario.author?.username }}
            </n-tag>
          </div>
          <section v-if="reviews.length" class="reviews-section">
            <h2 class="reviews-title">Отзывы команд</h2>
            <article v-for="review in reviews" :key="review.ID" class="review-card">
              <div class="review-heading">
                <strong>{{ review.teamName }}</strong>
                <n-rate :value="review.rating" readonly size="small" />
              </div>
              <div>Сложность: {{ ['', 'лёгкая', 'средняя', 'тяжёлая'][review.difficulty || 0] }}</div>
              <div class="review-game">{{ review.gameName }}</div>
              <p class="review-text">{{ review.text }}</p>
            </article>
          </section>
        </div>
      </section>
    </div>
  </div>

  <HeaderMenu active="catalog" />
</template>

<style scoped>
.center-block-custom {
  height: calc(100dvh - 70px);
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

.scenario-card {
  background-color: #222;
  border: 1px solid #222;
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
}

.scenario-heading {
  padding: 20px 20px 12px;
}

.scenario-kicker {
  color: #777;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.scenario-title {
  color: #eee;
  font-size: 28px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scenario-image-frame {
  aspect-ratio: 1;
  background-color: #111;
  margin: 0 20px;
}

.scenario-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.scenario-details {
  padding: 16px 20px 20px;
}

.scenario-description {
  color: #aaa;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.scenario-author {
  margin-top: 12px;
}

.reviews-section {
  margin-top: 24px;
}

.reviews-title {
  color: #eee;
  font-size: 20px;
  margin-bottom: 12px;
}

.review-card {
  border-top: 1px solid #777;
  padding: 14px 0;
}

.review-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.review-game {
  color: #777;
  font-size: 13px;
  margin-top: 4px;
}

.review-text {
  color: #aaa;
  margin-top: 8px;
  white-space: pre-wrap;
}

.scenario-rating {
  align-items: center;
  color: #aaa;
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.status-block {
  height: auto;
  line-height: 1.5;
  max-width: 100%;
  min-height: var(--n-height);
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (width >=1024px) {
  .scenario-image-frame {
    margin: 0 40px;
  }

  .scenario-heading,
  .scenario-details {
    padding-left: 40px;
    padding-right: 40px;
  }
}
</style>