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

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>