Compare commits
2 Commits
492acb4052
...
8be17dae74
| Author | SHA1 | Date | |
|---|---|---|---|
|
8be17dae74 | ||
|
|
76006dc162 |
@@ -1,10 +1,34 @@
|
||||
const config = window.SeasonalsPluginConfig?.Olympia || {};
|
||||
|
||||
const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : 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;
|
||||
const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; // enable/disable olympia theme
|
||||
const symbolCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of floating symbols
|
||||
const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of floating symbols on mobile
|
||||
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
|
||||
|
||||
// Olympic Ring Colors (Carnival Config)
|
||||
const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E'];
|
||||
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
|
||||
const confettiCount = isMobile ? 30 : 60;
|
||||
|
||||
/**
|
||||
* Credits:
|
||||
* https://lottiefiles.com/free-animation/gold-coin-5Spp5kJbLP
|
||||
* https://lottiefiles.com/free-animation/silver-coin-SIgIP59fII
|
||||
* https://lottiefiles.com/free-animation/bronze-coin-wWVCJMsOUq
|
||||
*/
|
||||
const olympicMedals = [
|
||||
"../Seasonals/Resources/olympic_assets/gold_coin.gif",
|
||||
"../Seasonals/Resources/olympic_assets/silver_coin.gif",
|
||||
"../Seasonals/Resources/olympic_assets/bronze_coin.gif"
|
||||
]
|
||||
|
||||
/**
|
||||
* Credits:
|
||||
* https://www.flaticon.com/de/kostenloses-icon/fackel_4683293
|
||||
* merged with:
|
||||
* https://lottiefiles.com/free-animation/abstract-flames-lottie-json-animation-oSb0IFoBrj
|
||||
*/
|
||||
const olympicTorch = "../Seasonals/Resources/olympic_assets/torch.gif";
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
@@ -49,27 +73,23 @@ function createOlympia() {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
let finalCount = isMobile ? symbolCountMobile : symbolCount;
|
||||
|
||||
const useRandomDuration = enableDifferentDuration !== false;
|
||||
|
||||
const activeItems = ['gold', 'silver', 'bronze', 'torch', 'rings_blue', 'rings_yellow', 'rings_black', 'rings_green', 'rings_red'];
|
||||
const olympicRings = ['ring_blue.css', 'ring_yellow.css', 'ring_black.css', 'ring_green.css', 'ring_red.css'];
|
||||
const activeItems = [...olympicMedals, ...olympicRings];
|
||||
|
||||
for (let i = 0; i < finalCount; i++) {
|
||||
let symbol = document.createElement('div');
|
||||
|
||||
const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
|
||||
const isRing = randomItem.startsWith('rings');
|
||||
const isMedal = ['gold', 'silver', 'bronze'].includes(randomItem);
|
||||
const randomImgUrl = activeItems[Math.floor(Math.random() * activeItems.length)];
|
||||
const isRing = randomImgUrl.includes('ring_');
|
||||
const isMedal = randomImgUrl.includes('_coin');
|
||||
|
||||
symbol.className = `olympia-symbol olympia-${randomItem}`;
|
||||
symbol.className = `olympia-symbol`;
|
||||
|
||||
// Create inner div for sway/rotation
|
||||
let innerDiv = document.createElement('div');
|
||||
@@ -77,19 +97,20 @@ function createOlympia() {
|
||||
let img = null;
|
||||
|
||||
if (isRing) {
|
||||
const colorName = randomImgUrl.split('ring_')[1].split('.')[0];
|
||||
const ringColorMap = {
|
||||
'rings_blue': '#0081C8',
|
||||
'rings_yellow': '#FCB131',
|
||||
'rings_black': '#000000',
|
||||
'rings_green': '#00A651',
|
||||
'rings_red': '#EE334E'
|
||||
'blue': '#0081C8',
|
||||
'yellow': '#FCB131',
|
||||
'black': '#000000',
|
||||
'green': '#00A651',
|
||||
'red': '#EE334E'
|
||||
};
|
||||
let ringDiv = document.createElement('div');
|
||||
ringDiv.className = 'olympia-ring-css';
|
||||
ringDiv.style.setProperty('--ring-color', ringColorMap[randomItem]);
|
||||
ringDiv.style.setProperty('--ring-color', ringColorMap[colorName]);
|
||||
innerDiv.appendChild(ringDiv);
|
||||
|
||||
// Add a 3D flip animation for rings and medals
|
||||
// Add a 3D flip animation for rings
|
||||
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
|
||||
innerDiv.style.animation = `olympia-tumble-3d ${Math.random() * 4 + 4}s linear infinite ${spinReverse}`;
|
||||
|
||||
@@ -99,13 +120,7 @@ function createOlympia() {
|
||||
innerDiv.style.setProperty('--rot-z', (Math.random() * 2 - 1).toFixed(2));
|
||||
} else {
|
||||
img = document.createElement('img');
|
||||
let imgName = randomItem;
|
||||
if (isMedal) {
|
||||
imgName = `${randomItem}_coin.gif`;
|
||||
} else {
|
||||
imgName = `${randomItem}.png`;
|
||||
}
|
||||
img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
|
||||
img.src = randomImgUrl;
|
||||
img.onerror = function() {
|
||||
symbol.remove();
|
||||
};
|
||||
@@ -181,10 +196,6 @@ function createOlympia() {
|
||||
|
||||
createTorch(true);
|
||||
createTorch(false);
|
||||
|
||||
// Olympic Ring Colors (Carnival Config)
|
||||
const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E'];
|
||||
const confettiCount = isMobile ? 30 : 60;
|
||||
|
||||
for (let i = 0; i < confettiCount; i++) {
|
||||
let wrapper = document.createElement('div');
|
||||
|
||||
@@ -235,41 +235,41 @@
|
||||
<label for="theme-select">Theme:</label>
|
||||
<select id="theme-select">
|
||||
<option value="" selected disabled>— Select a theme —</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="birthday">Birthday</option>
|
||||
<option value="carnival">Carnival (Confetti)</option>
|
||||
<option value="cherryblossom">Cherryblossom</option>
|
||||
<option value="christmas">Christmas</option>
|
||||
<option value="earthday">Earth Day</option>
|
||||
<option value="easter">Easter</option>
|
||||
<option value="eid">Eid al-Fitr</option>
|
||||
<option value="eurovision">Eurovision</option>
|
||||
<option value="filmnoir">Film-Noir</option>
|
||||
<option value="fireworks">Fireworks</option>
|
||||
<option value="frost">Frost / Ice</option>
|
||||
<option value="friday13">Friday the 13th</option>
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="hearts">Hearts</option>
|
||||
<option value="marioday">Mario Day</option>
|
||||
<option value="matrix">Matrix</option>
|
||||
<option value="oktoberfest">Oktoberfest</option>
|
||||
<option value="olympia">Olympia</option>
|
||||
<option value="oscar">Oscar Awards</option>
|
||||
<option value="pride">Pride</option>
|
||||
<option value="rain">Rain</option>
|
||||
<option value="resurrection">Resurrection</option>
|
||||
<option value="santa">Santa</option>
|
||||
<option value="snowfall">Snowfall</option>
|
||||
<option value="snowflakes">Snowflakes</option>
|
||||
<option value="snowstorm">Snowstorm</option>
|
||||
<option value="fireworks">Fireworks</option>
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="spooky">Spooky</option>
|
||||
<option value="hearts">Hearts</option>
|
||||
<option value="christmas">Christmas</option>
|
||||
<option value="santa">Santa</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="easter">Easter</option>
|
||||
<option value="resurrection">Resurrection</option>
|
||||
<option value="spring">Spring</option>
|
||||
<option value="summer">Summer (Bubbles)</option>
|
||||
<option value="carnival">Carnival (Confetti)</option>
|
||||
<option value="cherryblossom">Cherryblossom</option>
|
||||
<option value="earthday">Earth Day</option>
|
||||
<option value="eurovision">Eurovision</option>
|
||||
<option value="matrix">Matrix</option>
|
||||
<option value="pride">Pride</option>
|
||||
<option value="rain">Rain</option>
|
||||
<option value="storm">Storm (⚠️Epilepsy Warning⚠️)</option>
|
||||
<option value="frost">Frost / Ice</option>
|
||||
<option value="filmnoir">Film-Noir</option>
|
||||
<option value="oscar">Oscar Awards</option>
|
||||
<option value="marioday">Mario Day</option>
|
||||
<option value="starwars">Star Wars Day</option>
|
||||
<option value="oktoberfest">Oktoberfest</option>
|
||||
<option value="friday13">Friday the 13th</option>
|
||||
<option value="eid">Eid al-Fitr</option>
|
||||
<option value="sports">Sports</option>
|
||||
<option value="olympia">Olympia</option>
|
||||
<option value="space">Space / Sci-Fi</option>
|
||||
<option value="spooky">Spooky</option>
|
||||
<option value="sports">Sports</option>
|
||||
<option value="spring">Spring</option>
|
||||
<option value="starwars">Star Wars Day</option>
|
||||
<option value="storm">Storm (⚠️Epilepsy Warning⚠️)</option>
|
||||
<option value="summer">Summer (Bubbles)</option>
|
||||
<option value="underwater">Underwater</option>
|
||||
<option value="birthday">Birthday</option>
|
||||
<option value="custom">⚙ Custom (Local Files)</option>
|
||||
</select>
|
||||
|
||||
@@ -341,41 +341,41 @@
|
||||
|
||||
// ── Built-in theme map (local file paths for testing) ──
|
||||
const themes = {
|
||||
snowfall: { css: 'snowfall.css', js: 'snowfall.js', container: 'snowfall-container' },
|
||||
snowflakes: { css: 'snowflakes.css', js: 'snowflakes.js', container: 'snowflakes' },
|
||||
snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
|
||||
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
|
||||
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
|
||||
spooky: { css: 'spooky.css', js: 'spooky.js', container: 'spooky-container' },
|
||||
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
|
||||
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
|
||||
santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
|
||||
autumn: { css: 'autumn.css', js: 'autumn.js', container: 'autumn-container' },
|
||||
easter: { css: 'easter.css', js: 'easter.js', container: 'easter-container' },
|
||||
resurrection: { css: 'resurrection.css', js: 'resurrection.js', container: 'resurrection-container' },
|
||||
spring: { css: 'spring.css', js: 'spring.js', container: 'spring-container' },
|
||||
summer: { css: 'summer.css', js: 'summer.js', container: 'summer-container' },
|
||||
birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' },
|
||||
carnival: { css: 'carnival.css', js: 'carnival.js', container: 'carnival-container' },
|
||||
cherryblossom: { css: 'cherryblossom.css', js: 'cherryblossom.js', container: 'cherryblossom-container' },
|
||||
cherryblossom:{ css: 'cherryblossom.css', js: 'cherryblossom.js',container: 'cherryblossom-container' },
|
||||
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
|
||||
earthday: { css: 'earthday.css', js: 'earthday.js', container: 'earthday-container' },
|
||||
easter: { css: 'easter.css', js: 'easter.js', container: 'easter-container' },
|
||||
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
|
||||
eurovision: { css: 'eurovision.css', js: 'eurovision.js', container: 'eurovision-container' },
|
||||
matrix: { css: 'matrix.css', js: 'matrix.js', container: 'matrix-container' },
|
||||
filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' },
|
||||
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
|
||||
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' },
|
||||
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
|
||||
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
|
||||
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
|
||||
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' },
|
||||
matrix: { css: 'matrix.css', js: 'matrix.js', container: 'matrix-container' },
|
||||
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
|
||||
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
|
||||
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' },
|
||||
pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' },
|
||||
rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' },
|
||||
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' },
|
||||
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' },
|
||||
filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' },
|
||||
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' },
|
||||
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' },
|
||||
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
|
||||
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
|
||||
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
|
||||
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
|
||||
sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
|
||||
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
|
||||
resurrection: { css: 'resurrection.css', js: 'resurrection.js', container: 'resurrection-container' },
|
||||
santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
|
||||
snowfall: { css: 'snowfall.css', js: 'snowfall.js', container: 'snowfall-container' },
|
||||
snowflakes: { css: 'snowflakes.css', js: 'snowflakes.js', container: 'snowflakes' },
|
||||
snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
|
||||
space: { css: 'space.css', js: 'space.js', container: 'space-container' },
|
||||
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' },
|
||||
birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' }
|
||||
spooky: { css: 'spooky.css', js: 'spooky.js', container: 'spooky-container' },
|
||||
sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
|
||||
spring: { css: 'spring.css', js: 'spring.js', container: 'spring-container' },
|
||||
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
|
||||
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' },
|
||||
summer: { css: 'summer.css', js: 'summer.js', container: 'summer-container' },
|
||||
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' }
|
||||
};
|
||||
|
||||
const select = document.getElementById('theme-select');
|
||||
|
||||
Reference in New Issue
Block a user