KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Resolved merged conflict bc stupid linter.

Browse Source
This commit is contained in:
Kevin
2020-01-24 10:37:59 +01:00
parent 2e85951233 08af1e8825
commit 2862c9fc8d
5 changed files with 175 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/assets/images/site.webmanifest
View File

@@ -1,15 +0,0 @@
{
"author": "Kasper Rynning-Tønnesen og Kevin Midbøe",
"name": "Vinlotteri Knowit",
"short_name": "Vinlottis",
"icons": [
{
"src": "/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color": "#daeedd",
"background_color": "#daeedd",
"display": "standalone"
}

16
public/assets/manifest.json Normal file
View File

@@ -0,0 +1,16 @@
{
"author": "Kasper Rynning-Tønnesen og Kevin Midbøe",
"name": "Vinlotteri Knowit",
"short_name": "Vinlottis",
"start_url": "/#/",
"icons": [
{
"src": "/public/assets/images/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color": "#daeedd",
"background_color": "#daeedd",
"display": "standalone"
}

4
src/Vinlottis.vue
View File

@@ -2,14 +2,16 @@
<div class="container">
<banner />
<router-view />
<Countdown />
</div>
</template>
<script>
import banner from "@/ui/Banner";
import Countdown from "@/ui/Countdown";
export default {
name: "vinlottis",
components: { banner },
components: { banner, Countdown },
props: {},
data() {
return {};

32
src/templates/Create.html
View File

@@ -3,13 +3,31 @@
<head>
<title>Vinlottis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="152x152" href="/public/assets/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/public/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/public/assets/images/favicon-16x16.png">
<link rel="manifest" href="/public/assets/images/site.webmanifest">
<link rel="mask-icon" href="/public/assets/images/safari-pinned-tab.svg" color="#23101f">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link
rel="apple-touch-icon"
sizes="152x152"
href="/public/assets/images/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/public/assets/images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/public/assets/images/favicon-16x16.png"
/>
<link rel="manifest" href="/public/assets/manifest.json" />
<link
rel="mask-icon"
href="/public/assets/images/safari-pinned-tab.svg"
color="#23101f"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#dbeede" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>

131
src/ui/Countdown.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div>
<div class="clock" v-if="enabled">
<h2 cv-if="distance > 0">
<span v-if="days > 0">{{ days }} dager,&nbsp;</span>
<span>{{ pad(hours) }}</span
>: <span>{{ pad(minutes) }}</span
>:
<span>{{ pad(seconds) }}</span>
</h2>
<div class="cross" @click="stopClock">X</div>
<h2 v-if="(distance = 0)">Lotteriet har begynt!</h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
nextLottery: null,
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
distance: 0,
enabled: false,
code: "38384040373937396665",
codeDone: "",
interval: null
};
},
mounted() {
window.addEventListener("keydown", this.listenerFunction);
},
methods: {
pad: function(num) {
if (num < 10) {
return `0${num}`;
}
return num;
},
listenerFunction: function(event) {
this.codeDone += event.keyCode;
if (this.code.substring(0, this.codeDone.length) == this.codeDone) {
if (this.code == this.codeDone && !this.enabled) {
this.enabled = true;
this.initialize();
this.countdown();
this.codeDone = "";
}
} else {
this.codeDone = "";
}
},
initialize: function() {
let d = new Date();
let dayOfLottery = 5;
let nextDayOfLottery = new Date(
d.setDate(d.getDate() + ((5 + 7 - d.getDay()) % 7))
);
nextDayOfLottery = new Date(nextDayOfLottery.setHours(15));
nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
this.nextLottery = nextDayOfLottery;
window.scrollTo(0, 0);
document.querySelector("body").style.overflow = "hidden";
document.querySelector("body").style.height = "100vh";
let now = new Date().getTime();
this.distance = new Date(this.nextLottery).getTime() - now;
},
stopClock: function() {
clearInterval(this.interval);
this.enabled = false;
document.querySelector("body").style.overflow = "auto";
document.querySelector("body").style.height = "initial";
},
countdown: function() {
// Get today's date and time
let now = new Date().getTime();
// Find the distance between now and the count down date
this.distance = new Date(this.nextLottery).getTime() - now;
// Time calculations for days, hours, minutes and seconds
this.days = Math.floor(this.distance / (1000 * 60 * 60 * 24));
this.hours = Math.floor(
(this.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
this.minutes = Math.floor(
(this.distance % (1000 * 60 * 60)) / (1000 * 60)
);
this.seconds = Math.floor((this.distance % (1000 * 60)) / 1000);
if (this.distance < 0) {
clearTimeout(this.interval);
return;
}
this.interval = setTimeout(this.countdown, 500);
}
}
};
</script>
<style lang="scss" scoped>
.clock {
width: 100vw;
height: 100vh;
position: absolute;
background: white;
top: 0;
left: 0;
}
.cross {
top: 15px;
right: 23px;
font-size: 2rem;
position: absolute;
cursor: pointer;
}
h2 {
margin: auto;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}
</style>