add welcome block

src/components/GameWindow.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import VueQrcode from '@chenfengyuan/vue-qrcode';
 import BeltBlock from './BeltBlock.vue';
 import MetalPlate from './MetalPlate.vue';
 import GameHeader from './GameHeader.vue';
 import type { Action, Door, Team } from './models';
 import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
 import { UnauthorizedError } from './UnauthorizedError';
+import WelcomeGameBlock from './WelcomeGameBlock.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -23,22 +23,6 @@ const gameState = ref("STOP")
 const gameStateText = ref("")
 
 const qrurl = ref("-")
-interface QROptions {
-  width?: number;
-  margin?: number;
-  color?: {
-    dark: string;
-    light: string;
-  };
-}
-const qrOptions = ref<QROptions>({
-  width: 200,
-  margin: 1,
-  color: {
-    dark: '#303030',
-    light: 'f0f0f0'
-  }
-});
 
 async function getTeam() {
   let data: Team
@@ -181,12 +165,7 @@ onMounted(() => {
       <div class="center-block-custom">
         <div v-if="!team || !team.actions.length">
           <div class="center-message">
-            <div class="qr">
+            <WelcomeGameBlock :qrurl="qrurl" :team="team.name"></WelcomeGameBlock>
-              <VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-              <div>
-                Пора решать загадку
-              </div>
-            </div>
           </div>
         </div>
         <div v-else>
@@ -321,11 +300,6 @@ body {
   height: calc(100dvh - 140px);
 }
 
-.qr {
-  text-align: center;
-  width: 200px;
-}
-
 .collapse-icon {
   padding: 0 15px;
   cursor: pointer;

src/components/WelcomeGameBlock.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
+
+interface QROptions {
+  width?: number;
+  margin?: number;
+  color?: {
+    dark: string;
+    light: string;
+  };
+}
+const qrOptions = ref<QROptions>({
+  width: 200,
+  margin: 1,
+  color: {
+    dark: '#303030',
+    light: 'f0f0f0'
+  }
+});
+
+interface Props {
+  qrurl: string
+  team: string
+}
+const props = withDefaults(defineProps<Props>(), {})
+
+</script>
+
+<template>
+  <div>
+    <div class="qr">
+      <div>
+        {{ team }}
+      </div>
+      <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
+      <div>
+        Пора решать загадку
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qr {
+  text-align: center;
+  width: 200px;
+}
+</style>