Game works

backend/index.js

@@ -84,49 +84,56 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     });
   });
 
+  async function drawCard() {
+    let card;
+    // Тянем карты и отбрасываем их в соответствии с их вероятностью отбрасывания
+    do {
+      /* eslint-disable no-await-in-loop */
+      card = await cardsCollection.aggregate([
+        {
+          $sample: { size: 1 },
+        }, {
+          $unset: ['link', 'date'],
+        },
+      ]).toArray();
+      /* eslint-enable no-await-in-loop */
+      [card] = card;
+    } while (Math.random() < dropProb[card.name]);
+    return card;
+  }
+
+  let players = {}
+  let oldPlayers = {}
+  let score = {}
+  let card = await drawCard()
+  let oldCard = null;
+  let answers = 0
+
   app.post('/api/auth', async (req, res) => {
-    if (req.session.loggedIn) {
-      res.status(200).send('Logged in');
+    const { pass, username } = req.body;
+
+    if (username && !Object.keys(players).includes(username)) {
+      players[username] = null;
+      emitter.emit('connection', Object.keys(players))
+    }
+
+    if (pass && pass.toLowerCase() === process.env.PASSWORD) {
+      req.session.loggedIn = true;
+      return res.status(200).send('Logged in');
     } else {
-      try {
-        const { pass } = req.body;
-        if (pass && pass.toLowerCase() === process.env.PASSWORD) {
-          req.session.loggedIn = true;
-          res.status(200).send('Logged in');
-        } else {
-          res.status(401).send('Wrong password');
-        }
-      } catch (e) {
-        console.log(`Error: ${e}`);
-        res.status(500).send();
-      }
+      return res.status(401).send('Wrong password');
     }
   });
 
   app.get('/api/card', async (req, res) => {
-    async function drawCard() {
-      let card;
-      // Тянем карты и отбрасываем их в соответствии с их вероятностью отбрасывания
-      do {
-        /* eslint-disable no-await-in-loop */
-        card = await cardsCollection.aggregate([
-          {
-            $sample: { size: 1 },
-          }, {
-            $unset: ['name', 'link', 'date'],
-          },
-        ]).toArray();
-        /* eslint-enable no-await-in-loop */
-        [card] = card;
-      } while (Math.random() < dropProb[card.name]);
-      return card;
+    if (!req.session.loggedIn) {
+      return res.status(403).send();
     }
 
-    if (req.session.loggedIn) {
-      res.status(200).send(await drawCard());
-    } else {
-      res.status(403).send();
-    }
+    return res.status(200).send({
+      ...card,
+      name: undefined
+    });
   });
 
   app.get('/api/meme', async (req, res) => {
@@ -142,7 +149,6 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
   });
 
-  const state = {}
   app.post('/api/answer', async (req, res) => {
     if (!req.session.loggedIn) {
       return res.status(403).send();
@@ -168,8 +174,11 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
       selected: req.body.data.name,
     });
 
-    state[req.body.data.username] = true
-    emitter.emit('answer', req.body.data.username);
+    players[req.body.data.username] = req.body.data.name;
+    emitter.emit('answer', {
+      username: req.body.data.username,
+      selected: req.body.data.name
+    });
 
     // return res.status(200).send({
     //   correct,
@@ -193,31 +202,33 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
   });
 
   app.get('/api/stats', async (req, res) => {
-    if (req.session.loggedIn) {
-      answersCollection.aggregate([
-        {
-          $group: {
-            _id: '$selected',
-            correct: {
-              $sum: {
-                $cond: [
-                  '$correct', 1, 0,
-                ],
-              },
+    if (!req.session.loggedIn) {
+      return res.status(403).send();
+    }
+
+    const stats = await answersCollection.aggregate([
+      {
+        $group: {
+          _id: '$selected',
+          correct: {
+            $sum: {
+              $cond: [
+                '$correct', 1, 0,
+              ],
             },
-            wrong: {
-              $sum: {
-                $cond: [
-                  '$correct', 0, 1,
-                ],
-              },
+          },
+          wrong: {
+            $sum: {
+              $cond: [
+                '$correct', 0, 1,
+              ],
             },
           },
         },
-      ]).toArray().then((stats) => res.status(200).send(stats));
-    } else {
-      res.status(403).send();
-    }
+      },
+    ]).toArray();
+
+    return res.status(200).send(stats);
   });
 
   app.get('/api/options', async (req, res) => {
@@ -228,27 +239,20 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
   });
 
-  let usernames = new Set();
-  app.post('/api/connect', async (req, res) => {
+  app.get('/api/players', 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();
-  });
+    return res.status(200).send(Object.keys(players));
+  })
 
   app.post('/api/end', async (req, res) => {
     if (!req.session.loggedIn) {
       return res.status(403).send();
     }
 
-    usernames = new Set();
-    state = {}
+    players = {}
     return res.status(200).send();
   });
 
@@ -261,21 +265,45 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     });
     res.flushHeaders();
 
-    emitter.on('connection', (usernames) => {
-      const data = usernames
+    emitter.on('connection', (players) => {
+      const data = players
       res.write(`data: ${JSON.stringify(data)}\nevent: userlist\n\n`);
     })
 
-    emitter.on('answer', (username) => {
+    emitter.on('answer', async ({
+      username, selected
+    }) => {
       const data = { 
         username,
-        state
+        players,
+        selected
       }
       res.write(`data: ${JSON.stringify(data)}\nevent: answer\n\n`);
+
+      answers += 1
+
+      if (answers === Object.keys(players).length) {
+        Object.keys(players).forEach((key) => {
+          if (card.name === players[key]) {
+            score[key] = (score[key] ?? 0) + 1
+          }
+        })
+
+        Object.keys(players).forEach((key) => {
+          players[key] = null
+        })
+        answers = 0
+        oldCard = { ...card }
+        card = await drawCard()
+        emitter.emit('allDone');
+      }
     });
 
     emitter.on('allDone', () => {
-      const data = {}
+      const data = { 
+        correctAnswer: oldCard.name,
+        score
+      }
       res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
     });
 
@@ -284,17 +312,5 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     });
   });
 
-  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}`));
 })();

frontend/index.html

@@ -7,13 +7,14 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <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">
+    <link rel="icon" href="favicon.ico">
+    <link rel="manifest" href="manifest.json">
     <title>Флекспатруль мультиплеер</title>
+    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but Флекспатруль мультиплеер doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

frontend/package.json

@@ -4,33 +4,31 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite dev",
+    "build": "vite build"
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "core-js": "^3.6.5",
     "pinia": "^2.1.4",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.3.4",
     "vue-peel": "^0.1.1",
     "vue-router": "4",
     "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "dotenv-webpack": "^7.0.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint": "8",
+    "eslint-plugin-vue": "8",
+    "sass": "^1.63.4",
+    "vite": "^4.3.9"
   },
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "es2022": true
     },
     "extends": [
       "plugin:vue/vue3-recommended",

frontend/src/App.vue

@@ -1,15 +1,5 @@
 <template>
-  <h1>Флекспатруль мультиплеер</h1>
-  
   <router-view />
-
-  <a
-    class="source" 
-    href="https://github.com/anatolykopyl/vk-bingo"
-    target="_blank"
-  >
-    Исходный код
-  </a>
 </template>
 
 <script setup>
@@ -17,49 +7,44 @@
 </script>
 
 <style>
+@font-face {
+  font-family: "Pangram Sans Rounded";
+  font-weight: bold;
+  src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pangram Sans Rounded";
+  font-weight: 600;
+  src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Semibold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pangram Sans Rounded";
+  font-weight: normal;
+  src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Medium.otf") format("opentype");
+}
+
+:root {
+  --clr-bg: #ffd537;
+  --clr-accent: #37ffac;
+}
+
 body {
   margin: 0;
-  background-color: #5a5a5a;
+  background-color: var(--clr-bg);
 }
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Pangram Sans Rounded", Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #f3f3f3;
+  color: black;
   margin-top: 60px;
 }
 
 #game {
   margin-bottom: 100px;
 }
-
-.source {
-  color: #f3f3f350;
-  background-color: #12121250;
-  border-radius: 6px;
-  padding: 3px 6px;
-  position: fixed;
-  width: 20ch;
-  left: 0;
-  right: 0;
-  bottom: 10px;
-  text-align: center;
-  margin: 0 auto;
-  transition: all 0.3s;
-  cursor: pointer;
-  z-index: -1;
-}
-.source:hover {
-  color: #f3f3f3;
-  background-color: #121212;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-}
-
-@media only screen and (max-width: 520px) {
-  .source {
-    display: none;
-  }
-}
 </style>

frontend/src/components/SourceCodeLink.vue

@@ -0,0 +1,39 @@
+<template>
+  <a
+    class="source" 
+    href="https://github.com/anatolykopyl/vk-bingo"
+    target="_blank"
+  >
+    Исходный код
+  </a>
+</template>
+
+<style scoped>
+.source {
+  color: #f3f3f350;
+  background-color: #12121250;
+  border-radius: 6px;
+  padding: 3px 6px;
+  position: fixed;
+  width: 20ch;
+  left: 0;
+  right: 0;
+  bottom: 10px;
+  text-align: center;
+  margin: 0 auto;
+  transition: all 0.3s;
+  cursor: pointer;
+  z-index: -1;
+}
+.source:hover {
+  color: #f3f3f3;
+  background-color: #121212;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+}
+
+@media only screen and (max-width: 520px) {
+  .source {
+    display: none;
+  }
+}
+</style>

frontend/src/composables/useServerEvents.js

@@ -3,7 +3,7 @@
 export default () => {
   // const store = useStore()
 
-  const evtSource = new EventSource(`${process.env.VUE_APP_BACKEND}/stream`);
+  const evtSource = new EventSource(`${import.meta.env.VITE_APP_BACKEND}/stream`);
 
   function addAnswerListener(handler) {
     evtSource.addEventListener('answer', (event) => handler(JSON.parse(event.data)))
@@ -13,5 +13,9 @@ export default () => {
     evtSource.addEventListener('userlist', (event) => handler(JSON.parse(event.data)))
   }
 
-  return { addAnswerListener, addUserlistListener }
+  function addRevealListener(handler) {
+    evtSource.addEventListener('reveal', (event) => handler(JSON.parse(event.data)))
+  }
+
+  return { addAnswerListener, addUserlistListener, addRevealListener }
 }

frontend/src/main.js

@@ -1,8 +1,13 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate);
 
 app.use(router)
+app.use(pinia)
 app.mount('#app')

frontend/src/router.js

@@ -4,8 +4,8 @@ import Login from './views/Login/Index.vue'
 import Screen from './views/Screen/Index.vue'
 
 const routes = [
-  { path: '/', component: Game },
-  { path: '/login', component: Login },
+  { path: '/game', component: Game },
+  { path: '/', component: Login },
   { path: '/screen', component: Screen }
 ]
 

frontend/src/store.js

@@ -1,6 +1,9 @@
 import { defineStore } from 'pinia'
 
-export default defineStore('store', {
+export default defineStore({
+  id: 'store',
+  persist: true,
+
   state: () => ({ 
     username: null
   }),

frontend/src/styles/_prepend.scss

@@ -0,0 +1,9 @@
+@mixin filled-shadow($distance) {
+  $resulting-shadow: null;
+
+  @for $i from 1 through $distance {
+    $resulting-shadow: $resulting-shadow, #{$i}px #{$i}px 0 black;
+  }
+
+  box-shadow: $resulting-shadow;
+}

frontend/src/views/Game/EndGame.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <button @click="endGame">
+  <div class="end">
+    <button 
+      @click="endGame"
+      class="endButton"
+    >
       Закончить игру
     </button>
   </div>
@@ -12,7 +15,28 @@ import { useRouter } from 'vue-router';
 const router = useRouter()
 
 function endGame() {
-  axios.post(process.env.VUE_APP_BACKEND + '/end')
-  router.push('/login')
+  axios.post(import.meta.env.VITE_APP_BACKEND + '/end')
+  router.push('/')
 }
 </script>
+
+<style scoped lang="scss">
+.end {
+  position: fixed;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.endButton {
+  background: none;
+  border: none;
+  font: inherit;
+  padding: 8px 12px;
+  border-bottom: 1px dotted black;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

frontend/src/views/Game/Index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <h1>Флекспатруль мультиплеер</h1>
+
+  <div class="main">
     <div 
       class="card" 
       v-if="card"
@@ -11,8 +13,8 @@
       <h2>Кто скинул этот мем?</h2>
       <div class="interactive">
         <transition name="fade-answers">
-          <List 
-            v-if="!selectedAnswer" 
+          <List
+            v-if="!showResult"
             :options="options" 
             @selectedAnswer="selectAnswer" 
           />
@@ -20,98 +22,96 @@
         <transition name="spin-result">
           <Result 
             v-if="showResult" 
-            :name="card.name" 
             :selectedName="selectedAnswer" 
-            :date="card.date" 
-            :correct="correctAnswer" 
+            :correct="correctAnswer"
           />
         </transition>
       </div>
     </div>
-    <Score 
-      v-if="card" 
-      :score="score" 
-    />
 
     <EndGame />
 
     <square-loader 
       v-if="!card" 
-      :color="'#f3f3f3'" 
+      :color="'white'" 
       class="loader" 
     />
-    <Stats />
   </div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, 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 useStore from '@/store'
+import useServerEvents from '@/composables/useServerEvents'
 
 import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
+const store = useStore()
+const { addRevealListener } = useServerEvents()
+
 const options = ref()
 const card = ref()
 const correctAnswer = ref()
 const selectedAnswer = ref()
 const showResult = ref()
-const score = reactive({
-  "right": 0, 
-  "wrong": 0
+
+addRevealListener((data) => {
+  showResult.value = true
+  correctAnswer.value = data.correctAnswer
+
+  setTimeout(() => {
+    getCard()
+  }, 5000)
 })
 
 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 = null
+  const response = await axios.get(import.meta.env.VITE_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', {
+  await axios.post(import.meta.env.VITE_APP_BACKEND + '/answer', {
     'data': {
       'id': card.value._id,
-      'name': selectedAnswer.value
+      'name': selectedAnswer.value,
+      'username': store.username
     }
   })
 }
 
 onMounted(async () => {
   getCard()
-  const response = await axios.get(process.env.VUE_APP_BACKEND + '/options')
+  const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/options')
   options.value = response.data
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.main {
+  padding-bottom: 200px;
+}
+
 .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;
+  border-radius: 32px;
+  border: 3px solid black;
+  @include filled-shadow(16);
+  transform: translateX(-8px);
 }
 
 .clickable {
@@ -120,8 +120,11 @@ onMounted(async () => {
 
 .interactive {
   position: relative;
-  -webkit-perspective: 900000px;
-  perspective: 900000px;
+
+  > * {
+    position: absolute;
+    width: 100%;
+  }
 }
 
 .fade-answers-leave-active {

frontend/src/views/Game/List.vue

@@ -1,6 +1,16 @@
 <template>
-  <div class="answers">
-    <span class="option" v-for="name in options" :key="name" v-on:click="selectAnswer(name)">
+  <div 
+    class="answers"
+  >
+    <span 
+      class="option" 
+      v-for="name in options" 
+      :key="name" 
+      @click="selectAnswer(name)"
+      :class="{
+        '-selected': selection === name
+      }"
+    >
       {{ name }}
     </span>
   </div>
@@ -12,8 +22,18 @@ export default {
   props: {
     options: Array
   },
+  data() {
+    return {
+      selection: null
+    }
+  },
   methods: {
     selectAnswer: function(selection) {
+      if (this.selection) {
+        return
+      }
+
+      this.selection = selection
       this.$emit('selectedAnswer', selection)
     }
   }
@@ -25,15 +45,21 @@ export default {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  gap: 3px;
 }
 
 .option {
-  background-color: #5a5a5a;
+  background-color: white;
   border-radius: 6px;
-  margin: 3px;
-  padding: 5px 9px;
+  padding: 2px 6px;
   transition: transform 0.2s;
+  border: 3px dashed transparent;
 }
+
+.option.-selected {
+  border-color: var(--clr-accent);
+}
+
 .option:hover {
   transform: scale(1.06);
   cursor: pointer;

frontend/src/views/Game/Result.vue

@@ -1,8 +1,17 @@
 <template>
   <div>
-    <span v-show="!correct" class="wrong">Нет, это был не {{ selectedName }} 😢</span>
-    <div class="result" v-bind:class="{correct: correct}">
-      {{ name }} {{ date }}
+    <div
+      class="result" 
+      :class="{correct: correct === selectedName}"
+    >
+      <div
+        v-show="correct !== selectedName" 
+        class="wrong"
+      >
+        Нет, это был не {{ selectedName }} 😢
+      </div>
+
+      {{ correct }}
     </div>
   </div>
 </template>
@@ -14,7 +23,7 @@ export default {
     name: String,
     selectedName: String,
     date: String,
-    correct: Boolean
+    correct: String
   }
 }
 </script>
@@ -23,12 +32,12 @@ export default {
 .result {
   padding: 30px 40px;
   border-radius: 8px;
-  background-color: #5a5a5a;
+  background-color: white;
 }
 
 .correct {
-  color: #121212;
-  background-color: rgb(124, 230, 124);
+  color: black;
+  background-color: var(--clr-accent);
 }
 
 .wrong {

frontend/src/views/Game/Stats.vue

@@ -45,7 +45,7 @@ export default {
   },
   mounted() {
     axios
-        .get(process.env.VUE_APP_BACKEND + '/stats')
+        .get(import.meta.env.VITE_APP_BACKEND + '/stats')
         .then(response => {
           response.data.forEach(element => {
             this.stats[element._id] = element.correct / element.wrong

frontend/src/views/Login/Index.vue

@@ -1,25 +1,41 @@
 <template>
-  <div>
+  <h1>Флекспатруль мультиплеер</h1>
+
+  <div class="authCard">
     <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 class="auth">
+      <p>{{ question }}</p>
+      <input 
+        placeholder="Ответ"
+        v-model="answer"
+      >
+      <input
+        v-if="mode === 'player'"
+        placeholder="Ваше имя"
+        v-model="username"
+      >
+      
+      <button 
+        v-if="mode === 'player'"
+        @click="loginPlayer" 
+      >
+        Войти как игрок
+      </button>
+      <button 
+        v-else
+        @click="loginScreen" 
+      >
+        Войти как большой экран
+      </button>
+      
+      <button 
+        @click="switchMode"
+        class="secondary"
+      >
+        Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
+      </button>
+    </div>
   </div>
 </template>
 
@@ -30,39 +46,54 @@ import useStore from '../../store'
 import axios from 'axios'
 axios.defaults.withCredentials = true
 
-const question = process.env.VUE_APP_QUESTION
+const question = import.meta.env.VITE_APP_QUESTION
 
 const router = useRouter()
 const store = useStore()
 
+const mode = ref("player")
 const answer = ref()
-const loggedIn = ref()
 const username = ref()
 
-async function login() {
+function switchMode() {
+  mode.value = mode.value === 'player' ? 'screen' : 'player'
+}
+
+async function loginPlayer() {
   store.username = username.value
 
   await axios
-    .post(process.env.VUE_APP_BACKEND + '/auth', {
+    .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
+      "pass": answer.value,
+      "username": username.value,
+    })
+  
+  router.push('/game')
+}
+
+async function loginScreen() {
+  store.username = undefined
+
+  await axios
+    .post(import.meta.env.VITE_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
-      }
-    })
+  
+  router.push('/screen')
 }
 </script>
 
 <style scoped>
-div {
+.auth {
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.authCard {
   background-color: #121212;
+  color: white;
   width: 400px;
   margin: auto;
   border-radius: 18px;
@@ -74,7 +105,6 @@ input {
   font-size: 1em;
   text-align: center;
   padding: 5px 8px;
-  margin-bottom: 1em;
   border-radius: 6px;
   border: none;
   width: 20ch;
@@ -92,6 +122,11 @@ button {
   cursor: pointer;
 }
 
+button.secondary {
+  background: #919191;
+  font-size: 12px;
+}
+
 @media only screen and (max-width: 520px) {
   div {
     width: 100%;

frontend/src/views/Screen/Answer.vue

@@ -0,0 +1,33 @@
+<template>
+  <div 
+    class="answer"
+    :style="{
+      transform: `translate(${-50}%, ${-50}%) rotate(${position.rotation}deg)`
+    }"
+  >
+    {{ props.answer }}
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const props = defineProps(["answer"])
+const position = reactive({
+  rotation: Math.random() * 20 - 10,
+})
+</script>
+
+<style scoped lang="scss">
+.answer {
+  position: fixed;
+  background: var(--clr-accent);
+  border-radius: 32px;
+  font-size: 30px;
+  padding: 32px;
+  border: 3px solid black;
+  top: 50%;
+  left: 50%;
+  font-weight: 600;
+}
+</style>

frontend/src/views/Screen/Index.vue

@@ -1,36 +1,214 @@
 <template>
-  <div v-if="card">
+  <div
+    v-if="card && !loading"
+    class="bigScreen"
+  >
     <img
+      class="image"
       :src="card.image"
     >
-    <div>
-      {{ users }}
+
+    <div class="answersState">
+      <div class="users -unanwsered">
+        <h2 class="usersTitle">Не ответили</h2>
+        <ul>
+          <li
+            class="user"
+            v-for="user in unansweredPlayers"
+            :key="user.name"
+          >
+            {{ user.name }}
+          </li>
+        </ul>
+      </div>
+
+      <div class="users">
+        <h2 class="usersTitle">Ответили</h2>
+        <ul>
+          <li
+            class="user"
+            v-for="user in answeredPlayers"
+            :key="user.name"
+            :class="{
+              '-wrong': correctAnswer && user.selected !== correctAnswer,
+              '-correct': correctAnswer && user.selected === correctAnswer
+            }"
+          >
+            {{ user.name }}
+          </li>
+        </ul>
+      </div>
     </div>
+
+    <Answer 
+      v-if="correctAnswer"
+      :answer="correctAnswer"
+    />
   </div>
+
+  <square-loader 
+    v-else
+    :color="'white'"
+    class="loader"
+  />
 </template>
 
 <script setup>
 import axios from 'axios'
-import { ref, onMounted } from 'vue'
-import useServerEvents from '../../composables/useServerEvents';
+import { ref, onMounted, computed } from 'vue'
+import useServerEvents from '@/composables/useServerEvents'
+import Answer from './Answer.vue'
 
-const { addAnswerListener, addUserlistListener } = useServerEvents()
+import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
-addAnswerListener(console.log)
+const { addAnswerListener, addUserlistListener, addRevealListener } = useServerEvents()
 
 const card = ref()
 const users = ref([])
+const correctAnswer = ref()
+const loading = ref()
 
 async function getCard() {
-  const response = await axios.get(process.env.VUE_APP_BACKEND + '/card')
+  loading.value = true
+  const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/card')
+  loading.value = false
   card.value = response.data
 }
 
+async function getPlayers() {
+  const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/players')
+  response.data.forEach((name) => {
+    users.value.push({
+      name,
+      selected: null
+    })
+  })
+}
+
+const answeredPlayers = computed(() => {
+  return users.value.filter((user) => user.selected)
+})
+
+const unansweredPlayers = computed(() => {
+  return users.value.filter((user) => !user.selected)
+})
+
+addAnswerListener((data) => {
+  users.value = users.value.map((user) => {
+    if (user.name === data.username) {
+      return {
+        ...user,
+        selected: data.selected
+      }
+    }
+
+    return user
+  })
+})
+
 addUserlistListener((data) => {
-  users.value = data
+  data.forEach((name) => {
+    users.value.push({
+      name,
+      selected: null
+    })
+  })
+})
+
+addRevealListener((data) => {
+  correctAnswer.value = data.correctAnswer
+
+  setTimeout(() => {
+    getCard()
+    correctAnswer.value = null
+    users.value = users.value.map((user) => ({
+      ...user,
+      selected: null
+    }))
+  }, 5000)
 })
 
 onMounted(() => {
   getCard()
+  getPlayers()
 })
 </script>
+
+<style scoped lang="scss">
+.bigScreen {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-evenly;
+  gap: 64px;
+  align-items: center;
+  padding: 64px;
+  background: var(--clr-bg);
+  box-sizing: border-box;
+  color: black;
+}
+
+.image {
+  display: block;
+  max-width: 60%;
+  max-height: 100%;
+  object-fit: contain;
+  margin-top: auto;
+  margin-bottom: auto;
+  border: 3px solid black;
+  @include filled-shadow(16);
+  border-radius: 64px;
+  animation-name: rock;
+  animation-duration: 5s;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes rock {
+  from {
+    transform: rotate(-2deg);
+  }
+
+  to {
+    transform: rotate(2deg);
+  }
+}
+
+.users {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  padding: 20px;
+}
+
+.users.-unanwsered {
+  border-right: 1px dashed black;
+}
+
+.user.-correct {
+  color: green;
+}
+
+.user.-wrong {
+  color: red;
+}
+
+.usersTitle {
+  margin: 0;
+}
+
+.answersState {
+  display: flex;
+  flex-shrink: 0;
+  height: 300px;
+}
+
+.loader {
+  margin-top: 50%;
+}
+</style>

frontend/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+const path = require("path");
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @use 'sass:math';
+          @import '@/styles/_prepend.scss';
+        `,
+      },
+    },
+  },
+  server: {
+    port: 8080
+  }
+})