diff options
Diffstat (limited to 'webAO')
| -rw-r--r-- | webAO/styles/effects/rain.css | 23 | ||||
| -rw-r--r-- | webAO/viewport.ts | 30 |
2 files changed, 48 insertions, 5 deletions
diff --git a/webAO/styles/effects/rain.css b/webAO/styles/effects/rain.css new file mode 100644 index 0000000..846b35e --- /dev/null +++ b/webAO/styles/effects/rain.css @@ -0,0 +1,23 @@ +#client_fg { + overflow: hidden; +} + +#client_fg p { + position: absolute; + bottom: 100%; + width: 2px; + height: 2em; + transform: rotate(10deg); + background: linear-gradient(rgba(200,200,200,0) 0%, rgba(200,200,200,0.5) 20%, rgba(250,250,250,0.6) 100%); + animation: falling 1s linear infinite; +} + +@keyframes falling { + 0% { + bottom: 100%; + + } + 100% { + bottom: -10%; + } +}
\ No newline at end of file diff --git a/webAO/viewport.ts b/webAO/viewport.ts index 0f0dc01..c778891 100644 --- a/webAO/viewport.ts +++ b/webAO/viewport.ts @@ -635,15 +635,35 @@ const viewport = (masterClient: Client): Viewport => { // apply effects fg.style.animation = ""; + const effectName = chatmsg.effects[0].toLowerCase(); const badEffects = ["", "-", "none"]; - if ( + if (effectName.startsWith("rain") ) { + (<HTMLLinkElement>document.getElementById("effect_css")).href = "styles/effects/rain.css"; + let intensity = 200; + if(effectName.endsWith("weak")) { + intensity = 100; + } else if (effectName.endsWith("strong")) { + intensity = 400; + } + if ( intensity < fg.childElementCount) + fg.innerHTML = ''; + else + intensity = intensity - fg.childElementCount; + + for (let i = 0; i < intensity; i++) { + let drop = document.createElement("p"); + drop.style.left = (Math.random() * 100) + "%"; + drop.style.animationDelay = String(Math.random())+"s"; + fg.appendChild(drop) + } + } else if ( chatmsg.effects[0] && - !badEffects.includes(chatmsg.effects[0].toLowerCase()) + !badEffects.includes(effectName) ) { + (<HTMLLinkElement>document.getElementById("effect_css")).href = ""; + fg.innerHTML = ''; const baseEffectUrl = `${AO_HOST}themes/default/effects/`; - fg.src = `${baseEffectUrl}${encodeURI( - chatmsg.effects[0].toLowerCase() - )}.webp`; + fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`; } else { fg.src = transparentPng; } |