✨ Отображение статистики

backend/index.js

@@ -57,21 +57,21 @@ cardsCollection.aggregate([
     console.log(totalCount + " мемов всего. Квота: " + quota)
 
     // Подсчет количества активных пользователей
-    memeCount.forEach((n) => {
-      if (n.count > quota/10)
+    memeCount.forEach((person) => {
+      if (person.count > quota/10)
         activeUsers++
     })
 
-    memeCount.forEach((n) => {
+    memeCount.forEach((person) => {
       // Во сколько раз превышена квота:
       // (колич. астивных человек в конфе * колич. мемов данного человека / мемов всего)
-      quotaTimes = activeUsers*n.count/totalCount
+      quotaTimes = activeUsers*person.count/totalCount
       if (quotaTimes > 1) {
-        dropProb[n._id] = 1 - (1/quotaTimes)
+        dropProb[person._id] = 1 - (1/quotaTimes)
       } else {
-        dropProb[n._id] = 0
+        dropProb[person._id] = 0
       }
-      console.log(n._id + " ["+n.count+"]: " + dropProb[n._id])
+      console.log(person._id + " ["+person.count+"]: " + dropProb[person._id])
     })
   })
 })
@@ -148,6 +148,34 @@ app.get('/score', (req, res) => {
   }
 })
 
+app.get('/stats', async (req, res) => {
+  if (req.session.loggedIn) {
+    answersCollection.aggregate([
+      {
+        '$group': {
+          '_id': '$selected', 
+          'correct': {
+            '$sum': {
+              '$cond': [
+                '$correct', 1, 0
+              ]
+            }
+          }, 
+          'wrong': {
+            '$sum': {
+              '$cond': [
+                '$correct', 0, 1
+              ]
+            }
+          }
+        }
+      }
+    ]).toArray().then(stats => res.status(200).send(stats))
+  } else {
+    res.status(403).send()
+  }
+})
+
 app.get('/options', async (req, res) => {
   if (req.session.loggedIn) {
     res.status(200).send(names)

frontend/src/components/Game.vue

@@ -14,8 +14,9 @@
         </transition>
       </div>
     </div>
-    <Score :score="score" />
+    <Score v-if="card !== null" :score="score" />
     <square-loader v-if="card === null" :color="'#f3f3f3'" class="loader" />
+    <Stats />
   </div>
 </template>
 
@@ -24,6 +25,7 @@ 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 SquareLoader from 'vue-spinner/src/SquareLoader.vue'
 
@@ -33,6 +35,7 @@ export default {
     List,
     Result,
     Score,
+    Stats,
     SquareLoader
   },
   props: {

frontend/src/components/Score.vue

@@ -42,10 +42,10 @@ span {
   div {
     width: 100%;
     position: fixed;
-    height: 1em;
     padding: 0.4em 0px 0.4em 0px;
     bottom: 0px;
     border-radius: 0px;
+    z-index: 100;
   }
 }
 </style>

frontend/src/components/Stats.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <span>🎭 <small>Самый непредсказуемый:</small> <b>{{ mostOriginal }}</b> 🎭</span><br>
+    <span>🪂 <small>Самый стабильный:</small> <b>{{ mostPredictable }}</b> 🪂</span>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Stats',
+  data() {
+    return {
+      stats: {}
+    }
+  },
+  computed: {
+    mostOriginal: function() {
+      let value = 1
+      let returnName
+
+      for (const name in this.stats) {
+        if (this.stats[name] < value) {
+          value = this.stats[name]
+          returnName = name
+        }
+      }
+
+      return returnName
+    },
+    mostPredictable: function() {
+      let value = 0
+      let returnName
+
+      for (const name in this.stats) {
+        if (this.stats[name] > value) {
+          value = this.stats[name]
+          returnName = name
+        }
+      }
+
+      return returnName
+    }
+  },
+  mounted() {
+    axios
+        .get(process.env.VUE_APP_BACKEND + '/stats')
+        .then(response => {
+          response.data.forEach(element => {
+            this.stats[element._id] = element.correct / element.wrong
+          });
+        })
+  }
+}
+</script>
+
+<style scoped>
+div {
+  width: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 2em;
+  padding: 1em;
+  background-color: #121212;
+  border-radius: 7px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+}
+
+@media screen and (max-width: 486px) {
+  div {
+    width: 100%;
+    position: relative;
+    padding: 1em 0px 1em 0px;
+    margin: 1em 0px 0px 0px;
+    border-radius: 17px;
+  }
+}
+</style>