website/assets/js/main.js

116 lines
3.9 KiB
JavaScript

const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"];
const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066'];
var backgroundVideo;
var pausetext;
window.onload = function () {
try {
document.getElementById("moreInfo").classList.add('div-hidden');
document.getElementById("specs").classList.add('div-hidden');
} catch (exception) {
console.log("something was supposed to happen, but it didnt.");
}
backgroundVideo = document.getElementById("bgvideo");
pausetext = document.getElementById("pausetext");
var enableVideoBackground = document.getElementById("enableVideoBackground");
var enableRandomBackrounds = document.getElementById("enableRandomBackrounds");
if (localStorage.getItem("enableRandomBackrounds") == "true") {
randomColorAndBackground();
}
if (localStorage.getItem("enableVideoBackground") == "true") {
backgroundVideo.play();
backgroundVideo.style.display = "block";
enableVideoBackground.checked = true;
}
enableVideoBackground.addEventListener('change', function () {
if (this.checked) {
backgroundVideo.style.display = "block";
enableRandomBackrounds.checked = false;
backgroundVideo.play();
setDefaultColorAndBackground();
localStorage.setItem("enableVideoBackground", true);
} else {
backgroundVideo.style.display = "none";
localStorage.setItem("enableVideoBackground", false);
}
});
enableRandomBackrounds.addEventListener('change', function () {
if (this.checked) {
backgroundVideo.style.display = "none";
randomColorAndBackground();
enableVideoBackground.checked = false;
localStorage.setItem("enableRandomBackrounds", true);
localStorage.setItem("enableVideoBackground", false);
} else {
setDefaultColorAndBackground();
localStorage.setItem("enableRandomBackrounds", false);
}
});
};
function randomColorAndBackground() {
console.log("ran");
const randValue = getRandomInt(backgrounds.length);
document.documentElement.style.setProperty('--accent-color', colors[randValue]);
document.body.style.background = getBackground(randValue);
document.body.style.backgroundSize = "cover";
}
function setDefaultColorAndBackground() {
document.documentElement.style.setProperty('--accent-color', colors[1]);
document.body.style.background = getBackground(1);
document.body.style.backgroundSize = "cover";
}
function pauseVideo() {
if (!backgroundVideo.videoPaused) {
backgroundVideo.pause();
} else {
backgroundVideo.play();
}
}
function showThing(element) {
var gallery = document.getElementById(element);
if (gallery.classList.contains("div-hidden")) {
gallery.classList.remove('div-hidden');
} else {
gallery.classList.add('div-hidden');
}
}
function rotate() {
var x = document.getElementsByTagName("BODY")[0];
x.className = "rotate";
var button = document.getElementById("rotate_button");
button.style.display = "none";
}
function reset_animation(element) {
element.style.animation = 'none';
element.offsetHeight; /* trigger reflow */
element.style.animation = null;
}
function getBackground(i) {
return 'url("/assets/images/' + backgrounds[i] + '")';
}
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function showSettings() {
var settings = document.getElementById("settings");
if (settings.style.display == "none") {
settings.style.display = "block";
setTimeout(() => { settings.style.opacity = "1"; }, 200);
} else {
settings.style.opacity = "0";
setTimeout(() => { settings.style.display = "none"; }, 200);
}
}