✨ Добавил счет за сессию

backend/index.js

@@ -107,6 +107,18 @@ app.get('/card', async (req, res) => {
 
 app.post('/answer', (req, res) => {
   if (req.session.loggedIn) {
+    if (req.body.data.correct) {
+      if (req.session.right)
+        req.session.right++
+      else
+        req.session.right = 1
+    } else {
+      if (req.session.wrong)
+        req.session.wrong++
+      else
+        req.session.wrong = 1
+    }
+
     try {
       answersCollection.insertOne(req.body.data)
       res.status(200).send()
@@ -119,6 +131,18 @@ app.post('/answer', (req, res) => {
   }
 })
 
+app.get('/score', (req, res) => {
+  if (req.session.loggedIn) {
+    const scoreObj = {
+      "right": req.session.right,
+      "wrong": req.session.wrong
+    }
+    res.status(200).send(scoreObj)
+  } else {
+    res.status(403).send()
+  }
+})
+
 app.get('/options', async (req, res) => {
   if (req.session.loggedIn) {
     res.status(200).send(names)

frontend/src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <h1>🎰 Флекспатрульное Бинго 🎰</h1>
+  <h1>🎱 Флекспатрульное Бинго 🎱</h1>
   <Login id="login" @loggedIn="login" v-show="!loggedIn" />
-  <Game id="game" v-if="loggedIn" />
+  <Game id="game" v-if="loggedIn" :score="score" />
   <a class="source" href="https://github.com/anatolykopyl/vk-bingo">Исходный код</a>
 </template>
 
 <script>
+import axios from 'axios'
 import Login from './components/Login.vue'
 import Game from './components/Game.vue'
 
@@ -17,12 +18,22 @@ export default {
   },
   data() {
     return {
-      loggedIn: null
+      loggedIn: null,
+      score: {
+        "right": 0, 
+        "wrong": 0
+      }
     }
   },
   methods: {
     login: function(success) {
       this.loggedIn = success
+      axios
+        .get(process.env.VUE_APP_BACKEND + '/score')
+        .then(response => {
+          if (Object.keys(response.data).length !== 0)
+            this.score = response.data
+        })
     }
   }
 }
@@ -80,10 +91,9 @@ body {
   background-color: rgb(255, 71, 71) !important;
 }
 
-@media only screen and (max-width: 520) {
+@media only screen and (max-width: 520px) {
-  h1 {
+  .source {
     display: none;
-    font-size: 10px;
   }
 }
 </style>

frontend/src/components/Game.vue

@@ -14,7 +14,8 @@
         </transition>
       </div>
     </div>
-    <square-loader v-else :color="'#f3f3f3'" class="loader" />
+    <Score :score="score" />
+    <square-loader v-if="card === null" :color="'#f3f3f3'" class="loader" />
   </div>
 </template>
 
@@ -22,6 +23,7 @@
 import axios from 'axios'
 import List from './List.vue'
 import Result from './Result.vue'
+import Score from './Score.vue'
 
 import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
@@ -30,8 +32,12 @@ export default {
   components: {
     List,
     Result,
+    Score,
     SquareLoader
   },
+  props: {
+    score: Object
+  },
   data() {
     return {
       options: null,
@@ -65,6 +71,11 @@ export default {
       let innerThis = this
       setTimeout(function() {
           innerThis.showResult = true
+          if (innerThis.correctAnswer) {
+            innerThis.score.right++ 
+          } else {
+            innerThis.score.wrong++
+          }
       }, 805)
       this.oldCard = this.card
       axios

frontend/src/components/Score.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <span class="score-right">{{ score.right }}</span>
+    <span class="score-wrong">{{ score.wrong }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Score",
+  props: {
+    score: Object
+  }
+}
+</script>
+
+<style scoped>
+div {
+  width: 350px;
+  border-radius: 0px 0px 17px 17px;
+  background-color: #f3f3f3;
+  margin: auto;
+  padding: 0.4em 18px 0.4em 18px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: space-evenly;
+}
+
+span {
+  font-weight: bold;
+}
+
+.score-right {
+  color: rgb(124, 230, 124);
+}
+
+.score-wrong {
+  color: rgb(255, 71, 71);
+}
+
+@media only screen and (max-width: 520px) {
+  div {
+    width: 100%;
+    position: fixed;
+    height: 1em;
+    padding: 0.4em 0px 0.4em 0px;
+    bottom: 0px;
+    border-radius: 0px;
+  }
+}
+</style>