diff options
Diffstat (limited to 'webAO/viewport/utils')
| -rw-r--r-- | webAO/viewport/utils/createBlipChannels.ts | 22 | ||||
| -rw-r--r-- | webAO/viewport/utils/createMusic.ts | 22 | ||||
| -rw-r--r-- | webAO/viewport/utils/createSfxAudio.ts | 12 | ||||
| -rw-r--r-- | webAO/viewport/utils/createShoutAudio.ts | 12 | ||||
| -rw-r--r-- | webAO/viewport/utils/createTestimonyAudio.ts | 14 | ||||
| -rw-r--r-- | webAO/viewport/utils/handleICSpeaking.ts | 601 | ||||
| -rw-r--r-- | webAO/viewport/utils/initTestimonyUpdater.ts | 48 | ||||
| -rw-r--r-- | webAO/viewport/utils/setSide.ts | 143 |
8 files changed, 450 insertions, 424 deletions
diff --git a/webAO/viewport/utils/createBlipChannels.ts b/webAO/viewport/utils/createBlipChannels.ts index 6296b3b..9e9c964 100644 --- a/webAO/viewport/utils/createBlipChannels.ts +++ b/webAO/viewport/utils/createBlipChannels.ts @@ -1,15 +1,15 @@ import { opusCheck } from "../../dom/opusCheck"; export const createBlipsChannels = () => { - const blipSelectors = document.getElementsByClassName( - "blipSound" - ) as HTMLCollectionOf<HTMLAudioElement>; + const blipSelectors = document.getElementsByClassName( + "blipSound", + ) as HTMLCollectionOf<HTMLAudioElement>; - const blipChannels = [...blipSelectors]; - // Allocate multiple blip audio channels to make blips less jittery - blipChannels.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5)); - blipChannels.forEach( - (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)) - ); - return blipChannels; -};
\ No newline at end of file + const blipChannels = [...blipSelectors]; + // Allocate multiple blip audio channels to make blips less jittery + blipChannels.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5)); + blipChannels.forEach( + (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)), + ); + return blipChannels; +}; diff --git a/webAO/viewport/utils/createMusic.ts b/webAO/viewport/utils/createMusic.ts index e660173..5733911 100644 --- a/webAO/viewport/utils/createMusic.ts +++ b/webAO/viewport/utils/createMusic.ts @@ -1,13 +1,13 @@ -import { opusCheck } from '../../dom/opusCheck' +import { opusCheck } from "../../dom/opusCheck"; export const createMusic = () => { - const audioChannels = document.getElementsByClassName( - "audioChannel" - ) as HTMLCollectionOf<HTMLAudioElement>; - const music = [...audioChannels]; - music.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5)); - music.forEach( - (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)) - ); - return music; -};
\ No newline at end of file + const audioChannels = document.getElementsByClassName( + "audioChannel", + ) as HTMLCollectionOf<HTMLAudioElement>; + const music = [...audioChannels]; + music.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5)); + music.forEach( + (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)), + ); + return music; +}; diff --git a/webAO/viewport/utils/createSfxAudio.ts b/webAO/viewport/utils/createSfxAudio.ts index 7e03563..c17b28d 100644 --- a/webAO/viewport/utils/createSfxAudio.ts +++ b/webAO/viewport/utils/createSfxAudio.ts @@ -1,9 +1,9 @@ import { AO_HOST } from "../../client/aoHost"; export const createSfxAudio = () => { - const sfxAudio = document.getElementById( - "client_sfxaudio" - ) as HTMLAudioElement; - sfxAudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`; - return sfxAudio; -};
\ No newline at end of file + const sfxAudio = document.getElementById( + "client_sfxaudio", + ) as HTMLAudioElement; + sfxAudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`; + return sfxAudio; +}; diff --git a/webAO/viewport/utils/createShoutAudio.ts b/webAO/viewport/utils/createShoutAudio.ts index 8211116..756d364 100644 --- a/webAO/viewport/utils/createShoutAudio.ts +++ b/webAO/viewport/utils/createShoutAudio.ts @@ -1,9 +1,9 @@ import { AO_HOST } from "../../client/aoHost"; export const createShoutAudio = () => { - const shoutAudio = document.getElementById( - "client_shoutaudio" - ) as HTMLAudioElement; - shoutAudio.src = `${AO_HOST}misc/default/objection.opus`; - return shoutAudio; -};
\ No newline at end of file + const shoutAudio = document.getElementById( + "client_shoutaudio", + ) as HTMLAudioElement; + shoutAudio.src = `${AO_HOST}misc/default/objection.opus`; + return shoutAudio; +}; diff --git a/webAO/viewport/utils/createTestimonyAudio.ts b/webAO/viewport/utils/createTestimonyAudio.ts index 2ff98f6..2d6f4e4 100644 --- a/webAO/viewport/utils/createTestimonyAudio.ts +++ b/webAO/viewport/utils/createTestimonyAudio.ts @@ -1,9 +1,9 @@ -import { AO_HOST } from '../../client/aoHost' +import { AO_HOST } from "../../client/aoHost"; export const createTestimonyAudio = () => { - const testimonyAudio = document.getElementById( - "client_testimonyaudio" - ) as HTMLAudioElement; - testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`; - return testimonyAudio; -};
\ No newline at end of file + const testimonyAudio = document.getElementById( + "client_testimonyaudio", + ) as HTMLAudioElement; + testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`; + return testimonyAudio; +}; diff --git a/webAO/viewport/utils/handleICSpeaking.ts b/webAO/viewport/utils/handleICSpeaking.ts index d5bd29f..bae4986 100644 --- a/webAO/viewport/utils/handleICSpeaking.ts +++ b/webAO/viewport/utils/handleICSpeaking.ts @@ -15,11 +15,17 @@ import mlConfig from "../../utils/aoml"; const attorneyMarkdown = mlConfig(AO_HOST); export let startFirstTickCheck: boolean; -export const setStartFirstTickCheck = (val: boolean) => { startFirstTickCheck = val } +export const setStartFirstTickCheck = (val: boolean) => { + startFirstTickCheck = val; +}; export let startSecondTickCheck: boolean; -export const setStartSecondTickCheck = (val: boolean) => { startSecondTickCheck = val } +export const setStartSecondTickCheck = (val: boolean) => { + startSecondTickCheck = val; +}; export let startThirdTickCheck: boolean; -export const setStartThirdTickCheck = (val: boolean) => { startThirdTickCheck = val } +export const setStartThirdTickCheck = (val: boolean) => { + startThirdTickCheck = val; +}; /** * Sets a new emote. * This sets up everything before the tick() loops starts @@ -28,303 +34,324 @@ export const setStartThirdTickCheck = (val: boolean) => { startThirdTickCheck = * @param {object} chatmsg the new chat message */ export const handle_ic_speaking = async (playerChatMsg: ChatMsg) => { - client.viewport.setChatmsg(playerChatMsg); - client.viewport.setTextNow(""); - client.viewport.setSfxPlayed(0); - client.viewport.setTickTimer(0); - client.viewport.setAnimating(true); - - startFirstTickCheck = true; - startSecondTickCheck = false; - startThirdTickCheck = false; - let charLayers = document.getElementById("client_char")!; - let pairLayers = document.getElementById("client_pair_char")!; - // stop updater - clearTimeout(client.viewport.updater); - - // stop last sfx from looping any longer - client.viewport.getSfxAudio().loop = false; - - const fg = <HTMLImageElement>document.getElementById("client_fg"); - const gamewindow = document.getElementById("client_gamewindow")!; - const waitingBox = document.getElementById("client_chatwaiting")!; - - // Reset CSS animation - gamewindow.style.animation = ""; - waitingBox.style.opacity = "0"; - - const eviBox = document.getElementById("client_evi")!; - - if (client.viewport.getLastEvidence() !== client.viewport.getChatmsg().evidence) { - eviBox.style.opacity = "0"; - eviBox.style.height = "0%"; - } - client.viewport.setLastEvidence(client.viewport.getChatmsg().evidence); - - const validSides: string[] = ["def", "pro", "wit"]; // these are for the full view pan, the other positions use 'client_char' - if (validSides.includes(client.viewport.getChatmsg().side)) { - charLayers = document.getElementById(`client_${client.viewport.getChatmsg().side}_char`); - pairLayers = document.getElementById(`client_${client.viewport.getChatmsg().side}_pair_char`); - } - - const chatContainerBox = document.getElementById("client_chatcontainer")!; - const nameBoxInner = document.getElementById("client_inner_name")!; - const chatBoxInner = document.getElementById("client_inner_chat")!; - - const displayname = - (<HTMLInputElement>document.getElementById("showname")).checked && - client.viewport.getChatmsg().showname !== "" - ? client.viewport.getChatmsg().showname! - : client.viewport.getChatmsg().nameplate!; - - // Clear out the last message - if (!client.viewport.getChatmsg().additive) { - chatBoxInner.innerText = client.viewport.getTextNow(); - } - nameBoxInner.innerText = displayname; - - if (client.viewport.getLastCharacter() !== client.viewport.getChatmsg().name) { - charLayers.style.opacity = "0"; - pairLayers.style.opacity = "0"; - } - - client.viewport.setLastCharacter(client.viewport.getChatmsg().name); - - appendICLog(client.viewport.getChatmsg().content, client.viewport.getChatmsg().showname, client.viewport.getChatmsg().nameplate); - - checkCallword(client.viewport.getChatmsg().content, client.viewport.getSfxAudio()); - - setEmote( - AO_HOST, - client, - client.viewport.getChatmsg().name!.toLowerCase(), - client.viewport.getChatmsg().sprite!, - "(a)", - false, - client.viewport.getChatmsg().side + client.viewport.setChatmsg(playerChatMsg); + client.viewport.setTextNow(""); + client.viewport.setSfxPlayed(0); + client.viewport.setTickTimer(0); + client.viewport.setAnimating(true); + + startFirstTickCheck = true; + startSecondTickCheck = false; + startThirdTickCheck = false; + let charLayers = document.getElementById("client_char")!; + let pairLayers = document.getElementById("client_pair_char")!; + // stop updater + clearTimeout(client.viewport.updater); + + // stop last sfx from looping any longer + client.viewport.getSfxAudio().loop = false; + + const fg = <HTMLImageElement>document.getElementById("client_fg"); + const gamewindow = document.getElementById("client_gamewindow")!; + const waitingBox = document.getElementById("client_chatwaiting")!; + + // Reset CSS animation + gamewindow.style.animation = ""; + waitingBox.style.opacity = "0"; + + const eviBox = document.getElementById("client_evi")!; + + if ( + client.viewport.getLastEvidence() !== client.viewport.getChatmsg().evidence + ) { + eviBox.style.opacity = "0"; + eviBox.style.height = "0%"; + } + client.viewport.setLastEvidence(client.viewport.getChatmsg().evidence); + + const validSides: string[] = ["def", "pro", "wit"]; // these are for the full view pan, the other positions use 'client_char' + if (validSides.includes(client.viewport.getChatmsg().side)) { + charLayers = document.getElementById( + `client_${client.viewport.getChatmsg().side}_char`, ); - - if (client.viewport.getChatmsg().other_name) { - setEmote( - AO_HOST, - client, - client.viewport.getChatmsg().other_name.toLowerCase(), - client.viewport.getChatmsg().other_emote!, - "(a)", - false, - client.viewport.getChatmsg().side - ); - } - - // gets which shout shall played - const shoutSprite = <HTMLImageElement>( - document.getElementById("client_shout") + pairLayers = document.getElementById( + `client_${client.viewport.getChatmsg().side}_pair_char`, ); + } + + const chatContainerBox = document.getElementById("client_chatcontainer")!; + const nameBoxInner = document.getElementById("client_inner_name")!; + const chatBoxInner = document.getElementById("client_inner_chat")!; + + const displayname = + (<HTMLInputElement>document.getElementById("showname")).checked && + client.viewport.getChatmsg().showname !== "" + ? client.viewport.getChatmsg().showname! + : client.viewport.getChatmsg().nameplate!; + + // Clear out the last message + if (!client.viewport.getChatmsg().additive) { + chatBoxInner.innerText = client.viewport.getTextNow(); + } + nameBoxInner.innerText = displayname; + + if ( + client.viewport.getLastCharacter() !== client.viewport.getChatmsg().name + ) { + charLayers.style.opacity = "0"; + pairLayers.style.opacity = "0"; + } + + client.viewport.setLastCharacter(client.viewport.getChatmsg().name); + + appendICLog( + client.viewport.getChatmsg().content, + client.viewport.getChatmsg().showname, + client.viewport.getChatmsg().nameplate, + ); + + checkCallword( + client.viewport.getChatmsg().content, + client.viewport.getSfxAudio(), + ); + + setEmote( + AO_HOST, + client, + client.viewport.getChatmsg().name!.toLowerCase(), + client.viewport.getChatmsg().sprite!, + "(a)", + false, + client.viewport.getChatmsg().side, + ); + + if (client.viewport.getChatmsg().other_name) { + setEmote( + AO_HOST, + client, + client.viewport.getChatmsg().other_name.toLowerCase(), + client.viewport.getChatmsg().other_emote!, + "(a)", + false, + client.viewport.getChatmsg().side, + ); + } - const shout = SHOUTS[client.viewport.getChatmsg().objection]; - if (shout) { - // Hide message box - chatContainerBox.style.opacity = "0"; - if (client.viewport.getChatmsg().objection === 4) { - shoutSprite.src = `${AO_HOST}characters/${encodeURI( - client.viewport.getChatmsg().name!.toLowerCase() - )}/custom.gif`; - } else { - shoutSprite.src = client.resources[shout].src; - shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)"; - } - shoutSprite.style.opacity = "1"; - - client.viewport.shoutaudio.src = `${AO_HOST}characters/${encodeURI( - client.viewport.getChatmsg().name.toLowerCase() - )}/${shout}.opus`; - client.viewport.shoutaudio.play(); - client.viewport.setShoutTimer(client.resources[shout].duration); - } else { - client.viewport.setShoutTimer(0); - } - - client.viewport.getChatmsg().startpreanim = true; - let gifLength = 0; - - if (client.viewport.getChatmsg().type === 1 && client.viewport.getChatmsg().preanim !== "-") { - //we have a preanim - chatContainerBox.style.opacity = "0"; + // gets which shout shall played + const shoutSprite = <HTMLImageElement>document.getElementById("client_shout"); - gifLength = await getAnimLength( - `${AO_HOST}characters/${encodeURI( - client.viewport.getChatmsg().name!.toLowerCase() - )}/${encodeURI(client.viewport.getChatmsg().preanim)}` - ); - client.viewport.getChatmsg().startspeaking = false; + const shout = SHOUTS[client.viewport.getChatmsg().objection]; + if (shout) { + // Hide message box + chatContainerBox.style.opacity = "0"; + if (client.viewport.getChatmsg().objection === 4) { + shoutSprite.src = `${AO_HOST}characters/${encodeURI( + client.viewport.getChatmsg().name!.toLowerCase(), + )}/custom.gif`; } else { - client.viewport.getChatmsg().startspeaking = true; - if (client.viewport.getChatmsg().content.trim() !== "") chatContainerBox.style.opacity = "1"; + shoutSprite.src = client.resources[shout].src; + shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)"; } - client.viewport.getChatmsg().preanimdelay = gifLength; - const setAside = { - position: client.viewport.getChatmsg().side, - showSpeedLines: false, - showDesk: false, - }; - let skipoffset: boolean = false; - if (client.viewport.getChatmsg().type === 5) { - setAside.showSpeedLines = true; + shoutSprite.style.opacity = "1"; + + client.viewport.shoutaudio.src = `${AO_HOST}characters/${encodeURI( + client.viewport.getChatmsg().name.toLowerCase(), + )}/${shout}.opus`; + client.viewport.shoutaudio.play(); + client.viewport.setShoutTimer(client.resources[shout].duration); + } else { + client.viewport.setShoutTimer(0); + } + + client.viewport.getChatmsg().startpreanim = true; + let gifLength = 0; + + if ( + client.viewport.getChatmsg().type === 1 && + client.viewport.getChatmsg().preanim !== "-" + ) { + //we have a preanim + chatContainerBox.style.opacity = "0"; + + gifLength = await getAnimLength( + `${AO_HOST}characters/${encodeURI( + client.viewport.getChatmsg().name!.toLowerCase(), + )}/${encodeURI(client.viewport.getChatmsg().preanim)}`, + ); + client.viewport.getChatmsg().startspeaking = false; + } else { + client.viewport.getChatmsg().startspeaking = true; + if (client.viewport.getChatmsg().content.trim() !== "") + chatContainerBox.style.opacity = "1"; + } + client.viewport.getChatmsg().preanimdelay = gifLength; + const setAside = { + position: client.viewport.getChatmsg().side, + showSpeedLines: false, + showDesk: false, + }; + let skipoffset: boolean = false; + if (client.viewport.getChatmsg().type === 5) { + setAside.showSpeedLines = true; + setAside.showDesk = false; + client.viewport.set_side(setAside); + } else { + switch (Number(client.viewport.getChatmsg().deskmod)) { + case 0: //desk is hidden + setAside.showSpeedLines = false; setAside.showDesk = false; client.viewport.set_side(setAside); - } else { - switch (Number(client.viewport.getChatmsg().deskmod)) { - case 0: //desk is hidden - setAside.showSpeedLines = false; - setAside.showDesk = false; - client.viewport.set_side(setAside); - break; - case 1: //desk is shown - setAside.showSpeedLines = false; - setAside.showDesk = true; - client.viewport.set_side(setAside); - break; - case 2: //desk is hidden during preanim, but shown during idle/talk - setAside.showSpeedLines = false; - setAside.showDesk = false; - client.viewport.set_side(setAside); - break; - case 3: //opposite of 2 - setAside.showSpeedLines = false; - setAside.showDesk = false; - client.viewport.set_side(setAside); - break; - case 4: //desk is hidden, character offset is ignored, pair character is hidden during preanim, normal behavior during idle/talk - setAside.showSpeedLines = false; - setAside.showDesk = false; - client.viewport.set_side(setAside); - skipoffset = true; - break; - case 5: //opposite of 4 - setAside.showSpeedLines = false; - setAside.showDesk = true; - client.viewport.set_side(setAside); - break; - default: - setAside.showSpeedLines = false; - setAside.showDesk = true; - client.viewport.set_side(setAside); - break; - } - } - - setChatbox(client.viewport.getChatmsg().chatbox); - resizeChatbox(); - if (client.viewport.getChatmsg().chatbox === "") { - // No chatbox means hide it - chatContainerBox.style.opacity = "0"; - } - - if (!skipoffset) { - // Flip the character - charLayers.style.transform = - client.viewport.getChatmsg().flip === 1 ? "scaleX(-1)" : "scaleX(1)"; - pairLayers.style.transform = - client.viewport.getChatmsg().other_flip === 1 ? "scaleX(-1)" : "scaleX(1)"; - - // Shift by the horizontal offset - switch (client.viewport.getChatmsg().side) { - case "wit": - pairLayers.style.left = `${200 + Number(client.viewport.getChatmsg().other_offset[0])}%`; - charLayers.style.left = `${200 + Number(client.viewport.getChatmsg().self_offset[0])}%`; - break; - case "pro": - pairLayers.style.left = `${400 + Number(client.viewport.getChatmsg().other_offset[0])}%`; - charLayers.style.left = `${400 + Number(client.viewport.getChatmsg().self_offset[0])}%`; - break; - default: - pairLayers.style.left = `${Number(client.viewport.getChatmsg().other_offset[0])}%`; - charLayers.style.left = `${Number(client.viewport.getChatmsg().self_offset[0])}%`; - break; - } - - // New vertical offsets - pairLayers.style.top = `${Number(client.viewport.getChatmsg().other_offset[1])}%`; - charLayers.style.top = `${Number(client.viewport.getChatmsg().self_offset[1])}%`; + break; + case 1: //desk is shown + setAside.showSpeedLines = false; + setAside.showDesk = true; + client.viewport.set_side(setAside); + break; + case 2: //desk is hidden during preanim, but shown during idle/talk + setAside.showSpeedLines = false; + setAside.showDesk = false; + client.viewport.set_side(setAside); + break; + case 3: //opposite of 2 + setAside.showSpeedLines = false; + setAside.showDesk = false; + client.viewport.set_side(setAside); + break; + case 4: //desk is hidden, character offset is ignored, pair character is hidden during preanim, normal behavior during idle/talk + setAside.showSpeedLines = false; + setAside.showDesk = false; + client.viewport.set_side(setAside); + skipoffset = true; + break; + case 5: //opposite of 4 + setAside.showSpeedLines = false; + setAside.showDesk = true; + client.viewport.set_side(setAside); + break; + default: + setAside.showSpeedLines = false; + setAside.showDesk = true; + client.viewport.set_side(setAside); + break; } - - client.viewport.blipChannels.forEach( - (channel: HTMLAudioElement) => - (channel.src = `${AO_HOST}sounds/blips/${encodeURI( - client.viewport.getChatmsg().blips.toLowerCase() - )}.opus`) - ); - - // process markup - if (client.viewport.getChatmsg().content.startsWith("~~")) { - chatBoxInner.style.textAlign = "center"; - client.viewport.getChatmsg().content = client.viewport.getChatmsg().content.substring(2, client.viewport.getChatmsg().content.length); - } else { - chatBoxInner.style.textAlign = "inherit"; + } + + setChatbox(client.viewport.getChatmsg().chatbox); + resizeChatbox(); + if (client.viewport.getChatmsg().chatbox === "") { + // No chatbox means hide it + chatContainerBox.style.opacity = "0"; + } + + if (!skipoffset) { + // Flip the character + charLayers.style.transform = + client.viewport.getChatmsg().flip === 1 ? "scaleX(-1)" : "scaleX(1)"; + pairLayers.style.transform = + client.viewport.getChatmsg().other_flip === 1 + ? "scaleX(-1)" + : "scaleX(1)"; + + // Shift by the horizontal offset + switch (client.viewport.getChatmsg().side) { + case "wit": + pairLayers.style.left = `${200 + Number(client.viewport.getChatmsg().other_offset[0])}%`; + charLayers.style.left = `${200 + Number(client.viewport.getChatmsg().self_offset[0])}%`; + break; + case "pro": + pairLayers.style.left = `${400 + Number(client.viewport.getChatmsg().other_offset[0])}%`; + charLayers.style.left = `${400 + Number(client.viewport.getChatmsg().self_offset[0])}%`; + break; + default: + pairLayers.style.left = `${Number(client.viewport.getChatmsg().other_offset[0])}%`; + charLayers.style.left = `${Number(client.viewport.getChatmsg().self_offset[0])}%`; + break; } - // apply effects - fg.style.animation = ""; - const effectName = client.viewport.getChatmsg().effects[0].toLowerCase(); - const badEffects = ["", "-", "none"]; - 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++) { - const drop = document.createElement("p"); - drop.style.left = (Math.random() * 100) + "%"; - drop.style.animationDelay = String(Math.random()) + "s"; - fg.appendChild(drop) - } - } else if ( - client.viewport.getChatmsg().effects[0] && - !badEffects.includes(effectName) - ) { - (<HTMLLinkElement>document.getElementById("effect_css")).href = ""; - fg.innerHTML = ''; - const baseEffectUrl = `${AO_HOST}themes/default/effects/`; - fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`; - } else { - fg.innerHTML = ''; - fg.src = transparentPng; + // New vertical offsets + pairLayers.style.top = `${Number(client.viewport.getChatmsg().other_offset[1])}%`; + charLayers.style.top = `${Number(client.viewport.getChatmsg().self_offset[1])}%`; + } + + client.viewport.blipChannels.forEach( + (channel: HTMLAudioElement) => + (channel.src = `${AO_HOST}sounds/blips/${encodeURI( + client.viewport.getChatmsg().blips.toLowerCase(), + )}.opus`), + ); + + // process markup + if (client.viewport.getChatmsg().content.startsWith("~~")) { + chatBoxInner.style.textAlign = "center"; + client.viewport.getChatmsg().content = client.viewport + .getChatmsg() + .content.substring(2, client.viewport.getChatmsg().content.length); + } else { + chatBoxInner.style.textAlign = "inherit"; + } + + // apply effects + fg.style.animation = ""; + const effectName = client.viewport.getChatmsg().effects[0].toLowerCase(); + const badEffects = ["", "-", "none"]; + 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; } - - - charLayers.style.opacity = "1"; - - const soundChecks = ["0", "1", "", undefined]; - if (soundChecks.some((check) => client.viewport.getChatmsg().sound === check)) { - client.viewport.getChatmsg().sound = client.viewport.getChatmsg().effects[2]; + if (intensity < fg.childElementCount) fg.innerHTML = ""; + else intensity = intensity - fg.childElementCount; + + for (let i = 0; i < intensity; i++) { + const drop = document.createElement("p"); + drop.style.left = Math.random() * 100 + "%"; + drop.style.animationDelay = String(Math.random()) + "s"; + fg.appendChild(drop); } - - try { - client.viewport.getChatmsg().parsed = await attorneyMarkdown.applyMarkdown( - client.viewport.getChatmsg().content, - - COLORS[client.viewport.getChatmsg().color] - - ); - } catch (error) { - console.warn("markdown failed"); - const output: HTMLSpanElement[] = [] - for (const letter of client.viewport.getChatmsg().content) { - const currentSelector = document.createElement('span'); - currentSelector.innerHTML = letter; - currentSelector.className = `text_${COLORS[client.viewport.getChatmsg().color]}`; - output.push(currentSelector); - } - client.viewport.getChatmsg().parsed = output; + } else if ( + client.viewport.getChatmsg().effects[0] && + !badEffects.includes(effectName) + ) { + (<HTMLLinkElement>document.getElementById("effect_css")).href = ""; + fg.innerHTML = ""; + const baseEffectUrl = `${AO_HOST}themes/default/effects/`; + fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`; + } else { + fg.innerHTML = ""; + fg.src = transparentPng; + } + + charLayers.style.opacity = "1"; + + const soundChecks = ["0", "1", "", undefined]; + if ( + soundChecks.some((check) => client.viewport.getChatmsg().sound === check) + ) { + client.viewport.getChatmsg().sound = + client.viewport.getChatmsg().effects[2]; + } + + try { + client.viewport.getChatmsg().parsed = await attorneyMarkdown.applyMarkdown( + client.viewport.getChatmsg().content, + + COLORS[client.viewport.getChatmsg().color], + ); + } catch (error) { + console.warn("markdown failed"); + const output: HTMLSpanElement[] = []; + for (const letter of client.viewport.getChatmsg().content) { + const currentSelector = document.createElement("span"); + currentSelector.innerHTML = letter; + currentSelector.className = `text_${COLORS[client.viewport.getChatmsg().color]}`; + output.push(currentSelector); } + client.viewport.getChatmsg().parsed = output; + } - client.viewport.chat_tick(); + client.viewport.chat_tick(); }; diff --git a/webAO/viewport/utils/initTestimonyUpdater.ts b/webAO/viewport/utils/initTestimonyUpdater.ts index e6f6e9d..c1e4d93 100644 --- a/webAO/viewport/utils/initTestimonyUpdater.ts +++ b/webAO/viewport/utils/initTestimonyUpdater.ts @@ -1,31 +1,33 @@ -import { Testimony } from '../interfaces/Testimony' -import { client, UPDATE_INTERVAL } from '../../client' +import { Testimony } from "../interfaces/Testimony"; +import { client, UPDATE_INTERVAL } from "../../client"; /** * Intialize testimony updater */ export const initTestimonyUpdater = () => { - const testimonyFilenames: Testimony = { - 1: "witnesstestimony", - 2: "crossexamination", - 3: "notguilty", - 4: "guilty", - }; + const testimonyFilenames: Testimony = { + 1: "witnesstestimony", + 2: "crossexamination", + 3: "notguilty", + 4: "guilty", + }; - const testimony = testimonyFilenames[client.testimonyID]; - if (!testimony) { - console.warn(`Invalid testimony ID ${client.testimonyID}`); - return; - } + const testimony = testimonyFilenames[client.testimonyID]; + if (!testimony) { + console.warn(`Invalid testimony ID ${client.testimonyID}`); + return; + } - client.viewport.testimonyAudio.src = client.resources[testimony].sfx; - client.viewport.testimonyAudio.play(); + client.viewport.testimonyAudio.src = client.resources[testimony].sfx; + client.viewport.testimonyAudio.play(); - const testimonyOverlay = <HTMLImageElement>( - document.getElementById("client_testimony") - ); - testimonyOverlay.src = client.resources[testimony].src; - testimonyOverlay.style.opacity = "1"; + const testimonyOverlay = <HTMLImageElement>( + document.getElementById("client_testimony") + ); + testimonyOverlay.src = client.resources[testimony].src; + testimonyOverlay.style.opacity = "1"; - client.viewport.setTestimonyTimer(0); - client.viewport.setTestimonyUpdater(setTimeout(() => client.viewport.updateTestimony(), UPDATE_INTERVAL)); -};
\ No newline at end of file + client.viewport.setTestimonyTimer(0); + client.viewport.setTestimonyUpdater( + setTimeout(() => client.viewport.updateTestimony(), UPDATE_INTERVAL), + ); +}; diff --git a/webAO/viewport/utils/setSide.ts b/webAO/viewport/utils/setSide.ts index 77d1744..fd229e1 100644 --- a/webAO/viewport/utils/setSide.ts +++ b/webAO/viewport/utils/setSide.ts @@ -1,8 +1,8 @@ -import { positions } from '../constants/positions' -import { AO_HOST } from '../../client/aoHost' -import { client } from '../../client' -import tryUrls from '../../utils/tryUrls'; -import findImgSrc from '../../utils/findImgSrc'; +import { positions } from "../constants/positions"; +import { AO_HOST } from "../../client/aoHost"; +import { client } from "../../client"; +import tryUrls from "../../utils/tryUrls"; +import findImgSrc from "../../utils/findImgSrc"; /** * Changes the viewport background based on a given position. @@ -11,81 +11,78 @@ import findImgSrc from '../../utils/findImgSrc'; * @param {string} position the position to change into */ export const set_side = async ({ - position, - showSpeedLines, - showDesk, + position, + showSpeedLines, + showDesk, }: { - position: string; - showSpeedLines: boolean; - showDesk: boolean; + position: string; + showSpeedLines: boolean; + showDesk: boolean; }) => { - const view = document.getElementById("client_fullview")!; - let bench: HTMLImageElement; - if (['def', 'pro', 'wit'].includes(position)) { - bench = <HTMLImageElement>( - document.getElementById(`client_${position}_bench`) - ); - } else { - bench = <HTMLImageElement>document.getElementById("client_bench_classic"); - } + const view = document.getElementById("client_fullview")!; + let bench: HTMLImageElement; + if (["def", "pro", "wit"].includes(position)) { + bench = <HTMLImageElement>( + document.getElementById(`client_${position}_bench`) + ); + } else { + bench = <HTMLImageElement>document.getElementById("client_bench_classic"); + } - let court: HTMLImageElement; - if ("def,pro,wit".includes(position)) { - court = <HTMLImageElement>( - document.getElementById(`client_court_${position}`) - ); - } else { - court = <HTMLImageElement>document.getElementById("client_court_classic"); - } + let court: HTMLImageElement; + if ("def,pro,wit".includes(position)) { + court = <HTMLImageElement>( + document.getElementById(`client_court_${position}`) + ); + } else { + court = <HTMLImageElement>document.getElementById("client_court_classic"); + } - let bg; - let desk; - let speedLines; + let bg; + let desk; + let speedLines; - if ("def,pro,hld,hlp,wit,jud,jur,sea".includes(position)) { - bg = positions[position].bg; - desk = positions[position].desk; - speedLines = positions[position].speedLines; - } else { - bg = `${position}`; - desk = { ao2: `${position}_overlay.png`, ao1: "_overlay.png" }; - speedLines = "defense_speedlines.gif"; - } + if ("def,pro,hld,hlp,wit,jud,jur,sea".includes(position)) { + bg = positions[position].bg; + desk = positions[position].desk; + speedLines = positions[position].speedLines; + } else { + bg = `${position}`; + desk = { ao2: `${position}_overlay.png`, ao1: "_overlay.png" }; + speedLines = "defense_speedlines.gif"; + } - if (showSpeedLines === true) { - court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`; - } else { - court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg); - } + if (showSpeedLines === true) { + court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`; + } else { + court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg); + } - if (showDesk === true && desk) { - const bg_folder = client.viewport.getBackgroundFolder(); - const urls_to_try = [ - bg_folder + desk.ao2, - bg_folder + desk.ao1, - ]; - bench.src = await findImgSrc(urls_to_try); - bench.style.opacity = "1"; - } else { - bench.style.opacity = "0"; - } + if (showDesk === true && desk) { + const bg_folder = client.viewport.getBackgroundFolder(); + const urls_to_try = [bg_folder + desk.ao2, bg_folder + desk.ao1]; + bench.src = await findImgSrc(urls_to_try); + bench.style.opacity = "1"; + } else { + bench.style.opacity = "0"; + } - if ("def,pro,wit".includes(position)) { - view.style.display = ""; - document.getElementById("client_classicview")!.style.display = "none"; - switch (position) { - case "def": - view.style.left = "0"; - break; - case "wit": - view.style.left = "-200%"; - break; - case "pro": - view.style.left = "-400%"; - break; - } - } else { - view.style.display = "none"; - document.getElementById("client_classicview").style.display = ""; + if ("def,pro,wit".includes(position)) { + view.style.display = ""; + document.getElementById("client_classicview")!.style.display = "none"; + switch (position) { + case "def": + view.style.left = "0"; + break; + case "wit": + view.style.left = "-200%"; + break; + case "pro": + view.style.left = "-400%"; + break; } + } else { + view.style.display = "none"; + document.getElementById("client_classicview").style.display = ""; + } }; |