Docker

backend/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20-alpine
+LABEL authors="anatolykopyl"
+
+WORKDIR /usr/node/app
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+
+COPY . .

backend/docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+
+services:
+  flexpatrol-bingo:
+    image: git.radner.ru/anatolykopyl/flexpatrol-bingo:latest
+    container_name: flexpatrol-bingo
+    working_dir: /usr/node/app
+    ports:
+      - "3004:3000"
+    command: >
+      sh -c "node index.js"

backend/index.js

@@ -1,28 +1,24 @@
-import express from 'express';
+const express = require('express');
-import session from 'express-session';
+const session = require('express-session');
-import mongodb from 'mongodb';
-import MongoStore from 'connect-mongo';
-import cors from 'cors';
-import crypto from 'crypto'
-import { createNanoEvents } from 'nanoevents';
-
-import "dotenv/config";
-
-import names from './names.json' assert { type: "json" };
 
 const app = express();
-
+const { MongoClient, ObjectId } = require('mongodb');
-const emitter = createNanoEvents();
+const MongoStore = require('connect-mongo');
-const { MongoClient, ObjectId } = mongodb;
+const cors = require('cors');
+require('dotenv').config();
 
 app.use(cors({
-  origin: process.env.FRONTEND,
+  origin: [
+    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 () => {
@@ -85,55 +81,49 @@ 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 score = {}
-  let card = await drawCard()
-  let oldCard = null;
-  let answers = 0
-
   app.post('/api/auth', async (req, res) => {
-    const { pass, username } = req.body;
+    if (req.session.loggedIn) {
-
+      res.status(200).send('Logged in');
-    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 {
-      return res.status(401).send('Wrong password');
+      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();
+      }
     }
   });
 
   app.get('/api/card', async (req, res) => {
-    if (!req.session.loggedIn) {
+    async function drawCard() {
-      return res.status(403).send();
+      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;
     }
 
-    return res.status(200).send({
+    if (req.session.loggedIn) {
-      ...card,
+      res.status(200).send(await drawCard());
-      name: undefined
+    } else {
-    });
+      res.status(403).send();
+    }
   });
 
   app.get('/api/meme', async (req, res) => {
@@ -150,41 +140,33 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
   });
 
   app.post('/api/answer', async (req, res) => {
-    if (!req.session.loggedIn) {
+    if (req.session.loggedIn) {
-      return res.status(403).send();
+      if (req.body.data.id && req.body.data.name) {
-    }
+        const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
-
+        if (card) {
-    if (!req.body.data.id || !req.body.data.name || !req.body.data.username) {
+          const correct = card.name === req.body.data.name;
-      return res.status(400).send();
+          if (correct) {
-    }
+            req.session.right += 1;
-
+          } else {
-    const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
+            req.session.wrong += 1;
-    if (!card) {
+          }
-      return res.status(500).send();
+          answersCollection.insertOne({
-    }
+            correct,
-
+            selected: req.body.data.name,
-    const correct = card.name === req.body.data.name;
+          });
-    if (correct) {
+          res.status(200).send({
-      req.session.right += 1;
+            correct,
+            card,
+          });
+        } else {
+          res.status(500).send();
+        }
+      } else {
+        res.status(400).send();
+      }
     } else {
-      req.session.wrong += 1;
+      res.status(403).send();
     }
-    answersCollection.insertOne({
-      correct,
-      selected: req.body.data.name,
-    });
-
-    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,
-    //   card,
-    // });
-    return res.status(200).send()
   });
 
   app.get('/api/score', (req, res) => {
@@ -202,33 +184,31 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
   });
 
   app.get('/api/stats', async (req, res) => {
-    if (!req.session.loggedIn) {
+    if (req.session.loggedIn) {
-      return res.status(403).send();
+      answersCollection.aggregate([
-    }
+        {
-
+          $group: {
-    const stats = await answersCollection.aggregate([
+            _id: '$selected',
-      {
+            correct: {
-        $group: {
+              $sum: {
-          _id: '$selected',
+                $cond: [
-          correct: {
+                  '$correct', 1, 0,
-            $sum: {
+                ],
-              $cond: [
+              },
-                '$correct', 1, 0,
-              ],
             },
-          },
+            wrong: {
-          wrong: {
+              $sum: {
-            $sum: {
+                $cond: [
-              $cond: [
+                  '$correct', 0, 1,
-                '$correct', 0, 1,
+                ],
-              ],
+              },
             },
           },
         },
-      },
+      ]).toArray().then((stats) => res.status(200).send(stats));
-    ]).toArray();
+    } else {
-
+      res.status(403).send();
-    return res.status(200).send(stats);
+    }
   });
 
   app.get('/api/options', async (req, res) => {
@@ -239,82 +219,5 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
   });
 
-  app.get('/api/players', async (req, res) => {
-    if (!req.session.loggedIn) {
-      return res.status(403).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();
-    }
-
-    players = {}
-    return res.status(200).send();
-  });
-
-  app.get('/api/stream', async (req, res) => {
-    const id = crypto.randomUUID()
-
-    res.set({
-      'Access-Control-Allow-Origin': '*',
-      'Cache-Control': 'no-cache',
-      Connection: 'keep-alive',
-      'Content-Type': 'text/event-stream',
-    });
-    res.flushHeaders();
-
-    emitter.on('connection', (players) => {
-      const data = players
-      res.write(`data: ${JSON.stringify(data)}\nevent: userlist\n\n`);
-    })
-
-    emitter.on('answer', async ({
-      username, selected
-    }) => {
-      const data = { 
-        username,
-        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-${id}`);
-      }
-    });
-
-    const unbindAllDone = emitter.on(`allDone-${id}`, () => {
-      const data = {
-        correctAnswer: oldCard.name,
-        score
-      }
-      res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
-    });
-
-    res.on('close', () => {
-      res.end();
-    });
-  });
-
   app.listen(process.env.PORT, () => console.log(`Server started on ${process.env.PORT}`));
 })();

backend/package.json

@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "type": "module",
   "scripts": {
     "dev": "nodemon index.js"
   },
@@ -20,8 +19,7 @@
     "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,11 +1193,6 @@ 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/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

frontend/package.json

@@ -4,39 +4,39 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite dev",
+    "serve": "vue-cli-service serve",
-    "build": "vite build"
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "pinia": "^2.1.4",
+    "core-js": "^3.6.5",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "vue": "^3.0.0",
-    "vue": "^3.3.4",
-    "vue-peel": "^0.1.1",
-    "vue-router": "4",
     "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@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",
     "dotenv-webpack": "^7.0.2",
-    "eslint": "8",
+    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "8",
+    "eslint-plugin-vue": "^7.0.0"
-    "sass": "^1.63.4",
-    "vite": "^4.3.9"
   },
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true,
+      "node": true
-      "es2022": true
     },
     "extends": [
-      "plugin:vue/vue3-recommended",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {
+    "parserOptions": {
-      "vue/multi-word-component-names": 0
+      "parser": "babel-eslint"
-    }
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",

frontend/public/index.html

@@ -7,14 +7,13 @@
     <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="favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="<%= BASE_URL %>manifest.json">
-    <title>Флекспатруль мультиплеер</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
-    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but Флекспатруль мультиплеер doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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/src/App.vue

@@ -1,52 +1,88 @@
 <template>
-  <router-view />
+  <h1>🎱 Флекспатрульное Бинго 🎱</h1>
+  <Login id="login" @loggedIn="login" v-show="!loggedIn" />
+  <Game id="game" v-if="loggedIn" :score="score" />
+  <a class="source" href="https://github.com/anatolykopyl/vk-bingo">Исходный код</a>
 </template>
 
-<script setup>
+<script>
+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>
-@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;
-  --clr-text: #141414;
-}
-
 body {
   margin: 0;
-  background-color: var(--clr-bg);
+  background-color: #5a5a5a;
-}
-
-input, button {
-  font: inherit;
 }
 
 #app {
-  font-family: "Pangram Sans Rounded", Avenir, Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: var(--clr-text);
+  color: #f3f3f3;
-  min-height: 100vh;
+  margin-top: 60px;
-  box-sizing: border-box;
+}
+
+#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/Game.vue

@@ -0,0 +1,154 @@
+<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/List.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="answers">
+    <span class="option" v-for="name in options" :key="name" v-on:click="selectAnswer(name)">
+      {{ name }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    options: Array
+  },
+  methods: {
+    selectAnswer: function(selection) {
+      this.$emit('selectedAnswer', selection)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.answers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.option {
+  background-color: #5a5a5a;
+  border-radius: 6px;
+  margin: 3px;
+  padding: 5px 9px;
+  transition: transform 0.2s;
+}
+.option:hover {
+  transform: scale(1.06);
+  cursor: pointer;
+}
+</style>

frontend/src/components/Login.vue

@@ -0,0 +1,80 @@
+<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/components/Result.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <span v-show="!correct" class="wrong">Нет, это был не {{ selectedName }} 😢</span>
+    <div class="result" v-bind:class="{correct: correct}">
+      {{ name }} {{ date }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Result",
+  props: {
+    name: String,
+    selectedName: String,
+    date: String,
+    correct: Boolean
+  }
+}
+</script>
+
+<style scoped>
+.result {
+  padding: 30px 40px;
+  border-radius: 8px;
+  background-color: #5a5a5a;
+}
+
+.correct {
+  color: #121212;
+  background-color: rgb(124, 230, 124);
+}
+
+.wrong {
+  color: rgb(255, 71, 71);
+}
+</style>

frontend/src/components/SourceCodeLink.vue

@@ -1,39 +0,0 @@
-<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/components/Stats.vue

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

frontend/src/composables/useServerEvents.js

@@ -1,21 +0,0 @@
-// import useStore from '../store'
-
-export default () => {
-  // const store = useStore()
-
-  const evtSource = new EventSource(`${import.meta.env.VITE_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)))
-  }
-
-  function addRevealListener(handler) {
-    evtSource.addEventListener('reveal', (event) => handler(JSON.parse(event.data)))
-  }
-
-  return { addAnswerListener, addUserlistListener, addRevealListener }
-}

frontend/src/main.js

@@ -1,13 +1,4 @@
 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)
+createApp(App).mount('#app')
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate);
-
-app.use(router)
-app.use(pinia)
-app.mount('#app')

frontend/src/router.js

@@ -1,15 +0,0 @@
-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: '/game', component: Game },
-  { path: '/', component: Login },
-  { path: '/screen', component: Screen }
-]
-
-export default createRouter({
-  history: createWebHistory(),
-  routes,
-})

frontend/src/store.js

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

frontend/src/styles/_prepend.scss

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

frontend/src/views/Game/EndGame.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="end">
-    <button 
-      @click="endGame"
-      class="endButton"
-    >
-      Закончить игру
-    </button>
-  </div>
-</template>
-
-<script setup>
-import axios from 'axios'
-import { useRouter } from 'vue-router';
-const router = useRouter()
-
-function endGame() {
-  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 var(--clr-text);
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>

frontend/src/views/Game/Index.vue

@@ -1,154 +0,0 @@
-<template>
-  <h1 class="header">Флекспатруль мультиплеер</h1>
-
-  <div class="main">
-    <div 
-      class="card" 
-      v-if="card"
-    >
-      <img 
-        class="meme" 
-        :src="card.image"
-      >
-      <h2>Кто скинул этот мем?</h2>
-      <div class="interactive">
-        <transition name="fade-answers" mode="out-in">
-          <List
-            v-if="!showResult"
-            :options="options" 
-            @selectedAnswer="selectAnswer" 
-          />
-          <Result 
-            v-else 
-            :selectedName="selectedAnswer" 
-            :correct="correctAnswer"
-          />
-        </transition>
-      </div>
-    </div>
-
-    <EndGame />
-
-    <square-loader 
-      v-if="!card" 
-      :color="'white'" 
-      class="loader" 
-    />
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import axios from 'axios'
-import List from './List.vue'
-import Result from './Result.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()
-
-addRevealListener((data) => {
-  showResult.value = true
-  correctAnswer.value = data.correctAnswer
-
-  setTimeout(() => {
-    getCard()
-  }, 5000)
-})
-
-async function getCard() {
-  correctAnswer.value = null
-  selectedAnswer.value = null
-  showResult.value = false
-  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
-
-  await axios.post(import.meta.env.VITE_APP_BACKEND + '/answer', {
-    'data': {
-      'id': card.value._id,
-      'name': selectedAnswer.value,
-      'username': store.username
-    }
-  })
-}
-
-onMounted(async () => {
-  getCard()
-  const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/options')
-  options.value = response.data
-})
-</script>
-
-<style scoped lang="scss">
-.header {
-  padding: 60px;
-  margin: auto;
-  height: 42px;
-}
-
-.main {
-  position: relative;
-  min-height: calc(100vh - 162px);
-  box-sizing: border-box;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.card {
-  width: 450px;
-  margin: 0 auto;
-  min-height: 0;
-}
-
-.meme {
-  width: 100%;
-  border-radius: 32px;
-  border: 3px solid var(--clr-text);
-  @include filled-shadow(16);
-  transform: translateX(-8px);
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.interactive {
-  position: relative;
-}
-
-.fade-answers-leave-active {
-  transition: all 0.8s ease;
-}
-.fade-answers-leave-to {
-  opacity: 0;
-  transform: scale(0.3);
-}
-
-.loader {
-  margin-top: 100px;
-}
-
-@media screen and (max-width: 520px) {
-  .card {
-    width: 94%;
-    padding: 3%;
-  }
-}
-</style>

frontend/src/views/Game/List.vue

@@ -1,67 +0,0 @@
-<template>
-  <div 
-    class="answers"
-  >
-    <span 
-      v-for="name in options" 
-      :key="name" 
-      class="option" 
-      :class="{
-        '-selected': selection === name
-      }"
-      @click="selectAnswer(name)"
-    >
-      {{ name }}
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'List',
-  props: {
-    options: Array
-  },
-  data() {
-    return {
-      selection: null
-    }
-  },
-  methods: {
-    selectAnswer: function(selection) {
-      if (this.selection) {
-        return
-      }
-
-      this.selection = selection
-      this.$emit('selectedAnswer', selection)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.answers {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 3px;
-}
-
-.option {
-  background-color: white;
-  border-radius: 6px;
-  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;
-}
-</style>

frontend/src/views/Game/Result.vue

@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <div
-      class="result" 
-      :class="{correct: correct === selectedName}"
-    >
-      <div
-        v-show="correct !== selectedName" 
-        class="wrong"
-      >
-        Нет, это был не {{ selectedName }} 😢
-      </div>
-
-      {{ correct }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Result",
-  props: {
-    name: String,
-    selectedName: String,
-    date: String,
-    correct: String
-  }
-}
-</script>
-
-<style scoped>
-.result {
-  padding: 30px 40px;
-  border-radius: 32px;
-  background-color: white;
-}
-
-.correct {
-  color: var(--clr-text);
-  background-color: var(--clr-accent);
-}
-
-.wrong {
-  color: rgb(255, 71, 71);
-}
-</style>

frontend/src/views/Login/Index.vue

@@ -1,168 +0,0 @@
-<template>
-  <div class="authCard">
-    <h1>Авторизация:</h1>
-
-    <div class="auth">
-      <p>{{ question }}</p>
-      <input 
-        v-model="answer"
-        placeholder="Ответ"
-        class="input"
-      >
-      <input
-        v-if="mode === 'player'"
-        v-model="username"
-        placeholder="Ваше имя"
-        class="input"
-      >
-      
-      <button 
-        v-if="mode === 'player'"
-        class="login"
-        @click="loginPlayer" 
-      >
-        Войти как игрок
-      </button>
-      <button 
-        v-else
-        class="login"
-        @click="loginScreen" 
-      >
-        Войти как большой экран
-      </button>
-      
-      <button 
-        class="switchMode"
-        @click="switchMode"
-      >
-        Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
-      </button>
-    </div>
-  </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 = import.meta.env.VITE_APP_QUESTION
-
-const router = useRouter()
-const store = useStore()
-
-const mode = ref("player")
-const answer = ref()
-const username = ref()
-
-function switchMode() {
-  mode.value = mode.value === 'player' ? 'screen' : 'player'
-}
-
-async function loginPlayer() {
-  if (!answer.value || !username.value) {
-    return
-  }
-
-  store.username = username.value
-
-  await axios
-    .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,
-    })
-  
-  router.push('/screen')
-}
-</script>
-
-<style scoped lang="scss">
-.auth {
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.authCard {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--clr-text);
-  color: var(--clr-text);
-  width: 400px;
-  margin: auto;
-  border-radius: 32px;
-  padding: 40px 40px;
-  box-sizing: border-box;
-  background: white;
-  border: 3px solid var(--clr-text);
-  @include filled-shadow(16);
-}
-
-.input {
-  font-size: 16px;
-  padding: 16px;
-  border: 2px solid var(--clr-text);
-  width: 100%;
-  box-sizing: border-box;
-  @include filled-shadow(4);
-  border-radius: 12px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.login {
-  color: var(--clr-text);
-  font-size: 16px;
-  box-sizing: border-box;
-  background-color: var(--clr-bg);
-  border: none;
-  width: 100%;
-  padding: 16px;
-  cursor: pointer;
-  border: 2px solid var(--clr-text);
-  @include filled-shadow(4);
-  border-radius: 12px;
-}
-
-.switchMode {
-  position: absolute;
-  color: var(--clr-text);
-  background: var(--clr-accent);
-  font-size: 12px;
-  width: 70px;
-  height: 70px;
-  border-radius: 100px;
-  border: 2px solid var(--clr-text);
-  left: 0;
-  bottom: 0;
-  transform: translate(-50%, 50%);
-  cursor: pointer;
-  @include filled-shadow(4);
-}
-
-@media only screen and (max-width: 520px) {
-  .authCard {
-    width: calc(100% - 90px);
-    margin: auto;
-    padding: 40px 20px;
-  }
-}
-</style>

frontend/src/views/Screen/Answer.vue

@@ -1,33 +0,0 @@
-<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 var(--clr-text);
-  top: 50%;
-  left: 50%;
-  font-weight: 600;
-}
-</style>

frontend/src/views/Screen/Index.vue

@@ -1,271 +0,0 @@
-<template>
-  <div
-    v-if="card && !loading"
-    class="bigScreen"
-  >
-    <img
-      class="image"
-      :src="card.image"
-    >
-
-    <div class="answersState">
-      <div class="users -unanwsered">
-        <h2 class="usersTitle">
-          Не ответили
-        </h2>
-        <ul>
-          <li
-            v-for="user in unansweredPlayers"
-            :key="user.name"
-            class="user"
-          >
-            <span>
-              {{ user.name }}
-            </span>
-            <span 
-              class="score"
-              :class="{
-                '-leader': leader === user.name
-              }"
-            >
-              {{ score[user.name] }}
-            </span>
-          </li>
-        </ul>
-      </div>
-
-      <div class="users">
-        <h2 class="usersTitle">
-          Ответили
-        </h2>
-        <ul>
-          <li
-            v-for="user in answeredPlayers"
-            :key="user.name"
-            class="user"
-            :class="{
-              '-wrong': correctAnswer && user.selected !== correctAnswer,
-              '-correct': correctAnswer && user.selected === correctAnswer
-            }"
-          >
-            <span>
-              {{ user.name }}
-            </span>
-            <span 
-              class="score"
-              :class="{
-                '-leader': leader === user.name
-              }"
-            >
-              {{ score[user.name] }}
-            </span>
-          </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, computed } from 'vue'
-import useServerEvents from '@/composables/useServerEvents'
-import Answer from './Answer.vue'
-
-import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
-
-const { addAnswerListener, addUserlistListener, addRevealListener } = useServerEvents()
-
-const card = ref()
-const users = ref([])
-const correctAnswer = ref()
-const loading = ref()
-const score = ref({})
-
-async function getCard() {
-  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)
-})
-
-const leader = computed(() => {
-  return Object.keys(score.value).sort((a, b) => {
-    return score.value[a] - score.value[b]
-  })[0]
-})
-
-addAnswerListener((data) => {
-  users.value = users.value.map((user) => {
-    if (user.name === data.username) {
-      return {
-        ...user,
-        selected: data.selected
-      }
-    }
-
-    return user
-  })
-})
-
-addUserlistListener((data) => {
-  data.forEach((name) => {
-    users.value.push({
-      name,
-      selected: null
-    })
-  })
-})
-
-addRevealListener((data) => {
-  correctAnswer.value = data.correctAnswer
-  score.value = data.score
-
-  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: var(--clr-text);
-}
-
-.image {
-  display: block;
-  max-width: 60%;
-  max-height: 100%;
-  object-fit: contain;
-  margin-top: auto;
-  margin-bottom: auto;
-  background: var(--clr-text);
-  border: 3px solid var(--clr-text);
-  @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 var(--clr-text);
-}
-
-.user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.user.-correct {
-  color: green;
-}
-
-.user.-wrong {
-  color: red;
-}
-
-.score {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 12px;
-  width: 16px;
-  height: 16px;
-  border-radius: 64px;
-  border: 2px solid var(--clr-text);
-  background: var(--clr-bg);
-  color: var(--clr-text);
-
-  &.-leader {
-    background: var(--clr-accent);
-  }
-}
-
-.usersTitle {
-  margin: 0;
-}
-
-.answersState {
-  display: flex;
-  flex-shrink: 0;
-  height: 300px;
-}
-
-.loader {
-  margin-top: 50%;
-}
-</style>

frontend/vite.config.js

@@ -1,26 +0,0 @@
-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
-  }
-})