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

Confetti for the winners

Browse Source
This commit is contained in:
Egil Uggerud
2020-09-10 13:44:51 +02:00
parent a2fbbf0715
commit 9ab84fffda
3 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@@ -2334,6 +2334,11 @@
"integrity": "sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==",
"dev": true
},
"canvas-confetti": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.2.0.tgz",
"integrity": "sha512-0B49O9CfLciAYz4hriu9pvWNGkCtVcpvyNFKWZI+JVWJM5nJTMg5MX3cFzatyeYcOL6bR1Jw3yhZKbgt03O8/Q=="
},
"caseless": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",

1
package.json
View File

@@ -15,6 +15,7 @@
"@babel/polyfill": "~7.2",
"@zxing/library": "^0.15.2",
"body-parser": "^1.19.0",
"canvas-confetti": "^1.2.0",
"chart.js": "^2.9.3",
"clean-webpack-plugin": "^3.0.0",
"compression": "^1.7.4",

42
src/ui/WinnerDraw.vue
View File

@@ -34,6 +34,7 @@
</template>
<script>
import confetti from "canvas-confetti";
export default {
props: {
currentWinner: {
@@ -99,6 +100,11 @@ export default {
}
this.drawing = false;
this.drawingDone = true;
if(this.currentName == "Amund Brandsrud"){
this.startUberConfetti();
return;
}
this.startConfetti();
return;
}
this.currentName = this.attendees[
@@ -147,9 +153,45 @@ export default {
case 3:
return "yellow";
}
},
startConfetti(){
var duration = 7 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
var interval = setInterval(function() {
var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
var particleCount = 50 * (timeLeft / duration);
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
}, 250);
},
startUberConfetti(){
var duration = 7 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
var interval = setInterval(function() {
var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
var particleCount = 50 * (timeLeft / duration);
confetti({startVelocity: 65, angle: randomInRange(55, 125),particleCount: particleCount, angle: 60, spread: 55, origin: { x: 0 }});
confetti({startVelocity: 65, angle: randomInRange(55, 125),particleCount: particleCount, angle: 120, spread: 55, origin: { x: 1 }});
confetti({startVelocity: 65, angle: randomInRange(55, 125),spread: randomInRange(50, 70),particleCount: randomInRange(5, 15),origin: { y: 1 }});
}, 250);
}
}
};
</script>
<style lang="scss" scoped>