up

src/components/ScenarioPage.vue

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { getAuthClient } from '@/api/auth_client'
-import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
+import type { GameReview, Scenario } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
 
 const message = useMessage()
@@ -12,6 +12,7 @@ const client = getAuthClient()
 const route = useRoute()
 
 const scenarioId = route.params.id
+const reviews = ref<GameReview[]>([])
 
 const scenario = ref<Scenario>({
   id: undefined,
@@ -35,6 +36,16 @@ async function getScenario(id: number) {
   scenario.value = res.scenario!
 }
 getScenario(Number(scenarioId))
+
+async function getReviews(id: number) {
+  const res = await client.GetScenarioReviews({ scenarioId: id })
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  reviews.value = res.reviews || []
+}
+getReviews(Number(scenarioId))
 </script>
 
 <template>
@@ -66,6 +77,17 @@ getScenario(Number(scenarioId))
               Автор: {{ 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 class="review-game">{{ review.gameName }}</div>
+              <p class="review-text">{{ review.text }}</p>
+            </article>
+          </section>
         </div>
       </section>
     </div>
@@ -136,6 +158,40 @@ getScenario(Number(scenarioId))
   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;