From e849b2af16e381af15676283bf884457fa8e36d5 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Fri, 26 Aug 2022 19:16:04 +0200 Subject: add rain effect --- public/client.html | 5 ++++- webAO/styles/effects/rain.css | 23 +++++++++++++++++++++++ webAO/viewport.ts | 24 +++++++++++++++++++----- 3 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 webAO/styles/effects/rain.css 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 @@ - Various overlay +
Character Evidence Testimony overlay Shout overlay @@ -248,6 +248,9 @@ + + + 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") ) { + (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) ) { + (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; } -- cgit From 6f42857e57b00155b8b97187d66c6375e57944ec Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Fri, 26 Aug 2022 19:17:17 +0200 Subject: Update viewport.ts reset rain so it doesn't add up --- webAO/viewport.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/webAO/viewport.ts b/webAO/viewport.ts index 323029f..e243e0b 100644 --- a/webAO/viewport.ts +++ b/webAO/viewport.ts @@ -638,6 +638,7 @@ const viewport = (masterClient: Client): Viewport => { const effectName = chatmsg.effects[0].toLowerCase(); const badEffects = ["", "-", "none"]; if (effectName.startsWith("rain") ) { + fg.innerHTML = ''; (document.getElementById("effect_css")).href = "styles/effects/rain.css"; let intensity = 200; if(effectName.endsWith("weak")) { -- cgit From f99c2bb36ba021128d8eaa311c6ca1eb50678d98 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Fri, 26 Aug 2022 19:25:15 +0200 Subject: make drops bigger --- webAO/styles/effects/rain.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webAO/styles/effects/rain.css b/webAO/styles/effects/rain.css index 0e350fa..846b35e 100644 --- a/webAO/styles/effects/rain.css +++ b/webAO/styles/effects/rain.css @@ -5,8 +5,8 @@ #client_fg p { position: absolute; bottom: 100%; - width: 1px; - height: 1em; + 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; -- cgit From 3c15b3bb517feba40083865a2574ec1d04bb2108 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Fri, 26 Aug 2022 19:25:25 +0200 Subject: only reset when there are less drops than before --- webAO/viewport.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/webAO/viewport.ts b/webAO/viewport.ts index e243e0b..c778891 100644 --- a/webAO/viewport.ts +++ b/webAO/viewport.ts @@ -638,7 +638,6 @@ const viewport = (masterClient: Client): Viewport => { const effectName = chatmsg.effects[0].toLowerCase(); const badEffects = ["", "-", "none"]; if (effectName.startsWith("rain") ) { - fg.innerHTML = ''; (document.getElementById("effect_css")).href = "styles/effects/rain.css"; let intensity = 200; if(effectName.endsWith("weak")) { @@ -646,6 +645,11 @@ const viewport = (masterClient: Client): Viewport => { } 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) + "%"; @@ -657,6 +661,7 @@ const viewport = (masterClient: Client): Viewport => { !badEffects.includes(effectName) ) { (document.getElementById("effect_css")).href = ""; + fg.innerHTML = ''; const baseEffectUrl = `${AO_HOST}themes/default/effects/`; fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`; } else { -- cgit