Merge pull request #30 from KevinMidboe/feat/highscore-page

Feat/highscore page

src/components/HighscorePage.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <h1 class="text-center">Vinlottis highscore 🏆🍷</h1>
+    
+    <div class="flex row">
+      <div class="highscore">        
+        <div class="flex column">
+          <h3 class="margin-bottom-0">Finn ditt navn:</h3>
+          <input v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" />
+        </div>
+        
+        <ol v-if="highscore.length > 0">
+          <li v-for="person in highscore" :key="person" @click="selectWinner(person)">
+            {{ person.name }} - {{ person.wins.length }}
+          </li>
+        </ol>
+
+        <div v-if="highscore.length != highscoreResponse.length" class="flex justify-center align-center">
+          <i class="text-center vin-link cursor-pointer" @click="resetFilter" @keyup.space="resetFilter"
+             role="button" aria-pressed="false" tabindex="0">reset filter</i>
+        </div>
+      </div>
+
+      <div class="winners-vines" v-if="selectedWinner">
+        <h1>{{ selectedWinner.name }}</h1>
+
+        <h2 class="margin-bottom-sm">Vinnende farger:</h2>
+        <div class="flex row wrap">
+          <div v-for="win in selectedWinner.wins"
+               class="color-box" :class="win.color"
+               :style="{ transform: 'rotate(' + getRotation() + 'deg)' }">
+          </div>
+        </div>
+
+        <h2 class="margin-top-md margin-bottom-0">Flasker vunnet:</h2>
+        <div class="flex column wrap">
+          <div v-for="win in selectedWinner.wins">
+            <div class="date-won"><b>{{ humanReadableDate(win.date) }}</b> - {{ daysAgo(win.date) }} dager siden</div>
+            <br/>
+            <div class="left">
+              <div class="margin-bottom-md"><b>Vunnet med farge:</b></div>
+              
+              <div class="color-box" :class="win.color"
+                   :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"></div>
+            </div>
+            <div class="left">
+              <Wine :wine="win.wine"></Wine>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="center">
+        <h1>👈 Se dine vinn, tykk på navnet ditt</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { highscoreStatistics } from "@/api";
+import Wine from "@/ui/Wine";
+
+export default {
+  components: { Wine },
+  data() {
+    return {
+      highscoreResponse: [],
+      highscore: [],
+      highscoreFilter: '',
+      selectedWinner: null
+    }
+  },
+  async mounted() {
+    let response = await highscoreStatistics();
+    response.sort((a, b) => {
+      return a.wins.length > b.wins.length ? -1 : 1;
+    });
+    response = response.filter(
+      person => person.name != null && person.name != ""
+    );
+    this.highscoreResponse = response
+    this.highscore = this.highscoreResponse;
+  },
+  watch: {
+    highscoreFilter(val) {
+      if (val.length) {
+        this.highscore = this.highscoreResponse.filter(person => person.name.toLowerCase().includes(val))
+      } else {
+        this.highscore = this.highscoreResponse
+      }
+    }
+  },
+  methods: {
+    resetFilter() {
+      this.highscore = this.highscoreResponse;
+      this.highscoreFilter = '';
+      document.getElementsByTagName('input')[0].focus();
+    },
+    humanReadableDate(date) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' };
+      return new Date(date).toLocaleDateString(undefined, options);
+    },
+    daysAgo(date) {
+      const day = 24 * 60 * 60 * 1000;
+      return Math.round(Math.abs((new Date() - new Date(date)) / day));
+    },
+    selectWinner(winner) {
+      if (this.selectedWinner != null && this.selectedWinner["name"] == winner["name"]) {
+        this.selectedWinner = null;
+      } else {
+        let newestFirst = winner.wins.sort((a, b) => a.date < b.date);
+        winner.wins = newestFirst;
+        this.selectedWinner = { ...winner };
+      }
+    },
+    getRotation: function() {
+      let num = Math.floor(Math.random() * 12.5);
+      let neg = Math.floor(Math.random() * 2);
+      return neg == 0 ? -num : num;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+@import "../styles/variables.scss";
+
+h1 {
+  text-align: center;
+}
+
+.highscore {
+  width: max-content;
+  margin: 2rem;
+}
+
+.winners-vines {
+  margin: 2rem;
+}
+
+
+.left {
+  float: left;
+}
+
+.center {
+  background-color: $primary;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-style: italic;
+
+  @include desktop {
+    align-self: flex-start;
+    margin-top: 20vh;
+  }
+}
+
+
+.date-won {
+  font-size: 1.3rem;
+  margin-top: 2rem;
+}
+
+.color-box {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @include mobile {
+    width: 60px;
+    height: 60px;
+    margin: 10px;
+  }
+}
+
+.green {
+  background-color: $light-green;
+}
+
+.blue {
+  background-color: $light-blue;
+}
+
+.yellow {
+  background-color: $light-yellow;
+}
+
+.red {
+  background-color: $light-red;
+}
+
+div {
+  font-family: Arial;
+}
+
+ol {
+  padding-left: 1.375rem !important;
+  margin-left: 0;
+  margin: 0 0 1.5em;
+  padding: 0;
+  counter-reset: item;
+  & > li {
+    cursor: pointer;
+    padding: 2.5px 0;
+    width: max-content;
+    margin: 0 0 0 -1.25rem;
+    padding: 0;
+    list-style-type: none;
+    counter-increment: item;
+    &:before {
+      display: inline-block;
+      width: 1em;
+      padding-right: 0.5rem;
+      font-weight: bold;
+      text-align: right;
+      content: counter(item) ".";
+    }
+
+    @include mobile {
+      padding: 5px 0;
+    }
+  }
+}
+</style>

src/router.js

@@ -11,6 +11,7 @@ import AdminPage from "@/components/AdminPage";
 import WinnerPage from "@/components/WinnerPage";
 import LotteryPage from "@/components/LotteryPage";
 import HistoryPage from "@/components/HistoryPage";
+import HighscorePage from "@/components/HighscorePage";
 
 import RequestWine from "@/components/RequestWine";
 import AllRequestedWines from "@/components/AllRequestedWines";
@@ -56,6 +57,10 @@ const routes = [
     path: "/history",
     component: HistoryPage
   },
+  {
+    path: "/highscore",
+    component: HighscorePage
+  },
   {
     path: "/request",
     component: RequestWine

src/styles/global.scss

@@ -157,6 +157,44 @@ textarea {
   }
 }
 
+
+.cursor {
+  &-pointer {
+    cursor: pointer;
+  }
+}
+
+.text-center {
+  text-align: center;
+}
+
+.vin-link {
+  font-weight: bold;
+  border-bottom: 1px solid #ff5fff;
+  font-size: 1rem;
+  margin-left: 15px;
+}
+
+
+.margin-top {
+  &-md {
+    margin-top: 3rem;
+  }
+}
+
+.margin-bottom {
+  &-md {
+    margin-bottom: 3rem;
+  }
+  &-sm {
+    margin-bottom: 1rem;
+  }
+  &-0 {
+    margin-bottom: 0;
+  }
+}
+
+
 .no-margin {
   margin: 0 !important;
 }

src/styles/positioning.scss

@@ -1,7 +1,23 @@
 .flex {
   display: flex;
 
-  &-column {
+  & .column {
     flex-direction: column;
   }
+
+  & .row {
+    flex-direction: row;
+  }
+
+  & .wrap {
+    flex-wrap: wrap;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.align-center {
+    align-items: center;
+  }
 }

src/ui/Highscore.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="highscores" v-if="highscore.length > 0">
-    <h3>Topp 10 vinnere</h3>
+    <h3>
+      <router-link to="highscore">
+        Topp 10 vinnere <span class="vin-link">Se alle &gt;</span>
+      </router-link>
+    </h3>
     <ol>
       <li v-for="person in highscore" :key="person">
         {{ person.name }} - {{ person.wins.length }}
@@ -39,6 +43,22 @@ div {
   flex-direction: column;
 }
 
+h3 {
+  text-align: left;
+
+  & a {
+    text-decoration: none;
+    color: #333333;
+
+    &:focus,
+    &:active,
+    &:visited {
+      text-decoration: none;
+      color: #333333;
+    }
+  }
+}
+
 ol {
   padding-left: 1.375rem !important;
   margin-left: 0;

src/ui/Wines.vue

@@ -2,7 +2,7 @@
   <div v-if="wines.length > 0">
     <h3>
       <router-link to="viner"
-        >Topp 10 viner <span class="link">Se alle &gt;</span></router-link
+        >Topp 10 viner <span class="vin-link">Se alle &gt;</span></router-link
       >
     </h3>
     <ol>
@@ -185,13 +185,6 @@ export default {
   }
 }
 
-.link {
-  font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
-  font-size: 1rem;
-  margin-left: 15px;
-}
-
 .close-modal {
   position: absolute;
   top: 10px;