Splitting more, added chat, and fancier draw-animations
This commit is contained in:
Kasper Rynning-Tønnesen
64
src/ui/Attendees.vue
Normal file
64
src/ui/Attendees.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="attendees" v-if="attendees.length > 0">
|
||||
<h2>Deltakere ({{ attendees.length }})</h2>
|
||||
<div class="attendee" v-for="(attendee, index) in attendees" :key="index">
|
||||
<span class="attendee-name">{{ attendee.name }}</span>
|
||||
<div class="red-ballot ballot-element small">{{ attendee.red }}</div>
|
||||
<div class="blue-ballot ballot-element small">
|
||||
{{ attendee.blue }}
|
||||
</div>
|
||||
<div class="green-ballot ballot-element small">
|
||||
{{ attendee.green }}
|
||||
</div>
|
||||
<div class="yellow-ballot ballot-element small">
|
||||
{{ attendee.yellow }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
attendees: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/global.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/media-queries.scss";
|
||||
.attendee-name {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.ballot-element {
|
||||
font-size: 0.75rem;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.attendees {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.attendee {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
180
src/ui/Chat.vue
Normal file
180
src/ui/Chat.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="chat-container">
|
||||
<hr />
|
||||
<h2>Chat</h2>
|
||||
<div v-if="usernameSet" class="chat-inner-container">
|
||||
<div class="history" ref="history">
|
||||
<div
|
||||
v-for="(history, index) in chatHistory"
|
||||
:key="`${history.username}-${history.timestamp}-${index}`"
|
||||
>
|
||||
<span class="timestamp">[{{ getTime(history.timestamp) }}]</span>
|
||||
<span class="user-name">{{ history.username }}:</span>
|
||||
<span class="message">{{ history.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input">
|
||||
<input
|
||||
@keyup.enter="sendMessage"
|
||||
type="text"
|
||||
v-model="message"
|
||||
maxlength="30"
|
||||
/>
|
||||
<button @click="sendMessage">Send</button
|
||||
><button @click="removeUsername">Logg ut</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!usernameSet" class="username-dialog">
|
||||
<input
|
||||
type="text"
|
||||
@keyup.enter="setUsername"
|
||||
v-model="temporaryUsername"
|
||||
title
|
||||
/>
|
||||
<button @click="setUsername">Lagre brukernavn</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
usernameAllowed: {
|
||||
type: Boolean
|
||||
},
|
||||
chatHistory: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
message: "",
|
||||
temporaryUsername: null,
|
||||
username: null,
|
||||
usernameSet: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
chatHistory: {
|
||||
handler() {
|
||||
setTimeout(() => {
|
||||
this.$refs.history.scrollTop = this.$refs.history.scrollHeight;
|
||||
}, 10);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let username = window.localStorage.getItem("username");
|
||||
if (!username) {
|
||||
return;
|
||||
}
|
||||
this.username = username;
|
||||
this.usernameSet = true;
|
||||
this.$emit("username", username);
|
||||
},
|
||||
methods: {
|
||||
pad: function(num) {
|
||||
if (num > 9) return num;
|
||||
return `0${num}`;
|
||||
},
|
||||
getTime: function(timestamp) {
|
||||
let date = new Date(timestamp);
|
||||
return `${this.pad(date.getHours())}:${this.pad(
|
||||
date.getMinutes()
|
||||
)}:${this.pad(date.getSeconds())}`;
|
||||
},
|
||||
sendMessage: function() {
|
||||
this.$emit("message", this.message);
|
||||
this.message = "";
|
||||
},
|
||||
removeUsername: function() {
|
||||
this.username = null;
|
||||
this.temporaryUsername = null;
|
||||
this.usernameSet = false;
|
||||
window.localStorage.removeItem("username");
|
||||
this.$emit("username", null);
|
||||
},
|
||||
setUsername: function() {
|
||||
if (
|
||||
this.temporaryUsername.length > 3 &&
|
||||
this.temporaryUsername.length < 30
|
||||
) {
|
||||
this.username = this.temporaryUsername;
|
||||
this.usernameSet = true;
|
||||
this.$emit("username", this.username);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/media-queries.scss";
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
|
||||
@include mobile {
|
||||
display: block;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.chat-container {
|
||||
width: 50%;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chat-container,
|
||||
.chat-inner-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.history {
|
||||
height: 75%;
|
||||
overflow-y: scroll;
|
||||
|
||||
@include mobile {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.username-dialog {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: #b7debd;
|
||||
color: #333;
|
||||
padding: 10px 30px;
|
||||
border: 0;
|
||||
width: fit-content;
|
||||
font-size: 1rem;
|
||||
/* height: 1.5rem; */
|
||||
/* max-height: 1.5rem; */
|
||||
margin: 0 2px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: transform 0.5s ease;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
</style>
|
||||
@@ -4,14 +4,17 @@
|
||||
<div class="bought-container">
|
||||
<div
|
||||
v-for="color in colors"
|
||||
:class="color.name + '-container ' + color.name + '-ballot inner-bought-container ballot-element'"
|
||||
:class="
|
||||
color.name +
|
||||
'-container ' +
|
||||
color.name +
|
||||
'-ballot inner-bought-container ballot-element'
|
||||
"
|
||||
:key="color.name"
|
||||
>
|
||||
<div class="number-container">
|
||||
<span class="color-total bought-number-span">
|
||||
{{
|
||||
color.total
|
||||
}}
|
||||
{{ color.total }}
|
||||
</span>
|
||||
<span>kjøpte</span>
|
||||
</div>
|
||||
@@ -35,7 +38,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { colorStatistics } from "@/api";
|
||||
|
||||
export default {
|
||||
@@ -123,6 +125,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/global.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/media-queries.scss";
|
||||
|
||||
@@ -137,28 +140,6 @@ export default {
|
||||
width: 140px;
|
||||
height: 150px;
|
||||
margin: 20px 0;
|
||||
-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;
|
||||
color: #333333;
|
||||
|
||||
&.green-ballot {
|
||||
background-color: $light-green;
|
||||
}
|
||||
|
||||
&.blue-ballot {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
&.yellow-ballot {
|
||||
background-color: $light-yellow;
|
||||
}
|
||||
|
||||
&.red-ballot {
|
||||
background-color: $light-red;
|
||||
}
|
||||
}
|
||||
|
||||
.number-container {
|
||||
|
||||
178
src/ui/WinnerDraw.vue
Normal file
178
src/ui/WinnerDraw.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="current-drawn-container">
|
||||
<div class="current-draw" v-if="drawing">
|
||||
<h2>TREKKER</h2>
|
||||
<div
|
||||
:class="currentColor + '-ballot'"
|
||||
class="ballot-element center-new-winner"
|
||||
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
|
||||
>
|
||||
<span v-if="currentName && colorDone">{{ currentName }}</span>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="current-draw" v-if="drawingDone">
|
||||
<h2>VINNER</h2>
|
||||
<div
|
||||
:class="currentColor + '-ballot'"
|
||||
class="ballot-element center-new-winner"
|
||||
:style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
|
||||
>
|
||||
<span v-if="currentName && colorDone">{{ currentName }}</span>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentWinner: {
|
||||
type: Object
|
||||
},
|
||||
currentWinnerDrawn: {
|
||||
type: Boolean
|
||||
},
|
||||
attendees: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentWinnerLocal: {},
|
||||
winnerColor: null,
|
||||
currentColor: null,
|
||||
winnerName: null,
|
||||
currentName: null,
|
||||
colorRounds: 0,
|
||||
nameRounds: 0,
|
||||
colorTimeout: null,
|
||||
nameTimeout: null,
|
||||
colorDone: false,
|
||||
drawing: false,
|
||||
drawingDone: false,
|
||||
winnerQueue: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currentWinner: function(currentWinner) {
|
||||
if (currentWinner == null) {
|
||||
this.drawingDone = false;
|
||||
return;
|
||||
}
|
||||
if (this.drawing) {
|
||||
this.winnerQueue.push(currentWinner);
|
||||
return;
|
||||
}
|
||||
this.drawing = true;
|
||||
this.currentName = null;
|
||||
this.currentColor = null;
|
||||
this.nameRounds = 0;
|
||||
this.colorRounds = 0;
|
||||
this.colorDone = false;
|
||||
this.currentWinnerLocal = currentWinner;
|
||||
this.drawColor(this.currentWinnerLocal.color);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawName: function(winnerName) {
|
||||
if (this.nameRounds == 100) {
|
||||
clearTimeout(this.nameTimeout);
|
||||
this.currentName = winnerName;
|
||||
if (this.winnerQueue.length > 0) {
|
||||
this.currentWinnerLocal = this.winnerQueue.shift();
|
||||
this.drawing = true;
|
||||
this.nameRounds = 0;
|
||||
this.colorRounds = 0;
|
||||
this.colorDone = false;
|
||||
this.drawColor(this.currentWinnerLocal.color);
|
||||
return;
|
||||
}
|
||||
this.drawing = false;
|
||||
this.drawingDone = true;
|
||||
return;
|
||||
}
|
||||
this.currentName = this.attendees[
|
||||
this.nameRounds % this.attendees.length
|
||||
].name;
|
||||
this.nameRounds += 1;
|
||||
clearTimeout(this.nameTimeout);
|
||||
this.nameTimeout = setTimeout(() => {
|
||||
this.drawName(winnerName);
|
||||
}, 50);
|
||||
},
|
||||
drawColor: function(winnerColor) {
|
||||
this.drawingDone = false;
|
||||
if (this.colorRounds == 100) {
|
||||
this.currentColor = winnerColor;
|
||||
this.colorDone = true;
|
||||
this.drawName(this.currentWinnerLocal.name);
|
||||
|
||||
clearTimeout(this.colorTimeout);
|
||||
return;
|
||||
}
|
||||
this.currentColor = this.getColor(this.colorRounds % 4);
|
||||
this.colorRounds += 1;
|
||||
|
||||
clearTimeout(this.colorTimeout);
|
||||
this.colorTimeout = setTimeout(() => {
|
||||
this.drawColor(winnerColor);
|
||||
}, 50);
|
||||
},
|
||||
getRotation: function() {
|
||||
if (this.colorDone) {
|
||||
return 0;
|
||||
}
|
||||
let num = Math.floor(Math.random() * 15);
|
||||
let neg = Math.floor(Math.random() * 2);
|
||||
return neg == 0 ? -num : num;
|
||||
},
|
||||
getColor: function(number) {
|
||||
switch (number) {
|
||||
case 0:
|
||||
return "red";
|
||||
case 1:
|
||||
return "blue";
|
||||
case 2:
|
||||
return "green";
|
||||
case 3:
|
||||
return "yellow";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/global.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/media-queries.scss";
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.current-drawn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ballot-element {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
48
src/ui/Winners.vue
Normal file
48
src/ui/Winners.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 v-if="winners.length > 0">Vinnere</h2>
|
||||
<div class="winners" v-if="winners.length > 0">
|
||||
<div class="winner" v-for="(winner, index) in winners" :key="index">
|
||||
<div :class="winner.color + '-ballot'" class="ballot-element">
|
||||
{{ winner.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
winners: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/global.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/media-queries.scss";
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.winners {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ballot-element {
|
||||
font-size: 1rem;
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user