Style fixes

.gitignore

@@ -1,4 +1,4 @@
-backend/names.json
+backend/names.js
 
 .DS_Store
 node_modules

backend/index.js

@@ -3,12 +3,11 @@ import session from '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" };
+import names from './names.js'
 
 const app = express();
 
@@ -117,7 +116,7 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
       emitter.emit('connection', Object.keys(players))
     }
 
-    if (pass && pass.toLowerCase() === process.env.PASSWORD) {
+    if (pass && pass.toLowerCase().trim() === process.env.PASSWORD) {
       req.session.loggedIn = true;
       return res.status(200).send('Logged in');
     } else {
@@ -175,6 +174,7 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     });
 
     players[req.body.data.username] = req.body.data.name;
+    answers += 1
     emitter.emit('answer', {
       username: req.body.data.username,
       selected: req.body.data.name
@@ -253,12 +253,15 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     }
 
     players = {}
+    answers = 0
+    score = {}
+
+    emitter.emit("end")
+
     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',
@@ -283,8 +286,6 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
 
       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]) {
@@ -299,11 +300,11 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
         oldCard = { ...card }
         card = await drawCard()
         
-        emitter.emit(`allDone-${id}`);
+        emitter.emit("allDone");
       }
     });
 
-    const unbindAllDone = emitter.on(`allDone-${id}`, () => {
+    emitter.on("allDone", () => {
       const data = {
         correctAnswer: oldCard.name,
         score
@@ -311,6 +312,11 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
       res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
     });
 
+    emitter.on("end", () => {
+      res.write(`data: {}\nevent: end\n\n`);
+      res.end();
+    })
+
     res.on('close', () => {
       res.end();
     });

backend/names.js.example

@@ -1,4 +1,4 @@
-[
+export default [
   "Участник Беседы 1",
   "Участник Беседы 2",
   "Участник Беседы 3"

frontend/package.json

@@ -36,6 +36,12 @@
     ],
     "rules": {
       "vue/multi-word-component-names": 0
+    },
+    "globals": {
+      "defineProps": "readonly",
+      "defineEmits": "readonly",
+      "defineExpose": "readonly",
+      "withDefaults": "readonly"
     }
   },
   "browserslist": [

frontend/src/App.vue

@@ -27,8 +27,10 @@
 
 :root {
   --clr-bg: #ffd537;
+  --clr-bg-secondary: #fbf2cf;
   --clr-accent: #37ffac;
   --clr-text: #141414;
+  --clr-text-secondary: rgb(20, 20, 20, .5);
 }
 
 body {

frontend/src/components/Countdown.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="bar">
+    <div 
+      class="fill" 
+    />
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+.bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 16px;
+}
+
+.fill {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 16px;
+  background: white;
+  animation: move 5s linear;
+}
+
+@keyframes move {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+</style>

frontend/src/composables/useServerEvents.js

@@ -17,5 +17,9 @@ export default () => {
     evtSource.addEventListener('reveal', (event) => handler(JSON.parse(event.data)))
   }
 
-  return { addAnswerListener, addUserlistListener, addRevealListener }
+  function addEndListener(handler) {
+    evtSource.addEventListener('end', (event) => handler(JSON.parse(event.data)))
+  }
+
+  return { addAnswerListener, addUserlistListener, addRevealListener, addEndListener }
 }

frontend/src/views/Game/EndGame.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="end">
     <button 
-      @click="endGame"
       class="endButton"
+      @click="endGame"
     >
       Закончить игру
     </button>
@@ -32,6 +32,7 @@ function endGame() {
   background: none;
   border: none;
   font: inherit;
+  color: var(--clr-text);
   padding: 8px 12px;
   border-bottom: 1px dotted var(--clr-text);
 

frontend/src/views/Game/Index.vue

@@ -1,10 +1,12 @@
 <template>
-  <h1 class="header">Флекспатруль мультиплеер</h1>
+  <h1 class="header">
+    Флекспатруль мультиплеер
+  </h1>
 
   <div class="main">
     <div 
-      class="card" 
-      v-if="card"
+      v-if="card" 
+      class="card"
     >
       <img 
         class="meme" 
@@ -12,7 +14,10 @@
       >
       <h2>Кто скинул этот мем?</h2>
       <div class="interactive">
-        <transition name="fade-answers" mode="out-in">
+        <transition
+          name="fade-answers"
+          mode="out-in"
+        >
           <List
             v-if="!showResult"
             :options="options" 
@@ -20,7 +25,7 @@
           />
           <Result 
             v-else 
-            :selectedName="selectedAnswer" 
+            :selected-name="selectedAnswer" 
             :correct="correctAnswer"
           />
         </transition>
@@ -29,6 +34,8 @@
 
     <EndGame />
 
+    <Countdown v-if="correctAnswer" />
+
     <square-loader 
       v-if="!card" 
       :color="'white'" 
@@ -39,17 +46,20 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 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 Countdown from '@/components/Countdown.vue'
 
 import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
 const store = useStore()
-const { addRevealListener } = useServerEvents()
+const router = useRouter()
+const { addRevealListener, addEndListener } = useServerEvents()
 
 const options = ref()
 const card = ref()
@@ -66,6 +76,10 @@ addRevealListener((data) => {
   }, 5000)
 })
 
+addEndListener(() => {
+  router.push('/')
+})
+
 async function getCard() {
   correctAnswer.value = null
   selectedAnswer.value = null

frontend/src/views/Game/Result.vue

@@ -28,11 +28,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .result {
   padding: 30px 40px;
   border-radius: 32px;
   background-color: white;
+  font-weight: 600;
+  border: 3px solid var(--clr-text);
+  @include filled-shadow(16);
 }
 
 .correct {

frontend/src/views/Login/Index.vue

@@ -4,11 +4,16 @@
 
     <div class="auth">
       <p>{{ question }}</p>
+
       <input 
         v-model="answer"
         placeholder="Ответ"
         class="input"
+        :class="{
+          '-wrong': wrongPassword
+        }"
       >
+
       <input
         v-if="mode === 'player'"
         v-model="username"
@@ -19,13 +24,15 @@
       <button 
         v-if="mode === 'player'"
         class="login"
-        @click="loginPlayer" 
+        :disabled="!username || !answer" 
+        @click="loginPlayer"
       >
         Войти как игрок
       </button>
       <button 
         v-else
         class="login"
+        :disabled="!answer" 
         @click="loginScreen" 
       >
         Войти как большой экран
@@ -56,6 +63,7 @@ const store = useStore()
 const mode = ref("player")
 const answer = ref()
 const username = ref()
+const wrongPassword = ref()
 
 function switchMode() {
   mode.value = mode.value === 'player' ? 'screen' : 'player'
@@ -68,24 +76,32 @@ async function loginPlayer() {
 
   store.username = username.value
 
-  await axios
-    .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
-      "pass": answer.value,
-      "username": username.value,
-    })
-  
-  router.push('/game')
+  try {
+    await axios
+      .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
+        "pass": answer.value,
+        "username": username.value,
+      })
+
+    router.push('/game')
+  } catch {
+    wrongPassword.value = true
+  }
 }
 
 async function loginScreen() {
   store.username = undefined
 
-  await axios
-    .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
-      "pass": answer.value,
-    })
-  
-  router.push('/screen')
+  try {
+    await axios
+      .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
+        "pass": answer.value,
+      })
+
+    router.push('/screen')
+  } catch {
+    wrongPassword.value = true
+  }
 }
 </script>
 
@@ -126,6 +142,10 @@ async function loginScreen() {
   &:focus {
     outline: none;
   }
+
+  &.-wrong {
+    border-color: red;
+  }
 }
 
 .login {
@@ -140,6 +160,11 @@ async function loginScreen() {
   border: 2px solid var(--clr-text);
   @include filled-shadow(4);
   border-radius: 12px;
+
+  &:disabled {
+    cursor: default;
+    color: var(--clr-text-secondary);
+  }
 }
 
 .switchMode {
@@ -154,6 +179,9 @@ async function loginScreen() {
   left: 0;
   bottom: 0;
   transform: translate(-50%, 50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
   @include filled-shadow(4);
 }

frontend/src/views/Screen/Answer.vue

@@ -1,33 +1,29 @@
 <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;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  box-sizing: border-box;
   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;
+  border: 3px solid var(--clr-text);
+  @include filled-shadow(16);
 }
 </style>

frontend/src/views/Screen/FunFact.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="funFact">
+    {{ fact }}
+  </div>
+</template>
+
+<script setup>
+const facts = [
+  "Дима – главный источник мемов. Он скинул в конфу 2552 пикчи, это 47% от общего числа!",
+  "Всего в конфу было скинуто 5420 картинок!",
+  "Раньше флекспатруль носил название dayzspeak.ts3.pw",
+  "Конфе с мемами больше семи лет!"
+]
+
+const fact = facts[Math.floor(Math.random() * facts.length)];
+</script>
+
+<style scoped lang="scss">
+.funFact {
+  position: fixed;
+  padding: 32px;
+  right: 0;
+  bottom: 0;
+  text-align: right;
+  width: 200px;
+  color: var(--clr-text-secondary);
+}
+</style>

frontend/src/views/Screen/Index.vue

@@ -3,10 +3,22 @@
     v-if="card && !loading"
     class="bigScreen"
   >
-    <img
-      class="image"
-      :src="card.image"
-    >
+    <div class="leftWrapper">
+      <div class="left">
+        <Answer 
+          v-if="correctAnswer"
+          :answer="correctAnswer"
+        />
+        
+        <img
+          class="image"
+          :class="{
+            '-scoot': correctAnswer
+          }"
+          :src="card.image"
+        >
+      </div>
+    </div>
 
     <div class="answersState">
       <div class="users -unanwsered">
@@ -23,9 +35,10 @@
               {{ user.name }}
             </span>
             <span 
+              v-if="score[user.name]"
               class="score"
               :class="{
-                '-leader': leader === user.name
+                '-leader': score[user.name] === maxScore
               }"
             >
               {{ score[user.name] }}
@@ -52,9 +65,10 @@
               {{ user.name }}
             </span>
             <span 
+              v-if="score[user.name]"
               class="score"
               :class="{
-                '-leader': leader === user.name
+                '-leader': score[user.name] === maxScore
               }"
             >
               {{ score[user.name] }}
@@ -63,11 +77,6 @@
         </ul>
       </div>
     </div>
-
-    <Answer 
-      v-if="correctAnswer"
-      :answer="correctAnswer"
-    />
   </div>
 
   <square-loader 
@@ -75,17 +84,24 @@
     :color="'white'"
     class="loader"
   />
+
+  <Countdown v-if="correctAnswer" />
+  <!-- <FunFact /> -->
 </template>
 
 <script setup>
 import axios from 'axios'
 import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import useServerEvents from '@/composables/useServerEvents'
 import Answer from './Answer.vue'
+// import FunFact from './FunFact.vue'
 
 import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
+import Countdown from '@/components/Countdown.vue'
 
-const { addAnswerListener, addUserlistListener, addRevealListener } = useServerEvents()
+const { addAnswerListener, addUserlistListener, addRevealListener, addEndListener } = useServerEvents()
+const router = useRouter()
 
 const card = ref()
 const users = ref([])
@@ -118,10 +134,11 @@ 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]
+const maxScore = computed(() => {
+  const leader = Object.keys(score.value).sort((a, b) => {
+    return score.value[b] - score.value[a]
   })[0]
+  return score.value[leader]
 })
 
 addAnswerListener((data) => {
@@ -138,6 +155,7 @@ addAnswerListener((data) => {
 })
 
 addUserlistListener((data) => {
+  users.value = []
   data.forEach((name) => {
     users.value.push({
       name,
@@ -160,6 +178,10 @@ addRevealListener((data) => {
   }, 5000)
 })
 
+addEndListener(() => {
+  router.push('/')
+})
+
 onMounted(() => {
   getCard()
   getPlayers()
@@ -183,22 +205,45 @@ onMounted(() => {
   color: var(--clr-text);
 }
 
+.leftWrapper {
+  position: relative;
+  height: 100%;
+  max-width: 60%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.left {
+  position: relative;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .image {
   display: block;
-  max-width: 60%;
+  max-width: 100%;
   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;
+  // animation-name: rock;
+  // animation-duration: 5s;
+  // animation-direction: alternate;
+  // animation-iteration-count: infinite;
+  // animation-timing-function: ease-in-out;
+  transition: transform 1s;
+
+  &.-scoot {
+    transform: translateY(150px);
+  }
 }
 
 @keyframes rock {
@@ -227,6 +272,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 8px;
 }
 
 .user.-correct {