From e364b7b82d773efd4406bb0fb765b288e5a7f05e Mon Sep 17 00:00:00 2001
From: anatolykopyl <hi@kopyl.dev>
Date: Sun, 18 Jun 2023 20:49:46 +0300
Subject: [PATCH] End event

---
 backend/index.js                            | 19 +++++++++++------
 frontend/src/composables/useServerEvents.js |  6 +++++-
 frontend/src/views/Game/Index.vue           | 23 +++++++++++++++------
 frontend/src/views/Screen/Index.vue         |  8 ++++++-
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/backend/index.js b/backend/index.js
index e0cd278..e8c3a9f 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -3,7 +3,6 @@ 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";
@@ -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 {
@@ -254,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',
@@ -298,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
@@ -310,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(`event: end\n\n`);
+      res.end();
+    })
+
     res.on('close', () => {
       res.end();
     });
diff --git a/frontend/src/composables/useServerEvents.js b/frontend/src/composables/useServerEvents.js
index 7d0666b..4ed2abd 100644
--- a/frontend/src/composables/useServerEvents.js
+++ b/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 }
 }
diff --git a/frontend/src/views/Game/Index.vue b/frontend/src/views/Game/Index.vue
index 79de7ab..80eeea0 100644
--- a/frontend/src/views/Game/Index.vue
+++ b/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>
@@ -39,6 +44,7 @@
 
 <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'
@@ -49,7 +55,8 @@ import useServerEvents from '@/composables/useServerEvents'
 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 +73,10 @@ addRevealListener((data) => {
   }, 5000)
 })
 
+addEndListener(() => {
+  router.push('/')
+})
+
 async function getCard() {
   correctAnswer.value = null
   selectedAnswer.value = null
diff --git a/frontend/src/views/Screen/Index.vue b/frontend/src/views/Screen/Index.vue
index 124680f..6f118ec 100644
--- a/frontend/src/views/Screen/Index.vue
+++ b/frontend/src/views/Screen/Index.vue
@@ -82,12 +82,14 @@
 <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 SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
-const { addAnswerListener, addUserlistListener, addRevealListener } = useServerEvents()
+const { addAnswerListener, addUserlistListener, addRevealListener, addEndListener } = useServerEvents()
+const router = useRouter()
 
 const card = ref()
 const users = ref([])
@@ -163,6 +165,10 @@ addRevealListener((data) => {
   }, 5000)
 })
 
+addEndListener(() => {
+  router.push('/')
+})
+
 onMounted(() => {
   getCard()
   getPlayers()