made dvd page work

cthit · Apr 26, 2024 · 61eb2ff · 61eb2ff
1 parent e155929
commit 61eb2ff
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 6 deletions.
diff --git a/backend/imageRouter.js b/backend/imageRouter.js
@@ -104,7 +104,7 @@ imageRouter.get('/getAllImages', (req, res) => {
 	allImages.forEach(image => {
 		const creator = users.find(user => user.id === image.createdBy);
 		if (creator) image.createdBy = creator.username;
-		else image.createdBy = "Unknown user";
+		else image.createdBy = "Unknown user";	
 	});
 
 	res.status(200).send(allImages);

diff --git a/public/css/dvd.css b/public/css/dvd.css
@@ -0,0 +1,33 @@
+body {
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #333;
+    overflow: hidden;
+}
+
+.dvdLogo {
+    background: rgb(14, 18, 50);
+    color: #fff;
+
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+    position: absolute;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 20vw;
+    height: 20vw;
+    max-height: 90vh;
+    height: max-content;
+}
+
+.eventImage {
+    width: 100%;
+    max-height: 90%;
+}
diff --git a/public/dvd.html b/public/dvd.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>screenIT - dvd logo</title>
+
+    <link rel="stylesheet" href="css/dvd.css">
+
+    <script src="js/dvd.js" defer></script>
+</head>
+<body>
+    <div id="dvdLogo" class="dvdLogo">
+        <img id="eventImage" class="eventImage" src="img/easterEggs/hubben-rattan-eating-1.png"></img>
+        <p id="text">PIXELN GREJS</p>
+
+    </div>
+</body>
+</html>
diff --git a/public/js/dvd.js b/public/js/dvd.js
@@ -0,0 +1,88 @@
+const logo = document.getElementById('eventImage');
+const dvdLogo = document.getElementById('dvdLogo');
+const text = document.getElementById('text');
+
+setMaxValues();
+let x = Math.random() * maxX;
+let y = Math.random() * maxY;
+
+
+
+let xVelocity = 2;
+let yVelocity = 2;
+
+console.log("maxX: " + maxX)
+console.log("maxY: " + maxY)
+
+console.log(x)
+console.log(y)
+
+
+images = [];
+let pathToEventImages = "/img/eventImages/";
+let currentImage = 0;
+
+function setMaxValues() {
+    maxX = window.innerWidth - dvdLogo.offsetWidth;
+    maxY = window.innerHeight - dvdLogo.offsetHeight;
+}
+
+async function getFutureImages() {
+    return await fetch('/api/images/getFutureImages')
+        .then(response => response.json())
+        .then(data => {
+            return data;
+        });
+}
+
+function nextImage(){ // TODO: This function is what makes the div get stuck in the sides sometimes
+    currentImage = (currentImage + 1) % images.length;
+    logo.src = pathToEventImages + images[currentImage].path; 
+
+    setMaxValues();
+    text.innerHTML = images[currentImage].eventName || "Undertext";
+}
+
+getFutureImages().then(newImages => {
+        images = newImages
+});
+
+function updatePosition() {
+    x += xVelocity;
+    y += yVelocity;
+
+    if (x <= 0 && xVelocity < 0) {
+        nextImage();
+        xVelocity *= -1;
+    } else if (x >= maxX && xVelocity > 0) {
+        nextImage();   
+        xVelocity *= -1;
+    }
+
+    if (y <= 0 && yVelocity < 0) {
+        nextImage();
+        yVelocity *= -1;
+    } else if (y >= maxY && yVelocity > 0) {
+        nextImage();
+        yVelocity *= -1;
+    }
+
+    dvdLogo.style.left = x + 'px';
+    dvdLogo.style.top = y + 'px';
+}
+
+let intervalId;
+intervalId = setInterval(updatePosition, 10);
+running = true;
+
+document.addEventListener("keydown", (event) => {
+    if (event.code === "Space") {
+        if (running) {
+            clearInterval(intervalId);
+            running = false;
+        } else {
+            intervalId = setInterval(updatePosition, 10);
+            running = true;
+        }
+    }
+});
diff --git a/public/js/gallery.js b/public/js/gallery.js
@@ -170,7 +170,6 @@ function hideMenus() {
 }
 
 function showMenus() {
-
     optionsMenu.classList.remove('invisible')
     settingsDiv.classList.remove('invisible')
 }
@@ -190,10 +189,10 @@ settingsDiv.addEventListener('mouseenter', function() {
 setTimeout(() => {
     const optionsMenu = document.getElementById('optionsMenu');
 
-optionsMenu.addEventListener('mouseenter', function() {
-    showMenus();
-    hideMenus();
-});
+    optionsMenu.addEventListener('mouseenter', function() {
+        showMenus();
+        hideMenus();
+    });
 }, 2000);