Moved generator to a component RaffleGenerator.
Moved generator and added to virtuallottertyregistrationpage Removed logic for generating random colors in backend.
This commit is contained in:
@@ -160,35 +160,8 @@ router.route("/attendees/secure").get(mustBeAuthenticated, async (req, res) => {
|
||||
|
||||
router.route("/attendee").post(mustBeAuthenticated, async (req, res) => {
|
||||
const attendee = req.body;
|
||||
let red = 0;
|
||||
let blue = 0;
|
||||
let green = 0;
|
||||
let yellow = 0;
|
||||
if (attendee.randomColors) {
|
||||
let color;
|
||||
for (let i = 0; i < attendee.ballots; i++) {
|
||||
color = Math.floor(Math.random() * 4);
|
||||
switch (color) {
|
||||
case 0:
|
||||
red += 1;
|
||||
break;
|
||||
case 1:
|
||||
blue += 1;
|
||||
break;
|
||||
case 2:
|
||||
green += 1;
|
||||
break;
|
||||
case 3:
|
||||
yellow += 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
red = attendee.red;
|
||||
blue = attendee.blue;
|
||||
yellow = attendee.yellow;
|
||||
green = attendee.green;
|
||||
}
|
||||
const { red, blue, yellow, green } = attendee;
|
||||
|
||||
let newAttendee = new Attendee({
|
||||
name: attendee.name,
|
||||
red,
|
||||
|
||||
@@ -4,61 +4,8 @@
|
||||
<p class="subtext">
|
||||
Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
|
||||
</p>
|
||||
<div class="input-line">
|
||||
<label for="redCheckbox">
|
||||
<input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Rød</span>
|
||||
</label>
|
||||
<label for="blueCheckbox">
|
||||
<input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Blå</span>
|
||||
</label>
|
||||
<label for="yellowCheckbox">
|
||||
<input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Gul</span>
|
||||
</label>
|
||||
<label for="greenCheckbox">
|
||||
<input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Grønn</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Antall lodd"
|
||||
@keyup.enter="generateColors"
|
||||
v-model="numberOfBallots"
|
||||
/>
|
||||
<button class="vin-button" @click="generateColors">Generer</button>
|
||||
</div>
|
||||
|
||||
<div class="colors">
|
||||
<div
|
||||
v-for="color in colors"
|
||||
:class="getColorClass(color)"
|
||||
class="color-box"
|
||||
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="color-count-container" v-if="generated">
|
||||
<span>Rød: {{ red }}</span>
|
||||
<span>Blå: {{ blue }}</span>
|
||||
<span>Gul: {{ yellow }}</span>
|
||||
<span>Grønn: {{ green }}</span>
|
||||
</div>
|
||||
<RaffleGenerator @numberOfBallots="val => this.numberOfBallots = val" />
|
||||
|
||||
<Vipps class="vipps" :amount="numberOfBallots" />
|
||||
<Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
|
||||
@@ -67,39 +14,22 @@
|
||||
|
||||
<script>
|
||||
import { page, event } from "vue-analytics";
|
||||
import RaffleGenerator from "@/ui/RaffleGenerator";
|
||||
import Vipps from "@/ui/Vipps";
|
||||
import Banner from "@/ui/Banner";
|
||||
import Countdown from "@/ui/Countdown";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Banner,
|
||||
RaffleGenerator,
|
||||
Vipps,
|
||||
Countdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
numberOfBallots: 4,
|
||||
colors: [],
|
||||
blue: 0,
|
||||
red: 0,
|
||||
green: 0,
|
||||
yellow: 0,
|
||||
colorTimeout: null,
|
||||
redCheckbox: true,
|
||||
greenCheckbox: true,
|
||||
yellowCheckbox: true,
|
||||
blueCheckbox: true,
|
||||
hardStart: false,
|
||||
generated: false,
|
||||
generating: false
|
||||
numberOfBallots: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
numberOfBallots: function() {
|
||||
this.generateColors();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (window.location.hostname == "localhost") {
|
||||
return;
|
||||
@@ -113,98 +43,6 @@ export default {
|
||||
startCountdown: function() {
|
||||
this.hardStart = true;
|
||||
},
|
||||
generateColors: function(event, time) {
|
||||
this.generating = true;
|
||||
if (time == 5) {
|
||||
this.generating = false;
|
||||
this.generated = true;
|
||||
if (this.numberOfBallots > 1 &&
|
||||
[this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) {
|
||||
return
|
||||
}
|
||||
|
||||
if (new Set(this.colors).size == 1) {
|
||||
alert("BINGO");
|
||||
}
|
||||
|
||||
if (window.location.hostname == "localhost") {
|
||||
return;
|
||||
}
|
||||
this.$ga.event({
|
||||
eventCategory: "Ballots",
|
||||
eventAction: "Generate",
|
||||
eventValue: JSON.stringify(this.colors)
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (time == undefined) {
|
||||
time = 1;
|
||||
}
|
||||
this.colors = [];
|
||||
this.blue = 0;
|
||||
this.red = 0;
|
||||
this.green = 0;
|
||||
this.yellow = 0;
|
||||
let randomArray = [];
|
||||
if (this.redCheckbox) {
|
||||
randomArray.push(1);
|
||||
}
|
||||
if (this.greenCheckbox) {
|
||||
randomArray.push(2);
|
||||
}
|
||||
if (this.yellowCheckbox) {
|
||||
randomArray.push(3);
|
||||
}
|
||||
if (this.blueCheckbox) {
|
||||
randomArray.push(4);
|
||||
}
|
||||
if (randomArray.length == 0) {
|
||||
alert("Du må velge MINST 1 farge");
|
||||
return;
|
||||
}
|
||||
if (this.numberOfBallots > 0) {
|
||||
for (let i = 0; i < this.numberOfBallots; i++) {
|
||||
let color =
|
||||
randomArray[Math.floor(Math.random() * randomArray.length)];
|
||||
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);
|
||||
},
|
||||
getRotation: function() {
|
||||
let num = Math.floor(Math.random() * 15);
|
||||
let neg = Math.floor(Math.random() * 2);
|
||||
return neg == 0 ? -num : num;
|
||||
},
|
||||
getColorClass: function(number) {
|
||||
if (number == 1) {
|
||||
return "red";
|
||||
}
|
||||
if (number == 2) {
|
||||
return "green";
|
||||
}
|
||||
if (number == 3) {
|
||||
return "yellow";
|
||||
}
|
||||
if (number == 4) {
|
||||
return "blue";
|
||||
}
|
||||
},
|
||||
track() {
|
||||
this.$ga.page("/lottery/generate");
|
||||
}
|
||||
@@ -229,50 +67,6 @@ p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-count-container {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: Arial;
|
||||
margin-top: 35px;
|
||||
|
||||
@include mobile {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.input-line {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 2.4rem;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-line label {
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.22rem;
|
||||
margin: 0 0.6rem;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
margin-top: 0px;
|
||||
padding: 20px 0;
|
||||
background-color: #dbeede;
|
||||
box-shadow: 0 0 10px 0px #0000003a;
|
||||
}
|
||||
|
||||
.vipps {
|
||||
margin: 5rem auto 2.5rem auto;
|
||||
|
||||
@@ -281,185 +75,9 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
padding: 7px;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
border: 1px solid rgba(#333333, 0.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label .border {
|
||||
border: 1px solid rgba(#333333, 0.3);
|
||||
border-spacing: 2px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
label .checkmark {
|
||||
background: none;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
label .text {
|
||||
margin-left: 0.15rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.colors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 1400px;
|
||||
margin: 3rem auto 0;
|
||||
|
||||
@include mobile {
|
||||
margin: 1.8rem auto 0;
|
||||
}
|
||||
}
|
||||
.color-box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
.colors-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: $light-red;
|
||||
}
|
||||
|
||||
.input-line label {
|
||||
& input {
|
||||
&#greenCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
&#redCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
&:hover input {
|
||||
&#greenCheckbox ~ .border .checkmark {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&#redCheckbox ~ .border .checkmark {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox ~ .border .checkmark {
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox ~ .border .checkmark {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus input,
|
||||
&:active input {
|
||||
&#greenCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-green;
|
||||
}
|
||||
|
||||
&#redCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
input,
|
||||
button {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 45vw;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.input-line {
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
width: 30%;
|
||||
margin-top: 15px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,36 +95,31 @@
|
||||
v-model="randomColors"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div v-if="!randomColors">
|
||||
<br />
|
||||
<br />
|
||||
<div class="label-div">
|
||||
<label for="red">Rød</label>
|
||||
<input id="red" type="number" placeholder="Rød" v-model="red" />
|
||||
</div>
|
||||
<br />
|
||||
<div class="label-div">
|
||||
<label for="blue">Blå</label>
|
||||
<input id="blue" type="number" placeholder="Blå" v-model="blue" />
|
||||
</div>
|
||||
<br />
|
||||
<div class="label-div">
|
||||
<label for="green">Grønn</label>
|
||||
<input id="green" type="number" placeholder="Grønn" v-model="green" />
|
||||
</div>
|
||||
<br />
|
||||
<div class="label-div">
|
||||
<label for="yellow">Gul</label>
|
||||
<input id="yellow" type="number" placeholder="Gul" v-model="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="randomColors">
|
||||
<div class="label-div">
|
||||
<label for="ballots">Antall lodd</label>
|
||||
<input
|
||||
id="ballots"
|
||||
type="number"
|
||||
placeholder="Antall lodd"
|
||||
v-model="ballots"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<RaffleGenerator @colors="setWithRandomColors" />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
@@ -143,8 +138,12 @@ import {
|
||||
deleteWinners,
|
||||
deleteAttendees
|
||||
} from "@/api";
|
||||
import RaffleGenerator from "@/ui/RaffleGenerator";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RaffleGenerator
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: null,
|
||||
@@ -186,6 +185,9 @@ export default {
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setWithRandomColors(colors) {
|
||||
Object.keys(colors).forEach(color => this[color] = colors[color])
|
||||
},
|
||||
sendAttendee: async function() {
|
||||
let response = await addAttendee({
|
||||
name: this.name,
|
||||
@@ -194,8 +196,7 @@ export default {
|
||||
blue: this.blue,
|
||||
green: this.green,
|
||||
yellow: this.yellow,
|
||||
ballots: this.ballots,
|
||||
randomColors: this.randomColors
|
||||
ballots: this.ballots
|
||||
});
|
||||
if (response == true) {
|
||||
alert("Sendt inn deltaker!");
|
||||
|
||||
421
src/ui/RaffleGenerator.vue
Normal file
421
src/ui/RaffleGenerator.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="input-line">
|
||||
<label for="redCheckbox">
|
||||
<input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Rød</span>
|
||||
</label>
|
||||
<label for="blueCheckbox">
|
||||
<input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Blå</span>
|
||||
</label>
|
||||
<label for="yellowCheckbox">
|
||||
<input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Gul</span>
|
||||
</label>
|
||||
<label for="greenCheckbox">
|
||||
<input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors"/>
|
||||
<span class="border">
|
||||
<span class="checkmark"></span>
|
||||
</span>
|
||||
<span class="text">Grønn</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Antall lodd"
|
||||
@keyup.enter="generateColors"
|
||||
v-model="numberOfBallots"
|
||||
/>
|
||||
<button class="vin-button" @click="generateColors">Generer</button>
|
||||
</div>
|
||||
|
||||
<div class="colors">
|
||||
<div
|
||||
v-for="color in colors"
|
||||
:class="getColorClass(color)"
|
||||
class="color-box"
|
||||
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="color-count-container" v-if="generated">
|
||||
<span>Rød: {{ red }}</span>
|
||||
<span>Blå: {{ blue }}</span>
|
||||
<span>Gul: {{ yellow }}</span>
|
||||
<span>Grønn: {{ green }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
numberOfBallots: 4,
|
||||
colors: [],
|
||||
blue: 0,
|
||||
red: 0,
|
||||
green: 0,
|
||||
yellow: 0,
|
||||
colorTimeout: null,
|
||||
redCheckbox: true,
|
||||
greenCheckbox: true,
|
||||
yellowCheckbox: true,
|
||||
blueCheckbox: true,
|
||||
generated: false,
|
||||
generating: false
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
this.$emit("numberOfBallots", this.numberOfBallots);
|
||||
},
|
||||
watch: {
|
||||
numberOfBallots: function() {
|
||||
this.$emit("numberOfBallots", this.numberOfBallots);
|
||||
this.generateColors();
|
||||
this.emitColors();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateColors: function(event, time) {
|
||||
this.generating = true;
|
||||
if (time == 5) {
|
||||
this.generating = false;
|
||||
this.generated = true;
|
||||
if (this.numberOfBallots > 1 &&
|
||||
[this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) {
|
||||
return
|
||||
}
|
||||
|
||||
if (new Set(this.colors).size == 1) {
|
||||
alert("BINGO");
|
||||
}
|
||||
|
||||
this.emitColors()
|
||||
|
||||
if (window.location.hostname == "localhost") {
|
||||
return;
|
||||
}
|
||||
this.$ga.event({
|
||||
eventCategory: "Ballots",
|
||||
eventAction: "Generate",
|
||||
eventValue: JSON.stringify(this.colors)
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (time == undefined) {
|
||||
time = 1;
|
||||
}
|
||||
this.colors = [];
|
||||
this.blue = 0;
|
||||
this.red = 0;
|
||||
this.green = 0;
|
||||
this.yellow = 0;
|
||||
let randomArray = [];
|
||||
if (this.redCheckbox) {
|
||||
randomArray.push(1);
|
||||
}
|
||||
if (this.greenCheckbox) {
|
||||
randomArray.push(2);
|
||||
}
|
||||
if (this.yellowCheckbox) {
|
||||
randomArray.push(3);
|
||||
}
|
||||
if (this.blueCheckbox) {
|
||||
randomArray.push(4);
|
||||
}
|
||||
if (randomArray.length == 0) {
|
||||
alert("Du må velge MINST 1 farge");
|
||||
return;
|
||||
}
|
||||
if (this.numberOfBallots > 0) {
|
||||
for (let i = 0; i < this.numberOfBallots; i++) {
|
||||
let color =
|
||||
randomArray[Math.floor(Math.random() * randomArray.length)];
|
||||
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);
|
||||
},
|
||||
getRotation: function() {
|
||||
let num = Math.floor(Math.random() * 15);
|
||||
let neg = Math.floor(Math.random() * 2);
|
||||
return neg == 0 ? -num : num;
|
||||
},
|
||||
getColorClass: function(number) {
|
||||
if (number == 1) {
|
||||
return "red";
|
||||
}
|
||||
if (number == 2) {
|
||||
return "green";
|
||||
}
|
||||
if (number == 3) {
|
||||
return "yellow";
|
||||
}
|
||||
if (number == 4) {
|
||||
return "blue";
|
||||
}
|
||||
},
|
||||
emitColors() {
|
||||
this.$emit("colors", {
|
||||
blue: this.blue,
|
||||
red: this.red,
|
||||
green: this.green,
|
||||
yellow: this.yellow
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/global.scss";
|
||||
@import "../styles/media-queries.scss";
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-line {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 2.4rem;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-line label {
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.22rem;
|
||||
margin: 0 0.6rem;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
padding: 7px;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
border: 1px solid rgba(#333333, 0.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label .border {
|
||||
border: 1px solid rgba(#333333, 0.3);
|
||||
border-spacing: 2px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
label .checkmark {
|
||||
background: none;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
label .text {
|
||||
margin-left: 0.15rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 1400px;
|
||||
margin: 3rem auto 0;
|
||||
|
||||
@include mobile {
|
||||
margin: 1.8rem auto 0;
|
||||
}
|
||||
}
|
||||
.color-box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
.colors-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.color-count-container {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: Arial;
|
||||
margin-top: 35px;
|
||||
|
||||
@include mobile {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: $light-red;
|
||||
}
|
||||
|
||||
.input-line label {
|
||||
& input {
|
||||
&#greenCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
&#redCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox:checked ~ .border .checkmark {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
&:hover input {
|
||||
&#greenCheckbox ~ .border .checkmark {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&#redCheckbox ~ .border .checkmark {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox ~ .border .checkmark {
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox ~ .border .checkmark {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus input,
|
||||
&:active input {
|
||||
&#greenCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-green;
|
||||
}
|
||||
|
||||
&#redCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-red;
|
||||
}
|
||||
|
||||
&#yellowCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-yellow;
|
||||
}
|
||||
|
||||
&#blueCheckbox ~ .border .checkmark {
|
||||
background-color: $dark-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
input,
|
||||
button {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 45vw;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.input-line {
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
width: 30%;
|
||||
margin-top: 15px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user