Added sse and a new screen

backend/index.js

@@ -1,24 +1,27 @@
-const express = require('express');
+import express from 'express';
-const session = require('express-session');
+import session from 'express-session';
+import mongodb from 'mongodb';
+import MongoStore from 'connect-mongo';
+import cors from 'cors';
+import { createNanoEvents } from 'nanoevents';
+
+import "dotenv/config";
+
+import names from './names.json' assert { type: "json" };
 
 const app = express();
-const { MongoClient, ObjectId } = require('mongodb');
+
-const MongoStore = require('connect-mongo');
+const emitter = createNanoEvents();
-const cors = require('cors');
+const { MongoClient, ObjectId } = mongodb;
-require('dotenv').config();
 
 app.use(cors({
-  origin: [
+  origin: process.env.FRONTEND,
-    process.env.FRONTEND,
-  ],
   credentials: true,
   exposedHeaders: ['set-cookie'],
 }));
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-const names = require('./names.json');
-
 const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
 
 (async () => {
@@ -139,34 +142,40 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
   });
 
+  const state = {}
   app.post('/api/answer', async (req, res) => {
-    if (req.session.loggedIn) {
+    if (!req.session.loggedIn) {
-      if (req.body.data.id && req.body.data.name) {
+      return res.status(403).send();
-        const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
-        if (card) {
-          const correct = card.name === req.body.data.name;
-          if (correct) {
-            req.session.right += 1;
-          } else {
-            req.session.wrong += 1;
-          }
-          answersCollection.insertOne({
-            correct,
-            selected: req.body.data.name,
-          });
-          res.status(200).send({
-            correct,
-            card,
-          });
-        } else {
-          res.status(500).send();
-        }
-      } else {
-        res.status(400).send();
-      }
-    } else {
-      res.status(403).send();
     }
+
+    if (!req.body.data.id || !req.body.data.name || !req.body.data.username) {
+      return res.status(400).send();
+    }
+
+    const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
+    if (!card) {
+      return res.status(500).send();
+    }
+
+    const correct = card.name === req.body.data.name;
+    if (correct) {
+      req.session.right += 1;
+    } else {
+      req.session.wrong += 1;
+    }
+    answersCollection.insertOne({
+      correct,
+      selected: req.body.data.name,
+    });
+
+    state[req.body.data.username] = true
+    emitter.emit('answer', req.body.data.username);
+
+    // return res.status(200).send({
+    //   correct,
+    //   card,
+    // });
+    return res.status(200).send()
   });
 
   app.get('/api/score', (req, res) => {
@@ -219,5 +228,73 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
   });
 
+  let usernames = new Set();
+  app.post('/api/connect', async (req, res) => {
+    if (!req.session.loggedIn) {
+      return res.status(403).send();
+    }
+
+    const { username } = req.body;
+    usernames.add(username);
+    state[username] = false;
+    emitter.emit('connection', usernames)
+
+    return res.status(200).send();
+  });
+
+  app.post('/api/end', async (req, res) => {
+    if (!req.session.loggedIn) {
+      return res.status(403).send();
+    }
+
+    usernames = new Set();
+    state = {}
+    return res.status(200).send();
+  });
+
+  app.get('/api/stream', async (req, res) => {
+    res.set({
+      'Access-Control-Allow-Origin': '*',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Content-Type': 'text/event-stream',
+    });
+    res.flushHeaders();
+
+    emitter.on('connection', (usernames) => {
+      const data = usernames
+      res.write(`data: ${JSON.stringify(data)}\nevent: userlist\n\n`);
+    })
+
+    emitter.on('answer', (username) => {
+      const data = { 
+        username,
+        state
+      }
+      res.write(`data: ${JSON.stringify(data)}\nevent: answer\n\n`);
+    });
+
+    emitter.on('allDone', () => {
+      const data = {}
+      res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
+    });
+
+    res.on('close', () => {
+      res.end();
+    });
+  });
+
+  let answers = 0;
+  emitter.on('answer', () => {
+    answers += 1;
+
+    if (answers === usernames.length) {
+      Object.keys(state).forEach((key) => {
+        state[key] = false
+      })
+      emitter.emit('allDone');
+    }
+  });
+
   app.listen(process.env.PORT, () => console.log(`Server started on ${process.env.PORT}`));
 })();

backend/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "dev": "nodemon index.js"
   },
@@ -19,7 +20,8 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
-    "mongodb": "^3.6.5"
+    "mongodb": "^3.6.5",
+    "nanoevents": "^7.0.1"
   },
   "eslintConfig": {
     "extends": "airbnb-base",

backend/yarn.lock

@@ -1193,6 +1193,11 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+nanoevents@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/nanoevents/-/nanoevents-7.0.1.tgz#181580b47787688d8cac775b977b1cf24e26e570"
+  integrity sha512-o6lpKiCxLeijK4hgsqfR6CNToPyRU3keKyyI6uwuHRvpRTbZ0wXw51WRgyldVugZqoJfkGFrjrIenYH3bfEO3Q==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"

frontend/package.json

@@ -11,7 +11,10 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0",
+    "pinia": "^2.1.4",
+    "vue": "^3.3.4",
+    "vue-peel": "^0.1.1",
+    "vue-router": "4",
     "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
@@ -30,7 +33,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/vue3-essential",
+      "plugin:vue/vue3-recommended",
       "eslint:recommended"
     ],
     "parserOptions": {

frontend/public/index.html

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="manifest" href="<%= BASE_URL %>manifest.json">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Флекспатруль мультиплеер</title>
   </head>
   <body>
     <noscript>

frontend/src/App.vue

@@ -1,42 +1,19 @@
 <template>
-  <h1>🎱 Флекспатрульное Бинго 🎱</h1>
+  <h1>Флекспатруль мультиплеер</h1>
-  <Login id="login" @loggedIn="login" v-show="!loggedIn" />
+  
-  <Game id="game" v-if="loggedIn" :score="score" />
+  <router-view />
-  <a class="source" href="https://github.com/anatolykopyl/vk-bingo">Исходный код</a>
+
+  <a
+    class="source" 
+    href="https://github.com/anatolykopyl/vk-bingo"
+    target="_blank"
+  >
+    Исходный код
+  </a>
 </template>
 
-<script>
+<script setup>
-import axios from 'axios'
-import Login from './components/Login.vue'
-import Game from './components/Game.vue'
 
-export default {
-  name: 'App',
-  components: {
-    Login,
-    Game
-  },
-  data() {
-    return {
-      loggedIn: null,
-      score: {
-        "right": 0, 
-        "wrong": 0
-      }
-    }
-  },
-  methods: {
-    login: function(success) {
-      this.loggedIn = success
-      axios
-        .get(process.env.VUE_APP_BACKEND + '/score')
-        .then(response => {
-          if (Object.keys(response.data).length !== 0)
-            this.score = response.data
-        })
-    }
-  }
-}
 </script>
 
 <style>

frontend/src/components/Game.vue

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <div class="card" v-if="card !== null" v-on:click="nextCard()" v-bind:class="{clickable: showResult}">
-      <img class="meme" v-bind:src="card.image">
-      <h2>Кто скинул этот мем?</h2>
-      <div class="interactive">
-        <transition name="fade-answers">
-          <List v-if="selectedAnswer === null" 
-          :options="options" @selectedAnswer="selectAnswer" />
-        </transition>
-        <transition name="spin-result">
-          <Result v-if="showResult" 
-          :name="card.name" :selectedName="selectedAnswer" :date="card.date" :correct="correctAnswer" />
-        </transition>
-      </div>
-    </div>
-    <Score v-if="card !== null" :score="score" />
-    <square-loader v-if="card === null" :color="'#f3f3f3'" class="loader" />
-    <Stats />
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import List from './List.vue'
-import Result from './Result.vue'
-import Score from './Score.vue'
-import Stats from './Stats.vue'
-
-import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
-
-export default {
-  name: 'Game',
-  components: {
-    List,
-    Result,
-    Score,
-    Stats,
-    SquareLoader
-  },
-  props: {
-    score: Object
-  },
-  data() {
-    return {
-      options: null,
-      card: null,
-      correctAnswer: null,    // True or False
-      selectedAnswer: null,   // Чье-то имя
-      showResult: false
-    }
-  },
-  methods: {
-    getCard: function() {
-      this.correctAnswer = null
-      this.selectedAnswer = null
-      this.showResult = false
-      axios
-        .get(process.env.VUE_APP_BACKEND + '/card')
-        .then(response => {
-          this.card = response.data
-        })
-    },
-    nextCard: function() {
-      if (this.showResult) {
-        this.card = null
-        this.getCard()
-      }
-    },
-    selectAnswer: function(selection) {
-      this.selectedAnswer = selection
-      let innerThis = this
-      setTimeout(function() {
-          innerThis.showResult = true
-          if (innerThis.correctAnswer) {
-            innerThis.score.right++ 
-          } else {
-            innerThis.score.wrong++
-          }
-      }, 805)
-      axios
-        .post(process.env.VUE_APP_BACKEND + '/answer', {
-          'data': {
-            'id': this.card._id,
-            'name': this.selectedAnswer
-          }
-        })
-        .then((response) => {
-          this.correctAnswer = response.data.correct
-          this.card = response.data.card
-        })
-    }
-  },
-  mounted() {
-    this.getCard()
-    axios
-      .get(process.env.VUE_APP_BACKEND + '/options')
-      .then(response => (this.options = response.data))
-  }
-}
-</script>
-
-<style scoped>
-.card {
-  width: 450px;
-  padding: 18px;
-  border-radius: 17px;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-  background-color: #121212;
-  margin: auto;
-}
-
-.meme {
-  width: 100%;
-  border-radius: 8px;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.interactive {
-  position: relative;
-  -webkit-perspective: 900000px;
-  perspective: 900000px;
-}
-
-.fade-answers-leave-active {
-  transition: all 0.8s ease;
-}
-.fade-answers-leave-to {
-  opacity: 0;
-  transform: scale(0.3);
-}
-
-.spin-result-enter-active {
-  transition: all 2s ease;
-}
-.spin-result-enter-from {
-  transform: scale(0.2);
-  transform: rotateY(120deg);
-}
-
-.loader {
-  margin-top: 100px;
-}
-
-@media screen and (max-width: 520px) {
-  .card {
-    width: 94%;
-    padding: 3%;
-  }
-}
-</style>

frontend/src/components/Login.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <h1>Авторизация:</h1>
-    <p>{{ question }}</p>
-    <input v-model="answer"><br>
-    <button v-on:click="login" v-bind:class="{wrong: loggedIn === false}">Ввод</button>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-axios.defaults.withCredentials = true
-
-export default {
-  name: 'Login',
-  data() {
-    return {
-      question: null,
-      answer: null,
-      loggedIn: null
-    }
-  },
-  methods: {
-    login: function() {
-      axios
-        .post(process.env.VUE_APP_BACKEND + '/auth', {
-          "pass": this.answer,
-        })
-        .then(response => {
-          this.loggedIn = response.status == "200"
-          this.$emit('loggedIn', this.loggedIn)
-        })
-    }
-  },
-  mounted() {
-    this.question = process.env.VUE_APP_QUESTION
-    this.login()
-  }
-}
-</script>
-
-<style scoped>
-div {
-  background-color: #121212;
-  width: 400px;
-  margin: auto;
-  border-radius: 18px;
-  padding: 40px 10px;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-}
-
-input {
-  font-size: 1em;
-  text-align: center;
-  padding: 5px 8px;
-  margin-bottom: 1em;
-  border-radius: 6px;
-  border: none;
-  width: 20ch;
-}
-
-button {
-  color: white;
-  font-size: 1em;
-  box-sizing: content-box;
-  background-color: #5a5a5a;
-  border-radius: 6px;
-  border: none;
-  width: 20ch;
-  padding: 5px 8px;
-  cursor: pointer;
-}
-
-@media only screen and (max-width: 520px) {
-  div {
-    width: 100%;
-    padding: 40px 0;
-  }
-}
-</style>

frontend/src/composables/useServerEvents.js

@@ -0,0 +1,17 @@
+// import useStore from '../store'
+
+export default () => {
+  // const store = useStore()
+
+  const evtSource = new EventSource(`${process.env.VUE_APP_BACKEND}/stream`);
+
+  function addAnswerListener(handler) {
+    evtSource.addEventListener('answer', (event) => handler(JSON.parse(event.data)))
+  }
+
+  function addUserlistListener(handler) {
+    evtSource.addEventListener('userlist', (event) => handler(JSON.parse(event.data)))
+  }
+
+  return { addAnswerListener, addUserlistListener }
+}

frontend/src/main.js

@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(router)
+app.mount('#app')

frontend/src/router.js

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Game from './views/Game/Index.vue'
+import Login from './views/Login/Index.vue'
+import Screen from './views/Screen/Index.vue'
+
+const routes = [
+  { path: '/', component: Game },
+  { path: '/login', component: Login },
+  { path: '/screen', component: Screen }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes,
+})

frontend/src/store.js

@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export default defineStore('store', {
+  state: () => ({ 
+    username: null
+  }),
+})

frontend/src/views/Game/EndGame.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <button @click="endGame">
+      Закончить игру
+    </button>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios'
+import { useRouter } from 'vue-router';
+const router = useRouter()
+
+function endGame() {
+  axios.post(process.env.VUE_APP_BACKEND + '/end')
+  router.push('/login')
+}
+</script>

frontend/src/views/Game/Index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div 
+      class="card" 
+      v-if="card"
+    >
+      <img 
+        class="meme" 
+        :src="card.image"
+      >
+      <h2>Кто скинул этот мем?</h2>
+      <div class="interactive">
+        <transition name="fade-answers">
+          <List 
+            v-if="!selectedAnswer" 
+            :options="options" 
+            @selectedAnswer="selectAnswer" 
+          />
+        </transition>
+        <transition name="spin-result">
+          <Result 
+            v-if="showResult" 
+            :name="card.name" 
+            :selectedName="selectedAnswer" 
+            :date="card.date" 
+            :correct="correctAnswer" 
+          />
+        </transition>
+      </div>
+    </div>
+    <Score 
+      v-if="card" 
+      :score="score" 
+    />
+
+    <EndGame />
+
+    <square-loader 
+      v-if="!card" 
+      :color="'#f3f3f3'" 
+      class="loader" 
+    />
+    <Stats />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import axios from 'axios'
+import List from './List.vue'
+import Result from './Result.vue'
+import Score from './Score.vue'
+import Stats from './Stats.vue'
+import EndGame from './EndGame.vue'
+
+import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
+
+const options = ref()
+const card = ref()
+const correctAnswer = ref()
+const selectedAnswer = ref()
+const showResult = ref()
+const score = reactive({
+  "right": 0, 
+  "wrong": 0
+})
+
+async function getCard() {
+  correctAnswer.value = null
+  selectedAnswer.value = null
+  showResult.value = false
+  const response = await axios.get(process.env.VUE_APP_BACKEND + '/card')
+  card.value = response.data
+}
+
+async function selectAnswer(selection) {
+  selectedAnswer.value = selection
+  // setTimeout(function() {
+  //   showResult.value = true
+  //   if (correctAnswer.value) {
+  //     score.right++ 
+  //   } else {
+  //     score.wrong++
+  //   }
+  // }, 805)
+
+  await axios.post(process.env.VUE_APP_BACKEND + '/answer', {
+    'data': {
+      'id': card.value._id,
+      'name': selectedAnswer.value
+    }
+  })
+}
+
+onMounted(async () => {
+  getCard()
+  const response = await axios.get(process.env.VUE_APP_BACKEND + '/options')
+  options.value = response.data
+})
+</script>
+
+<style scoped>
+.card {
+  width: 450px;
+  padding: 18px;
+  border-radius: 17px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  background-color: #121212;
+  margin: auto;
+}
+
+.meme {
+  width: 100%;
+  border-radius: 8px;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.interactive {
+  position: relative;
+  -webkit-perspective: 900000px;
+  perspective: 900000px;
+}
+
+.fade-answers-leave-active {
+  transition: all 0.8s ease;
+}
+.fade-answers-leave-to {
+  opacity: 0;
+  transform: scale(0.3);
+}
+
+.spin-result-enter-active {
+  transition: all 2s ease;
+}
+.spin-result-enter-from {
+  transform: scale(0.2);
+  transform: rotateY(120deg);
+}
+
+.loader {
+  margin-top: 100px;
+}
+
+@media screen and (max-width: 520px) {
+  .card {
+    width: 94%;
+    padding: 3%;
+  }
+}
+</style>

frontend/src/views/Login/Index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <h1>Авторизация:</h1>
+    <p>{{ question }}</p>
+    <input 
+      placeholder="Ответ"
+      v-model="answer"
+    >
+    <br>
+    <input
+      placeholder="Ваше имя"
+      v-model="username"
+    >
+    <br>
+    <button 
+      @click="login" 
+      :class="{ 
+        wrong: loggedIn === false
+      }"
+    >
+      Ввод
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import useStore from '../../store'
+import axios from 'axios'
+axios.defaults.withCredentials = true
+
+const question = process.env.VUE_APP_QUESTION
+
+const router = useRouter()
+const store = useStore()
+
+const answer = ref()
+const loggedIn = ref()
+const username = ref()
+
+async function login() {
+  store.username = username.value
+
+  await axios
+    .post(process.env.VUE_APP_BACKEND + '/auth', {
+      "pass": answer.value,
+    })
+    .then(response => {
+      loggedIn.value = response.status == "200"
+      router.push('/')
+    })
+
+  axios
+    .post(process.env.VUE_APP_BACKEND + '/connect', {
+      'data': {
+        'username': username.value
+      }
+    })
+}
+</script>
+
+<style scoped>
+div {
+  background-color: #121212;
+  width: 400px;
+  margin: auto;
+  border-radius: 18px;
+  padding: 40px 10px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+}
+
+input {
+  font-size: 1em;
+  text-align: center;
+  padding: 5px 8px;
+  margin-bottom: 1em;
+  border-radius: 6px;
+  border: none;
+  width: 20ch;
+}
+
+button {
+  color: white;
+  font-size: 1em;
+  box-sizing: content-box;
+  background-color: #5a5a5a;
+  border-radius: 6px;
+  border: none;
+  width: 20ch;
+  padding: 5px 8px;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 520px) {
+  div {
+    width: 100%;
+    padding: 40px 0;
+  }
+}
+</style>

frontend/src/views/Screen/Index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="card">
+    <img
+      :src="card.image"
+    >
+    <div>
+      {{ users }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios'
+import { ref, onMounted } from 'vue'
+import useServerEvents from '../../composables/useServerEvents';
+
+const { addAnswerListener, addUserlistListener } = useServerEvents()
+
+addAnswerListener(console.log)
+
+const card = ref()
+const users = ref([])
+
+async function getCard() {
+  const response = await axios.get(process.env.VUE_APP_BACKEND + '/card')
+  card.value = response.data
+}
+
+addUserlistListener((data) => {
+  users.value = data
+})
+
+onMounted(() => {
+  getCard()
+})
+</script>

frontend/yarn.lock

@@ -1595,6 +1595,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/preload-webpack-plugin@^1.1.0":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
@@ -6549,6 +6554,14 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
+  integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -8576,6 +8589,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@>=0.14.5:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
+  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -8614,6 +8632,20 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-peel@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vue-peel/-/vue-peel-0.1.1.tgz#a100d1e00c894427765b3842105179c5a1720971"
+  integrity sha512-A1RN2Hv4Y4OJaDYAc8bmSeEAgkDsGpqTSiWdDOI9bNtNENLmmhSO7I4KeeBnk0f/OftrQnZBsjdbsUm0biBC5A==
+  dependencies:
+    vue "^3.2.47"
+
+vue-router@4:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81"
+  integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
 vue-spinner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vue-spinner/-/vue-spinner-1.0.4.tgz#0e794d9d93acb23b5b6564042157a531e7ce413b"
@@ -8632,7 +8664,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^3.0.0:
+vue@^3.2.47, vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
   integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==