Compare commits
16 Commits
30c29d440f
...
v2.0.0.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
3d9a474aae | ||
|
|
db5baa1fd7 | ||
|
|
72ad4ee1a4 | ||
|
|
bb6c7796d5 | ||
|
|
bd8088c52b | ||
|
|
3c1bd01373 | ||
|
|
669ac6d3da | ||
|
|
73f9be91ef | ||
|
|
f14785c54a | ||
|
|
296873f89e | ||
|
|
d6a9ff7176 | ||
|
|
ef15857533 | ||
|
|
19b21ba94f | ||
|
|
8f322fd6cf | ||
|
|
bdc7d2e325 | ||
|
|
8afe397c23 |
@@ -375,6 +375,7 @@ public class SpookyOptions
|
||||
{
|
||||
public bool EnableSpooky { get; set; } = true;
|
||||
public int SymbolCount { get; set; } = 25;
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
public bool EnableSpookySway { get; set; } = true;
|
||||
public int SpookySize { get; set; } = 20;
|
||||
public int SpookyGlowSize { get; set; } = 2;
|
||||
@@ -389,6 +390,7 @@ public class SportsOptions
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
public string TurfColor { get; set; } = "#228b22";
|
||||
public string SportsBalls { get; set; } = "football,basketball,tennis,volleyball";
|
||||
public bool EnableTrophy { get; set; } = false;
|
||||
}
|
||||
|
||||
public class OlympiaOptions
|
||||
@@ -402,7 +404,11 @@ public class OlympiaOptions
|
||||
|
||||
public class SpaceOptions
|
||||
{
|
||||
public int SymbolCount { get; set; } = 25;
|
||||
public int PlanetCount { get; set; } = 12;
|
||||
public int AstronautCount { get; set; } = 5;
|
||||
public int SatelliteCount { get; set; } = 2;
|
||||
public int IssCount { get; set; } = 1;
|
||||
public int RocketCount { get; set; } = 1;
|
||||
public bool EnableSpace { get; set; } = true;
|
||||
public bool EnableRandomSymbols { get; set; } = true;
|
||||
public bool EnableRandomSymbolsMobile { get; set; } = false;
|
||||
@@ -429,7 +435,8 @@ public class UnderwaterOptions
|
||||
|
||||
public class BirthdayOptions
|
||||
{
|
||||
public int SymbolCount { get; set; } = 25;
|
||||
public int SymbolCount { get; set; } = 5;
|
||||
public int ConfettiCount { get; set; } = 60;
|
||||
public bool EnableBirthday { get; set; } = true;
|
||||
public bool EnableRandomSymbols { get; set; } = true;
|
||||
public bool EnableRandomSymbolsMobile { get; set; } = false;
|
||||
|
||||
@@ -70,16 +70,13 @@
|
||||
<option value="carnival">Carnival (Confetti)</option>
|
||||
<option value="cherryblossom">Cherry Blossom</option>
|
||||
<option value="resurrection">Resurrection by Bioflash257</option>
|
||||
<option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
|
||||
<option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
|
||||
<option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
|
||||
<option value="earthday">Earth Day (Growing Vines)</option>
|
||||
<option value="eurovision">Eurovision (Dancing Notes)</option>
|
||||
<option value="oscar">Oscar Awards (Glamour & Flashes)</option>
|
||||
<option value="matrix">Matrix</option>
|
||||
<option value="pride">Pride (Rainbow Border)</option>
|
||||
<option value="rain">Rain (Pure Rain)</option>
|
||||
<option value="storm">Storm (Heavy Rain & Lightning (⚠️Epilepsy Warning))</option>
|
||||
<option value="storm">Storm (Heavy Rain & Lightning (⚠️Epilepsy Warning⚠️))</option>
|
||||
<option value="frost">Frost / Ice</option>
|
||||
<option value="filmnoir">Film-Noir (Classic B&W Cinema)</option>
|
||||
<option value="marioday">Mario Day (March 10)</option>
|
||||
@@ -88,6 +85,8 @@
|
||||
<option value="friday13">Friday the 13th</option>
|
||||
<option value="eidalfitr">Eid al-Fitr (Sugar Feast)</option>
|
||||
<option value="spooky">Spooky</option>
|
||||
<option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
|
||||
<option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
|
||||
</select>
|
||||
<div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
|
||||
</div>
|
||||
@@ -389,6 +388,12 @@
|
||||
<input is="emby-input" type="number" id="SpookySize" name="SpookySize" />
|
||||
<div class="fieldDescription">Size of the floating symbols in pixels (default 30).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationSpooky" name="EnableDifferentDurationSpooky" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Different Symbol Durations</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableSpookySway" name="EnableSpookySway" type="checkbox" is="emby-checkbox" />
|
||||
@@ -935,6 +940,13 @@
|
||||
<span>Enable Different Duration</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableTrophy" name="EnableTrophy" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Trophy</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the flying trophy animation.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="TurfColor">Turf Color</label>
|
||||
<input is="emby-input" type="color" id="TurfColor" name="TurfColor" value="#228b22" />
|
||||
@@ -1054,9 +1066,29 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SpaceSymbolCount">Symbol Count</label>
|
||||
<input is="emby-input" type="number" id="SpaceSymbolCount" name="SpaceSymbolCount" />
|
||||
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
|
||||
<label class="inputLabel" for="PlanetCount">Planet Count</label>
|
||||
<input is="emby-input" type="number" id="PlanetCount" name="PlanetCount" />
|
||||
<div class="fieldDescription">Number of planets displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="AstronautCount">Astronaut Count</label>
|
||||
<input is="emby-input" type="number" id="AstronautCount" name="AstronautCount" />
|
||||
<div class="fieldDescription">Number of astronauts displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SatelliteCount">Satellite Count</label>
|
||||
<input is="emby-input" type="number" id="SatelliteCount" name="SatelliteCount" />
|
||||
<div class="fieldDescription">Number of satellites displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="IssCount">ISS Count</label>
|
||||
<input is="emby-input" type="number" id="IssCount" name="IssCount" />
|
||||
<div class="fieldDescription">Number of ISS symbols displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="RocketCount">Rocket Count</label>
|
||||
<input is="emby-input" type="number" id="RocketCount" name="RocketCount" />
|
||||
<div class="fieldDescription">Number of rockets displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
@@ -1171,6 +1203,11 @@
|
||||
<input is="emby-input" type="number" id="BirthdaySymbolCount" name="BirthdaySymbolCount" />
|
||||
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="BirthdayConfettiCount">Confetti Count</label>
|
||||
<input is="emby-input" type="number" id="BirthdayConfettiCount" name="BirthdayConfettiCount" />
|
||||
<div class="fieldDescription">Number of confetti pieces created when a balloon bursts.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationBirthday" name="EnableDifferentDurationBirthday" type="checkbox" is="emby-checkbox" />
|
||||
@@ -1748,6 +1785,7 @@
|
||||
|
||||
// Advanced Config
|
||||
// Autumn
|
||||
|
||||
document.querySelector('#EnableAutumn').checked = config.Autumn.EnableAutumn;
|
||||
document.querySelector('#AutumnLeafCount').value = config.Autumn.LeafCount;
|
||||
document.querySelector('#EnableRandomLeaves').checked = config.Autumn.EnableRandomLeaves;
|
||||
@@ -1755,146 +1793,49 @@
|
||||
document.querySelector('#EnableDifferentDurationAutumn').checked = config.Autumn.EnableDifferentDuration;
|
||||
document.querySelector('#EnableRotation').checked = config.Autumn.EnableRotation;
|
||||
|
||||
// Snowflakes
|
||||
document.querySelector('#SnowflakesCount').value = config.Snowflakes.SnowflakeCount;
|
||||
document.querySelector('#EnableSnowflakes').checked = config.Snowflakes.EnableSnowflakes;
|
||||
document.querySelector('#EnableRandomSnowflakes').checked = config.Snowflakes.EnableRandomSnowflakes;
|
||||
document.querySelector('#EnableRandomSnowflakesMobile').checked = config.Snowflakes.EnableRandomSnowflakesMobile;
|
||||
document.querySelector('#EnableColoredSnowflakes').checked = config.Snowflakes.EnableColoredSnowflakes;
|
||||
document.querySelector('#EnableDifferentDurationSnowflakes').checked = config.Snowflakes.EnableDifferentDuration;
|
||||
|
||||
// Snowfall
|
||||
document.querySelector('#EnableSnowfall').checked = config.Snowfall.EnableSnowfall;
|
||||
document.querySelector('#SnowfallCount').value = config.Snowfall.SnowflakesCount;
|
||||
document.querySelector('#SnowfallCountMobile').value = config.Snowfall.SnowflakesCountMobile;
|
||||
document.querySelector('#SnowfallSpeed').value = config.Snowfall.Speed;
|
||||
|
||||
// Snowstorm
|
||||
document.querySelector('#EnableSnowstorm').checked = config.Snowstorm.EnableSnowstorm;
|
||||
document.querySelector('#SnowstormCount').value = config.Snowstorm.SnowflakesCount;
|
||||
document.querySelector('#SnowstormCountMobile').value = config.Snowstorm.SnowflakesCountMobile;
|
||||
document.querySelector('#SnowstormSpeed').value = config.Snowstorm.Speed;
|
||||
document.querySelector('#SnowstormHorizontalWind').value = config.Snowstorm.HorizontalWind;
|
||||
document.querySelector('#SnowstormVerticalVariation').value = config.Snowstorm.VerticalVariation;
|
||||
|
||||
// Fireworks
|
||||
document.querySelector('#EnableFireworks').checked = config.Fireworks.EnableFireworks;
|
||||
document.querySelector('#FireworksParticles').value = config.Fireworks.ParticleCount;
|
||||
document.querySelector('#FireworksInterval').value = config.Fireworks.LaunchInterval;
|
||||
document.querySelector('#ScrollFireworks').checked = config.Fireworks.ScrollFireworks;
|
||||
document.querySelector('#MinFireworks').value = config.Fireworks.MinFireworks;
|
||||
document.querySelector('#MaxFireworks').value = config.Fireworks.MaxFireworks;
|
||||
|
||||
// Eid
|
||||
document.querySelector('#EidSymbolCount').value = config.Eid.SymbolCount || 25;
|
||||
|
||||
// Spooky Theme
|
||||
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount || 25;
|
||||
|
||||
// Sports
|
||||
document.querySelector('#EnableSports').checked = config.Sports.EnableSports || false;
|
||||
document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration || false;
|
||||
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
|
||||
|
||||
// Olympia
|
||||
document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia || false;
|
||||
document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration || false;
|
||||
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
|
||||
|
||||
// Space
|
||||
document.querySelector('#EnableSpace').checked = config.Space.EnableSpace || false;
|
||||
document.querySelector('#EnableRandomSymbolsSpace').checked = config.Space.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileSpace').checked = config.Space.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationSpace').checked = config.Space.EnableDifferentDuration || false;
|
||||
document.querySelector('#SpaceSymbolCount').value = config.Space.SymbolCount || 25;
|
||||
|
||||
// Underwater
|
||||
document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater || false;
|
||||
document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration || false;
|
||||
document.querySelector('#UnderwaterSeaweedCount').value = config.Underwater.SeaweedCount !== undefined ? config.Underwater.SeaweedCount : 30;
|
||||
document.querySelector('#UnderwaterFishCount').value = config.Underwater.FishCount !== undefined ? config.Underwater.FishCount : 15;
|
||||
document.querySelector('#UnderwaterSeahorseCount').value = config.Underwater.SeahorseCount !== undefined ? config.Underwater.SeahorseCount : 3;
|
||||
document.querySelector('#UnderwaterJellyfishCount').value = config.Underwater.JellyfishCount !== undefined ? config.Underwater.JellyfishCount : 3;
|
||||
document.querySelector('#UnderwaterTurtleCount').value = config.Underwater.TurtleCount !== undefined ? config.Underwater.TurtleCount : 1;
|
||||
document.querySelector('#UnderwaterCrabCount').value = config.Underwater.CrabCount !== undefined ? config.Underwater.CrabCount : 2;
|
||||
document.querySelector('#UnderwaterStarfishCount').value = config.Underwater.StarfishCount !== undefined ? config.Underwater.StarfishCount : 2;
|
||||
document.querySelector('#UnderwaterShellCount').value = config.Underwater.ShellCount !== undefined ? config.Underwater.ShellCount : 2;
|
||||
|
||||
// Birthday
|
||||
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday || false;
|
||||
|
||||
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday !== false;
|
||||
document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== false;
|
||||
document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration || false;
|
||||
document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
|
||||
document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
|
||||
document.querySelector('#BirthdayConfettiCount').value = config.Birthday.ConfettiCount || 60;
|
||||
config.Birthday = config.Birthday || {};
|
||||
|
||||
// Sports
|
||||
if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
|
||||
document.querySelector('#EnableSports').checked = config.Sports.EnableSports !== false;
|
||||
document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
|
||||
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
|
||||
document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
|
||||
|
||||
// Load Checkboxes
|
||||
const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
|
||||
const savedBalls = savedBallsString.split(',');
|
||||
document.querySelectorAll('.sport-ball-cb').forEach(cb => {
|
||||
// Support for both new category string and legacy filename strings
|
||||
cb.checked = savedBalls.some(b => b === cb.value || b.startsWith(cb.value + '_'));
|
||||
});
|
||||
// Carnival
|
||||
|
||||
// Olympia
|
||||
if (!config.Olympia) config.Olympia = { EnableOlympia: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
|
||||
document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia !== false;
|
||||
document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration !== false;
|
||||
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
|
||||
document.querySelector('#EnableCarnival').checked = config.Carnival.EnableCarnival;
|
||||
document.querySelector('#EnableCarnivalSway').checked = config.Carnival.EnableCarnivalSway !== undefined ? config.Carnival.EnableCarnivalSway : true;
|
||||
document.querySelector('#CarnivalObjectCount').value = config.Carnival.ObjectCount;
|
||||
document.querySelector('#EnableRandomCarnival').checked = config.Carnival.EnableRandomCarnival;
|
||||
document.querySelector('#EnableRandomCarnivalMobile').checked = config.Carnival.EnableRandomCarnivalMobile;
|
||||
document.querySelector('#EnableDifferentDurationCarnival').checked = config.Carnival.EnableDifferentDuration;
|
||||
|
||||
// Halloween
|
||||
document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
|
||||
document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
|
||||
document.querySelector('#EnableRandomHalloween').checked = config.Halloween.EnableRandomSymbols;
|
||||
document.querySelector('#EnableRandomHalloweenMobile').checked = config.Halloween.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationHalloween').checked = config.Halloween.EnableDifferentDuration;
|
||||
document.querySelector('#EnableSpiders').checked = config.Halloween.EnableSpiders !== undefined ? config.Halloween.EnableSpiders : true;
|
||||
document.querySelector('#EnableMice').checked = config.Halloween.EnableMice !== undefined ? config.Halloween.EnableMice : true;
|
||||
// CherryBlossom
|
||||
|
||||
// Hearts
|
||||
document.querySelector('#EnableHearts').checked = config.Hearts.EnableHearts;
|
||||
document.querySelector('#HeartsCount').value = config.Hearts.SymbolCount;
|
||||
document.querySelector('#EnableRandomHearts').checked = config.Hearts.EnableRandomSymbols;
|
||||
document.querySelector('#EnableRandomHeartsMobile').checked = config.Hearts.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationHearts').checked = config.Hearts.EnableDifferentDuration;
|
||||
document.querySelector('#EnableCherryBlossom').checked = config.CherryBlossom.EnableCherryBlossom;
|
||||
document.querySelector('#CherryBlossomPetalCount').value = config.CherryBlossom.PetalCount;
|
||||
document.querySelector('#EnableRandomCherryBlossom').checked = config.CherryBlossom.EnableRandomCherryBlossom;
|
||||
document.querySelector('#EnableRandomCherryBlossomMobile').checked = config.CherryBlossom.EnableRandomCherryBlossomMobile;
|
||||
document.querySelector('#EnableDifferentDurationCherryBlossom').checked = config.CherryBlossom.EnableDifferentDuration;
|
||||
|
||||
// Christmas
|
||||
|
||||
document.querySelector('#EnableChristmas').checked = config.Christmas.EnableChristmas;
|
||||
document.querySelector('#ChristmasCount').value = config.Christmas.SymbolCount;
|
||||
document.querySelector('#EnableRandomChristmas').checked = config.Christmas.EnableRandomChristmas;
|
||||
document.querySelector('#EnableRandomChristmasMobile').checked = config.Christmas.EnableRandomChristmasMobile;
|
||||
document.querySelector('#EnableDifferentDurationChristmas').checked = config.Christmas.EnableDifferentDuration;
|
||||
|
||||
// Santa
|
||||
document.querySelector('#EnableSanta').checked = config.Santa.EnableSanta;
|
||||
document.querySelector('#SantaSnowflakes').value = config.Santa.SnowflakesCount;
|
||||
document.querySelector('#SantaSnowflakesMobile').value = config.Santa.SnowflakesCountMobile;
|
||||
document.querySelector('#SantaSpeed').value = config.Santa.SantaSpeed;
|
||||
document.querySelector('#SantaSpeedMobile').value = config.Santa.SantaSpeedMobile;
|
||||
document.querySelector('#SantaSnowFallSpeed').value = config.Santa.SnowFallSpeed;
|
||||
document.querySelector('#MaxSantaRestTime').value = config.Santa.MaxSantaRestTime;
|
||||
document.querySelector('#MinSantaRestTime').value = config.Santa.MinSantaRestTime;
|
||||
document.querySelector('#MaxPresentFallSpeed').value = config.Santa.MaxPresentFallSpeed;
|
||||
document.querySelector('#MinPresentFallSpeed').value = config.Santa.MinPresentFallSpeed;
|
||||
// EarthDay
|
||||
|
||||
document.querySelector('#EnableEarthDay').checked = config.EarthDay.EnableEarthDay;
|
||||
document.querySelector('#EarthDayVineCount').value = config.EarthDay.VineCount;
|
||||
|
||||
// Easter
|
||||
|
||||
document.querySelector('#EnableEaster').checked = config.Easter.EnableEaster;
|
||||
document.querySelector('#EasterEggCount').value = config.Easter.EggCount;
|
||||
document.querySelector('#EnableRandomEaster').checked = config.Easter.EnableRandomEaster;
|
||||
@@ -1906,14 +1847,163 @@
|
||||
document.querySelector('#MinBunnyRestTime').value = config.Easter.MinBunnyRestTime;
|
||||
document.querySelector('#MaxBunnyRestTime').value = config.Easter.MaxBunnyRestTime;
|
||||
|
||||
// Eurovision
|
||||
|
||||
document.querySelector('#EnableEurovision').checked = config.Eurovision.EnableEurovision;
|
||||
document.querySelector('#EurovisionSymbolCount').value = config.Eurovision.SymbolCount;
|
||||
document.querySelector('#EnableRandomEurovision').checked = config.Eurovision.EnableRandomEurovision;
|
||||
document.querySelector('#EnableRandomEurovisionMobile').checked = config.Eurovision.EnableRandomEurovisionMobile;
|
||||
document.querySelector('#EnableDifferentDurationEurovision').checked = config.Eurovision.EnableDifferentDuration;
|
||||
document.querySelector('#EnableColorfulNotes').checked = config.Eurovision.EnableColorfulNotes;
|
||||
document.querySelector('#EurovisionColors').value = config.Eurovision.EurovisionColors;
|
||||
document.querySelector('#EurovisionGlowSize').value = config.Eurovision.EurovisionGlowSize;
|
||||
|
||||
// Fireworks
|
||||
|
||||
document.querySelector('#EnableFireworks').checked = config.Fireworks.EnableFireworks;
|
||||
document.querySelector('#FireworksParticles').value = config.Fireworks.ParticleCount;
|
||||
document.querySelector('#FireworksInterval').value = config.Fireworks.LaunchInterval;
|
||||
document.querySelector('#ScrollFireworks').checked = config.Fireworks.ScrollFireworks;
|
||||
document.querySelector('#MinFireworks').value = config.Fireworks.MinFireworks;
|
||||
document.querySelector('#MaxFireworks').value = config.Fireworks.MaxFireworks;
|
||||
|
||||
// Halloween
|
||||
|
||||
document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
|
||||
document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
|
||||
document.querySelector('#EnableRandomHalloween').checked = config.Halloween.EnableRandomSymbols;
|
||||
document.querySelector('#EnableRandomHalloweenMobile').checked = config.Halloween.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationHalloween').checked = config.Halloween.EnableDifferentDuration;
|
||||
document.querySelector('#EnableSpiders').checked = config.Halloween.EnableSpiders !== undefined ? config.Halloween.EnableSpiders : true;
|
||||
document.querySelector('#EnableMice').checked = config.Halloween.EnableMice !== undefined ? config.Halloween.EnableMice : true;
|
||||
|
||||
// Hearts
|
||||
|
||||
document.querySelector('#EnableHearts').checked = config.Hearts.EnableHearts;
|
||||
document.querySelector('#HeartsCount').value = config.Hearts.SymbolCount;
|
||||
document.querySelector('#EnableRandomHearts').checked = config.Hearts.EnableRandomSymbols;
|
||||
document.querySelector('#EnableRandomHeartsMobile').checked = config.Hearts.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationHearts').checked = config.Hearts.EnableDifferentDuration;
|
||||
|
||||
// Matrix
|
||||
|
||||
document.querySelector('#EnableMatrix').checked = config.Matrix.EnableMatrix;
|
||||
document.querySelector('#MatrixSymbolCount').value = config.Matrix.SymbolCount;
|
||||
document.querySelector('#MatrixChars').value = config.Matrix.MatrixChars !== undefined ? config.Matrix.MatrixChars : '0123456789';
|
||||
document.querySelector('#EnableRandomMatrix').checked = config.Matrix.EnableRandomMatrix;
|
||||
document.querySelector('#EnableRandomMatrixMobile').checked = config.Matrix.EnableRandomMatrixMobile;
|
||||
document.querySelector('#EnableDifferentDurationMatrix').checked = config.Matrix.EnableDifferentDuration;
|
||||
document.querySelector('#EnableMatrixBackground').checked = config.Matrix.EnableMatrixBackground !== undefined ? config.Matrix.EnableMatrixBackground : false;
|
||||
|
||||
// Olympia
|
||||
|
||||
if (!config.Olympia) config.Olympia = { EnableOlympia: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
|
||||
|
||||
document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia !== false;
|
||||
document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration !== false;
|
||||
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
|
||||
|
||||
// Pride
|
||||
|
||||
document.querySelector('#EnablePride').checked = config.Pride.EnablePride;
|
||||
document.querySelector('#PrideHeartCount').value = config.Pride.HeartCount;
|
||||
document.querySelector('#PrideHeartSize').value = config.Pride.HeartSize;
|
||||
document.querySelector('#PrideColorHeader').checked = config.Pride.ColorHeader;
|
||||
|
||||
// Rain
|
||||
|
||||
document.querySelector('#EnableRain').checked = config.Rain.EnableRain;
|
||||
document.querySelector('#RaindropCount').value = config.Rain.RaindropCount;
|
||||
document.querySelector('#RaindropCountMobile').value = config.Rain.RaindropCountMobile;
|
||||
document.querySelector('#RainSpeed').value = config.Rain.RainSpeed;
|
||||
|
||||
// Resurrection
|
||||
|
||||
document.querySelector('#EnableResurrection').checked = config.Resurrection.EnableResurrection;
|
||||
document.querySelector('#ResurrectionSymbolCount').value = config.Resurrection.SymbolCount;
|
||||
document.querySelector('#EnableRandomResurrection').checked = config.Resurrection.EnableRandomSymbols;
|
||||
document.querySelector('#EnableRandomResurrectionMobile').checked = config.Resurrection.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationResurrection').checked = config.Resurrection.EnableDifferentDuration;
|
||||
|
||||
// Santa
|
||||
|
||||
document.querySelector('#EnableSanta').checked = config.Santa.EnableSanta;
|
||||
document.querySelector('#SantaSnowflakes').value = config.Santa.SnowflakesCount;
|
||||
document.querySelector('#SantaSnowflakesMobile').value = config.Santa.SnowflakesCountMobile;
|
||||
document.querySelector('#SantaSpeed').value = config.Santa.SantaSpeed;
|
||||
document.querySelector('#SantaSpeedMobile').value = config.Santa.SantaSpeedMobile;
|
||||
document.querySelector('#SantaSnowFallSpeed').value = config.Santa.SnowFallSpeed;
|
||||
document.querySelector('#MaxSantaRestTime').value = config.Santa.MaxSantaRestTime;
|
||||
document.querySelector('#MinSantaRestTime').value = config.Santa.MinSantaRestTime;
|
||||
document.querySelector('#MaxPresentFallSpeed').value = config.Santa.MaxPresentFallSpeed;
|
||||
document.querySelector('#MinPresentFallSpeed').value = config.Santa.MinPresentFallSpeed;
|
||||
|
||||
// Snowfall
|
||||
|
||||
document.querySelector('#EnableSnowfall').checked = config.Snowfall.EnableSnowfall;
|
||||
document.querySelector('#SnowfallCount').value = config.Snowfall.SnowflakesCount;
|
||||
document.querySelector('#SnowfallCountMobile').value = config.Snowfall.SnowflakesCountMobile;
|
||||
document.querySelector('#SnowfallSpeed').value = config.Snowfall.Speed;
|
||||
|
||||
// Snowflakes
|
||||
|
||||
document.querySelector('#SnowflakesCount').value = config.Snowflakes.SnowflakeCount;
|
||||
document.querySelector('#EnableSnowflakes').checked = config.Snowflakes.EnableSnowflakes;
|
||||
document.querySelector('#EnableRandomSnowflakes').checked = config.Snowflakes.EnableRandomSnowflakes;
|
||||
document.querySelector('#EnableRandomSnowflakesMobile').checked = config.Snowflakes.EnableRandomSnowflakesMobile;
|
||||
document.querySelector('#EnableColoredSnowflakes').checked = config.Snowflakes.EnableColoredSnowflakes;
|
||||
document.querySelector('#EnableDifferentDurationSnowflakes').checked = config.Snowflakes.EnableDifferentDuration;
|
||||
|
||||
// Snowstorm
|
||||
|
||||
document.querySelector('#EnableSnowstorm').checked = config.Snowstorm.EnableSnowstorm;
|
||||
document.querySelector('#SnowstormCount').value = config.Snowstorm.SnowflakesCount;
|
||||
document.querySelector('#SnowstormCountMobile').value = config.Snowstorm.SnowflakesCountMobile;
|
||||
document.querySelector('#SnowstormSpeed').value = config.Snowstorm.Speed;
|
||||
document.querySelector('#SnowstormHorizontalWind').value = config.Snowstorm.HorizontalWind;
|
||||
document.querySelector('#SnowstormVerticalVariation').value = config.Snowstorm.VerticalVariation;
|
||||
|
||||
// Space
|
||||
|
||||
document.querySelector('#EnableSpace').checked = config.Space.EnableSpace || false;
|
||||
document.querySelector('#EnableRandomSymbolsSpace').checked = config.Space.EnableRandomSymbols || false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileSpace').checked = config.Space.EnableRandomSymbolsMobile || false;
|
||||
document.querySelector('#EnableDifferentDurationSpace').checked = config.Space.EnableDifferentDuration || false;
|
||||
document.querySelector('#PlanetCount').value = config.Space.PlanetCount !== undefined ? config.Space.PlanetCount : 12;
|
||||
document.querySelector('#AstronautCount').value = config.Space.AstronautCount !== undefined ? config.Space.AstronautCount : 5;
|
||||
document.querySelector('#SatelliteCount').value = config.Space.SatelliteCount !== undefined ? config.Space.SatelliteCount : 2;
|
||||
document.querySelector('#IssCount').value = config.Space.IssCount !== undefined ? config.Space.IssCount : 1;
|
||||
document.querySelector('#RocketCount').value = config.Space.RocketCount !== undefined ? config.Space.RocketCount : 1;
|
||||
|
||||
// Spooky
|
||||
|
||||
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount !== undefined ? config.Spooky.SymbolCount : 25;
|
||||
document.querySelector('#EnableSpooky').checked = config.Spooky.EnableSpooky !== undefined ? config.Spooky.EnableSpooky : true;
|
||||
document.querySelector('#SpookySize').value = config.Spooky.SpookySize !== undefined ? config.Spooky.SpookySize : 30;
|
||||
document.querySelector('#EnableSpookySway').checked = config.Spooky.EnableSpookySway !== undefined ? config.Spooky.EnableSpookySway : true;
|
||||
document.querySelector('#SpookyGlowSize').value = config.Spooky.SpookyGlowSize !== undefined ? config.Spooky.SpookyGlowSize : 5;
|
||||
document.querySelector('#EnableDifferentDurationSpooky').checked = config.Spooky.EnableDifferentDuration !== false;
|
||||
|
||||
// Sports
|
||||
|
||||
if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
|
||||
|
||||
// Load Checkboxes
|
||||
const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
|
||||
const savedBalls = savedBallsString.split(',');
|
||||
document.querySelector('#EnableSports').checked = config.Sports.EnableSports !== false;
|
||||
document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
|
||||
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
|
||||
document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
|
||||
document.querySelector('#EnableTrophy').checked = config.Sports.EnableTrophy !== false;
|
||||
document.querySelectorAll('.sport-ball-cb').forEach(cb => {
|
||||
|
||||
// Spring
|
||||
|
||||
document.querySelector('#EnableSpring').checked = config.Spring.EnableSpring;
|
||||
document.querySelector('#EnableSpringSunbeams').checked = config.Spring.EnableSpringSunbeams !== undefined ? config.Spring.EnableSpringSunbeams : true;
|
||||
document.querySelector('#SpringPollenCount').value = config.Spring.PollenCount;
|
||||
@@ -1926,7 +2016,16 @@
|
||||
document.querySelector('#EnableRandomSpringMobile').checked = config.Spring.EnableRandomSpringMobile;
|
||||
document.querySelector('#EnableDifferentDurationSpring').checked = config.Spring.EnableDifferentDuration;
|
||||
|
||||
// Storm
|
||||
|
||||
document.querySelector('#EnableStorm').checked = config.Storm.EnableStorm;
|
||||
document.querySelector('#StormRaindropCount').value = config.Storm.RaindropCount;
|
||||
document.querySelector('#StormRaindropCountMobile').value = config.Storm.RaindropCountMobile;
|
||||
document.querySelector('#StormRainSpeed').value = config.Storm.RainSpeed;
|
||||
document.querySelector('#StormEnableLightning').checked = config.Storm.EnableLightning;
|
||||
|
||||
// Summer
|
||||
|
||||
document.querySelector('#EnableSummer').checked = config.Summer.EnableSummer;
|
||||
document.querySelector('#SummerBubbleCount').value = config.Summer.BubbleCount;
|
||||
document.querySelector('#SummerDustCount').value = config.Summer.DustCount;
|
||||
@@ -1934,87 +2033,29 @@
|
||||
document.querySelector('#EnableRandomSummerMobile').checked = config.Summer.EnableRandomSummerMobile;
|
||||
document.querySelector('#EnableDifferentDurationSummer').checked = config.Summer.EnableDifferentDuration;
|
||||
|
||||
// Carnival
|
||||
document.querySelector('#EnableCarnival').checked = config.Carnival.EnableCarnival;
|
||||
document.querySelector('#EnableCarnivalSway').checked = config.Carnival.EnableCarnivalSway !== undefined ? config.Carnival.EnableCarnivalSway : true;
|
||||
document.querySelector('#CarnivalObjectCount').value = config.Carnival.ObjectCount;
|
||||
document.querySelector('#EnableRandomCarnival').checked = config.Carnival.EnableRandomCarnival;
|
||||
document.querySelector('#EnableRandomCarnivalMobile').checked = config.Carnival.EnableRandomCarnivalMobile;
|
||||
document.querySelector('#EnableDifferentDurationCarnival').checked = config.Carnival.EnableDifferentDuration;
|
||||
// Support for both new category string and legacy filename strings
|
||||
cb.checked = savedBalls.some(b => b === cb.value || b.startsWith(cb.value + '_'));
|
||||
});
|
||||
|
||||
// Cherry Blossom
|
||||
document.querySelector('#EnableCherryBlossom').checked = config.CherryBlossom.EnableCherryBlossom;
|
||||
document.querySelector('#CherryBlossomPetalCount').value = config.CherryBlossom.PetalCount;
|
||||
document.querySelector('#EnableRandomCherryBlossom').checked = config.CherryBlossom.EnableRandomCherryBlossom;
|
||||
document.querySelector('#EnableRandomCherryBlossomMobile').checked = config.CherryBlossom.EnableRandomCherryBlossomMobile;
|
||||
document.querySelector('#EnableDifferentDurationCherryBlossom').checked = config.CherryBlossom.EnableDifferentDuration;
|
||||
|
||||
// Earth Day
|
||||
document.querySelector('#EnableEarthDay').checked = config.EarthDay.EnableEarthDay;
|
||||
document.querySelector('#EarthDayVineCount').value = config.EarthDay.VineCount;
|
||||
|
||||
// Eurovision
|
||||
document.querySelector('#EnableEurovision').checked = config.Eurovision.EnableEurovision;
|
||||
document.querySelector('#EurovisionSymbolCount').value = config.Eurovision.SymbolCount;
|
||||
document.querySelector('#EnableRandomEurovision').checked = config.Eurovision.EnableRandomEurovision;
|
||||
document.querySelector('#EnableRandomEurovisionMobile').checked = config.Eurovision.EnableRandomEurovisionMobile;
|
||||
document.querySelector('#EnableDifferentDurationEurovision').checked = config.Eurovision.EnableDifferentDuration;
|
||||
document.querySelector('#EnableColorfulNotes').checked = config.Eurovision.EnableColorfulNotes;
|
||||
document.querySelector('#EurovisionColors').value = config.Eurovision.EurovisionColors;
|
||||
document.querySelector('#EurovisionGlowSize').value = config.Eurovision.EurovisionGlowSize;
|
||||
|
||||
// Matrix
|
||||
document.querySelector('#EnableMatrix').checked = config.Matrix.EnableMatrix;
|
||||
document.querySelector('#MatrixSymbolCount').value = config.Matrix.SymbolCount;
|
||||
document.querySelector('#MatrixChars').value = config.Matrix.MatrixChars !== undefined ? config.Matrix.MatrixChars : '0123456789';
|
||||
document.querySelector('#EnableRandomMatrix').checked = config.Matrix.EnableRandomMatrix;
|
||||
document.querySelector('#EnableRandomMatrixMobile').checked = config.Matrix.EnableRandomMatrixMobile;
|
||||
document.querySelector('#EnableDifferentDurationMatrix').checked = config.Matrix.EnableDifferentDuration;
|
||||
document.querySelector('#EnableMatrixBackground').checked = config.Matrix.EnableMatrixBackground !== undefined ? config.Matrix.EnableMatrixBackground : false;
|
||||
|
||||
// Pride
|
||||
document.querySelector('#EnablePride').checked = config.Pride.EnablePride;
|
||||
document.querySelector('#PrideHeartCount').value = config.Pride.HeartCount;
|
||||
document.querySelector('#PrideHeartSize').value = config.Pride.HeartSize;
|
||||
document.querySelector('#PrideColorHeader').checked = config.Pride.ColorHeader;
|
||||
|
||||
// Spooky Theme
|
||||
document.querySelector('#EnableSpooky').checked = config.Spooky.EnableSpooky !== undefined ? config.Spooky.EnableSpooky : true;
|
||||
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount !== undefined ? config.Spooky.SymbolCount : 25;
|
||||
document.querySelector('#SpookySize').value = config.Spooky.SpookySize !== undefined ? config.Spooky.SpookySize : 30;
|
||||
document.querySelector('#EnableSpookySway').checked = config.Spooky.EnableSpookySway !== undefined ? config.Spooky.EnableSpookySway : true;
|
||||
document.querySelector('#SpookyGlowSize').value = config.Spooky.SpookyGlowSize !== undefined ? config.Spooky.SpookyGlowSize : 5;
|
||||
|
||||
// Rain
|
||||
document.querySelector('#EnableRain').checked = config.Rain.EnableRain;
|
||||
document.querySelector('#RaindropCount').value = config.Rain.RaindropCount;
|
||||
document.querySelector('#RaindropCountMobile').value = config.Rain.RaindropCountMobile;
|
||||
document.querySelector('#RainSpeed').value = config.Rain.RainSpeed;
|
||||
|
||||
// Storm
|
||||
document.querySelector('#EnableStorm').checked = config.Storm.EnableStorm;
|
||||
document.querySelector('#StormRaindropCount').value = config.Storm.RaindropCount;
|
||||
document.querySelector('#StormRaindropCountMobile').value = config.Storm.RaindropCountMobile;
|
||||
document.querySelector('#StormRainSpeed').value = config.Storm.RainSpeed;
|
||||
document.querySelector('#StormEnableLightning').checked = config.Storm.EnableLightning;
|
||||
|
||||
// Underwater
|
||||
config.Underwater = config.Underwater || {};
|
||||
|
||||
document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater !== false;
|
||||
document.querySelector('#EnableUnderwaterLightRays').checked = config.Underwater.EnableLightRays !== false;
|
||||
document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
|
||||
document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration !== false;
|
||||
document.querySelector('#UnderwaterSeaweedCount').value = config.Underwater.SeaweedCount !== undefined ? config.Underwater.SeaweedCount : 30;
|
||||
document.querySelector('#UnderwaterFishCount').value = config.Underwater.FishCount !== undefined ? config.Underwater.FishCount : 15;
|
||||
document.querySelector('#UnderwaterSeahorseCount').value = config.Underwater.SeahorseCount !== undefined ? config.Underwater.SeahorseCount : 3;
|
||||
document.querySelector('#UnderwaterJellyfishCount').value = config.Underwater.JellyfishCount !== undefined ? config.Underwater.JellyfishCount : 3;
|
||||
document.querySelector('#UnderwaterTurtleCount').value = config.Underwater.TurtleCount !== undefined ? config.Underwater.TurtleCount : 1;
|
||||
document.querySelector('#UnderwaterCrabCount').value = config.Underwater.CrabCount !== undefined ? config.Underwater.CrabCount : 2;
|
||||
document.querySelector('#UnderwaterStarfishCount').value = config.Underwater.StarfishCount !== undefined ? config.Underwater.StarfishCount : 2;
|
||||
document.querySelector('#UnderwaterShellCount').value = config.Underwater.ShellCount !== undefined ? config.Underwater.ShellCount : 2;
|
||||
config.Underwater = config.Underwater || {};
|
||||
document.querySelector('#EnableUnderwaterLightRays').checked = config.Underwater.EnableLightRays !== false;
|
||||
document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
|
||||
|
||||
// Birthday
|
||||
config.Birthday = config.Birthday || {};
|
||||
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday !== false;
|
||||
document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== false;
|
||||
document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
|
||||
document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols !== false;
|
||||
document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile === true;
|
||||
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
@@ -2041,22 +2082,6 @@
|
||||
config.Autumn.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationAutumn').checked;
|
||||
config.Autumn.EnableRotation = document.querySelector('#EnableRotation').checked;
|
||||
|
||||
// Friday13
|
||||
if (!config.Friday13) config.Friday13 = {};
|
||||
config.Friday13.EnableFriday13 = document.querySelector('#EnableFriday13').checked;
|
||||
config.Friday13.SymbolCount = parseInt(document.querySelector('#Friday13SymbolCount').value);
|
||||
config.Friday13.EnableRandomSymbols = document.querySelector('#EnableRandomFriday13').checked;
|
||||
config.Friday13.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomFriday13Mobile').checked;
|
||||
config.Friday13.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationFriday13').checked;
|
||||
|
||||
// Eid
|
||||
if (!config.Eid) config.Eid = {};
|
||||
config.Eid.EnableEid = document.querySelector('#EnableEid').checked;
|
||||
config.Eid.EnableRandomSymbols = document.querySelector('#EnableRandomEid').checked;
|
||||
config.Eid.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomEidMobile').checked;
|
||||
config.Eid.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEid').checked;
|
||||
config.Eid.SymbolCount = parseInt(document.querySelector('#EidSymbolCount').value);
|
||||
|
||||
// Legacy Halloween
|
||||
if (!config.LegacyHalloween) config.LegacyHalloween = {};
|
||||
config.LegacyHalloween.SymbolCount = parseInt(document.querySelector('#LegacyHalloweenSymbolCount').value);
|
||||
@@ -2069,6 +2094,7 @@
|
||||
config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
|
||||
config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
|
||||
config.Sports.TurfColor = document.querySelector('#TurfColor').value;
|
||||
config.Sports.EnableTrophy = document.querySelector('#EnableTrophy').checked;
|
||||
|
||||
// Save Checkboxes
|
||||
const selectedBalls = Array.from(document.querySelectorAll('.sport-ball-cb'))
|
||||
@@ -2091,7 +2117,11 @@
|
||||
config.Space.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSpace').checked;
|
||||
config.Space.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSpace').checked;
|
||||
config.Space.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpace').checked;
|
||||
config.Space.SymbolCount = parseInt(document.querySelector('#SpaceSymbolCount').value);
|
||||
config.Space.PlanetCount = parseInt(document.querySelector('#PlanetCount').value);
|
||||
config.Space.AstronautCount = parseInt(document.querySelector('#AstronautCount').value);
|
||||
config.Space.SatelliteCount = parseInt(document.querySelector('#SatelliteCount').value);
|
||||
config.Space.IssCount = parseInt(document.querySelector('#IssCount').value);
|
||||
config.Space.RocketCount = parseInt(document.querySelector('#RocketCount').value);
|
||||
|
||||
// Underwater
|
||||
if (!config.Underwater) config.Underwater = {};
|
||||
@@ -2117,6 +2147,7 @@
|
||||
config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
|
||||
config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
|
||||
config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
|
||||
config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
|
||||
|
||||
// Snowflakes
|
||||
config.Snowflakes.SnowflakeCount = parseInt(document.querySelector('#SnowflakesCount').value);
|
||||
@@ -2295,7 +2326,7 @@
|
||||
config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomUnderwaterMobile').checked;
|
||||
config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
|
||||
|
||||
// New Themes
|
||||
// Simple Themes (just on/off toggles)
|
||||
config.Frost.EnableFrost = document.querySelector('#EnableFrost').checked;
|
||||
config.FilmNoir.EnableFilmNoir = document.querySelector('#EnableFilmNoir').checked;
|
||||
config.Oscar.EnableOscar = document.querySelector('#EnableOscar').checked;
|
||||
@@ -2383,6 +2414,7 @@
|
||||
config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
|
||||
config.Birthday.EnableGarland = document.querySelector('#EnableGarland').checked;
|
||||
config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
|
||||
config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
|
||||
config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
|
||||
config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
|
||||
config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
|
||||
@@ -2401,13 +2433,6 @@
|
||||
config.Olympia.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileOlympia').checked;
|
||||
config.Olympia.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').checked;
|
||||
|
||||
// Pi-Day
|
||||
config.PiDay.EnablePiDay = document.querySelector('#EnablePiDay').checked;
|
||||
config.PiDay.SymbolCount = parseInt(document.querySelector('#PiDaySymbolCount').value);
|
||||
config.PiDay.EnableRandomPiDay = document.querySelector('#EnableRandomPiDay').checked;
|
||||
config.PiDay.EnableRandomPiDayMobile = document.querySelector('#EnableRandomPiDayMobile').checked;
|
||||
config.PiDay.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationPiDay').checked;
|
||||
|
||||
// Pride
|
||||
config.Pride.EnablePride = document.querySelector('#EnablePride').checked;
|
||||
config.Pride.HeartCount = parseInt(document.querySelector('#PrideHeartCount').value);
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Seasonals Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.7.2.0</Version>
|
||||
<Version>2.0.0.1</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/Jellyfin-Seasonals</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -1,164 +1,139 @@
|
||||
.autumn-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.leaf {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
-webkit-animation-name: leaf-fall, leaf-shake;
|
||||
-webkit-animation-duration: 7s, 4s;
|
||||
-webkit-animation-timing-function: linear, ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite, infinite;
|
||||
-webkit-user-select: none;
|
||||
animation-name: leaf-fall, leaf-shake;
|
||||
animation-duration: 7s, 4s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
/* Class to disable rotation */
|
||||
.no-rotation {
|
||||
--rotate-start: 0deg !important;
|
||||
--rotate-end: 0deg !important;
|
||||
}
|
||||
|
||||
@-webkit-keyframes leaf-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leaf-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes leaf-shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotate(var(--rotate-start, -20deg));
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px) rotate(var(--rotate-end, 20deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leaf-shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotate(var(--rotate-start, -20deg));
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px) rotate(var(--rotate-end, 20deg));
|
||||
}
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
--rotate-start: -25deg;
|
||||
--rotate-end: 22deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 0.5s;
|
||||
--rotate-start: -32deg;
|
||||
--rotate-end: 35deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 1s;
|
||||
--rotate-start: -28deg;
|
||||
--rotate-end: 28deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 1.5s;
|
||||
--rotate-start: -38deg;
|
||||
--rotate-end: 32deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 0.8s;
|
||||
--rotate-start: -22deg;
|
||||
--rotate-end: 38deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 2s;
|
||||
--rotate-start: -35deg;
|
||||
--rotate-end: 25deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 1.2s;
|
||||
--rotate-start: -40deg;
|
||||
--rotate-end: 40deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 0.3s;
|
||||
--rotate-start: -30deg;
|
||||
--rotate-end: 30deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 1.8s;
|
||||
--rotate-start: -26deg;
|
||||
--rotate-end: 36deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 0.7s;
|
||||
--rotate-start: -34deg;
|
||||
--rotate-end: 24deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 2.3s;
|
||||
--rotate-start: -29deg;
|
||||
--rotate-end: 33deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 1.4s;
|
||||
--rotate-start: -37deg;
|
||||
--rotate-end: 27deg;
|
||||
.autumn-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.leaf {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: leaf-fall, leaf-shake;
|
||||
animation-duration: 7s, 4s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
/* Class to disable rotation */
|
||||
.no-rotation {
|
||||
--rotate-start: 0deg !important;
|
||||
--rotate-end: 0deg !important;
|
||||
}
|
||||
|
||||
|
||||
@keyframes leaf-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes leaf-shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotate(var(--rotate-start, -20deg));
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px) rotate(var(--rotate-end, 20deg));
|
||||
}
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
--rotate-start: -25deg;
|
||||
--rotate-end: 22deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 0.5s;
|
||||
--rotate-start: -32deg;
|
||||
--rotate-end: 35deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 1s;
|
||||
--rotate-start: -28deg;
|
||||
--rotate-end: 28deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 1.5s;
|
||||
--rotate-start: -38deg;
|
||||
--rotate-end: 32deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 0.8s;
|
||||
--rotate-start: -22deg;
|
||||
--rotate-end: 38deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 2s;
|
||||
--rotate-start: -35deg;
|
||||
--rotate-end: 25deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 1.2s;
|
||||
--rotate-start: -40deg;
|
||||
--rotate-end: 40deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 0.3s;
|
||||
--rotate-start: -30deg;
|
||||
--rotate-end: 30deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 1.8s;
|
||||
--rotate-start: -26deg;
|
||||
--rotate-end: 36deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 0.7s;
|
||||
--rotate-start: -34deg;
|
||||
--rotate-end: 24deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 2.3s;
|
||||
--rotate-start: -29deg;
|
||||
--rotate-end: 33deg;
|
||||
}
|
||||
|
||||
.leaf:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 1.4s;
|
||||
--rotate-start: -37deg;
|
||||
@@ -5,118 +5,104 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.birthday-garland {
|
||||
position: absolute;
|
||||
top: -1vh;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 55;
|
||||
pointer-events: none;
|
||||
/* optional: a little drop shadow for depth */
|
||||
filter: drop-shadow(0 5px 8px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
.birthday-garland img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.birthday-cake {
|
||||
position: absolute;
|
||||
bottom: 2vh;
|
||||
left: 50vw;
|
||||
transform: translateX(-50%);
|
||||
font-size: 8rem;
|
||||
z-index: 50;
|
||||
filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.birthday-cake img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
max-height: 150px;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.birthday-symbol {
|
||||
position: absolute;
|
||||
bottom: -10vh; /* balloons rise from bottom */
|
||||
animation: birthday-rise linear infinite;
|
||||
font-size: 3rem;
|
||||
will-change: opacity;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: birthday-rise linear infinite forwards;
|
||||
opacity: 0.95;
|
||||
z-index: 40;
|
||||
pointer-events: none; /* Container itself should not block clicks */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.birthday-sway {
|
||||
will-change: transform;
|
||||
animation-name: birthday-sway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.birthday-inner {
|
||||
pointer-events: auto; /* Allow hover over the actual item */
|
||||
pointer-events: auto;
|
||||
cursor: crosshair;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* MARK: Balloon Size */
|
||||
.birthday-symbol img {
|
||||
width: 6vh;
|
||||
width: 18vh;
|
||||
height: auto;
|
||||
max-width: 60px;
|
||||
max-width: 100px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.birthday-confetti-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 30;
|
||||
will-change: transform;
|
||||
animation-name: birthday-confetti-fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.birthday-confetti {
|
||||
position: absolute;
|
||||
top: -5vh;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background-color: rgb(0, 0, 0);
|
||||
will-change: transform;
|
||||
animation-name: birthday-flutter;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.birthday-confetti.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.birthday-confetti.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.birthday-confetti.triangle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
opacity: 0.9;
|
||||
animation: birthday-confetti-fall linear infinite;
|
||||
z-index: 30;
|
||||
/* Mix of circles and squares by using CSS variables or random in JS. For simplicity, we make all slightly rounded rectangles */
|
||||
border-radius: 2px;
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
@keyframes birthday-rise {
|
||||
0% {
|
||||
transform: translateY(10vh) rotate(var(--start-rot, 0deg));
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-110vh) rotate(calc(var(--start-rot, 0deg) * -1));
|
||||
opacity: 0;
|
||||
}
|
||||
0% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0) rotate(var(--start-rot, 0deg)); opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { transform: translate3d(var(--x-pos, 0vw), -20vh, 0) rotate(calc(var(--start-rot, 0deg) * -1)); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes birthday-confetti-fall {
|
||||
0% {
|
||||
transform: translateY(-5vh) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
5% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(105vh) rotateX(720deg) rotateY(360deg) rotateZ(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
0% { transform: translate3d(var(--x-pos, 0vw), -10vh, 0); }
|
||||
100% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0); }
|
||||
}
|
||||
|
||||
@keyframes birthday-sway {
|
||||
0% { transform: rotate(-8deg) translateX(-5%); }
|
||||
100% { transform: rotate(8deg) translateX(5%); }
|
||||
0% { transform: translateX(calc(var(--sway-amount, 50px) * -1)); }
|
||||
100% { transform: translateX(var(--sway-amount, 50px)); }
|
||||
}
|
||||
|
||||
@keyframes birthday-flutter {
|
||||
0% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg); }
|
||||
100% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg)); }
|
||||
}
|
||||
|
||||
@keyframes birthday-pop {
|
||||
@@ -125,12 +111,17 @@
|
||||
100% { transform: scale(0); opacity: 0; filter: brightness(2); }
|
||||
}
|
||||
|
||||
.birthday-burst-confetti {
|
||||
.birthday-burst-wrapper {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
will-change: transform, opacity;
|
||||
animation: birthday-burst-fall 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
animation: birthday-burst-y 1.2s cubic-bezier(0.42, 0, 1, 1) forwards;
|
||||
}
|
||||
|
||||
.birthday-burst-confetti {
|
||||
will-change: transform;
|
||||
animation: birthday-burst-x 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
||||
}
|
||||
|
||||
.birthday-burst-confetti.circle {
|
||||
@@ -138,25 +129,27 @@
|
||||
}
|
||||
|
||||
.birthday-burst-confetti.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent !important;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 10px solid var(--shape-color, #ff0000);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
@keyframes birthday-burst-fall {
|
||||
@keyframes birthday-burst-y {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate3d(var(--rx), var(--ry), var(--rz), 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
transform: translate(var(--burst-x), var(--burst-y)) rotate3d(var(--rx), var(--ry), var(--rz), calc(var(--rot-dir) * 0.3));
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(var(--burst-x), calc(var(--burst-y) + 150px)) rotate3d(var(--rx), var(--ry), var(--rz), var(--rot-dir));
|
||||
transform: translateY(calc(var(--burst-y) + 150px));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes birthday-burst-x {
|
||||
0% {
|
||||
transform: translateX(0) rotate3d(var(--rx), var(--ry), var(--rz), 0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(var(--burst-x) * 1.5)) rotate3d(var(--rx), var(--ry), var(--rz), var(--rot-dir));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,37 @@
|
||||
const config = window.SeasonalsPluginConfig?.Birthday || {};
|
||||
|
||||
const birthday = config.EnableBirthday !== undefined ? config.EnableBirthday : true;
|
||||
const symbolCount = config.SymbolCount || 25;
|
||||
const symbolCount = config.SymbolCount || 5;
|
||||
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 enableGarland = config.EnableGarland !== undefined ? config.EnableGarland : true;
|
||||
|
||||
|
||||
const birthdayImages = [
|
||||
'../Seasonals/Resources/birthday_images/balloon_1.gif',
|
||||
'../Seasonals/Resources/birthday_images/balloon_2.gif',
|
||||
'../Seasonals/Resources/birthday_images/balloon_3.gif'
|
||||
'../Seasonals/Resources/birthday_assets/balloon_blue.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_green.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_lightblue.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_orange.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_pink.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_red.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_yellow.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_turquoise.gif',
|
||||
'../Seasonals/Resources/birthday_assets/balloon_violet.gif'
|
||||
];
|
||||
|
||||
|
||||
const balloonColors = {
|
||||
'balloon_blue': ['#3498db', '#2980b9', '#1f618d'],
|
||||
'balloon_green': ['#2ecc71', '#27ae60', '#1e8449'],
|
||||
'balloon_lightblue': ['#36c5f0', '#81ecec', '#00cec9'],
|
||||
'balloon_orange': ['#e67e22', '#d35400', '#a04000'],
|
||||
'balloon_pink': ['#ff726d', '#f4306d', '#e84393'],
|
||||
'balloon_red': ['#e74c3c', '#c0392b', '#922b21'],
|
||||
'balloon_yellow': ['#f1c40f', '#f39c12', '#b7950b'],
|
||||
'balloon_turquoise': ['#36c5f0', '#81ecec', '#00cec9'],
|
||||
'balloon_violet': ['#9b59b6', '#8e44ad', '#6c3483']
|
||||
};
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
function toggleBirthday() {
|
||||
@@ -46,8 +65,8 @@ observer.observe(document.body, {
|
||||
attributes: true
|
||||
});
|
||||
|
||||
function createBalloonPopConfetti(container, x, y) {
|
||||
const popConfettiColors = [
|
||||
function createBalloonPopConfetti(container, x, y, colors) {
|
||||
const popConfettiColors = colors || [
|
||||
'#fce18a', '#ff726d', '#b48def', '#f4306d',
|
||||
'#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6',
|
||||
'#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
|
||||
@@ -57,6 +76,13 @@ function createBalloonPopConfetti(container, x, y) {
|
||||
const particleCount = Math.floor(Math.random() * 5) + 15;
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'birthday-burst-wrapper';
|
||||
wrapper.style.position = 'absolute';
|
||||
wrapper.style.left = `${x}px`;
|
||||
wrapper.style.top = `${y}px`;
|
||||
wrapper.style.zIndex = '1000';
|
||||
|
||||
const particle = document.createElement('div');
|
||||
particle.classList.add('birthday-burst-confetti');
|
||||
|
||||
@@ -81,11 +107,6 @@ function createBalloonPopConfetti(container, x, y) {
|
||||
particle.classList.add('triangle');
|
||||
}
|
||||
|
||||
particle.style.position = 'absolute';
|
||||
particle.style.left = `${x}px`;
|
||||
particle.style.top = `${y}px`;
|
||||
particle.style.zIndex = '1000';
|
||||
|
||||
// Random direction for explosion (circular)
|
||||
const angle = Math.random() * 2 * Math.PI;
|
||||
const distance = Math.random() * 60 + 20; // 20-80px burst radius
|
||||
@@ -94,7 +115,7 @@ function createBalloonPopConfetti(container, x, y) {
|
||||
const yOffset = Math.sin(angle) * distance;
|
||||
|
||||
particle.style.setProperty('--burst-x', `${xOffset}px`);
|
||||
particle.style.setProperty('--burst-y', `${yOffset}px`);
|
||||
wrapper.style.setProperty('--burst-y', `${yOffset}px`);
|
||||
|
||||
// Random rotation during fall
|
||||
particle.style.setProperty('--rot-dir', `${(Math.random() > 0.5 ? 1 : -1) * 360}deg`);
|
||||
@@ -102,10 +123,11 @@ function createBalloonPopConfetti(container, x, y) {
|
||||
particle.style.setProperty('--ry', Math.random().toFixed(2));
|
||||
particle.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
|
||||
|
||||
container.appendChild(particle);
|
||||
wrapper.appendChild(particle);
|
||||
container.appendChild(wrapper);
|
||||
|
||||
// Remove particle after animation
|
||||
setTimeout(() => particle.remove(), 1500);
|
||||
setTimeout(() => wrapper.remove(), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,28 +140,7 @@ function createBirthday() {
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
// Party Garland
|
||||
if (enableGarland) {
|
||||
const garland = document.createElement('div');
|
||||
garland.className = 'birthday-garland';
|
||||
const garlandImg = document.createElement('img');
|
||||
garlandImg.src = '../Seasonals/Resources/birthday_images/garland.png';
|
||||
garlandImg.onerror = function() { this.style.display = 'none'; };
|
||||
garland.appendChild(garlandImg);
|
||||
container.appendChild(garland);
|
||||
}
|
||||
|
||||
// Spawn Birthday Cake at the bottom
|
||||
const cake = document.createElement('div');
|
||||
cake.className = 'birthday-cake';
|
||||
let cakeImg = document.createElement('img');
|
||||
cakeImg.src = `../Seasonals/Resources/birthday_images/cake.gif`;
|
||||
cakeImg.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
this.parentElement.innerHTML = '🎂';
|
||||
};
|
||||
cake.appendChild(cakeImg);
|
||||
container.appendChild(cake);
|
||||
// Cake and Garland have been removed
|
||||
|
||||
const standardCount = 15;
|
||||
const totalSymbols = symbolCount + standardCount;
|
||||
@@ -153,13 +154,13 @@ function createBirthday() {
|
||||
|
||||
const useRandomDuration = enableDifferentDuration !== false;
|
||||
|
||||
// We'll treat all balloons as rising symbols
|
||||
const activeItems = ['balloon_1', 'balloon_2', 'balloon_3'];
|
||||
// Arrays moved to top of file
|
||||
|
||||
for (let i = 0; i < finalCount; i++) {
|
||||
let symbol = document.createElement('div');
|
||||
|
||||
const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
|
||||
const randomImage = birthdayImages[Math.floor(Math.random() * birthdayImages.length)];
|
||||
const randomItem = randomImage.split('/').pop().split('.')[0]; // Extracts "balloon_blue"
|
||||
symbol.className = `birthday-symbol birthday-${randomItem}`;
|
||||
|
||||
// Create inner div for sway
|
||||
@@ -167,20 +168,31 @@ function createBirthday() {
|
||||
innerDiv.className = 'birthday-inner';
|
||||
|
||||
let img = document.createElement('img');
|
||||
img.src = `../Seasonals/Resources/birthday_images/${randomItem}.gif`; // Use standard pop GIFs
|
||||
img.src = randomImage;
|
||||
img.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
this.parentElement.innerHTML = getBirthdayEmojiFallback(randomItem);
|
||||
symbol.remove(); // Remove element completely on error
|
||||
};
|
||||
innerDiv.appendChild(img);
|
||||
symbol.appendChild(innerDiv);
|
||||
|
||||
// Sway wrapper
|
||||
let swayWrapper = document.createElement('div');
|
||||
swayWrapper.className = 'birthday-sway';
|
||||
const swayDuration = Math.random() * 3 + 3; // 3-6s per cycle
|
||||
swayWrapper.style.animationDuration = `${swayDuration}s`;
|
||||
swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
|
||||
const swayAmount = Math.random() * 60 + 20; // 20-80px
|
||||
const direction = Math.random() > 0.5 ? 1 : -1;
|
||||
swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
|
||||
|
||||
swayWrapper.appendChild(innerDiv);
|
||||
symbol.appendChild(swayWrapper);
|
||||
|
||||
const leftPos = Math.random() * 95;
|
||||
const delaySeconds = Math.random() * 10;
|
||||
|
||||
// Far away effect
|
||||
const depth = Math.random();
|
||||
const scale = 0.5 + depth * 0.7; // 0.5 to 1.2
|
||||
// MARK: balloon size
|
||||
const scale = 0.85 + depth * 0.3; // 0.85 to 1.15
|
||||
const zIndex = Math.floor(depth * 30) + 10;
|
||||
|
||||
img.style.transform = `scale(${scale})`;
|
||||
@@ -191,14 +203,15 @@ function createBirthday() {
|
||||
// Far strings climb slower
|
||||
durationSeconds = (1 - depth) * 6 + 7 + Math.random() * 4;
|
||||
}
|
||||
|
||||
// Negative delay correctly scatters them initially across the screen vertically
|
||||
// avoiding them all popping up at bottom edge together
|
||||
const delaySeconds = -(Math.random() * durationSeconds);
|
||||
|
||||
const isBalloon = randomItem.startsWith('balloon');
|
||||
|
||||
if (isBalloon) {
|
||||
// Sway animation
|
||||
const swayDur = Math.random() * 2 + 3; // 3 to 5s
|
||||
const swayDir = Math.random() > 0.5 ? 'normal' : 'reverse';
|
||||
innerDiv.style.animation = `birthday-sway ${swayDur}s ease-in-out infinite alternate ${swayDir}`;
|
||||
// Sway animation is now handled natively by the GIF motion.
|
||||
|
||||
// Interaction to pop is handled visually by the GIF, but we can still remove it on hover
|
||||
innerDiv.addEventListener('mouseenter', function(e) {
|
||||
@@ -210,17 +223,30 @@ function createBirthday() {
|
||||
// Create confetti burst at balloon's screen position
|
||||
const rect = this.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
// explosion height
|
||||
const cy = rect.top + rect.height * -0.05;
|
||||
// Ensure the burst container is appended to the main document body or the birthday container
|
||||
createBalloonPopConfetti(document.body, cx, cy);
|
||||
createBalloonPopConfetti(document.body, cx, cy, balloonColors[randomItem]);
|
||||
}
|
||||
}, { once: true });
|
||||
});
|
||||
|
||||
// Reset the balloon when it reappears at the bottom of the screen
|
||||
symbol.addEventListener('animationiteration', function(e) {
|
||||
// Ignore bubbling events from the inner sway animation
|
||||
if (e.animationName === 'birthday-rise' || e.target === symbol) {
|
||||
if (innerDiv.classList.contains('popped')) {
|
||||
innerDiv.classList.remove('popped');
|
||||
innerDiv.style.animation = '';
|
||||
innerDiv.style.pointerEvents = 'auto';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const startRot = (Math.random() * 20) - 10; // -10 to +10 spread
|
||||
symbol.style.setProperty('--start-rot', `${startRot}deg`);
|
||||
symbol.style.setProperty('--x-pos', `${leftPos}vw`);
|
||||
|
||||
symbol.style.left = `${leftPos}vw`;
|
||||
symbol.style.animationDuration = `${durationSeconds}s`;
|
||||
symbol.style.animationDelay = `${delaySeconds}s`;
|
||||
|
||||
@@ -228,33 +254,73 @@ function createBirthday() {
|
||||
}
|
||||
|
||||
// Party Confetti
|
||||
const confettiColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
|
||||
const confettiCount = isMobile ? 40 : 80;
|
||||
const baseConfettiCount = config.ConfettiCount !== undefined ? config.ConfettiCount : 60;
|
||||
const confettiCount = isMobile ? Math.floor(baseConfettiCount / 2) : baseConfettiCount;
|
||||
const allColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
|
||||
|
||||
for (let i = 0; i < confettiCount; i++) {
|
||||
let confetti = document.createElement('div');
|
||||
confetti.className = 'birthday-confetti';
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.classList.add('birthday-confetti-wrapper');
|
||||
|
||||
const color = confettiColors[Math.floor(Math.random() * confettiColors.length)];
|
||||
// Use carnival.js 3D advanced fluttering logic
|
||||
let swayWrapper = document.createElement('div');
|
||||
swayWrapper.classList.add('birthday-sway');
|
||||
wrapper.appendChild(swayWrapper);
|
||||
|
||||
const confetti = document.createElement('div');
|
||||
confetti.classList.add('birthday-confetti');
|
||||
|
||||
const color = allColors[Math.floor(Math.random() * allColors.length)];
|
||||
confetti.style.backgroundColor = color;
|
||||
|
||||
// Shape assignments
|
||||
const shape = Math.random();
|
||||
if (shape > 0.8) confetti.classList.add('circle');
|
||||
else if (shape > 0.6) confetti.classList.add('square');
|
||||
else if (shape > 0.4) confetti.classList.add('triangle');
|
||||
else confetti.classList.add('rect'); // default
|
||||
|
||||
// Sizing
|
||||
if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
|
||||
const width = Math.random() * 3 + 4; // 4-7px
|
||||
const height = Math.random() * 5 + 8; // 8-13px
|
||||
confetti.style.width = `${width}px`;
|
||||
confetti.style.height = `${height}px`;
|
||||
} else if (confetti.classList.contains('circle') || confetti.classList.contains('square')) {
|
||||
const size = Math.random() * 5 + 5; // 5-10px
|
||||
confetti.style.width = `${size}px`;
|
||||
confetti.style.height = `${size}px`;
|
||||
}
|
||||
|
||||
const duration = Math.random() * 5 + 5;
|
||||
const delay = -Math.random() * duration; // Spawn fully integrated across screen width/height
|
||||
|
||||
const leftPos = Math.random() * 100;
|
||||
const delaySeconds = Math.random() * 8;
|
||||
const duration = Math.random() * 3 + 4;
|
||||
wrapper.style.setProperty('--x-pos', `${Math.random() * 100}vw`);
|
||||
wrapper.style.animationDelay = `${delay}s`;
|
||||
wrapper.style.animationDuration = `${duration}s`;
|
||||
|
||||
// Sway handling
|
||||
const swayDuration = Math.random() * 2 + 3; // 3-5s per cycle
|
||||
swayWrapper.style.animationDuration = `${swayDuration}s`;
|
||||
swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
|
||||
const swayAmount = Math.random() * 70 + 30; // 30-100px
|
||||
const direction = Math.random() > 0.5 ? 1 : -1;
|
||||
swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
|
||||
|
||||
// 3D Flutter Rotation
|
||||
confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
|
||||
confetti.style.setProperty('--rx', Math.random().toFixed(2));
|
||||
confetti.style.setProperty('--ry', Math.random().toFixed(2));
|
||||
confetti.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
|
||||
const rotDir = Math.random() > 0.5 ? 1 : -1;
|
||||
confetti.style.setProperty('--rot-dir', `${rotDir * 360}deg`);
|
||||
|
||||
confetti.style.left = `${leftPos}vw`;
|
||||
confetti.style.animationDuration = `${duration}s`;
|
||||
confetti.style.animationDelay = `${delaySeconds}s`;
|
||||
|
||||
container.appendChild(confetti);
|
||||
swayWrapper.appendChild(confetti);
|
||||
container.appendChild(wrapper);
|
||||
}
|
||||
}
|
||||
|
||||
function getBirthdayEmojiFallback(type) {
|
||||
if (type.startsWith('balloon')) return '🎈';
|
||||
if (type === 'gift') return '🎁';
|
||||
return '';
|
||||
}
|
||||
/* Removed fallback logic */
|
||||
|
||||
function initializeBirthday() {
|
||||
if (!birthday) return;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
Jellyfin.Plugin.Seasonals/Web/birthday_assets/balloon_violet.gif
Normal file
BIN
Jellyfin.Plugin.Seasonals/Web/birthday_assets/balloon_violet.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
@@ -1,138 +1,112 @@
|
||||
.christmas-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.christmas {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-webkit-animation-name: christmas-fall, christmas-shake;
|
||||
-webkit-animation-duration: 10s, 3s;
|
||||
-webkit-animation-timing-function: linear, ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite, infinite;
|
||||
animation-name: christmas-fall, christmas-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes christmas-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes christmas-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes christmas-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes christmas-shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 2.5s;
|
||||
.christmas-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.christmas {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: christmas-fall, christmas-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes christmas-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes christmas-shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 0s;
|
||||
}
|
||||
|
||||
.christmas:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 2.5s;
|
||||
@@ -7,9 +7,11 @@
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.earthday-meadow {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -25,6 +27,7 @@
|
||||
}
|
||||
|
||||
.earthday-sway {
|
||||
will-change: transform;
|
||||
transform-origin: bottom center;
|
||||
animation: sway-grass 4s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
z-index: 10000;
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.easter-grass-container {
|
||||
@@ -38,6 +39,7 @@
|
||||
|
||||
/* sway */
|
||||
.easter-sway {
|
||||
will-change: transform;
|
||||
transform-origin: bottom center;
|
||||
animation: easter-wind-sway 6s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@@ -197,6 +197,8 @@ function animateRabbit(rabbit) {
|
||||
|
||||
rabbit.style.transition = 'none';
|
||||
const transformScale = startFromLeft ? 'scaleX(-1)' : '';
|
||||
// Fix bounding box center-of-gravity shift when graphic is flipped
|
||||
rabbit.style.transformOrigin = startFromLeft ? '59% 50%' : '50% 50%';
|
||||
rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;
|
||||
|
||||
const loopDurationMs = jumpDurationMs + pauseDurationMs;
|
||||
@@ -211,10 +213,10 @@ function animateRabbit(rabbit) {
|
||||
|
||||
if (!startTime) {
|
||||
startTime = timestamp;
|
||||
// resetting gif, forces the browser to restart the GIF from the first frame (crucial for syncing hops with movement)
|
||||
// resetting gif, appending a timestamp cache-buster forces the browser
|
||||
// to reload and start the GIF strictly from the first frame.
|
||||
const currSrc = rabbit.src.split('?')[0];
|
||||
rabbit.src = '';
|
||||
rabbit.src = currSrc;
|
||||
rabbit.src = currSrc + '?t=' + Date.now();
|
||||
}
|
||||
|
||||
const elapsed = timestamp - startTime;
|
||||
@@ -243,6 +245,7 @@ function animateRabbit(rabbit) {
|
||||
|
||||
isAnimating = false;
|
||||
rabbitTimeout = setTimeout(() => {
|
||||
if (!document.body.contains(rabbit)) return;
|
||||
animateRabbit(document.querySelector('#rabbit'));
|
||||
}, restTime);
|
||||
return;
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
z-index: 10;
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.eid-symbol {
|
||||
@@ -18,12 +19,14 @@
|
||||
}
|
||||
|
||||
.eid-symbol.floating-star {
|
||||
will-change: opacity;
|
||||
opacity: 0;
|
||||
animation: eid-twinkle 4s ease-in-out infinite;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.lantern-rope {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
|
||||
@@ -22,8 +22,9 @@
|
||||
|
||||
/* Film grain */
|
||||
.filmnoir-grain {
|
||||
will-change: transform, opacity;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
@@ -32,6 +33,7 @@
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.3;
|
||||
translate: 0 -50vh;
|
||||
}
|
||||
|
||||
/* Vignette */
|
||||
@@ -48,6 +50,7 @@
|
||||
|
||||
/* Occasional flicker and scratch */
|
||||
.filmnoir-scratches {
|
||||
will-change: opacity;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -11,9 +11,10 @@
|
||||
}
|
||||
|
||||
.rocket-trail {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
left: var(--trailX);
|
||||
top: var(--trailStartY);
|
||||
top: 0;
|
||||
width: 4px;
|
||||
|
||||
/* activate the following for rocket trail */
|
||||
@@ -28,6 +29,7 @@
|
||||
box-shadow: 0 0 8px 2px white;*/
|
||||
|
||||
animation: rocket-trail-animation 1s linear forwards;
|
||||
translate: 0 var(--trailStartY);
|
||||
}
|
||||
|
||||
@keyframes rocket-trail-animation {
|
||||
@@ -56,6 +58,7 @@
|
||||
}
|
||||
|
||||
.firework {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
@@ -162,6 +162,7 @@ function startFireworks() {
|
||||
}
|
||||
|
||||
fireworksInterval = setInterval(() => {
|
||||
if (!document.body.contains(fireworkContainer)) { clearInterval(fireworksInterval); return; }
|
||||
const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
|
||||
for (let i = 0; i < randomCount; i++) {
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -61,12 +61,12 @@ function createFriday13(container) {
|
||||
cat.parentNode.removeChild(cat);
|
||||
}
|
||||
// Respawn with random delay between 5 to 25 seconds
|
||||
setTimeout(spawnCat, Math.random() * 20000 + 5000);
|
||||
setTimeout(() => { if (document.body.contains(container)) spawnCat(); }, Math.random() * 20000 + 5000);
|
||||
}, (catWalkDurationSeconds * 1000) + 500); // Wait for duration + 500ms safety margin
|
||||
}
|
||||
|
||||
// Initial spawn with random delay
|
||||
setTimeout(spawnCat, Math.random() * 5000);
|
||||
setTimeout(() => { if (document.body.contains(container)) spawnCat(); }, Math.random() * 5000);
|
||||
}
|
||||
|
||||
function initializeFriday13() {
|
||||
|
||||
@@ -9,16 +9,17 @@
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.frost-layer {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
/* A glowing white-blue gradient from edges */
|
||||
background: radial-gradient(ellipse at center, transparent 60%, rgba(180, 220, 255, 0.4) 100%);
|
||||
box-shadow: inset 0 0 60px rgba(200, 230, 255, 0.5), inset 0 0 120px rgba(255, 255, 255, 0.3);
|
||||
|
||||
@@ -27,14 +28,13 @@
|
||||
animation: frost-creep 4s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Subtle repeating star/crystal pattern */
|
||||
.frost-crystals {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: -5%;
|
||||
top: 0;
|
||||
left: -5%;
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
/* Use multi-layered star patterns for a random, crystalline spread */
|
||||
background-image:
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/><circle cx="40" cy="30" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="20" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><path d="M50 10 L51 15 L56 16 L51 17 L50 22 L49 17 L44 16 L49 15 Z" fill="rgba(255,255,255,0.2)"/></svg>'),
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="25" cy="5" r="1.5" fill="rgba(255,255,255,0.1)"/><path d="M20 20 L21 23 L24 24 L21 25 L20 28 L19 25 L16 24 L19 23 Z" fill="rgba(255,255,255,0.15)"/></svg>'),
|
||||
@@ -43,12 +43,9 @@
|
||||
background-size: 110px 110px, 60px 60px, 30px 30px;
|
||||
background-position: 0 0, 15px 15px, 5px 10px;
|
||||
mix-blend-mode: overlay;
|
||||
|
||||
/* Mask out the center so crystals only appear strongly on the edges */
|
||||
-webkit-mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
|
||||
mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
|
||||
|
||||
animation: frost-shimmer 6s infinite alternate ease-in-out;
|
||||
translate: 0 -5vh;
|
||||
}
|
||||
|
||||
@keyframes frost-creep {
|
||||
|
||||
@@ -7,25 +7,17 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.halloween {
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
bottom: -10%;
|
||||
z-index: 15;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
-webkit-animation-name: halloween-fall, halloween-shake;
|
||||
-webkit-animation-duration: 10s, 3s;
|
||||
-webkit-animation-timing-function: linear, ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite, infinite;
|
||||
-webkit-animation-play-state: running, running;
|
||||
animation-name: halloween-fall, halloween-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
@@ -33,29 +25,7 @@
|
||||
animation-play-state: running, running
|
||||
}
|
||||
|
||||
@-webkit-keyframes halloween-fall {
|
||||
0% {
|
||||
bottom: -10%;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes halloween-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(80px);
|
||||
transform: translateX(80px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes halloween-fall {
|
||||
0% {
|
||||
@@ -81,73 +51,61 @@
|
||||
|
||||
.halloween:nth-of-type(0) {
|
||||
left: 1%;
|
||||
-webkit-animation-delay: 0s, 0s;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(1) {
|
||||
left: 10%;
|
||||
-webkit-animation-delay: -1s, -1s;
|
||||
animation-delay: -1s, -1s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(2) {
|
||||
left: 20%;
|
||||
-webkit-animation-delay: -2s, -2s;
|
||||
animation-delay: -2s, -2s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(3) {
|
||||
left: 30%;
|
||||
-webkit-animation-delay: -3s, -3s;
|
||||
animation-delay: -3s, -3s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(4) {
|
||||
left: 40%;
|
||||
-webkit-animation-delay: -4s, -4s;
|
||||
animation-delay: -4s, -4s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(5) {
|
||||
left: 50%;
|
||||
-webkit-animation-delay: -5s, -5s;
|
||||
animation-delay: -5s, -5s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(6) {
|
||||
left: 60%;
|
||||
-webkit-animation-delay: -6s, -6s;
|
||||
animation-delay: -6s, -6s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(7) {
|
||||
left: 70%;
|
||||
-webkit-animation-delay: -7s, -7s;
|
||||
animation-delay: -7s, -7s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(8) {
|
||||
left: 80%;
|
||||
-webkit-animation-delay: -8s, -8s;
|
||||
animation-delay: -8s, -8s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(9) {
|
||||
left: 90%;
|
||||
-webkit-animation-delay: -9s, -9s;
|
||||
animation-delay: -9s, -9s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(10) {
|
||||
left: 25%;
|
||||
-webkit-animation-delay: -10s, -10s;
|
||||
animation-delay: -10s, -10s;
|
||||
}
|
||||
|
||||
.halloween:nth-of-type(11) {
|
||||
left: 65%;
|
||||
-webkit-animation-delay: -11s, -11s;
|
||||
animation-delay: -11s, -11s;
|
||||
}
|
||||
|
||||
@@ -162,7 +120,6 @@
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(to top, black, transparent);
|
||||
-webkit-mask-image: linear-gradient(to top, black, transparent);
|
||||
}
|
||||
.halloween-fog-blob {
|
||||
position: absolute;
|
||||
@@ -174,10 +131,12 @@
|
||||
filter: blur(15px);
|
||||
}
|
||||
.halloween-fog-blob:nth-child(1) {
|
||||
will-change: transform;
|
||||
left: -20vw;
|
||||
animation: fog-float1 25s ease-in-out infinite alternate;
|
||||
}
|
||||
.halloween-fog-blob:nth-child(2) {
|
||||
will-change: transform;
|
||||
left: -50vw;
|
||||
background: radial-gradient(ellipse at center, rgba(100, 110, 120, 0.3) 0%, transparent 65%);
|
||||
animation: fog-float2 35s ease-in-out infinite alternate;
|
||||
@@ -196,7 +155,7 @@
|
||||
/* --- Spiders --- */
|
||||
.halloween-spider-wrapper {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -204,8 +163,10 @@
|
||||
transform-origin: top;
|
||||
will-change: transform;
|
||||
pointer-events: auto;
|
||||
padding: 20px; /* Increase hit area safely */
|
||||
padding: 20px; /* Increase hit area */
|
||||
translate: 0 -50px;
|
||||
}
|
||||
|
||||
.halloween-thread {
|
||||
width: 30px; /* Wider hit area for mouse interaction */
|
||||
height: 100vh;
|
||||
@@ -223,12 +184,12 @@
|
||||
background: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.6));
|
||||
}
|
||||
.halloween-spider {
|
||||
will-change: transform;
|
||||
animation: spider-swing 3s ease-in-out infinite alternate;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
/* MARK: SPIDER SWAY CONFIGURATION */
|
||||
/* Adjust degrees in 'rotate(...)' to change how far spider and thread swing in wind. */
|
||||
@keyframes wind-sway {
|
||||
0% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(2deg); }
|
||||
|
||||
@@ -182,14 +182,18 @@ function createSpider(container) {
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.remove();
|
||||
setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
|
||||
if (document.body.contains(container)) {
|
||||
setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
wrapper.addEventListener('animationend', () => {
|
||||
if (isRetreating) return;
|
||||
wrapper.remove();
|
||||
setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
|
||||
if (document.body.contains(container)) {
|
||||
setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(wrapper);
|
||||
@@ -223,7 +227,9 @@ function createMouse(container) {
|
||||
|
||||
mouse.addEventListener('animationend', () => {
|
||||
mouse.remove();
|
||||
setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
|
||||
if (document.body.contains(container)) {
|
||||
setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(mouse);
|
||||
|
||||
@@ -12,48 +12,21 @@
|
||||
}
|
||||
|
||||
.heart {
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
bottom: -10%;
|
||||
z-index: 15;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
-webkit-animation-name: heart-fall, heart-shake;
|
||||
-webkit-animation-duration: 14s, 5s;
|
||||
-webkit-animation-timing-function: linear, ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite, infinite;
|
||||
animation-name: heart-fall, heart-shake;
|
||||
animation-duration: 14s, 5s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes heart-fall {
|
||||
0% {
|
||||
bottom: -10%;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes heart-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(80px);
|
||||
transform: translateX(80px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heart-fall {
|
||||
0% {
|
||||
@@ -79,72 +52,60 @@
|
||||
|
||||
.heart:nth-of-type(0) {
|
||||
left: 1%;
|
||||
-webkit-animation-delay: 0s, 0s;
|
||||
animation-delay: 0s, 0s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(1) {
|
||||
left: 10%;
|
||||
-webkit-animation-delay: 1s, 1s;
|
||||
animation-delay: 1s, 1s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(2) {
|
||||
left: 20%;
|
||||
-webkit-animation-delay: 6s, .5s;
|
||||
animation-delay: 6s, .5s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(3) {
|
||||
left: 30%;
|
||||
-webkit-animation-delay: 4s, 2s;
|
||||
animation-delay: 4s, 2s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(4) {
|
||||
left: 40%;
|
||||
-webkit-animation-delay: 2s, 2s;
|
||||
animation-delay: 2s, 2s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(5) {
|
||||
left: 50%;
|
||||
-webkit-animation-delay: 8s, 3s;
|
||||
animation-delay: 8s, 3s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(6) {
|
||||
left: 60%;
|
||||
-webkit-animation-delay: 6s, 2s;
|
||||
animation-delay: 6s, 2s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(7) {
|
||||
left: 70%;
|
||||
-webkit-animation-delay: 2.5s, 1s;
|
||||
animation-delay: 2.5s, 1s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(8) {
|
||||
left: 80%;
|
||||
-webkit-animation-delay: 1s, 0s;
|
||||
animation-delay: 1s, 0s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(9) {
|
||||
left: 90%;
|
||||
-webkit-animation-delay: 3s, 1.5s;
|
||||
animation-delay: 3s, 1.5s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(10) {
|
||||
left: 25%;
|
||||
-webkit-animation-delay: 2s, 0s;
|
||||
animation-delay: 2s, 0s
|
||||
}
|
||||
|
||||
.heart:nth-of-type(11) {
|
||||
left: 65%;
|
||||
-webkit-animation-delay: 4s, 2.5s;
|
||||
animation-delay: 4s, 2.5s
|
||||
}
|
||||
@@ -29,11 +29,13 @@
|
||||
}
|
||||
|
||||
.mario-jump {
|
||||
will-change: transform;
|
||||
animation: jump-arc 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
/* 8-bit coin styling */
|
||||
.mario-coin {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -47,11 +49,12 @@
|
||||
.mario-coin::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
background: #daa520;
|
||||
translate: 0 6px;
|
||||
}
|
||||
|
||||
@keyframes mario-run {
|
||||
|
||||
@@ -51,8 +51,9 @@ function createMarioDay(container) {
|
||||
container.appendChild(wrapper);
|
||||
|
||||
// Periodically throw out an 8-bit coin
|
||||
setInterval(() => {
|
||||
if (!document.querySelector('.marioday-container')) return;
|
||||
const intervalId = setInterval(() => {
|
||||
if (!document.body.contains(container)) { clearInterval(intervalId); return; }
|
||||
if (container.style.display === 'none') return;
|
||||
const coin = document.createElement('div');
|
||||
coin.className = 'mario-coin';
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
@@ -136,6 +136,7 @@ function createElements() {
|
||||
for(let i=0; i<maxTrails; i++) trails.push(new Trail());
|
||||
|
||||
function loop() {
|
||||
if (!document.body.contains(container)) { clearInterval(window.matrixInterval); return; }
|
||||
if (isHidden) return; // Pause drawing when hidden
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.font = 'bold ' + fontSize + 'px monospace';
|
||||
|
||||
@@ -12,13 +12,15 @@
|
||||
}
|
||||
|
||||
.oktoberfest-symbol {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
top: 0;
|
||||
font-size: 2.2em;
|
||||
user-select: none;
|
||||
animation-name: oktoberfest-fall, oktoberfest-sway;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
@keyframes oktoberfest-fall {
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
|
||||
.olympia-symbol {
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
font-size: 3rem;
|
||||
top: 0;
|
||||
opacity: 0.95;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.2);
|
||||
z-index: 40;
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
.olympia-flame {
|
||||
@@ -35,8 +35,8 @@
|
||||
.olympia-ring-css::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 0;
|
||||
translate: -50% -50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 5px solid #0081C8; /* Default blue ring */
|
||||
@@ -47,14 +47,15 @@
|
||||
}
|
||||
.olympia-symbol {
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
font-size: 4rem;
|
||||
top: 0;
|
||||
opacity: 0.95;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.2);
|
||||
z-index: 40;
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
.olympia-inner {
|
||||
will-change: transform;
|
||||
display: inline-block;
|
||||
animation: olympia-sway linear infinite alternate;
|
||||
}
|
||||
|
||||
@@ -107,8 +107,7 @@ function createOlympia() {
|
||||
}
|
||||
img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
|
||||
img.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
this.parentElement.innerHTML = getOlympiaEmojiFallback(randomItem);
|
||||
symbol.remove();
|
||||
};
|
||||
innerDiv.appendChild(img);
|
||||
|
||||
@@ -244,13 +243,6 @@ function createOlympia() {
|
||||
}
|
||||
}
|
||||
|
||||
function getOlympiaEmojiFallback(type) {
|
||||
if (type === 'gold') return '🥇';
|
||||
if (type === 'silver') return '🥈';
|
||||
if (type === 'bronze') return '🥉';
|
||||
return ''; // Rings will be handled by CSS or actual image
|
||||
}
|
||||
|
||||
function initializeOlympia() {
|
||||
if (!olympia) return;
|
||||
createOlympia();
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10; /* Behind popups but over background */
|
||||
z-index: 10;
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -30,8 +30,9 @@
|
||||
}
|
||||
|
||||
.oscar-spotlight {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
top: 0;
|
||||
/* MARK: SPOTLIGHT WIDTH CONFIGURATION */
|
||||
/* To adjust bottom width (spread), change 'width' property (e.g., 20vw for narrow, 40vw for wide). */
|
||||
/* To adjust top width (origin), modify first two percentages in 'clip-path' (e.g., 48% 0, 52% 0 for a very thin start). */
|
||||
@@ -42,9 +43,11 @@
|
||||
transform-origin: top center;
|
||||
animation: spotlight-sweep 12s infinite alternate ease-in-out;
|
||||
mix-blend-mode: screen;
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
.oscar-flash {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
@@ -56,9 +56,9 @@ function createOscar(container) {
|
||||
container.appendChild(carpet);
|
||||
container.appendChild(spotlights);
|
||||
|
||||
// Paparazzi flashes with randomized intervals
|
||||
function flashLoop() {
|
||||
if (!document.querySelector('.oscar-container')) {
|
||||
if (!document.body.contains(container)) return; // Kill the loop if container is removed
|
||||
if (container.style.display === 'none') {
|
||||
setTimeout(flashLoop, 1000); // Check again later if hidden
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// 1. Read Configuration
|
||||
const config = window.SeasonalsPluginConfig?.Pride || {};
|
||||
|
||||
const enabled = config.EnablePride !== undefined ? config.EnablePride : true;
|
||||
@@ -8,8 +7,6 @@ const colorHeader = config.ColorHeader !== undefined ? config.ColorHeader : true
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
// 2. Toggle Function
|
||||
// Hides the effect when a video player, trailer (in full width mode), dashboard, or user menu is active.
|
||||
function togglePride() {
|
||||
const container = document.querySelector('.pride-container');
|
||||
if (!container) return;
|
||||
@@ -34,8 +31,6 @@ function togglePride() {
|
||||
}
|
||||
}
|
||||
|
||||
// 3. MutationObserver
|
||||
// Watches the DOM for changes so the effect can auto-hide/show.
|
||||
const observer = new MutationObserver(togglePride);
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
@@ -43,8 +38,6 @@ observer.observe(document.body, {
|
||||
attributes: true
|
||||
});
|
||||
|
||||
// 4. Element Creation
|
||||
// Create and append your animated elements to the container.
|
||||
function createElements() {
|
||||
const container = document.querySelector('.pride-container') || document.createElement('div');
|
||||
|
||||
@@ -82,7 +75,6 @@ function createElements() {
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Initialization
|
||||
function initializePride() {
|
||||
if (!enabled) return;
|
||||
createElements();
|
||||
|
||||
@@ -1,68 +1,66 @@
|
||||
.resurrection-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.resurrection-symbol {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
translate: 0 -15vh;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
animation-name: resurrection-fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.resurrection-sway-wrapper {
|
||||
will-change: transform;
|
||||
animation-name: resurrection-sway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.resurrection-symbol img {
|
||||
z-index: 15;
|
||||
height: auto;
|
||||
width: 56px;
|
||||
opacity: 0.95;
|
||||
filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.resurrection-symbol img {
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes resurrection-fall {
|
||||
0% {
|
||||
transform: translate3d(0, -15vh, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 105vh, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes resurrection-sway {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(65px);
|
||||
}
|
||||
}
|
||||
.resurrection-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.resurrection-symbol {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
translate: 0 -15vh;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: resurrection-fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.resurrection-sway-wrapper {
|
||||
will-change: transform;
|
||||
animation-name: resurrection-sway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.resurrection-symbol img {
|
||||
z-index: 15;
|
||||
height: auto;
|
||||
width: 56px;
|
||||
opacity: 0.95;
|
||||
filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.resurrection-symbol img {
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes resurrection-fall {
|
||||
0% {
|
||||
transform: translate3d(0, -15vh, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 105vh, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes resurrection-sway {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(65px);
|
||||
}
|
||||
|
||||
@@ -238,7 +238,7 @@ function animateSanta() {
|
||||
function startAnimation() {
|
||||
const santaHeight = santa.offsetHeight;
|
||||
if (santaHeight === 0) {
|
||||
setTimeout(startAnimation, 100);
|
||||
setTimeout(() => { if (document.body.contains(santa)) startAnimation(); }, 100);
|
||||
return;
|
||||
}
|
||||
// console.log('Santa height: ', santaHeight);
|
||||
@@ -283,7 +283,7 @@ function animateSanta() {
|
||||
animationFrameIdSanta = requestAnimationFrame(move);
|
||||
} else {
|
||||
const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
|
||||
setTimeout(animateSanta, pause);
|
||||
setTimeout(() => { if (document.body.contains(santa)) animateSanta(); }, pause);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,139 +1,112 @@
|
||||
.snowflakes {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
-webkit-animation-name: heart-fall, heart-shake;
|
||||
-webkit-animation-duration: 12s, 3s;
|
||||
-webkit-animation-timing-function: linear, ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite, infinite;
|
||||
animation-name: snowflakes-fall, snowflakes-shake;
|
||||
animation-duration: 12s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes snowflakes-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes snowflakes-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowflakes-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowflakes-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 2.5s;
|
||||
.snowflakes {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
translate: 0 -10vh;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
text-shadow: 0 0 5px #000;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: snowflakes-fall, snowflakes-shake;
|
||||
animation-duration: 12s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes snowflakes-fall {
|
||||
0% {
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowflakes-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(11) {
|
||||
left: 65%;
|
||||
@@ -1,6 +1,6 @@
|
||||
const config = window.SeasonalsPluginConfig?.Snowstorm || {};
|
||||
|
||||
const snowstorm = config.enableSnowstorm !== undefined ? config.EnableSnowstorm : true; // enable/disable snowstorm
|
||||
const snowstorm = config.EnableSnowstorm !== undefined ? config.EnableSnowstorm : true; // enable/disable snowstorm
|
||||
let snowflakesCount = config.SnowflakesCount || 500; // count of snowflakes (recommended values: 300-600)
|
||||
const snowflakesCountMobile = config.SnowflakesCountMobile || 250; // count of snowflakes on mobile devices (Warning: High values may affect performance)
|
||||
const snowFallSpeed = config.Speed || 6; // speed of snowfall (recommended values: 4-8)
|
||||
|
||||
@@ -5,12 +5,13 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.space-bg-glow {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100vw; height: 100vh;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.15), transparent 60%),
|
||||
@@ -33,21 +34,23 @@
|
||||
}
|
||||
|
||||
.space-shooting-star {
|
||||
will-change: opacity;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
||||
border-radius: 50%;
|
||||
animation: space-shoot 8s linear infinite;
|
||||
animation: space-shoot 25s linear infinite;
|
||||
opacity: 0;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
@keyframes space-shoot {
|
||||
0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; }
|
||||
5% { width: 300px; }
|
||||
15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
|
||||
100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
|
||||
0% { transform: rotate(var(--shoot-angle)) translateX(0); opacity: 0; }
|
||||
5% { opacity: 1; }
|
||||
35% { opacity: 1; }
|
||||
40% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
|
||||
100% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
|
||||
}
|
||||
|
||||
.space-symbol {
|
||||
@@ -60,33 +63,39 @@
|
||||
}
|
||||
|
||||
.space-symbol img {
|
||||
will-change: transform;
|
||||
width: 6vh;
|
||||
height: auto;
|
||||
max-width: 60px;
|
||||
object-fit: contain;
|
||||
/* Add a slow spin to images */
|
||||
animation: space-slow-spin var(--rot-dur, 20s) linear infinite;
|
||||
}
|
||||
|
||||
/* Specific elements scaling */
|
||||
.space-planet1, .space-planet2 { font-size: 4rem; }
|
||||
.space-planet1 img, .space-planet2 img { width: 8vh; max-width: 80px; }
|
||||
.space-star { font-size: 2rem; opacity: 0.6; }
|
||||
.space-star img { width: 3vh; max-width: 30px; }
|
||||
.space-planet img { width: 8vh; max-width: 80px; }
|
||||
.space-astronaut img { width: 10vh; max-width: 100px; }
|
||||
.space-satellite img { width: 12vh; max-width: 120px; }
|
||||
.space-iss img { width: 25vh; max-width: 180px; }
|
||||
.space-rocket img { width: 12vh; max-width: 120px; }
|
||||
|
||||
@keyframes space-drift-right {
|
||||
0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
|
||||
50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); }
|
||||
100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
|
||||
50% { transform: translateX(60vw) translateY(-30vh) scaleX(-1); }
|
||||
100% { transform: translateX(140vw) translateY(0) scaleX(-1); }
|
||||
}
|
||||
|
||||
@keyframes space-drift-left {
|
||||
0% { transform: translateX(10vw) translateY(0); }
|
||||
50% { transform: translateX(-50vw) translateY(5vh); }
|
||||
100% { transform: translateX(-110vw) translateY(0); }
|
||||
50% { transform: translateX(-60vw) translateY(30vh); }
|
||||
100% { transform: translateX(-140vw) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes space-slow-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes space-star-drift {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-100vh); }
|
||||
}
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
const config = window.SeasonalsPluginConfig?.Space || {};
|
||||
|
||||
const space = config.EnableSpace !== undefined ? config.EnableSpace : true;
|
||||
const symbolCount = config.SymbolCount || 25;
|
||||
const planetCountConf = config.PlanetCount !== undefined ? config.PlanetCount : 6;
|
||||
const astronautCountConf = config.AstronautCount !== undefined ? config.AstronautCount : 1;
|
||||
const satelliteCountConf = config.SatelliteCount !== undefined ? config.SatelliteCount : 4;
|
||||
const issCountConf = config.IssCount !== undefined ? config.IssCount : 1;
|
||||
const rocketCountConf = config.RocketCount !== undefined ? config.RocketCount : 1;
|
||||
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 spaceImages = [
|
||||
"../Seasonals/Resources/space_assets/astronaut_1.gif",
|
||||
const astronautImages = [
|
||||
"../Seasonals/Resources/space_assets/astronaut_1.gif"
|
||||
];
|
||||
const planetImages = [
|
||||
"../Seasonals/Resources/space_assets/planet_1.png",
|
||||
"../Seasonals/Resources/space_assets/planet_2.png",
|
||||
"../Seasonals/Resources/space_assets/planet_3.png",
|
||||
@@ -16,13 +22,19 @@ const spaceImages = [
|
||||
"../Seasonals/Resources/space_assets/planet_6.png",
|
||||
"../Seasonals/Resources/space_assets/planet_7.png",
|
||||
"../Seasonals/Resources/space_assets/planet_8.png",
|
||||
"../Seasonals/Resources/space_assets/planet_9.png",
|
||||
"../Seasonals/Resources/space_assets/rocket.gif",
|
||||
"../Seasonals/Resources/space_assets/Satellite_1.gif",
|
||||
"../Seasonals/Resources/space_assets/Satellite_2.gif",
|
||||
"../Seasonals/Resources/space_assets/space-shuttle.png",
|
||||
"../Seasonals/Resources/space_assets/iss.png"
|
||||
"../Seasonals/Resources/space_assets/planet_9.png"
|
||||
];
|
||||
const satelliteImages = [
|
||||
"../Seasonals/Resources/space_assets/Satellite_1.gif",
|
||||
"../Seasonals/Resources/space_assets/Satellite_2.gif"
|
||||
];
|
||||
|
||||
const issImage = "../Seasonals/Resources/space_assets/iss.png";
|
||||
|
||||
const rocketImages = [
|
||||
"../Seasonals/Resources/space_assets/rocket.gif",
|
||||
"../Seasonals/Resources/space_assets/space-shuttle.png"
|
||||
]
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
@@ -66,14 +78,25 @@ function createSpace() {
|
||||
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;
|
||||
const standardPlanetCount = 4;
|
||||
const standardAstronautCount = 1;
|
||||
const standardSatelliteCount = 2;
|
||||
const standardIssCount = 1;
|
||||
const standardRocketCount = 1;
|
||||
|
||||
if (isMobile) {
|
||||
finalCount = enableRandomMobile ? totalSymbols : standardCount;
|
||||
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
|
||||
let pCount = planetCountConf;
|
||||
let aCount = astronautCountConf;
|
||||
let sCount = satelliteCountConf;
|
||||
let iCount = issCountConf;
|
||||
let rCount = rocketCountConf;
|
||||
|
||||
if (isMobile && !enableRandomMobile) {
|
||||
pCount = standardPlanetCount;
|
||||
aCount = standardAstronautCount;
|
||||
sCount = standardSatelliteCount;
|
||||
iCount = standardIssCount;
|
||||
rCount = standardRocketCount;
|
||||
}
|
||||
|
||||
// Add Nebula Glow
|
||||
@@ -90,30 +113,43 @@ function createSpace() {
|
||||
|
||||
// Generate random stars for parallax starfield using CSS % / vw sizes for responsiveness
|
||||
for (let i = 0; i < 150; i++) {
|
||||
boxShadows1.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
|
||||
if (i < 50) boxShadows2.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
|
||||
if (i < 20) boxShadows3.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
|
||||
let x = (Math.random() * 100).toFixed(2);
|
||||
let y = (Math.random() * 100).toFixed(2);
|
||||
boxShadows1.push(`${x}vw ${y}vh #FFF`);
|
||||
boxShadows1.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
|
||||
}
|
||||
for (let i = 0; i < 50; i++) {
|
||||
let x = (Math.random() * 100).toFixed(2);
|
||||
let y = (Math.random() * 100).toFixed(2);
|
||||
boxShadows2.push(`${x}vw ${y}vh #FFF`);
|
||||
boxShadows2.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
|
||||
}
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let x = (Math.random() * 100).toFixed(2);
|
||||
let y = (Math.random() * 100).toFixed(2);
|
||||
boxShadows3.push(`${x}vw ${y}vh #FFF`);
|
||||
boxShadows3.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
|
||||
}
|
||||
|
||||
const starLayer1 = document.createElement('div');
|
||||
starLayer1.style.width = '1px'; starLayer1.style.height = '1px';
|
||||
starLayer1.style.background = 'transparent';
|
||||
starLayer1.style.boxShadow = boxShadows1.join(", ");
|
||||
starLayer1.style.animation = 'space-slow-spin 200s linear infinite';
|
||||
starLayer1.style.animation = 'space-star-drift 200s linear infinite';
|
||||
starfield.appendChild(starLayer1);
|
||||
|
||||
const starLayer2 = document.createElement('div');
|
||||
starLayer2.style.width = '2px'; starLayer2.style.height = '2px';
|
||||
starLayer2.style.background = 'transparent';
|
||||
starLayer2.style.boxShadow = boxShadows2.join(", ");
|
||||
starLayer2.style.animation = 'space-slow-spin 150s linear infinite reverse';
|
||||
starLayer2.style.animation = 'space-star-drift 150s linear infinite';
|
||||
starfield.appendChild(starLayer2);
|
||||
|
||||
const starLayer3 = document.createElement('div');
|
||||
starLayer3.style.width = '3px'; starLayer3.style.height = '3px';
|
||||
starLayer3.style.background = 'transparent';
|
||||
starLayer3.style.boxShadow = boxShadows3.join(", ");
|
||||
starLayer3.style.animation = 'space-slow-spin 100s linear infinite';
|
||||
starLayer3.style.animation = 'space-star-drift 100s linear infinite';
|
||||
starfield.appendChild(starLayer3);
|
||||
|
||||
container.appendChild(starfield);
|
||||
@@ -125,85 +161,116 @@ function createSpace() {
|
||||
streak.className = 'space-shooting-star';
|
||||
// Pick a random tail direction and fall direction to match
|
||||
const isFromLeft = Math.random() > 0.5;
|
||||
const rotateAngle = isFromLeft ? 45 : -45;
|
||||
// Direction angle: random between 15deg-75deg (left) or 105deg-165deg (right)
|
||||
// so they don't always fall in the exact same quadrant trajectory
|
||||
let angle = isFromLeft
|
||||
? Math.random() * 60 + 15
|
||||
: Math.random() * 60 + 105;
|
||||
|
||||
streak.style.transform = `rotate(${rotateAngle}deg)`;
|
||||
streak.style.transformOrigin = isFromLeft ? 'left center' : 'right center';
|
||||
streak.style.setProperty('--shoot-angle', `${angle}deg`);
|
||||
|
||||
const topStart = Math.random() * 50;
|
||||
streak.style.setProperty('--shoot-start-x', isFromLeft ? '-20vw' : '120vw');
|
||||
streak.style.setProperty('--shoot-end-x', isFromLeft ? '120vw' : '-20vw');
|
||||
streak.style.setProperty('--shoot-start-y', `${topStart}vh`);
|
||||
streak.style.setProperty('--shoot-end-y', `${topStart + 140}vh`); // 140vh drop to cross screen diagonally
|
||||
streak.style.left = isFromLeft ? '-20vw' : '120vw';
|
||||
streak.style.top = `${topStart}vh`;
|
||||
|
||||
// Travel 200 viewport widths exactly along the rotated angle
|
||||
streak.style.setProperty('--shoot-distance', '200vw');
|
||||
|
||||
streak.style.animationDelay = `${Math.random() * 20}s`;
|
||||
|
||||
// MARK: Shooting Star Speed
|
||||
const flightCycleDuration = Math.random() * 10 + 15; // 15-25s
|
||||
streak.style.animationDuration = `${flightCycleDuration}s`;
|
||||
|
||||
streak.style.animationDelay = `${Math.random() * 20}s`; // Less frequent
|
||||
streak.style.animationDuration = `${Math.random() * 2 + 3}s`; // 3-5s
|
||||
container.appendChild(streak);
|
||||
}
|
||||
|
||||
const useRandomDuration = enableDifferentDuration !== false;
|
||||
|
||||
for (let i = 0; i < finalCount; i++) {
|
||||
let symbol = document.createElement('div');
|
||||
|
||||
const randomImage = spaceImages[Math.floor(Math.random() * spaceImages.length)];
|
||||
symbol.className = `space-symbol`;
|
||||
function createSpaceItem(imageArr, cCount, addedClass) {
|
||||
for (let i = 0; i < cCount; i++) {
|
||||
let symbol = document.createElement('div');
|
||||
|
||||
const randomImage = imageArr[Math.floor(Math.random() * imageArr.length)];
|
||||
symbol.className = `space-symbol ${addedClass}`;
|
||||
|
||||
let img = document.createElement('img');
|
||||
img.src = randomImage;
|
||||
img.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
}; // removed emoji fallback
|
||||
symbol.appendChild(img);
|
||||
let img = document.createElement('img');
|
||||
img.src = randomImage;
|
||||
img.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
};
|
||||
symbol.appendChild(img);
|
||||
|
||||
const topPos = Math.random() * 90; // 0 to 90vh
|
||||
const delaySeconds = Math.random() * 10;
|
||||
|
||||
// Zero gravity sizes / speeds
|
||||
const depth = Math.random();
|
||||
const distanceScale = 0.3 + (depth * 0.7); // 0.3 to 1.0 (decently small)
|
||||
const blurAmount = depth < 0.3 ? (1 - depth) * 2 : 0;
|
||||
|
||||
symbol.style.filter = `blur(${blurAmount}px)`;
|
||||
symbol.style.zIndex = Math.floor(depth * 30) + 20;
|
||||
const topPos = Math.random() * 90; // 0 to 90vh
|
||||
|
||||
// Zero gravity sizes / speeds
|
||||
const depth = Math.random();
|
||||
// Make background elements (depth close to 0) much smaller than foreground
|
||||
const distanceScale = 0.15 + (depth * 0.85); // 0.15 to 1.0
|
||||
|
||||
symbol.style.zIndex = Math.floor(depth * 30) + 20;
|
||||
|
||||
let durationSeconds = 30; // Very slow
|
||||
if (useRandomDuration) {
|
||||
durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5;
|
||||
let durationSeconds = 30; // Very slow
|
||||
if (useRandomDuration) {
|
||||
durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5;
|
||||
}
|
||||
|
||||
// Randomly pick direction: left-to-right OR right-to-left
|
||||
const goRight = Math.random() > 0.5;
|
||||
const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
|
||||
|
||||
if (goRight) {
|
||||
symbol.style.animationName = 'space-drift-right';
|
||||
symbol.style.left = '-20vw';
|
||||
symbol.style.right = 'auto';
|
||||
} else {
|
||||
symbol.style.animationName = 'space-drift-left';
|
||||
symbol.style.right = '-20vw';
|
||||
symbol.style.left = 'auto';
|
||||
}
|
||||
|
||||
symbol.style.top = `${topPos}vh`;
|
||||
symbol.style.animationDuration = `${durationSeconds}s`;
|
||||
|
||||
// Negative delay correctly scatters them initially across the screen
|
||||
// so they don't all appear to spawn from the edge at the start
|
||||
const delaySeconds = -(Math.random() * durationSeconds);
|
||||
symbol.style.animationDelay = `${delaySeconds}s`;
|
||||
|
||||
// Slow rotation inside inner div
|
||||
const rotationDiv = document.createElement('div');
|
||||
const rotDur = Math.random() * 20 + 20; // 20-40s spin
|
||||
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
|
||||
rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
|
||||
|
||||
// Apply final static scaling and facing to inner image directly
|
||||
img.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
|
||||
|
||||
rotationDiv.appendChild(img);
|
||||
symbol.appendChild(rotationDiv);
|
||||
|
||||
// Swap to a random image from the pool every time it completes an orbit (disappears)
|
||||
if (imageArr.length > 1) {
|
||||
// The animation delay pushes the initial cycle, so we use setInterval matched to duration
|
||||
const intervalId = setInterval(() => {
|
||||
if (!document.body.contains(container)) { clearInterval(intervalId); return; }
|
||||
// Update only if currently out of bounds to avoid popping
|
||||
const rect = symbol.getBoundingClientRect();
|
||||
if (rect.right < 0 || rect.left > window.innerWidth) {
|
||||
img.src = imageArr[Math.floor(Math.random() * imageArr.length)];
|
||||
}
|
||||
}, 2000); // Check occasionally if it's off screen
|
||||
}
|
||||
|
||||
container.appendChild(symbol);
|
||||
}
|
||||
|
||||
// Randomly pick direction: left-to-right OR right-to-left
|
||||
const goRight = Math.random() > 0.5;
|
||||
const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
|
||||
|
||||
if (goRight) {
|
||||
symbol.style.animationName = 'space-drift-right';
|
||||
symbol.style.left = '-15vw';
|
||||
} else {
|
||||
symbol.style.animationName = 'space-drift-left';
|
||||
symbol.style.right = '-15vw';
|
||||
}
|
||||
|
||||
symbol.style.top = `${topPos}vh`;
|
||||
symbol.style.animationDuration = `${durationSeconds}s`;
|
||||
symbol.style.animationDelay = `${delaySeconds}s`;
|
||||
|
||||
// Slow rotation inside inner div
|
||||
const rotationDiv = document.createElement('div');
|
||||
const rotDur = Math.random() * 20 + 20; // 20-40s spin
|
||||
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
|
||||
rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
|
||||
|
||||
rotationDiv.appendChild(symbol.cloneNode(true));
|
||||
|
||||
// Apply final static scaling and facing to inner image
|
||||
rotationDiv.firstChild.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
|
||||
|
||||
symbol.innerHTML = '';
|
||||
symbol.appendChild(rotationDiv);
|
||||
|
||||
container.appendChild(symbol);
|
||||
}
|
||||
|
||||
createSpaceItem(planetImages, pCount, 'space-planet');
|
||||
createSpaceItem(astronautImages, aCount, 'space-astronaut');
|
||||
createSpaceItem(satelliteImages, sCount, 'space-satellite');
|
||||
createSpaceItem([issImage], iCount, 'space-iss');
|
||||
createSpaceItem(rocketImages, rCount, 'space-rocket');
|
||||
}
|
||||
|
||||
function initializeSpace() {
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.spooky {
|
||||
@@ -16,19 +17,8 @@
|
||||
will-change: transform;
|
||||
translate: 0 120vh;
|
||||
z-index: 15;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
|
||||
-webkit-animation-name: spooky-float;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-play-state: running;
|
||||
|
||||
animation-name: spooky-float;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
@@ -40,13 +30,6 @@
|
||||
width: 30px;
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
|
||||
-webkit-animation-name: spooky-shake;
|
||||
-webkit-animation-duration: 3s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-play-state: running;
|
||||
|
||||
animation-name: spooky-shake;
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: ease-in-out;
|
||||
@@ -59,22 +42,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spooky-float {
|
||||
0% {
|
||||
translate: 0 120vh;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
translate: 0 -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spooky-float {
|
||||
0% {
|
||||
@@ -93,14 +60,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spooky-shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) scale(1) rotate(15deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px) scale(1.2) rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spooky-shake {
|
||||
0%, 100% {
|
||||
@@ -111,7 +70,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Base predefined starting offsets (if not overridden by js) */
|
||||
.spooky:nth-of-type(0) { left: 1%; }
|
||||
.spooky:nth-of-type(1) { left: 10%; }
|
||||
.spooky:nth-of-type(2) { left: 20%; }
|
||||
|
||||
@@ -5,18 +5,17 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.sports-symbol {
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
/* Default is empty, assigned in JS */
|
||||
font-size: 3rem; /* Fallback emoji size */
|
||||
top: 0;
|
||||
opacity: 0.9;
|
||||
z-index: 40;
|
||||
translate: 0 -10vh;
|
||||
}
|
||||
|
||||
.sports-inner {
|
||||
@@ -31,13 +30,15 @@
|
||||
}
|
||||
|
||||
.sports-confetti {
|
||||
will-change: transform, opacity;
|
||||
position: absolute;
|
||||
top: -5vh;
|
||||
top: 0;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
opacity: 0.8;
|
||||
animation: sports-confetti-fall linear infinite;
|
||||
border-radius: 2px;
|
||||
translate: 0 -5vh;
|
||||
}
|
||||
|
||||
.sports-confetti.circle {
|
||||
|
||||
@@ -5,6 +5,7 @@ const symbolCount = config.SymbolCount || 5;
|
||||
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 enableTrophy = config.EnableTrophy !== undefined ? config.EnableTrophy : false;
|
||||
|
||||
// Pre-declare and manage image assets
|
||||
const SPORTS_ASSETS = {
|
||||
@@ -74,14 +75,11 @@ function createSports() {
|
||||
turf.style.background = `linear-gradient(180deg, transparent 0%, ${turfColorHex}4D 30%, ${turfColorHex}CC 100%)`;
|
||||
container.appendChild(turf);
|
||||
|
||||
const standardCount = 15;
|
||||
const totalSymbols = symbolCount + standardCount;
|
||||
|
||||
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
|
||||
let finalCount = totalSymbols;
|
||||
let ballsPerCategory = symbolCount;
|
||||
|
||||
if (isMobile) {
|
||||
finalCount = enableRandomMobile ? totalSymbols : standardCount;
|
||||
if (isMobile && !enableRandomMobile) {
|
||||
ballsPerCategory = Math.min(symbolCount, 3);
|
||||
}
|
||||
|
||||
const useRandomDuration = enableDifferentDuration !== false;
|
||||
@@ -89,37 +87,10 @@ function createSports() {
|
||||
// Map standard sports balls to spawn based on category configuration
|
||||
const rawSportsBalls = config.SportsBalls || 'football,basketball,tennis,volleyball';
|
||||
const chosenCategories = rawSportsBalls.split(',').map(s => s.trim()).filter(s => s !== '');
|
||||
|
||||
// Assemble activeItems from categories
|
||||
let activeItems = [];
|
||||
chosenCategories.forEach(category => {
|
||||
if (SPORTS_ASSETS[category]) {
|
||||
activeItems.push(...SPORTS_ASSETS[category]);
|
||||
} else {
|
||||
// Legacy fallback (in case older explicit filenames remain in config string)
|
||||
activeItems.push(category);
|
||||
}
|
||||
});
|
||||
|
||||
if (activeItems.length === 0) activeItems.push(...SPORTS_ASSETS['football']); // fallback
|
||||
|
||||
// Track items we still need to show at least once
|
||||
let guaranteedItems = [...activeItems];
|
||||
|
||||
// Create falling sports balls
|
||||
for (let i = 0; i < finalCount; i++) {
|
||||
const createBall = (randomItem) => {
|
||||
let symbol = document.createElement('div');
|
||||
|
||||
// Pick a guaranteed ball first, otherwise pick completely randomly
|
||||
let randomItem;
|
||||
if (guaranteedItems.length > 0) {
|
||||
const index = Math.floor(Math.random() * guaranteedItems.length);
|
||||
randomItem = guaranteedItems[index];
|
||||
guaranteedItems.splice(index, 1);
|
||||
} else {
|
||||
randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
|
||||
}
|
||||
|
||||
symbol.className = `sports-symbol sports-${randomItem}`;
|
||||
|
||||
// Create inner div for spinning rotation
|
||||
@@ -130,8 +101,7 @@ function createSports() {
|
||||
let img = document.createElement('img');
|
||||
img.src = `../Seasonals/Resources/sport_assets/${randomItem}.png`;
|
||||
img.onerror = function() {
|
||||
this.style.display = 'none'; // hide broken image icon
|
||||
this.parentElement.innerHTML = getEmojiFallback(randomItem); // inject emoji fallback
|
||||
symbol.remove();
|
||||
};
|
||||
innerDiv.appendChild(img);
|
||||
|
||||
@@ -140,6 +110,7 @@ function createSports() {
|
||||
symbol.style.animationIterationCount = 'infinite';
|
||||
innerDiv.style.animationName = 'sports-spin';
|
||||
innerDiv.style.animationIterationCount = 'infinite';
|
||||
innerDiv.style.animationTimingFunction = 'linear';
|
||||
|
||||
symbol.appendChild(innerDiv);
|
||||
|
||||
@@ -164,7 +135,19 @@ function createSports() {
|
||||
symbol.style.animationDelay = `${delaySeconds}s`;
|
||||
|
||||
container.appendChild(symbol);
|
||||
}
|
||||
};
|
||||
|
||||
// Create falling sports balls
|
||||
chosenCategories.forEach(category => {
|
||||
let variants = SPORTS_ASSETS[category];
|
||||
if (!variants) variants = [category]; // Legacy fallback
|
||||
|
||||
for (let i = 0; i < ballsPerCategory; i++) {
|
||||
// Pick a random variant
|
||||
const randomItem = variants[Math.floor(Math.random() * variants.length)];
|
||||
createBall(randomItem);
|
||||
}
|
||||
});
|
||||
|
||||
// Create the periodic flying trophy arc
|
||||
function launchTrophy() {
|
||||
@@ -220,11 +203,13 @@ function createSports() {
|
||||
}, arcDuration * 1000 + 500);
|
||||
|
||||
// Schedule the next trophy
|
||||
setTimeout(launchTrophy, Math.random() * 20000 + 10000); // Wait 10-30s until next trophy
|
||||
setTimeout(() => { if (document.body.contains(container)) launchTrophy(); }, Math.random() * 20000 + 10000); // Wait 10-30s until next trophy
|
||||
}
|
||||
|
||||
// Launch initial trophy after a short delay
|
||||
setTimeout(launchTrophy, Math.random() * 5000 + 2000);
|
||||
if (enableTrophy) {
|
||||
setTimeout(() => { if (document.body.contains(container)) launchTrophy(); }, Math.random() * 5000 + 2000);
|
||||
}
|
||||
|
||||
// Add Germany Colored confetti (Black, Red, Gold)
|
||||
const confettiColors = ['#000000', '#FF0000', '#FFCC00'];
|
||||
@@ -272,20 +257,7 @@ function createSports() {
|
||||
}
|
||||
}
|
||||
|
||||
function getEmojiFallback(type) {
|
||||
if (type.includes('soccer') || type.includes('football')) return '⚽';
|
||||
if (type.includes('baseball')) return '⚾';
|
||||
if (type.includes('basketball')) return '🏀';
|
||||
if (type.includes('billiard')) return '🎱';
|
||||
if (type.includes('bowling')) return '🎳';
|
||||
if (type.includes('golf')) return '⛳';
|
||||
if (type.includes('rugby')) return '🏈';
|
||||
if (type.includes('tennis')) return '🎾';
|
||||
if (type.includes('volleyball')) return '🏐';
|
||||
if (type.includes('badminton')) return '🏸';
|
||||
if (type.includes('waterball')) return '🤽';
|
||||
return '';
|
||||
}
|
||||
/* Removed legacy fallback logic */
|
||||
|
||||
function initializeSports() {
|
||||
if (!sports) return;
|
||||
|
||||
@@ -29,13 +29,14 @@
|
||||
/* Sunbeams */
|
||||
.spring-sunbeam {
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
top: 0;
|
||||
height: 200%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 200, 0.08) 50%, rgba(255, 255, 255, 0));
|
||||
z-index: 5;
|
||||
transform-origin: top center;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
translate: 0 -50vh;
|
||||
}
|
||||
|
||||
/* Grass Container (Wrapper) */
|
||||
@@ -72,6 +73,7 @@
|
||||
|
||||
/* SVG Meadow Layer */
|
||||
.spring-meadow-layer {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -94,6 +96,7 @@
|
||||
}
|
||||
|
||||
.spring-sway {
|
||||
will-change: transform;
|
||||
transform-origin: bottom center;
|
||||
animation: spring-meadow-sway 4s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@@ -295,7 +295,7 @@ function createBird(container) {
|
||||
wrapper.addEventListener('animationend', (e) => {
|
||||
if (e.animationName.includes('fly-')) {
|
||||
wrapper.remove();
|
||||
createBird(container);
|
||||
if (document.body.contains(container)) createBird(container);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -338,7 +338,7 @@ function createButterfly(container) {
|
||||
wrapper.addEventListener('animationend', (e) => {
|
||||
if (e.animationName.includes('fly-')) {
|
||||
wrapper.remove();
|
||||
createButterfly(container);
|
||||
if (document.body.contains(container)) createButterfly(container);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -385,7 +385,7 @@ function createBee(container) {
|
||||
wrapper.addEventListener('animationend', (e) => {
|
||||
if (e.animationName.includes('fly-')) {
|
||||
wrapper.remove();
|
||||
createBee(container);
|
||||
if (document.body.contains(container)) createBee(container);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -428,7 +428,7 @@ function createLadybugGif(container) {
|
||||
wrapper.addEventListener('animationend', (e) => {
|
||||
if (e.animationName.includes('walk-')) {
|
||||
wrapper.remove();
|
||||
createLadybugGif(container);
|
||||
if (document.body.contains(container)) createLadybugGif(container);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -13,10 +13,11 @@
|
||||
|
||||
.starwars-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
translate: 0 50vh;
|
||||
}
|
||||
|
||||
.starwars-streak {
|
||||
|
||||
@@ -256,7 +256,7 @@
|
||||
<option value="matrix">Matrix</option>
|
||||
<option value="pride">Pride</option>
|
||||
<option value="rain">Rain</option>
|
||||
<option value="storm">Storm (⚠️Epilepsy Warning)</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>
|
||||
@@ -265,8 +265,8 @@
|
||||
<option value="oktoberfest">Oktoberfest</option>
|
||||
<option value="friday13">Friday the 13th</option>
|
||||
<option value="eid">Eid al-Fitr</option>
|
||||
<option value="sports">Sports / Football</option>
|
||||
<option value="olympia">Olympia / Games</option>
|
||||
<option value="sports">Sports</option>
|
||||
<option value="olympia">Olympia</option>
|
||||
<option value="space">Space / Sci-Fi</option>
|
||||
<option value="underwater">Underwater</option>
|
||||
<option value="birthday">Birthday</option>
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
}
|
||||
|
||||
.underwater-seaweed {
|
||||
will-change: transform, opacity;
|
||||
position: absolute;
|
||||
bottom: -1vh;
|
||||
font-size: 4rem;
|
||||
@@ -52,6 +53,7 @@
|
||||
}
|
||||
|
||||
.underwater-bubble {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
bottom: -5vh;
|
||||
border-radius: 50%;
|
||||
@@ -73,13 +75,13 @@
|
||||
}
|
||||
|
||||
@keyframes underwater-traverse-up {
|
||||
0% { top: 120vh; }
|
||||
100% { top: -20vh; }
|
||||
0% { top: 0; translate: 0 120vh; }
|
||||
100% { top: 0; translate: 0 -20vh; }
|
||||
}
|
||||
|
||||
@keyframes underwater-traverse-down {
|
||||
0% { top: -20vh; }
|
||||
100% { top: 120vh; }
|
||||
0% { top: 0; translate: 0 -20vh; }
|
||||
100% { top: 0; translate: 0 120vh; }
|
||||
}
|
||||
|
||||
@keyframes underwater-sway-y {
|
||||
@@ -101,8 +103,9 @@
|
||||
}
|
||||
|
||||
.underwater-god-rays {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: -50vh;
|
||||
top: 0;
|
||||
left: -50vw;
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
@@ -119,6 +122,7 @@
|
||||
transform-origin: top center;
|
||||
mix-blend-mode: overlay;
|
||||
filter: blur(5px);
|
||||
translate: 0 -50vh;
|
||||
}
|
||||
|
||||
@keyframes god-rays-sway {
|
||||
|
||||
@@ -8,9 +8,17 @@
|
||||
"category": "General",
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "2.0.0.1",
|
||||
"changelog": "- feat: add many themes\n- fix: improve performance",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v2.0.0.1/Jellyfin.Plugin.Seasonals.zip",
|
||||
"checksum": "2eb9ce92f3aa89d133ad09cd874b7c85",
|
||||
"timestamp": "2026-02-27T03:27:02Z"
|
||||
},
|
||||
{
|
||||
"version": "1.7.2.0",
|
||||
"changelog": "- feat: add Pi Day, Pride, Rain, and Storm themes\n- fix: improve performance",
|
||||
"changelog": "- feat: add Pi Day, Pride, Rain, and Storm themes\n- fix: improve performance",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.7.2.0/Jellyfin.Plugin.Seasonals.zip",
|
||||
"checksum": "34c8426c48bd7d470c3e8dc7f02f86da",
|
||||
|
||||
Reference in New Issue
Block a user