update welcome window

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@chenfengyuan/vue-qrcode": "^2.0.0",
         "pinia": "^3.0.1",
+        "qrcode-vue3": "^1.7.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -4603,6 +4604,21 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/qrcode-generator": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.5.2.tgz",
+      "integrity": "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode-vue3": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/qrcode-vue3/-/qrcode-vue3-1.7.1.tgz",
+      "integrity": "sha512-Xa82NslFJUqsnQbLtc1qO+xPEOeFaTRxktg3ugRd2Pk116kta1X+7GLSEPQj9gor8jWVyfmLmhYZHuANnRZoLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "qrcode-generator": "^1.4.4"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^2.0.0",
     "pinia": "^3.0.1",
+    "qrcode-vue3": "^1.7.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

src/components/MessageCloud.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Action } from './models';
 import { apiLetsgo } from './client';
+import MessagePaper from './MessagePaper.vue';
 
 interface Props {
   action: Action
@@ -26,95 +27,45 @@ async function letsgo(place: string) {
 </script>
 
 <template>
-  <div class="main">
+  <MessagePaper>
-    <div class="message-cloud-3"></div>
+    <div class="message-header">
-    <div class="message-cloud-2"></div>
+      {{ props.action.place }}: {{ props.action.name }}
-    <div class="message-cloud">
+      <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
-      <div class="message-header">
+    </div>
-        {{ props.action.place }}: {{ props.action.name }}
+    <div v-show="props.action.isOpen">
-        <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
+      <hr class="hr" />
+      <div class="message-content">
+        <div v-if="props.action.image.length">
+          <div class="message-image-border">
+            <img v-bind:src="props.action.image" class="message-image" />
+          </div>
+        </div>{{ props.action.text }}
       </div>
-      <div v-show="props.action.isOpen">
+      <div v-if="index == count - 1">
-        <hr class="hr" />
+        <hr class="hr" v-if="props.action.buttons?.length" />
-        <div class="message-content">
+        <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
-          <div v-if="props.action.image.length">
+          :disabled="gameState !== 'RUN' || !door.show">
-            <div class="message-image-border">
+          <div class="button-dialog-text">
-              <img v-bind:src="props.action.image" class="message-image" />
+            {{ door.name }}
-            </div>
-          </div>{{ props.action.text }}
-        </div>
-        <div v-if="index == count - 1">
-          <hr class="hr" v-if="props.action.buttons?.length" />
-          <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog"
-            v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
-            <div class="button-dialog-text">
-              {{ door.name }}
-            </div>
           </div>
         </div>
-        <hr class="hr" v-if="props.action.applications.length" />
+      </div>
-        <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
+      <hr class="hr" v-if="props.action.applications.length" />
-          Приложение: {{ application.name }}
+      <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
-          <div class="application-label">{{ application.number }}</div>
+        Приложение: {{ application.name }}
-        </div>
+        <div class="application-label">{{ application.number }}</div>
       </div>
     </div>
-  </div>
+  </MessagePaper>
 </template>
 
 <style scoped>
-.main {
-  position: relative;
-}
-
 .hr {
   margin: 10px 0;
   border: dashed 1px;
   border-color: black;
 }
 
-.message-cloud {
-  margin: 15px 0;
-  padding: 16px;
-  font-family: main;
-  color: black;
-  line-height: 20px;
-  font-size: 18px;
-  font-weight: 900;
-  position: relative;
-}
-
-.message-cloud,
-.message-cloud-2,
-.message-cloud-3 {
-  border-radius: 5px;
-  background-image: url("@/assets/paper.jpg");
-  background-size: cover;
-  display: flow-root;
-  box-shadow: 0px 0 5px black;
-}
-
-.message-cloud-2,
-.message-cloud-3 {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.message-cloud-2 {
-  transform: rotate(-3deg);
-  filter: brightness(50%);
-  height: 100%;
-  width: 100%;
-}
-
-.message-cloud-3 {
-  transform: rotate(2deg);
-  filter: brightness(80%);
-  height: 100%;
-  width: 100%;
-}
-
 .message-header {
   font-size: 20px;
 }

src/components/MessagePaper.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/* код */
+</script>
+
+<template>
+  <div class="main">
+    <div class="message-cloud-3"></div>
+    <div class="message-cloud-2"></div>
+    <div class="message-cloud">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  position: relative;
+}
+
+.message-cloud {
+  margin: 15px 0;
+  padding: 16px;
+  font-family: main;
+  color: black;
+  line-height: 20px;
+  font-size: 18px;
+  font-weight: 900;
+  position: relative;
+}
+
+.message-cloud,
+.message-cloud-2,
+.message-cloud-3 {
+  border-radius: 5px;
+  background-image: url("@/assets/paper.jpg");
+  background-size: cover;
+  display: flow-root;
+  box-shadow: 0px 0 5px black;
+}
+
+.message-cloud-2,
+.message-cloud-3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.message-cloud-2 {
+  transform: rotate(-3deg);
+  filter: brightness(50%);
+  height: 100%;
+  width: 100%;
+}
+
+.message-cloud-3 {
+  transform: rotate(2deg);
+  filter: brightness(80%);
+  height: 100%;
+  width: 100%;
+}
+</style>

src/components/WelcomeGameBlock.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
+import MessagePaper from './MessagePaper.vue';
 
 interface QROptions {
   width?: number;
@@ -15,7 +16,7 @@ const qrOptions = ref<QROptions>({
   margin: 1,
   color: {
     dark: '#303030',
-    light: 'f0f0f0'
+    light: 'none'
   }
 });
 
@@ -29,15 +30,17 @@ const props = withDefaults(defineProps<Props>(), {})
 
 <template>
   <div>
-    <div class="qr">
+    <MessagePaper>
-      <div>
+      <div class="qr">
-        {{ team }}
+        <div class="team-name">
+          {{ team }}
+        </div>
+        <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
+        <div class="message">
+          Пора решать загадку
+        </div>
       </div>
-      <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
+    </MessagePaper>
-      <div>
-        Пора решать загадку
-      </div>
-    </div>
   </div>
 </template>
 
@@ -46,4 +49,13 @@ const props = withDefaults(defineProps<Props>(), {})
   text-align: center;
   width: 200px;
 }
+
+.team-name {
+  margin: 10px 0;
+  font-size: 20px;
+}
+
+.message {
+  margin: 7px 0;
+}
 </style>