Merge branch 'master' into refactor/ballot-becomes-raffle

api/lottery.js

@@ -6,53 +6,61 @@ const Wine = require(path.join(__dirname + '/../schemas/Wine'));
 // Utils
 const epochToDateString = date => new Date(parseInt(date)).toDateString();
 
-const getHighscoreByDates = highscore => {
+const sortNewestFirst = (lotteries) => {
-  let groupedLotteries = {}
+  return lotteries.sort((a, b) => parseInt(a.date) < parseInt(b.date) ? 1 : -1)
+}
 
-  highscore.forEach(user => {
+const groupHighscoreByDate = async (highscore=undefined) => {
-    user.wins.map(win => {
+  if (highscore == undefined)
+    highscore = await Highscore.find();
+
+  const highscoreByDate = [];
+
+  highscore.forEach(person => {
+    person.wins.map(win => {
       const epochDate = new Date(win.date).setHours(0,0,0,0);
-      const obj = {
+      const winnerObject = {
-        name: user.name,
+        name: person.name,
         color: win.color,
         wine: win.wine,
         date: epochDate
       }
 
-      groupedLotteries[epochDate] ?
+      const existingDateIndex = highscoreByDate.findIndex(el => el.date == epochDate)
-        groupedLotteries[epochDate].push(obj) : groupedLotteries[epochDate] = [obj];
+      if (existingDateIndex > -1)
+        highscoreByDate[existingDateIndex].winners.push(winnerObject);
+      else
+        highscoreByDate.push({
+          date: epochDate,
+          winners: [winnerObject]
+        })
     })
   })
 
-  return groupedLotteries
+  return sortNewestFirst(highscoreByDate);
 }
 
-const groupedHighscoreToSortedList = groupedLotteries => {
+const resolveWineReferences = (highscoreObject, key) => {
-  return Object.keys(groupedLotteries).map(key => {
+  const listWithWines = highscoreObject[key]
-    const winners = groupedLotteries[key];
-    return {
-      date: parseInt(key),
-      dateString: epochToDateString(key),
-      winners
-    }
-  }).sort((a,b) => parseInt(a.date) > parseInt(b.date) ? 1 : -1) 
-}
 
-const resolveWineReferences = listWithWines => {
   return Promise.all(listWithWines.map(element =>
-    Wine.findById(element.wine)
+      Wine.findById(element.wine)
-      .then(wine => {
+        .then(wine => {
-        element.wine = wine
+          element.wine = wine
-        return element
+          return element
-      })
+        }))
-  ))
+    )
+    .then(resolvedListWithWines => {
+      highscoreObject[key] = resolvedListWithWines;
+      return highscoreObject
+    })
 }
+// end utils
 
 // Routes
 const all = (req, res) => {
   return Highscore.find()
-    .then(highscore => getHighscoreByDates(highscore))
+    .then(highscore => groupHighscoreByDate(highscore))
-    .then(groupedLotteries => groupedHighscoreToSortedList(groupedLotteries))
     .then(lotteries => res.send({
       message: "Lotteries by date!",
       lotteries
@@ -60,56 +68,60 @@ const all = (req, res) => {
 }
 
 const latest = (req, res) => {
-  return Highscore.find()
+  return groupHighscoreByDate()
-    .then(highscore => getHighscoreByDates(highscore))
+    .then(lotteries => lotteries.shift())
-    .then(groupedLotteries => groupedHighscoreToSortedList(groupedLotteries))
+    .then(latestLottery => resolveWineReferences(latestLottery, "winners"))
-    .then(lotteries => res.send({
+    .then(lottery => res.send({
-      message: "Latest lottery!",
+        message: "Latest lottery!",
-      lottery: lotteries.slice(-1).pop()
+        winners: lottery.winners
-    }))
+      })
+    )
 }
 
 const byEpochDate = (req, res) => {
-  const { date } = req.params;
+  let { date } = req.params;
+  date = new Date(new Date(parseInt(date)).setHours(0,0,0,0)).getTime()
   const dateString = epochToDateString(date);
 
-  return Highscore.find()
+  return groupHighscoreByDate()
-    .then(highscore => getHighscoreByDates(highscore))
+    .then(lotteries => {
-    .then(async (lotteries) => {
+      const lottery = lotteries.filter(lottery => lottery.date == date)
-      const lottery = lotteries[date];
+      if (lottery.length > 0) {
-
+        return lottery[0]
-      if (lottery != null) {
-        return res.send({
-          message: `Lottery for date: ${dateString}`,
-          lottery: await resolveWineReferences(lottery)
-        })
       } else {
         return res.status(404).send({
-          message: `No lottery found for date: ${dateString}`
+          message: `No lottery found for date: ${ dateString }`
         })
       }
     })
+    .then(lottery => resolveWineReferences(lottery, "winners"))
+    .then(lottery => res.send({
+      message: `Lottery for date: ${ dateString}`,
+      date,
+      winners: lottery.winners
+    }))
 }
 
 const byName = (req, res) => {
   const { name } = req.params;
+  const regexName = new RegExp(name, "i"); // lowercase regex of the name
 
   return Highscore.find({ name })
-    .then(async (highscore) => {
+    .then(highscore => {
-      highscore = highscore[0]
+      if (highscore.length > 0) {
-      if (highscore) {
+        return highscore[0]
-        const highscoreWithResolvedWines = await resolveWineReferences(highscore.wins)
-
-        return res.send({
-          message: `Lottery winnings by name: ${name}`,
-          highscore: highscoreWithResolvedWines
-         })
       } else {
         return res.status(404).send({
           message: `Name: ${ name } not found in leaderboards.`
         })
       }
     })
+    .then(highscore => resolveWineReferences(highscore, "wins"))
+    .then(highscore => res.send({
+      message: `Lottery winnings for name: ${ name }.`,
+      name: highscore.name,
+      wins: highscore.wins
+    }))
 }
 
 module.exports = {

api/message.js

@@ -7,7 +7,7 @@ async function sendWineSelectMessage(winnerObject) {
   winnerObject.timestamp_limit = new Date().getTime() * 600000;
   await winnerObject.save();
 
-  let url = new URL(`/#/winner/${winnerObject.id}`, "https://lottis.vin");
+  let url = new URL(`/winner/${winnerObject.id}`, "https://lottis.vin");
 
   return sendMessageToUser(
     winnerObject.phoneNumber,

api/update.js

@@ -35,7 +35,7 @@ const submitWines = async (req, res) => {
     const message = JSON.stringify({
       message: "Dagens vin er lagt til, se den på lottis.vin/dagens!",
       title: "Ny vin!",
-      link: "/#/dagens"
+      link: "/dagens"
     });
 
     try {

src/api.js

@@ -333,6 +333,18 @@ const historyAll = () => {
   });
 }
 
+const historyByDate = (date) => {
+  const url = new URL(`/api/lottery/by-date/${ date }`, BASE_URL);
+
+  return fetch(url.href).then(resp => {
+    if (resp.ok) {
+      return resp.json();
+    } else {
+      return handleErrors(resp);
+    }
+  });
+}
+
 export {
   statistics,
   colorStatistics,
@@ -364,5 +376,6 @@ export {
   finishedDraw,
   getAmIWinner,
   postWineChosen,
-  historyAll
+  historyAll,
+  historyByDate
 };

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">
+    <p class="highscore-header margin-bottom-md"><b>Plassering.</b> Navn - Antall vinn</p>
-          <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">
+    <ol v-if="highscore.length > 0" class="highscore-list">
-          <i @click="resetFilter" @keyup.space="resetFilter"
+      <li v-for="person in filteredResults" @click="selectWinner(person)" @keydown.enter="selectWinner(person)" tabindex="0">
-             role="button" aria-pressed="false" tabindex="0">reset filter</i>
+        <b>{{ person.rank }}.</b>&nbsp;&nbsp;&nbsp;{{ person.name }} - {{ person.wins.length }}
-        </div>
+      </li>
-      </div>
+    </ol>
 
-      <div class="winners-vines" v-if="selectedWinner">
+    <div class="center desktop-only">
-        <h1>{{ selectedWinner.name }}</h1>
+      👈 Se dine vin(n), trykk på navnet ditt
-
-        <h2>Vinnende farger:</h2>
-        <div class="winning-colors">
-          <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 vin(n), trykk på navnet ditt</h1>
-      </div>
     </div>
   </div>
 </template>
@@ -58,16 +26,15 @@
 <script>
 
 import { highscoreStatistics } from "@/api";
+import { humanReadableDate, daysAgo } from "@/utils";
 import Wine from "@/ui/Wine";
 
 export default {
   components: { Wine },
   data() {
     return {
-      highscoreResponse: [],
       highscore: [],
-      highscoreFilter: '',
+      filterInput: ''
-      selectedWinner: null
     }
   },
   async mounted() {
@@ -78,177 +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: {
+    generateScoreBoard(highscore=this.highscore) {
+      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();
     },
-    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"]) {
+      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>

src/components/HistoryPage.vue

@@ -2,14 +2,15 @@
   <div>
     <h1>Historie fra tidligere lotteri</h1>
 
-    <div v-if="lotteries.length" v-for="lottery in lotteries">
+    <div v-if="lotteries.length || lotteries != null" v-for="lottery in lotteries">
-      <Winners :winners="lottery.winners" :title="`Vinnere fra ${lottery.dateString}`" />
+      <Winners :winners="lottery.winners" :title="`Vinnere fra ${ humanReadableDate(lottery.date) }`" />
     </div>
   </div>
 </template>
 
 <script>
-import { historyAll } from '@/api'
+import { historyByDate, historyAll } from '@/api'
+import { humanReadableDate } from "@/utils";
 import Winners from '@/ui/Winners'
 
 export default {
@@ -20,9 +21,18 @@ export default {
       lotteries: [],
     }
   },
+  methods: {
+    humanReadableDate: humanReadableDate
+  },
   created() {
-    historyAll()
+    const dateFromUrl = this.$route.params.date;
-      .then(history => this.lotteries = history.lotteries.reverse())
+
+    if (dateFromUrl !== undefined)
+      historyByDate(dateFromUrl)
+        .then(history => this.lotteries = { "lottery": history })
+    else
+      historyAll()
+        .then(history => this.lotteries = history.lotteries)
   }
 }
 </script>

src/components/PersonalHighscorePage.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="container">
+    <h1>Vinlottis highscore</h1>
+
+    <div class="backdrop">
+      <a @click="navigateBack" @keydown.enter="navigateBack" tabindex="0">
+        ⬅ <span class="vin-link navigate-back">Tilbake til {{ previousRoute.name }}</span>
+      </a>
+
+      <section v-if="winner">
+        <h2 class="name">{{ winner.name }}</h2>
+
+        <p class="win-count el-spacing">{{ numberOfWins }} vinn</p>
+
+        <h4 class="margin-bottom-0">Vinnende farger:</h4>
+        <div class="raffle-container el-spacing">
+          <div class="raffle-element" :class="color + `-raffle`" v-for="[color, occurences] in Object.entries(winningColors)">
+            {{ occurences }}
+          </div>
+        </div>
+
+        <h4 class="el-spacing">Flasker vunnet:</h4>
+
+        <div v-for="win in winner.highscore">
+          <router-link :to="winDateUrl(win.date)" class="days-ago">
+            {{ humanReadableDate(win.date) }} - {{ daysAgo(win.date) }} dager siden
+          </router-link>
+          
+          <div class="won-wine">
+            <img :src="smallerWineImage(win.wine.image)">
+
+            <div class="won-wine-details">
+              <h3>{{ win.wine.name }}</h3>
+              <a :href="win.wine.vivinoLink" class="vin-link no-margin">
+                Les mer på vinmonopolet.no
+              </a>
+            </div>
+
+            <div class="raffle-element small" :class="win.color + `-raffle`"></div>
+          </div>
+        </div>
+      </section>
+
+      <h2 v-else-if="error" class="error">
+        {{ error }}
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getWinnerByName } from "@/api";
+import { humanReadableDate, daysAgo } from "@/utils";
+
+export default {
+  data() {
+    return {
+      winner: undefined,
+      error: undefined,
+      previousRoute: {
+        default: true,
+        name: "topplisten",
+        path: "/highscore"
+      }
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      if (from.name !== null)
+        vm.previousRoute = from
+    })
+  },
+  computed: {
+    numberOfWins() {
+      return this.winner.highscore.length
+    }
+  },
+  created() {
+    const nameFromURL = this.$route.params.name;
+    getWinnerByName(nameFromURL)
+      .then(winner => this.setWinner(winner))
+      .catch(err => this.error = `Ingen med navn: "${nameFromURL}" funnet.`)
+  },
+  methods: {
+    setWinner(winner) {
+      this.winner = {
+        name: winner.name,
+        highscore: [],
+        ...winner
+      }
+      this.winningColors = this.findWinningColors()
+    },
+    smallerWineImage(image) {
+      if (image && image.includes(`515x515`))
+        return image.replace(`515x515`, `175x175`)
+      return image
+    },
+    findWinningColors() {
+      const colors = this.winner.highscore.map(win => win.color)
+      const colorOccurences = {}
+      colors.forEach(color => {
+        if (colorOccurences[color] == undefined) {
+          colorOccurences[color] = 1
+        } else {
+          colorOccurences[color] += 1
+        }
+      })
+      return colorOccurences
+    },
+    winDateUrl(date) {
+      const timestamp = new Date(date).getTime();
+      return `/history/${timestamp}`
+    },
+    navigateBack() {
+      if (this.previousRoute.default) {
+        this.$router.push({ path: this.previousRoute.path });
+      } else {
+        this.$router.go(-1);
+      }
+    },
+    humanReadableDate: humanReadableDate,
+    daysAgo: daysAgo
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/styles/variables";
+@import "./src/styles/media-queries";
+
+$elementSpacing: 3rem;
+
+.el-spacing {
+  margin-bottom: $elementSpacing;
+}
+
+.navigate-back {
+  font-weight: normal;
+  font-size: 1.2rem;
+  border-width: 2px;
+  border-color: gray;
+}
+
+.container {
+  width: 90vw;  
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+  max-width: 1200px;
+
+  @include desktop {
+    width: 80vw;
+  }
+}
+
+h1 {
+  font-size: 3rem;
+  font-family: "knowit";
+  font-weight: normal;
+}
+
+.name {
+  text-transform: capitalize;
+  font-size: 3.5rem;
+  font-family: "knowit";
+  font-weight: normal;
+  margin: 2rem 0 1rem 0;
+}
+
+.error {
+  font-size: 2.5rem;
+  font-weight: normal;
+}
+
+.win-count {
+  font-size: 1.5rem;
+  margin-top: 0;
+}
+
+.raffle-container {
+  display: flex;
+  margin-top: 1rem;
+
+  div:not(:last-of-type) {
+    margin-right: 1.5rem;
+  }
+}
+.raffle-element {
+  width: 5rem;
+  height: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  margin-top: 0;
+
+  &.small {
+    height: 40px;
+    width: 40px;
+  }
+}
+
+.days-ago {
+  color: $matte-text-color;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-color: $link-color;
+  }
+}
+
+.won-wine {
+  --spacing: 1rem;
+  background-color: white;
+  margin: var(--spacing) 0 3rem 0;
+  padding: var(--spacing);
+
+  position: relative;
+
+  @include desktop {
+    flex-direction: row;
+  }
+
+  img {
+    margin: 0 3rem;
+    height: 160px;
+  }
+
+  &-details {
+    vertical-align: top;
+    display: inline-block;
+
+    @include tablet {
+      width: calc(100% - 160px - 80px);
+    }
+    
+    & > * {
+      width: 100%;
+    }
+
+    h3 {
+      font-size: 1.5rem;
+      font-weight: normal;
+      color: $matte-text-color;
+    }
+
+    a {
+      font-size: 1.2rem;
+      border-width: 2px;
+      font-weight: normal;
+    }
+  }
+
+  .raffle-element {
+    position: absolute;
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    margin: 0;
+  }
+}
+
+
+.backdrop {
+  $background: rgb(244,244,244);
+  
+  --padding: 2rem;
+  @include desktop {
+    --padding: 5rem;
+  }
+  background-color: $background;
+  padding: var(--padding);
+}
+</style>

src/components/TodaysPage.vue

@@ -11,6 +11,7 @@
 
 <script>
 import { page, event } from "vue-analytics";
+import { prelottery } from "@/api";
 import Banner from "@/ui/Banner";
 import Wine from "@/ui/Wine";
 
@@ -25,8 +26,7 @@ export default {
     };
   },
   async mounted() {
-    const _wines = await fetch("/api/wines/prelottery");
+    prelottery().then(wines => this.wines = wines);
-    this.wines = await _wines.json();
   }
 };
 </script>

src/components/VinlottisPage.vue

@@ -13,7 +13,7 @@
           />
       </section>
       <div class="to-lottery-container">
-        <a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
+        <router-link to="/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></router-link>
       </div>
       <section class="chart-container">
         <PurchaseGraph class="purchase" />

src/components/WinnerPage.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { getAmIWinner, postWineChosen } from "@/api";
+import { getAmIWinner, postWineChosen, prelottery } from "@/api";
 import Wine from "@/ui/Wine";
 export default {
   components: { Wine },
@@ -60,8 +60,7 @@ export default {
     }
     this.turn = true;
     this.name = winnerObject.name;
-    const _wines = await fetch("/api/wines/prelottery");
+    this.wines = await prelottery();
-    this.wines = await _wines.json();
   },
   methods: {
     chosenWine: async function(name) {

src/router.js

@@ -1,3 +1,5 @@
+import VueRouter from "vue-router";
+
 import VinlottisPage from "@/components/VinlottisPage";
 import GeneratePage from "@/components/GeneratePage";
 import TodaysPage from "@/components/TodaysPage";
@@ -12,6 +14,7 @@ import WinnerPage from "@/components/WinnerPage";
 import LotteryPage from "@/components/LotteryPage";
 import HistoryPage from "@/components/HistoryPage";
 import HighscorePage from "@/components/HighscorePage";
+import PersonalHighscorePage from "@/components/PersonalHighscorePage";
 
 import RequestWine from "@/components/RequestWine";
 import AllRequestedWines from "@/components/AllRequestedWines";
@@ -19,30 +22,37 @@ import AllRequestedWines from "@/components/AllRequestedWines";
 const routes = [
   {
     path: "*",
+    name: "Hjem",
     component: VinlottisPage
   },
   {
     path: "/lottery",
+    name: "Lotteri",
     component: LotteryPage
   },
   {
     path: "/dagens",
+    name: "Dagens vin",
     component: TodaysPage
   },
   {
     path: "/viner",
+    name: "Alle viner",
     component: AllWinesPage
   },
   {
     path: "/login",
+    name: "Login",
     component: LoginPage
   },
   {
     path: "/create",
+    name: "Registrer",
     component: CreatePage
   },
   {
     path: "/admin",
+    name: "Admin",
     component: AdminPage
   },
   {
@@ -54,21 +64,40 @@ const routes = [
     component: WinnerPage
   },
   {
-    path: "/history",
+    path: "/history/:date",
+    name: "Historie for dato",
     component: HistoryPage
   },
+  {
+    path: "/history/",
+    name: "Historie",
+    component: HistoryPage
+  },
+  {
+    path: "/highscore/:name",
+    name: "Personlig toppliste",
+    component: PersonalHighscorePage
+  },
   {
     path: "/highscore",
+    name: "Topplisten",
     component: HighscorePage
   },
   {
     path: "/request",
+    name: "Etterspør vin",
     component: RequestWine
   },
   {
     path: "/requested-wines",
+    name: "Etterspurte viner",
     component: AllRequestedWines
   }
 ];
 
-export { routes };
+const router = new VueRouter({
+  routes: routes,
+  mode: "history"
+});
+
+export default router;

src/styles/global.scss

@@ -18,6 +18,10 @@ body {
   margin: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
 .title {
   text-align: center;
   width: fit-content;
@@ -129,6 +133,15 @@ textarea {
   // disable-dbl-tap-zoom
   touch-action: manipulation;
 
+  &.auto-height {
+    height: auto;
+  }
+
+  &.danger {
+    background-color: $red;
+    color: white;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -172,7 +185,14 @@ textarea {
   font-weight: bold;
   border-bottom: 1px solid $link-color;
   font-size: 1rem;
-  margin-left: 15px;
+  cursor: pointer;
+
+  text-decoration: none;
+  color: $matte-text-color;
+
+  &:focus, &:hover {
+    border-color: $link-color;
+  }
 }
 
 
@@ -180,8 +200,35 @@ textarea {
   &-md {
     margin-top: 3rem;
   }
+  &-sm {
+    margin-top: 1rem;
+  }
+  &-0 {
+    margin-top: 0;
+  }
+}
+.margin-left {
+  &-md {
+    margin-left: 3rem;
+  }
+  &-sm {
+    margin-left: 1rem;
+  }
+  &-0 {
+    margin-left: 0;
+  }
+}
+.margin-right {
+  &-md {
+    margin-right: 3rem;
+  }
+  &-sm {
+    margin-right: 1rem;
+  }
+  &-0 {
+    margin-right: 0;
+  }
 }
-
 .margin-bottom {
   &-md {
     margin-bottom: 3rem;
@@ -224,3 +271,15 @@ textarea {
     background-color: $light-red;
   }
 }
+
+.desktop-only {
+  @include mobile {
+    display: none;
+  }
+}
+
+.mobile-only {
+  @include desktop {
+    display: none;
+  }
+}

src/styles/media-queries.scss

@@ -1,6 +1,6 @@
 $mobile-width: 768px;
 $tablet-max: 1200px;
-$desktop-max: 1704;
+$desktop-max: 2004px;
 
 
 @mixin mobile {
@@ -15,7 +15,6 @@ $desktop-max: 1704;
   }
 }
 
-
 @mixin desktop {
   @media (min-width: #{$tablet-max + 1px}) {
     @content;

src/styles/positioning.scss

@@ -1,23 +1,46 @@
 .flex {
   display: flex;
 
-  & .column {
+  &.column {
     flex-direction: column;
   }
 
-  & .row {
+  &.row {
     flex-direction: row;
   }
 
-  & .wrap {
+  &.wrap {
     flex-wrap: wrap;
   }
 
   &.justify-center {
     justify-content: center;
   }
+  &.justify-space-between {
+    justify-content: space-between;
+  }
+  &.justify-end {
+    justify-content: flex-end;
+  }
+  &.justify-start {
+    justify-content: flex-start;
+  }
 
   &.align-center {
     align-items: center;
   }
 }
+
+.inline-block {
+  display: inline-block;
+}
+
+.float {
+  &-left {
+    float: left;
+  }
+
+  &-right {
+    float: right;
+  }
+}

src/styles/variables.scss

@@ -1,4 +1,4 @@
-$primary: #dbeede;
+$primary: #b7debd;
 
 $light-green: #c8f9df;
 $green: #0be881;
@@ -17,3 +17,5 @@ $red: #ef5878;
 $dark-red: #ec3b61;
 
 $link-color: #ff5fff;
+
+$matte-text-color: #333333;

src/ui/Winners.vue

@@ -2,8 +2,10 @@
   <div>
     <h2 v-if="winners.length > 0"> {{ title ? title : 'Vinnere' }}</h2>
     <div class="winners" v-if="winners.length > 0">
-      <div class="winner" v-for="(winner, index) in winners" :key="index">
+      <div v-for="(winner, index) in winners" :key="index">
-        <div :class="winner.color + '-raffle'" class="raffle-element">{{ winner.name }}</div>
+        <router-link :to="`/highscore/${ encodeURIComponent(winner.name) }`">
+          <div :class="winner.color + '-raffle'" class="raffle-element">{{ winner.name }}</div>
+        </router-link>
       </div>
     </div>
   </div>

src/utils.js

@@ -7,6 +7,18 @@ const dateString = (date) => {
   return `${ye}-${mo}-${da}`
 }
 
-module.exports = {
+function humanReadableDate(date) {
-  dateString
+  const options = { year: 'numeric', month: 'long', day: 'numeric' };
+  return new Date(date).toLocaleDateString(undefined, options);
+}
+
+function daysAgo(date) {
+  const day = 24 * 60 * 60 * 1000;
+  return Math.round(Math.abs((new Date() - new Date(date)) / day));
+}
+
+module.exports = {
+  dateString,
+  humanReadableDate,
+  daysAgo
 }

src/vinlottis-init.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import { routes } from "@/router.js";
+import VinlottisRouter from "@/router.js";
 import Vinlottis from "@/Vinlottis";
 import VueAnalytics from "vue-analytics";
 
@@ -9,13 +9,9 @@ Vue.use(VueAnalytics, {
   id: "UA-156846886-1"
 });
 
-const router = new VueRouter({
-  routes: routes
-});
-
 new Vue({
   el: "#app",
-  router,
+  router: VinlottisRouter,
   components: { Vinlottis },
   template: "<Vinlottis/>",
   render: h => h(Vinlottis)