Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile view for weather effects

Browse Source 
- Replace % units with dvh/vw for dynamic viewport sizing
- Fix stars, fireflies, dust motes, and light orbs positioning
- Fix moon and moon glow positioning to use dvh/vw
- Update snowfall and rainfall animations to use 100dvh
- Ensures proper distribution across full mobile viewport
This commit is contained in:
tomt610
2026-01-12 22:54:46 +00:00
parent 3797e21912
commit 6e9ff9812d
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/ui/weatherEffects.js
+10 -10
View File
@@ -247,8 +247,8 @@ function createSunshine() {
for (let i = 0; i < 25; i++) {
const particle = document.createElement('div');
particle.className = 'rpg-weather-particle rpg-clear-dust-mote';
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
particle.style.left = `${Math.random() * 100}vw`;
particle.style.top = `${Math.random() * 100}dvh`;
particle.style.animationDelay = `${Math.random() * 15}s`;
particle.style.animationDuration = `${12 + Math.random() * 8}s`;
// Vary the size slightly
@@ -262,8 +262,8 @@ function createSunshine() {
for (let i = 0; i < 6; i++) {
const orb = document.createElement('div');
orb.className = 'rpg-weather-particle rpg-clear-light-orb';
orb.style.left = `${10 + Math.random() * 80}%`;
orb.style.top = `${10 + Math.random() * 80}%`;
orb.style.left = `${10 + Math.random() * 80}vw`;
orb.style.top = `${10 + Math.random() * 80}dvh`;
orb.style.animationDelay = `${i * 2}s`;
orb.style.animationDuration = `${20 + Math.random() * 10}s`;
// Vary the size
@@ -307,8 +307,8 @@ function createNighttime() {
for (let i = 0; i < 60; i++) {
const star = document.createElement('div');
star.className = 'rpg-weather-particle rpg-night-star';
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 60}%`; // Stars mostly in upper portion
star.style.left = `${Math.random() * 100}vw`;
star.style.top = `${Math.random() * 60}dvh`; // Stars mostly in upper portion
star.style.animationDelay = `${Math.random() * 5}s`;
star.style.animationDuration = `${2 + Math.random() * 3}s`;
// Vary the size
@@ -322,8 +322,8 @@ function createNighttime() {
for (let i = 0; i < 8; i++) {
const brightStar = document.createElement('div');
brightStar.className = 'rpg-weather-particle rpg-night-star rpg-night-star-bright';
brightStar.style.left = `${Math.random() * 100}%`;
brightStar.style.top = `${Math.random() * 50}%`;
brightStar.style.left = `${Math.random() * 100}vw`;
brightStar.style.top = `${Math.random() * 50}dvh`;
brightStar.style.animationDelay = `${Math.random() * 4}s`;
brightStar.style.animationDuration = `${3 + Math.random() * 2}s`;
container.appendChild(brightStar);
@@ -333,8 +333,8 @@ function createNighttime() {
for (let i = 0; i < 15; i++) {
const firefly = document.createElement('div');
firefly.className = 'rpg-weather-particle rpg-night-firefly';
firefly.style.left = `${Math.random() * 100}%`;
firefly.style.top = `${40 + Math.random() * 55}%`; // Fireflies in lower portion
firefly.style.left = `${Math.random() * 100}vw`;
firefly.style.top = `${40 + Math.random() * 55}dvh`; // Fireflies in lower portion
firefly.style.animationDelay = `${Math.random() * 10}s`;
firefly.style.animationDuration = `${8 + Math.random() * 7}s`;
container.appendChild(firefly);
style.css
+7 -7
View File
@@ -9524,11 +9524,11 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
/* Snowfall animation */
@keyframes rpg-snowfall {
0% {
transform: translateY(0vh) rotate(0deg);
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
100% {
transform: translateY(100vh) rotate(360deg);
transform: translateY(100dvh) rotate(360deg);
opacity: 0.2;
}
}
@@ -9598,7 +9598,7 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
opacity: 0.8;
}
100% {
transform: translateY(100vh);
transform: translateY(100dvh);
opacity: 0.3;
}
}
@@ -9849,8 +9849,8 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
/* Moon */
.rpg-night-moon {
position: fixed;
top: 8%;
left: 12%;
top: 8dvh;
left: 12vw;
width: 60px;
height: 60px;
background: radial-gradient(circle at 35% 35%,
@@ -9880,8 +9880,8 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
/* Moon glow aura */
.rpg-night-moon-glow {
position: fixed;
top: 5%;
left: 9%;
top: 5dvh;
left: 9vw;
width: 120px;
height: 120px;
background: radial-gradient(circle at center,