add block game

src/components/TeamStoryPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { NButton, NFlex } from 'naive-ui'
+import { NButton, NFlex, NQrCode } from 'naive-ui'
 import { useMessage } from 'naive-ui';
 import { nextTick, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getAuthClient } from '@/api/auth_client';
 import type { Game, Place } from '@/api/generated/crabs/evening_detective_server';
@@ -12,9 +12,12 @@ import PlaceBlock from '@/components/PlaceBlock.vue'
 import { useSimplePolling } from '@/composables/useSimplePolling';
 import { useAuthStore } from '@/stores/auth';
 
+import MessagePaper from './MessagePaper.vue';
+
 const authStore = useAuthStore()
 const client = getAuthClient()
 const message = useMessage()
+const router = useRouter()
 const route = useRoute()
 const teamId = route.params.id
 const password = route.query.password
@@ -39,6 +42,8 @@ const game = ref<Game | undefined>({
 
 const code = ref('')
 
+const url = window.location.href
+
 const isAtBottom = () => {
     const container = scrollContainer.value;
     if (!container) return false;
@@ -140,14 +145,26 @@ useSimplePolling(() => {
 <template>
     <div class="center-block-custom bottom-margin smooth-scroll" ref="scrollContainer">
         <div class="width700">
-            <GameInputForm :addAction="addAction" :allPlacesCount="story.places.length"
-                :newPlacesCount="newPlacesCount"></GameInputForm>
+            <GameInputForm :addAction="addAction" :allPlacesCount="story.places.length" :newPlacesCount="newPlacesCount"
+                :gameStatus="game?.status || ''"></GameInputForm>
 
             <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
                 v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
             </PlaceBlock>
 
-            <div v-if="authStore.hasRole('author')" class="edit-panel">
+            <MessagePaper class="qr-main-block" v-if="story.places.length == 0">
+                <n-space vertical>
+                    <h2 class="qr-main-block-text">Это код этого дела</h2>
+                    <p class="qr-main-block-text">Поделись с командой</p>
+                    <div class="qr-block">
+                        <n-qr-code :value="url" :size="300" :padding="0" />
+                    </div>
+                    <p v-if="game?.status == 'draft'" class="qr-main-block-text">Игра скоро начнется</p>
+                    <p v-if="game?.status == 'run'" class="qr-main-block-text">Игра началась!!!</p>
+                </n-space>
+            </MessagePaper>
+
+            <div v-if="authStore.hasRole('author') && story.places.length > 0" class="edit-panel">
                 <n-flex justify="end">
                     <n-button @click="deleteLast">Удалить последний ход</n-button>
                 </n-flex>
@@ -174,6 +191,23 @@ useSimplePolling(() => {
     border-radius: 10px;
 }
 
+.qr-main-block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.qr-main-block-text {
+    text-align: left;
+    margin: 10px 0;
+}
+
+.qr-block {
+    display: inline-block;
+    background-color: white;
+    padding: 12px;
+}
+
 @media (width >=1024px) {
     .bottom-margin {
         height: calc(100dvh - 70px - 76px);