125 lines
4.2 KiB
JavaScript
125 lines
4.2 KiB
JavaScript
const config = window.SeasonalsPluginConfig?.Space || {};
|
|
|
|
const space = config.EnableSpace !== undefined ? config.EnableSpace : true;
|
|
const symbolCount = config.SymbolCount || 25;
|
|
const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
|
|
const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
|
|
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
|
|
|
|
let msgPrinted = false;
|
|
|
|
function toggleSpace() {
|
|
const container = document.querySelector('.space-container');
|
|
if (!container) return;
|
|
|
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
|
const isDashboard = document.body.classList.contains('dashboardDocument');
|
|
const hasUserMenu = document.querySelector('#app-user-menu');
|
|
|
|
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
|
container.style.display = 'none';
|
|
if (!msgPrinted) {
|
|
console.log('Space hidden');
|
|
msgPrinted = true;
|
|
}
|
|
} else {
|
|
container.style.display = 'block';
|
|
if (msgPrinted) {
|
|
console.log('Space visible');
|
|
msgPrinted = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
const observer = new MutationObserver(toggleSpace);
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributes: true
|
|
});
|
|
|
|
function createSpace() {
|
|
const container = document.querySelector('.space-container') || document.createElement('div');
|
|
|
|
if (!document.querySelector('.space-container')) {
|
|
container.className = 'space-container';
|
|
container.setAttribute("aria-hidden", "true");
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
const standardCount = 15;
|
|
const totalSymbols = symbolCount + standardCount;
|
|
|
|
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
|
|
let finalCount = totalSymbols;
|
|
|
|
if (isMobile) {
|
|
finalCount = enableRandomMobile ? totalSymbols : standardCount;
|
|
}
|
|
|
|
const useRandomDuration = enableDifferentDuration !== false;
|
|
|
|
const activeItems = ['planet1', 'planet2', 'star', 'astronaut', 'rocket'];
|
|
|
|
for (let i = 0; i < finalCount; i++) {
|
|
let symbol = document.createElement('div');
|
|
|
|
const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
|
|
symbol.className = `space-symbol space-${randomItem}`;
|
|
|
|
let img = document.createElement('img');
|
|
img.src = `../Seasonals/Resources/space_images/${randomItem}.png`;
|
|
img.onerror = function() {
|
|
this.style.display = 'none';
|
|
this.parentElement.innerHTML = getSpaceEmojiFallback(randomItem);
|
|
};
|
|
symbol.appendChild(img);
|
|
|
|
const topPos = Math.random() * 90; // 0 to 90vh
|
|
const delaySeconds = Math.random() * 10;
|
|
|
|
let durationSeconds = 15;
|
|
if (useRandomDuration) {
|
|
durationSeconds = Math.random() * 15 + 15; // 15 to 30 seconds for slow drift
|
|
}
|
|
|
|
// Randomly pick direction: left-to-right OR right-to-left
|
|
const goRight = Math.random() > 0.5;
|
|
if (goRight) {
|
|
symbol.style.animationName = 'space-drift-right';
|
|
symbol.style.left = '-10vw';
|
|
symbol.style.transform = 'scaleX(-1)'; // flip some items horizontally if moving right
|
|
} else {
|
|
symbol.style.animationName = 'space-drift-left';
|
|
symbol.style.right = '-10vw';
|
|
}
|
|
|
|
symbol.style.top = `${topPos}vh`;
|
|
symbol.style.animationDuration = `${durationSeconds}s`;
|
|
symbol.style.animationDelay = `${delaySeconds}s`;
|
|
|
|
// Add a slow rotation
|
|
symbol.style.setProperty('--rot-dur', `${durationSeconds}s`);
|
|
|
|
container.appendChild(symbol);
|
|
}
|
|
}
|
|
|
|
function getSpaceEmojiFallback(type) {
|
|
if (type === 'planet1') return '🪐';
|
|
if (type === 'planet2') return '🌍';
|
|
if (type === 'star') return '⭐';
|
|
if (type === 'astronaut') return '👨🚀';
|
|
if (type === 'rocket') return '🚀';
|
|
return '✨';
|
|
}
|
|
|
|
function initializeSpace() {
|
|
if (!space) return;
|
|
createSpace();
|
|
toggleSpace();
|
|
}
|
|
|
|
initializeSpace();
|