octospacc
/
OctoSpaccHub
mirror of https://gitlab.com/octospacc/octospacc.gitlab.io
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Birthday confetti

This commit is contained in:
octospacc 2022-04-23 00:19:31 +02:00
parent 6f4b8f5296
commit 0293db6a8d
3 changed files with 63 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/Assets/CSS/Dark.css
View File

@ -22,6 +22,15 @@ body {
margin: 32px; margin: 32px;
} }
#ConfettiCanvas {
Position: Relative;
Top: 0;
Left: 0;
Width: 100%;
Height: 100%;
Z-Index: 2;
}
.Content { .Content {
background-color: rgba(0,0,0, 0.8); background-color: rgba(0,0,0, 0.8);
width: 100%; width: 100%;

54
public/Assets/JS/CurrentAgeRenderIndex.js
View File

@ -1,9 +1,55 @@
const CurrentAgeElem = document.getElementById("CurrentAge"); const CurrentAgeElem = document.getElementById("CurrentAge");
const RefreshTime = 50; const RefreshTime = 50;
function UpdateHTML() { const ConfettiSleep = 600;
CurrentAgeElem.innerHTML = const ConfettiIter = 32;
"Currently " + UnixToYears() + " years old..";
var ConfettiCalled = false;
var SoundObject = new Audio( // Borrowed music: https://0101.bandcamp.com/track/fireworks
"https://matrix-client.matrix.org/_matrix/media/r0/download/matrix.org/bPhubIokhLQpTfMZhNsVucVO");
SoundObject.muted = true;
function Sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
} }
setInterval(UpdateHTML, RefreshTime); async function Confetti() {
for (let i = 0; i < ConfettiIter; i++) {
const ConfettiCanvas = document.getElementById('ConfettiCanvas');
const JsConfetti = new JSConfetti({ConfettiCanvas});
JsConfetti.addConfetti({
emojis: [
'🌈', '⚡️', '💥',
'✨', '💫', '🌸',
'🏳️‍⚧️️', '🎉️', '🎊️',
'🏳️‍🌈️', '🎈️', '🎆️',
'💘️', '💝️', '💖️',
'💗️', '💞️', '❤️',
'💛️', '💚️', '💜️',
'🤎️', '🖤️', '🤍️',
]
});
JsConfetti.addConfetti();
await Sleep(ConfettiSleep);
}
}
function UpdateAge() {
let Years = UnixToYears();
CurrentAgeElem.innerHTML = "Currently " + Years + " years old..";
if ((Years % 1 == 0) && (!ConfettiCalled)) {
Confetti();
ConfettiCalled = true;
}
// music playing code
}
setInterval(UpdateAge, RefreshTime);
function ClickBody() {
SoundObject.muted = false;
}
document.body.addEventListener("click", ClickBody);

4
public/index.html
View File

@ -11,12 +11,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<link href="Assets/CSS/Dark.css" rel="stylesheet"> <link href="Assets/CSS/Dark.css" rel="stylesheet">
<script src="Assets/JS/RandomGIF.js"></script> <script src="Assets/JS/RandomGIF.js"></script>
<script src="Assets/JS/CurrentAge.js"></script> <script src="Assets/JS/CurrentAge.js"></script>
</head> </head>
<body> <body>
<div id="ConfettiCanvas"></div>
<div class="Content" style="text-align: center;"> <div class="Content" style="text-align: center;">
<h1>OctoSpacc Place</h1><br><br> <h1>OctoSpacc Place</h1><br><br>
<p> <p>