Full rewrite, faster, better listing and less code.

- Only list the highscore and send to PersonalHighscorePage on click.
- List numbers are not sequential position in list, but the persons
place in the highscore, allows shared place ranking.
- Filter is a computed value that uses the filterInput, reduces
overhead.
- Stripped unused styling.

src/components/HighscorePage.vue

@@ -1,56 +1,24 @@
 <template>
-  <div>
+  <div class="container">
-    <h1 class="text-center">Vinlottis highscore 🏆🍷</h1>
+    <h1>Vinlottis highscore</h1>
     
-    <div class="content-container">
+    <div class="filter flex el-spacing">
-      <div class="highscore">        
+      <input type="text" v-model="filterInput" placeholder="Filtrer på navn" />
-        <div>
+      <button v-if="filterInput" @click="resetFilter" class="vin-button auto-height margin-left-sm">
-          <h3 >Finn ditt navn:</h3>
+        Reset
-          <input type="text" v-model="highscoreFilter" placeholder="Filtrer på navn" class="margin-bottom-sm" />
+      </button>
-        </div>
+    </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">
+    <p class="highscore-header margin-bottom-md"><b>Plassering.</b> Navn - Antall vinn</p>
-          <i @click="resetFilter" @keyup.space="resetFilter"
-             role="button" aria-pressed="false" tabindex="0">reset filter</i>
-        </div>
-      </div>
 
-      <div class="winners-vines" v-if="selectedWinner">
+    <ol v-if="highscore.length > 0" class="highscore-list">
-        <h1>{{ selectedWinner.name }}</h1>
+      <li v-for="person in filteredResults" @click="selectWinner(person)" @keydown.enter="selectWinner(person)" tabindex="0">
+        <b>{{ person.rank }}.</b>&nbsp;&nbsp;&nbsp;{{ person.name }} - {{ person.wins.length }}
+      </li>
+    </ol>
 
-        <h2>Vinnende farger:</h2>
+    <div class="center desktop-only">
-        <div class="winning-colors">
+      👈 Se dine vin(n), trykk på navnet ditt
-          <div v-for="win in selectedWinner.wins"
-               class="color-box" :class="win.color"
-               :style="{ transform: 'rotate(' + getRotation() + 'deg)' }">
-          </div>
-        </div>
-
-        <h2>Flasker vunnet:</h2>
-        <div v-for="win in selectedWinner.wins" class="single-win">
-          <div class="date-won"><b>{{ humanReadableDate(win.date) }}</b> - {{ daysAgo(win.date) }} dager siden</div>
-          <br/>
-          <div class="left">
-            <h3>Vunnet med:</h3>
-            
-            <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 v-else class="center">
-        <h1>👈 Se dine vinn, trykk på navnet ditt</h1>
-      </div>
     </div>
   </div>
 </template>
@@ -65,10 +33,8 @@ export default {
   components: { Wine },
   data() {
     return {
-      highscoreResponse: [],
       highscore: [],
-      highscoreFilter: '',
+      filterInput: ''
-      selectedWinner: null
     }
   },
   async mounted() {
@@ -79,171 +45,128 @@ export default {
     response = response.filter(
       person => person.name != null && person.name != ""
     );
-    this.highscoreResponse = response
+    this.highscore = this.generateScoreBoard(response);
-    this.highscore = this.highscoreResponse;
   },
-  watch: {
+  computed: {
-    highscoreFilter(val) {
+    filteredResults() {
+      let highscore = this.highscore;
+      let val = this.filterInput;
+
       if (val.length) {
-        val = val.toLowerCase();
+        const nameIncludesString = (person) => person.name.toLowerCase().includes(val);
-        this.highscore = this.highscoreResponse.filter(person => person.name.toLowerCase().includes(val))
+        highscore = highscore.filter(nameIncludesString)
-      } else {
-        this.highscore = this.highscoreResponse
       }
+
+      return highscore
     }
   },
   methods: {
-    humanReadableDate: humanReadableDate,
+    generateScoreBoard(highscore=this.highscore) {
-    daysAgo: daysAgo,
+      let place = 0;
+      let highestWinCount = -1;
+
+      return highscore.map(win => {
+        const wins = win.wins.length
+        if (wins != highestWinCount) {
+          place += 1
+          highestWinCount = wins
+        }
+
+        const placeString = place.toString().padStart(2, "0");
+        win.rank = placeString;
+        return win
+      })
+    },
     resetFilter() {
-      this.highscore = this.highscoreResponse;
+      this.filterInput = '';
-      this.highscoreFilter = '';
       document.getElementsByTagName('input')[0].focus();
     },
     selectWinner(winner) {
-      if (this.selectedWinner != null && this.selectedWinner["name"] == winner["name"]) {
+      const path = "/highscore/" + encodeURIComponent(winner.name)
-        this.selectedWinner = null;
+      this.$router.push(path);
-      } else {
-        let newestFirst = winner.wins.sort((a, b) => a.date < b.date);
-        winner.wins = newestFirst;
-        this.selectedWinner = { ...winner };
-      }
     },
-    getRotation: function() {
+    humanReadableDate: humanReadableDate,
-      let num = Math.floor(Math.random() * 12.5);
+    daysAgo: daysAgo
-      let neg = Math.floor(Math.random() * 2);
-      return neg == 0 ? -num : num;
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
+@import "./src/styles/media-queries.scss";
-@import "../styles/variables.scss";
+@import "./src/styles/variables.scss";
+$elementSpacing: 3.5rem;
+
+.el-spacing {
+  margin-bottom: $elementSpacing;
+}
+
+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  max-width: 1200px;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+
+  @include desktop {
+    width: 80vw;
+  }
+}
 
 h1 {
-  text-align: center;
+  font-size: 3rem;
+  font-family: "knowit";
+  color: $matte-text-color;
+  font-weight: normal;
 }
 
-input[type="text"] {
+.filter input {
-    width: 100%;
+  font-size: 1rem;
-    color: black;
+  width: 30%;
-    border-radius: 4px;
+  border-color: black;
-    padding: 1rem 1rem;
+  border-width: 1.5px;
-    border: 1px solid black;
+  padding: 0.75rem 1rem;
-    max-width: 200px;
 }
 
-.date-won {
+.highscore-header {
+  margin-bottom: 2rem;
   font-size: 1.3rem;
-  margin-top: 2rem;
+  color: $matte-text-color;
 }
 
-.color-box {
+.highscore-list {
-  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;
-  }
-}
-
-.single-win {
-  border-bottom: 1px solid rgb(237, 237, 237);
-  .left {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.green {
-  background-color: $light-green;
-}
-
-.blue {
-  background-color: $light-blue;
-}
-
-.yellow {
-  background-color: $light-yellow;
-}
-
-.red {
-  background-color: $light-red;
-}
-
-.content-container {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
-  margin: 2em;
+  padding-left: 0;
 
-  .center {
+  li {
-    align-self: center;
+    width: intrinsic;
-    h1 {
+    display: inline-block;
-      background-color: $primary;
+    margin-bottom: calc(1rem - 2px);
-      padding: 0.5rem 1rem;
+    font-size: 1.25rem;
-      border-radius: 8px;
+    color: $matte-text-color;
-      font-style: italic;
+    cursor: pointer;
+
+    border-bottom: 2px solid transparent;
+    &:hover, &:focus {
+      border-color: $link-color;
     }
   }
-
-  .winning-colors {
-    display: flex;
-  }
-
-  @include mobile {
-    .center {
-      display: none;
-    }
-  }
-
-  @include tablet {
-    display: grid;
-    grid-template-columns: .3fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    justify-items: center;
-    width: 80%;
-    margin: auto;
-    grid-gap: 1em;
-    max-width: 1600px;
-  }
 }
 
-ol {
+.center {
-  padding-left: 1.375rem !important;
+  position: absolute;
-  margin-left: 0;
+  top: 40%;
-  margin: 0 0 1.5em;
+  right: 10vw;
-  padding: 0;
+  max-width: 50vw;
-  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 {
+  font-size: 2.5rem;
-      padding: 5px 0;
+  background-color: $primary;
-    }
+  padding: 1rem 1rem;
+  border-radius: 8px;
+  font-style: italic;
+
+  @include widescreen {
+    right: 20vw;
   }
 }
 </style>