up

src/components/TeamStoryPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NConfigProvider, NFlex, NInput, NQrCode } from 'naive-ui'
+import { NButton, NConfigProvider, NFlex, NInput, NQrCode, NRate } from 'naive-ui'
 import { useMessage } from 'naive-ui'
 import { computed, nextTick, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -51,6 +51,12 @@ const game = ref<Game | undefined>({
 
 const code = ref('')
 
+const reviewKey = `game-review-${teamId}`
+const reviewSubmitted = ref(localStorage.getItem(reviewKey) === '1')
+const reviewRating = ref(0)
+const reviewText = ref('')
+const reviewLoading = ref(false)
+
 const url = window.location.href
 
 const isAtBottom = () => {
@@ -212,6 +218,29 @@ const paperControlsOverrides = {
   },
 }
 
+async function submitReview() {
+  if (!reviewRating.value || reviewText.value.trim() === '') {
+    message.error('Поставьте оценку и напишите отзыв')
+    return
+  }
+  reviewLoading.value = true
+  const res = await client.CreateGameReview({
+    gameId: Number(game.value?.id),
+    teamId: Number(teamId),
+    password: password as string,
+    rating: reviewRating.value,
+    text: reviewText.value.trim(),
+  })
+  reviewLoading.value = false
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  reviewSubmitted.value = true
+  localStorage.setItem(reviewKey, '1')
+  message.success('Спасибо за отзыв')
+}
+
 async function deleteLast() {
   const res = await client.DeleteLastTeamAction({
     id: Number(teamId),
@@ -245,6 +274,24 @@ useSimplePolling(() => {
       <MessagePaper role="status">
         <div class="font">Игра завершена. Спасибо за участие!</div>
       </MessagePaper>
+      <MessagePaper v-if="!reviewSubmitted" class="review-block">
+        <div class="font review-title">Оцените игру</div>
+        <hr class="review-hr" />
+        <div class="font review-label">Оценка</div>
+        <n-rate v-model:value="reviewRating" :count="5" />
+        <n-input
+          v-model:value="reviewText"
+          class="review-input"
+          type="textarea"
+          :autosize="{ minRows: 4, maxRows: 8 }"
+          placeholder="Расскажите, как прошла игра"
+        />
+        <n-flex justify="end">
+          <button type="button" class="paper-button" :disabled="reviewLoading" @click="submitReview">
+            Отправить отзыв
+          </button>
+        </n-flex>
+      </MessagePaper>
     </div>
     <div v-else class="width700">
       <GameInputForm
@@ -347,6 +394,29 @@ useSimplePolling(() => {
   height: 100dvh;
 }
 
+.review-block {
+  margin-top: 20px;
+}
+
+.review-title {
+  color: black;
+}
+
+.review-hr {
+  border: dashed 1px;
+  border-color: black;
+  margin: 10px 0;
+}
+
+.review-label {
+  color: black;
+  margin-bottom: 6px;
+}
+
+.review-input {
+  margin: 14px 0;
+}
+
 .smooth-scroll {
   scroll-behavior: smooth;
 }