Game works

frontend/src/views/Game/EndGame.vue

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

frontend/src/views/Game/Index.vue

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

frontend/src/views/Game/List.vue

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

frontend/src/views/Game/Result.vue

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

frontend/src/views/Game/Stats.vue

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