CodeDevMLH/Seasonals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix canvas hide and show

Browse Source
This commit is contained in:
MLH
2025-01-24 00:16:11 +01:00
parent 821e3d1636
commit 8376b0e140
4 changed files with 104 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
seasonals/snowfall.js
View File

@ -6,6 +6,7 @@ const snowFallSpeed = 3; // speed of snowfall (recommended values: 0-5)
let msgPrinted = false; // flag to prevent multiple console messages
let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame
// function to check and control the snowfall
function toggleSnowfall() {
@ -20,12 +21,21 @@ function toggleSnowfall() {
// hide snowfall if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
snowfallContainer.style.display = 'none'; // hide snowfall
removeCanvas();
if (!msgPrinted) {
console.log('Snowfall hidden');
msgPrinted = true;
}
} else {
snowfallContainer.style.display = 'block'; // show snowfall
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(snowfallContainer);
animateSnowfall();
} else {
console.warn('could not initialize snowfall: animation frame is already running');
}
if (msgPrinted) {
console.log('Snowfall visible');
msgPrinted = false;
@ -60,7 +70,21 @@ function initializeCanvas() {
window.addEventListener('resize', () => resizeCanvas(container));
}
function removeCanvas() {
const canvas = document.getElementById('snowfallCanvas');
if (canvas) {
canvas.remove();
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
console.log('Animation frame canceled');
}
console.log('Canvas removed');
}
}
function resizeCanvas(container) {
if (!canvas) return;
const rect = container.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
@ -114,7 +138,7 @@ function updateSnowflakes() {
function animateSnowfall() {
drawSnowflakes();
updateSnowflakes();
requestAnimationFrame(animateSnowfall);
animationFrameId = requestAnimationFrame(animateSnowfall);
}
// initialize snowfall

30
seasonals/snowstorm.js
View File

@ -8,6 +8,7 @@ const verticalVariation = 2; // vertical variation (recommended value: 2)
let msgPrinted = false; // flag to prevent multiple console messages
let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame
// function to check and control the snowstorm
function toggleSnowstorm() {
@ -22,12 +23,21 @@ function toggleSnowstorm() {
// hide snowstorm if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
snowstormContainer.style.display = 'none'; // hide snowstorm
removeCanvas();
if (!msgPrinted) {
console.log('Snowstorm hidden');
msgPrinted = true;
}
} else {
snowstormContainer.style.display = 'block'; // show snowstorm
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(snowstormContainer);
animateSnowstorm();
} else {
console.warn('could not initialize snowfall: animation frame is already running');
}
if (msgPrinted) {
console.log('Snowstorm visible');
msgPrinted = false;
@ -62,7 +72,21 @@ function initializeCanvas() {
window.addEventListener('resize', () => resizeCanvas(container));
}
function removeCanvas() {
const canvas = document.getElementById('snowstormCanvas');
if (canvas) {
canvas.remove();
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
console.log('Animation frame canceled');
}
console.log('Canvas removed');
}
}
function resizeCanvas(container) {
if (!canvas) return;
const rect = container.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
@ -114,10 +138,10 @@ function updateSnowflakes() {
});
}
function animateSnowfall() {
function animateSnowstorm() {
drawSnowflakes();
updateSnowflakes();
requestAnimationFrame(animateSnowfall);
animationFrameId = requestAnimationFrame(animateSnowstorm);
}
// initialize snowfall
@ -137,7 +161,7 @@ function initializeSnowstorm() {
console.log('Snowstorm enabled.');
initializeCanvas();
snowflakes = createSnowflakes(container);
animateSnowfall();
animateSnowstorm();
}
}

26
seperate single seasonals/Seasonals-Snowfall/snowfall.js
View File

@ -6,6 +6,7 @@ const snowFallSpeed = 3; // speed of snowfall (recommended values: 0-5)
let msgPrinted = false; // flag to prevent multiple console messages
let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame
// function to check and control the snowfall
function toggleSnowfall() {
@ -20,12 +21,21 @@ function toggleSnowfall() {
// hide snowfall if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
snowfallContainer.style.display = 'none'; // hide snowfall
removeCanvas();
if (!msgPrinted) {
console.log('Snowfall hidden');
msgPrinted = true;
}
} else {
snowfallContainer.style.display = 'block'; // show snowfall
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(snowfallContainer);
animateSnowfall();
} else {
console.warn('could not initialize snowfall: animation frame is already running');
}
if (msgPrinted) {
console.log('Snowfall visible');
msgPrinted = false;
@ -60,7 +70,21 @@ function initializeCanvas() {
window.addEventListener('resize', () => resizeCanvas(container));
}
function removeCanvas() {
const canvas = document.getElementById('snowfallCanvas');
if (canvas) {
canvas.remove();
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
console.log('Animation frame canceled');
}
console.log('Canvas removed');
}
}
function resizeCanvas(container) {
if (!canvas) return;
const rect = container.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
@ -114,7 +138,7 @@ function updateSnowflakes() {
function animateSnowfall() {
drawSnowflakes();
updateSnowflakes();
requestAnimationFrame(animateSnowfall);
animationFrameId = requestAnimationFrame(animateSnowfall);
}
// initialize snowfall

30
seperate single seasonals/Seasonals-Snowstorm/snowstorm.js
View File

@ -8,6 +8,7 @@ const verticalVariation = 2; // vertical variation (recommended value: 2)
let msgPrinted = false; // flag to prevent multiple console messages
let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame
// function to check and control the snowstorm
function toggleSnowstorm() {
@ -22,12 +23,21 @@ function toggleSnowstorm() {
// hide snowstorm if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
snowstormContainer.style.display = 'none'; // hide snowstorm
removeCanvas();
if (!msgPrinted) {
console.log('Snowstorm hidden');
msgPrinted = true;
}
} else {
snowstormContainer.style.display = 'block'; // show snowstorm
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(snowstormContainer);
animateSnowstorm();
} else {
console.warn('could not initialize snowfall: animation frame is already running');
}
if (msgPrinted) {
console.log('Snowstorm visible');
msgPrinted = false;
@ -62,7 +72,21 @@ function initializeCanvas() {
window.addEventListener('resize', () => resizeCanvas(container));
}
function removeCanvas() {
const canvas = document.getElementById('snowstormCanvas');
if (canvas) {
canvas.remove();
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
console.log('Animation frame canceled');
}
console.log('Canvas removed');
}
}
function resizeCanvas(container) {
if (!canvas) return;
const rect = container.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
@ -114,10 +138,10 @@ function updateSnowflakes() {
});
}
function animateSnowfall() {
function animateSnowstorm() {
drawSnowflakes();
updateSnowflakes();
requestAnimationFrame(animateSnowfall);
animationFrameId = requestAnimationFrame(animateSnowstorm);
}
// initialize snowfall
@ -137,7 +161,7 @@ function initializeSnowstorm() {
console.log('Snowstorm enabled.');
initializeCanvas();
snowflakes = createSnowflakes(container);
animateSnowfall();
animateSnowstorm();
}
}