add qr

src/components/GameWindow.vue

@@ -2,6 +2,7 @@
   import { ref, nextTick, watch, onMounted } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { encodeUTF8ToBase64, getApiUrl } from './utils';
+  import VueQrcode from '@chenfengyuan/vue-qrcode';
 
   const router = useRouter();
   const route = useRoute();
@@ -32,6 +33,24 @@
   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'
+    }
+  });
+
   function getTeam() {
     fetch(
       getApiUrl("/team"),
@@ -95,6 +114,7 @@
   };
 
   function getGame() {
+    qrurl.value = location.href
     fetch(
         getApiUrl("/game")
     )
@@ -150,6 +170,7 @@
 
   <div class="body-custom">
 
+    <!-- <img alt="Вечерний детектив" class="logo-right" src="@/assets/qr-code.svg" width="35" height="35" /> -->
     <img alt="Вечерний детектив" class="logo" src="@/assets/logo.png" width="40" height="40" />
     <div class="header-block">
       Вечерний детектив
@@ -183,7 +204,17 @@
       <div class="center-block-custom">
         <div v-if="!team || !team.actions.length">
           <div class="center-message">
-            Пора решать загадку
+            <div class="qr">
+              <VueQrcode
+                :value="qrurl"
+                :options="qrOptions"
+                tag="svg"
+                class="qr-code"
+              />
+              <div>
+                Пора решать загадку
+              </div>
+            </div>
           </div>
         </div>
         <div v-else>
@@ -232,6 +263,11 @@ body {
   margin: 10px;
 }
 
+.logo-right {
+  float: right;
+  margin: 12px;
+}
+
 .second-color {
   color: var(--second-color);
 }
@@ -290,5 +326,10 @@ body {
 .center-message {
   height: calc(100dvh - 140px);
 }
+
+.qr {
+  text-align: center;
+  width: 200px;
+}
 </style>