diff options
| author | stonedDiscord <Tukz@gmx.de> | 2022-08-27 19:45:47 +0200 |
|---|---|---|
| committer | stonedDiscord <Tukz@gmx.de> | 2022-08-27 19:45:47 +0200 |
| commit | 8b90b431126525bc1b63a6315abe19ec294b1889 (patch) | |
| tree | ea6a616d9cf8840495bb0b9e8c06b84400028761 | |
| parent | 3b1051e0717e0c82b98d345e33892894032a5e7e (diff) | |
| parent | 3c15b3bb517feba40083865a2574ec1d04bb2108 (diff) | |
Merge branch 'css-rain'
| -rw-r--r-- | public/client.html | 5 | ||||
| -rw-r--r-- | webAO/styles/effects/rain.css | 23 | ||||
| -rw-r--r-- | webAO/viewport.ts | 30 |
3 files changed, 52 insertions, 6 deletions
diff --git a/public/client.html b/public/client.html index eed53b8..897d4ef 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="> @@ -254,6 +254,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..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; } |