diff options
| author | stonedDiscord <Tukz@gmx.de> | 2022-08-26 19:16:04 +0200 |
|---|---|---|
| committer | stonedDiscord <Tukz@gmx.de> | 2022-08-26 19:16:04 +0200 |
| commit | e849b2af16e381af15676283bf884457fa8e36d5 (patch) | |
| tree | f34dd0742425da85fee54ea07f62048b2bee7232 | |
| parent | 21170e1935e34f36d2fd4268468414e8caf84627 (diff) | |
add rain effect
| -rw-r--r-- | public/client.html | 5 | ||||
| -rw-r--r-- | webAO/styles/effects/rain.css | 23 | ||||
| -rw-r--r-- | webAO/viewport.ts | 24 |
3 files changed, 46 insertions, 6 deletions
diff --git a/public/client.html b/public/client.html index e866557..8316484 100644 --- a/public/client.html +++ b/public/client.html @@ -115,7 +115,7 @@ </div> <img id="client_bench_classic" class="client_bench"> </div> - <img id="client_fg" alt="Various overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="> + <div id="client_fg" alt="Various overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></div> <img id="client_evi" src="" alt="Character Evidence" onerror="imgError(this);"> <img id="client_testimony" alt="Testimony overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" onerror="imgError(this);"> <img id="client_shout" alt="Shout overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="> @@ -248,6 +248,9 @@ <option value="hearts||sfx-squee">Hearts</option> <option value="reaction||sfx-reactionding">Reaction</option> <option value="impact||sfx-fan">Impact</option> + <option value="rain-weak||sfx-rain">Weak Rain</option> + <option value="rain||sfx-rain">Rain</option> + <option value="rain-strong||sfx-rain">Strong Rain</option> </select> </span> </div> diff --git a/webAO/styles/effects/rain.css b/webAO/styles/effects/rain.css new file mode 100644 index 0000000..0e350fa --- /dev/null +++ b/webAO/styles/effects/rain.css @@ -0,0 +1,23 @@ +#client_fg { + overflow: hidden; +} + +#client_fg p { + position: absolute; + bottom: 100%; + width: 1px; + height: 1em; + 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..323029f 100644 --- a/webAO/viewport.ts +++ b/webAO/viewport.ts @@ -635,15 +635,29 @@ 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; + } + 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 = ""; 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; } |