From e88bdf2b9239d9da1662b5961bdf6eaec87f3ab1 Mon Sep 17 00:00:00 2001
From: anatolykopyl <hi@kopyl.dev>
Date: Mon, 19 Jun 2023 00:41:57 +0300
Subject: [PATCH] Style fixes

---
 backend/index.js                      |  2 +-
 frontend/package.json                 |  6 ++
 frontend/src/App.vue                  |  2 +
 frontend/src/components/Countdown.vue | 42 ++++++++++++++
 frontend/src/views/Game/EndGame.vue   |  3 +-
 frontend/src/views/Game/Index.vue     |  3 +
 frontend/src/views/Game/Result.vue    |  5 +-
 frontend/src/views/Login/Index.vue    | 56 ++++++++++++++-----
 frontend/src/views/Screen/Answer.vue  | 20 +++----
 frontend/src/views/Screen/FunFact.vue | 28 ++++++++++
 frontend/src/views/Screen/Index.vue   | 79 ++++++++++++++++++++-------
 11 files changed, 196 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/Countdown.vue
 create mode 100644 frontend/src/views/Screen/FunFact.vue

diff --git a/backend/index.js b/backend/index.js
index e8c3a9f..b1f4638 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -313,7 +313,7 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
     });
 
     emitter.on("end", () => {
-      res.write(`event: end\n\n`);
+      res.write(`data: {}\nevent: end\n\n`);
       res.end();
     })
 
diff --git a/frontend/package.json b/frontend/package.json
index f69d1ba..649c861 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,12 @@
     ],
     "rules": {
       "vue/multi-word-component-names": 0
+    },
+    "globals": {
+      "defineProps": "readonly",
+      "defineEmits": "readonly",
+      "defineExpose": "readonly",
+      "withDefaults": "readonly"
     }
   },
   "browserslist": [
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8a503a6..8acb5fe 100644
--- a/frontend/src/App.vue
+++ b/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 {
diff --git a/frontend/src/components/Countdown.vue b/frontend/src/components/Countdown.vue
new file mode 100644
index 0000000..191fb62
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/Game/EndGame.vue b/frontend/src/views/Game/EndGame.vue
index 22969a8..052db9a 100644
--- a/frontend/src/views/Game/EndGame.vue
+++ b/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);
 
diff --git a/frontend/src/views/Game/Index.vue b/frontend/src/views/Game/Index.vue
index 80eeea0..f9a211f 100644
--- a/frontend/src/views/Game/Index.vue
+++ b/frontend/src/views/Game/Index.vue
@@ -34,6 +34,8 @@
 
     <EndGame />
 
+    <Countdown v-if="correctAnswer" />
+
     <square-loader 
       v-if="!card" 
       :color="'white'" 
@@ -51,6 +53,7 @@ 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'
 
diff --git a/frontend/src/views/Game/Result.vue b/frontend/src/views/Game/Result.vue
index 0eb9067..d40b3c2 100644
--- a/frontend/src/views/Game/Result.vue
+++ b/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 {
diff --git a/frontend/src/views/Login/Index.vue b/frontend/src/views/Login/Index.vue
index 4f7bd7f..74a19f6 100644
--- a/frontend/src/views/Login/Index.vue
+++ b/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);
 }
diff --git a/frontend/src/views/Screen/Answer.vue b/frontend/src/views/Screen/Answer.vue
index d5e1eec..1f21bf7 100644
--- a/frontend/src/views/Screen/Answer.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/Screen/FunFact.vue b/frontend/src/views/Screen/FunFact.vue
new file mode 100644
index 0000000..5daa071
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/Screen/Index.vue b/frontend/src/views/Screen/Index.vue
index 90f89f4..8268e22 100644
--- a/frontend/src/views/Screen/Index.vue
+++ b/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">
@@ -26,7 +38,7 @@
               v-if="score[user.name]"
               class="score"
               :class="{
-                '-leader': leader === user.name
+                '-leader': score[user.name] === maxScore
               }"
             >
               {{ score[user.name] }}
@@ -56,7 +68,7 @@
               v-if="score[user.name]"
               class="score"
               :class="{
-                '-leader': leader === user.name
+                '-leader': score[user.name] === maxScore
               }"
             >
               {{ score[user.name] }}
@@ -65,11 +77,6 @@
         </ul>
       </div>
     </div>
-
-    <Answer 
-      v-if="correctAnswer"
-      :answer="correctAnswer"
-    />
   </div>
 
   <square-loader 
@@ -77,6 +84,9 @@
     :color="'white'"
     class="loader"
   />
+
+  <Countdown v-if="correctAnswer" />
+  <!-- <FunFact /> -->
 </template>
 
 <script setup>
@@ -85,8 +95,10 @@ 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, addEndListener } = useServerEvents()
 const router = useRouter()
@@ -122,10 +134,11 @@ const unansweredPlayers = computed(() => {
   return users.value.filter((user) => !user.selected)
 })
 
-const leader = computed(() => {
-  return Object.keys(score.value).sort((a, 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) => {
@@ -192,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 {
@@ -236,6 +272,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 8px;
 }
 
 .user.-correct {