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

Added cool generate function and page

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-20 16:41:16 +01:00
parent bbe2f17d5a
commit ede044c1dd
4 changed files with 175 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -2,12 +2,12 @@
<html> <html>
<head> <head>
<title>Vinlottis</title> <title>Vinlottis</title>
<link href=/dist/css/vinlottis.97fc9c5.css rel=stylesheet></head> <link href=/dist/css/vinlottis.90b6792.css rel=stylesheet></head>
<body> <body>
<div id=app></div> <div id=app></div>
<script src=/dist/js/vinlottis.bundle.97fc9c5.js></script> <script src=/dist/js/vinlottis.bundle.90b6792.js></script>
<script type=text/javascript src=/dist/js/vinlottis.bundle.97fc9c5.js></script></body> <script type=text/javascript src=/dist/js/vinlottis.bundle.90b6792.js></script></body>
</html> </html>

151
src/components/GeneratePage.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<div class="container">
<h2>What to buy?</h2>
<input
type="number"
placeholder="Antall lodd"
@keyup.enter="generateColors"
v-model="numberOfBallots"
/>
<button @click="generateColors">Generer</button>
<div class="colors-text">
<p>Blå: {{ blue }}</p>
<p>Rød: {{ red }}</p>
<p>Grønn: {{ green }}</p>
<p>Gul: {{ yellow }}</p>
</div>
<div class="colors">
<div
v-for="color in colors"
:class="getColorClass(color)"
class="color-box"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
numberOfBallots: 0,
colors: [],
blue: 0,
red: 0,
green: 0,
yellow: 0,
colorTimeout: null
};
},
methods: {
generateColors: function(event, time) {
if (time == 5) {
return;
}
if (time == undefined) {
time = 1;
}
this.colors = [];
this.blue = 0;
this.red = 0;
this.green = 0;
this.yellow = 0;
if (this.numberOfBallots > 0) {
for (let i = 0; i < this.numberOfBallots; i++) {
let color = Math.floor(Math.random() * 4) + 1;
this.colors.push(color);
if (color == 1) {
this.red += 1;
}
if (color == 2) {
this.green += 1;
}
if (color == 3) {
this.yellow += 1;
}
if (color == 4) {
this.blue += 1;
}
}
}
clearTimeout(this.colorTimeout);
this.colorTimeout = setTimeout(() => {
this.generateColors(event, time + 1);
}, 50);
},
getColorClass: function(number) {
if (number == 1) {
return "red";
}
if (number == 2) {
return "green";
}
if (number == 3) {
return "yellow";
}
if (number == 4) {
return "blue";
}
}
}
};
</script>
<style lang="scss" scoped>
h2 {
text-align: center;
}
input,
button {
margin: 10px;
font-size: 1.5rem;
}
.container {
font-family: sans-serif;
width: 80vw;
margin: auto;
display: flex;
flex-direction: column;
}
.colors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.color-box {
width: 150px;
height: 150px;
margin: 10px;
}
button {
border: none;
background: orange;
color: white;
padding: 10px;
width: fit-content;
margin: auto;
}
.colors-text {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.green {
background-color: #0be881;
}
.red {
background-color: #ef5777;
}
.yellow {
background-color: #ffdd59;
}
.blue {
background-color: #4bcffa;
}
</style>

19
src/components/VinlottisPage.vue
View File

@@ -1,7 +1,10 @@
<template> <template>
<div class="outer"> <div class="outer">
<div class="container"> <div class="container">
<h2>Knowit Vinlottis</h2> <h1>Knowit Vinlottis</h1>
<router-link to="generate" class="generate-link"
>Klarer du ikke velge lodd-farger?</router-link
>
<div class="chart-container"> <div class="chart-container">
<PurchaseGraph class="purchase" /> <PurchaseGraph class="purchase" />
<WinGraph class="win" /> <WinGraph class="win" />
@@ -37,12 +40,24 @@ export default {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
h2 { h1 {
width: 100vw; width: 100vw;
text-align: center; text-align: center;
font-family: sans-serif; font-family: sans-serif;
} }
.generate-link {
color: white;
text-align: center;
font-size: 1.2rem;
padding: 5px;
margin: auto;
width: fit-content;
display: block;
text-decoration: none;
background: orange;
}
.purchase { .purchase {
width: 50vw; width: 50vw;
display: inline-block; display: inline-block;

4
src/routes/vinlottisRouter.js
View File

@@ -5,6 +5,10 @@ const routes = [
path: "*", path: "*",
component: VinlottisPage component: VinlottisPage
}, },
{
path: "/generate",
component: resolve => require(["@/components/GeneratePage"], resolve)
},
{ {
path: "/login", path: "/login",
component: resolve => require(["@/components/LoginPage"], resolve) component: resolve => require(["@/components/LoginPage"], resolve)