Dockerize

.gitignore

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

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:
+  party-flexpatrol-bingo:
+    image: git.radner.ru/anatolykopyl/party-flexpatrol-bingo:latest
+    container_name: party-flexpatrol-bingo
+    working_dir: /usr/node/app
+    ports:
+      - "3003:3000"
+    command: >
+      sh -c "node index.js"

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/index.html

@@ -7,8 +7,7 @@
     <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="manifest" href="manifest.json">
+    <link rel="icon" href="favicon.png">
     <title>Флекспатруль мультиплеер</title>
     <script type="module" src="/src/main.js"></script>
   </head>

frontend/package.json

@@ -35,7 +35,14 @@
       "eslint:recommended"
     ],
     "rules": {
-      "vue/multi-word-component-names": 0
+      "vue/multi-word-component-names": 0,
+      "no-unused-vars": 0
+    },
+    "globals": {
+      "defineProps": "readonly",
+      "defineEmits": "readonly",
+      "defineExpose": "readonly",
+      "withDefaults": "readonly"
     }
   },
   "browserslist": [

frontend/public/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "Vk Bingo",
-  "short_name": "Bingo",
-  "lang": "ru-RU",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone"
-}

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: #14141480;
 }
 
 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/components/IconInfo.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    class="bi bi-info-circle"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
+  </svg>
+</template>

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" 
+      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

@@ -1,44 +1,71 @@
 <template>
-  <div class="authCard">
-    <h1>Авторизация:</h1>
+  <div class="cardWrapper">
+    <div class="authCard">
+      <!-- <div 
+            class="info"
+            @click="showQr = !showQr"
+          >
+            <IconInfo />
+          </div> -->
 
-    <div class="auth">
-      <p>{{ question }}</p>
-      <input 
-        v-model="answer"
-        placeholder="Ответ"
-        class="input"
-      >
-      <input
-        v-if="mode === 'player'"
-        v-model="username"
-        placeholder="Ваше имя"
-        class="input"
-      >
+      <h1>Авторизация:</h1>
 
-      <button 
-        v-if="mode === 'player'"
-        class="login"
-        @click="loginPlayer" 
-      >
-        Войти как игрок
-      </button>
-      <button 
-        v-else
-        class="login"
-        @click="loginScreen" 
-      >
-        Войти как большой экран
-      </button>
+      <div class="auth">
+        <p>{{ question }}</p>
 
-      <button 
-        class="switchMode"
-        @click="switchMode"
-      >
-        Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
-      </button>
+        <input 
+          v-model="answer"
+          placeholder="Ответ"
+          class="input"
+          :class="{
+            '-wrong': wrongPassword
+          }"
+        >
+
+        <input
+          v-if="mode === 'player'"
+          v-model="username"
+          placeholder="Ваше имя"
+          class="input"
+        >
+            
+        <button 
+          v-if="mode === 'player'"
+          class="login"
+          :disabled="!username || !answer" 
+          @click="loginPlayer"
+        >
+          Войти как игрок
+        </button>
+        <button 
+          v-else
+          class="login"
+          :disabled="!answer" 
+          @click="loginScreen" 
+        >
+          Войти как большой экран
+        </button>
+            
+        <button 
+          class="switchMode"
+          @click="switchMode"
+        >
+          Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
+        </button>
+      </div>
     </div>
   </div>
+
+  <!-- <a 
+    class="author"
+    href="https://kopyl.dev"
+    target="_blank"
+  >
+    <img 
+      src="kopyl_frame_white.png"
+      class="authorLogo"
+    >
+  </a> -->
 </template>
 
 <script setup>
@@ -46,6 +73,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import useStore from '../../store'
 import axios from 'axios'
+import VuePeel from 'vue-peel'
+import 'vue-peel/style.css'
+import IconInfo from '@/components/IconInfo.vue'
+
 axios.defaults.withCredentials = true
 
 const question = import.meta.env.VITE_APP_QUESTION
@@ -56,6 +87,8 @@ const store = useStore()
 const mode = ref("player")
 const answer = ref()
 const username = ref()
+const wrongPassword = ref()
+const showQr = ref()
 
 function switchMode() {
   mode.value = mode.value === 'player' ? 'screen' : 'player'
@@ -68,24 +101,32 @@ async function loginPlayer() {
 
   store.username = username.value
 
-  await axios
-    .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
-      "pass": answer.value,
-      "username": username.value,
-    })
+  try {
+    await axios
+      .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
+        "pass": answer.value,
+        "username": username.value,
+      })
 
-  router.push('/game')
+    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,
-    })
+  try {
+    await axios
+      .post(import.meta.env.VITE_APP_BACKEND + '/auth', {
+        "pass": answer.value,
+      })
 
-  router.push('/screen')
+    router.push('/screen')
+  } catch {
+    wrongPassword.value = true
+  }
 }
 </script>
 
@@ -97,23 +138,47 @@ async function loginScreen() {
   align-items: center;
 }
 
-.authCard {
+.cardWrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: var(--clr-text);
+  display: flex;
+  gap: 64px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.authCard {
+  position: relative;
   color: var(--clr-text);
   width: 400px;
   margin: auto;
   border-radius: 32px;
   padding: 40px 40px;
   box-sizing: border-box;
-  background: white;
+  background-color: white;
   border: 3px solid var(--clr-text);
   @include filled-shadow(16);
 }
 
+.info {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 16px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--clr-text-secondary);
+  }
+}
+
 .input {
   font-size: 16px;
   padding: 16px;
@@ -126,6 +191,10 @@ async function loginScreen() {
   &:focus {
     outline: none;
   }
+
+  &.-wrong {
+    border-color: red;
+  }
 }
 
 .login {
@@ -140,6 +209,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,15 +228,48 @@ 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);
 }
 
+.author {
+  width: 64px;
+  height: 64px;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: 16px;
+}
+
+.authorLogo {
+  width: 100%;
+  height: 100%;
+}
+
 @media only screen and (max-width: 520px) {
   .authCard {
     width: calc(100% - 90px);
     margin: auto;
     padding: 40px 20px;
   }
+
+  .flag {
+    transform: translate(calc(-50vw + 70px), -175%) rotate(90deg);
+
+    &.-open {
+      transform: translate(calc(-50vw + 70px), -175%) rotate(0);
+    }
+
+    &.-short {
+      transform: translate(calc(-50vw + 70px), -160%) rotate(90deg);
+
+      &.-open {
+        transform: translate(calc(-50vw + 70px), -160%) rotate(0);
+      }
+    }
+  }
 }
 </style>

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,23 +84,39 @@
     :color="'white'"
     class="loader"
   />
+
+  <Countdown v-if="correctAnswer" />
+  <!-- <FunFact /> -->
+  <Transition name="slide-out">
+    <div 
+      v-if="hurryLast"
+      class="hurryLast"
+    >
+      {{ lastPlayer.name }}, поторопись!
+    </div>
+  </Transition>
 </template>
 
 <script setup>
 import axios from 'axios'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } 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([])
 const correctAnswer = ref()
 const loading = ref()
 const score = ref({})
+const hurryLast = ref()
 
 async function getCard() {
   loading.value = true
@@ -118,10 +143,31 @@ 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]
+})
+
+const lastPlayer = computed(() => {
+  if (unansweredPlayers.value.length === 1) {
+    return unansweredPlayers.value[0]
+  }
+
+  return null
+})
+
+let countdownToHurry = undefined
+watch(lastPlayer, () => {
+  if (!lastPlayer.value) {
+    clearTimeout(countdownToHurry)
+    hurryLast.value = false
+  } else {
+    countdownToHurry = setTimeout(() => {
+      hurryLast.value = true
+    }, 5000)
+  }
 })
 
 addAnswerListener((data) => {
@@ -138,6 +184,7 @@ addAnswerListener((data) => {
 })
 
 addUserlistListener((data) => {
+  users.value = []
   data.forEach((name) => {
     users.value.push({
       name,
@@ -150,6 +197,9 @@ addRevealListener((data) => {
   correctAnswer.value = data.correctAnswer
   score.value = data.score
 
+  clearTimeout(countdownToHurry)
+  hurryLast.value = false
+
   setTimeout(() => {
     getCard()
     correctAnswer.value = null
@@ -160,6 +210,10 @@ addRevealListener((data) => {
   }, 5000)
 })
 
+addEndListener(() => {
+  router.push('/')
+})
+
 onMounted(() => {
   getCard()
   getPlayers()
@@ -175,30 +229,52 @@ onMounted(() => {
   top: 0;
   display: flex;
   justify-content: space-evenly;
-  gap: 64px;
+  gap: 16px;
   align-items: center;
-  padding: 64px;
-  background: var(--clr-bg);
+  padding: 8px 8px 24px 8px;
   box-sizing: border-box;
   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;
+  border-radius: 16px;
+  // 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 +303,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 8px;
 }
 
 .user.-correct {
@@ -262,10 +339,43 @@ onMounted(() => {
 .answersState {
   display: flex;
   flex-shrink: 0;
-  height: 300px;
+  height: 400px;
+  font-size: 32px;
 }
 
 .loader {
   margin-top: 50%;
 }
+
+.hurryLast {
+  padding: 16px 32px;
+  border-radius: 16px;
+  font-size: 32px;
+  border: 3px solid var(--clr-text);
+  @include filled-shadow(16);
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  background: var(--clr-bg-secondary);
+  animation-name: pulse;
+  animation-delay: 10s;
+  animation-duration: 100s;
+  animation-fill-mode: forwards;
+  transition: transform 1s;
+}
+
+.slide-out-enter-from,
+.slide-out-leave-to {
+  transform: translateY(200px);
+}
+
+@keyframes pulse {
+  from {
+    background: var(--clr-bg-secondary);
+  }
+
+  to {
+    background: red;
+  }
+}
 </style>