diff options
| -rw-r--r-- | tsconfig.json | 3 | ||||
| -rw-r--r-- | webAO/client.ts (renamed from webAO/client.js) | 532 | ||||
| -rw-r--r-- | webAO/dom/changeVolume.js | 8 | ||||
| -rw-r--r-- | webpack.config.js | 2 |
4 files changed, 323 insertions, 222 deletions
diff --git a/tsconfig.json b/tsconfig.json index 85f6983..16f950d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "outDir": "./dist", "allowJs": true, "target": "es5", - "strict": true, + "lib": ["DOM","DOM.Iterable"], + "strict": false, "strictNullChecks": false, //document.getElementBy "downlevelIteration": true }, diff --git a/webAO/client.js b/webAO/client.ts index b8dbb6b..78bd6bf 100644 --- a/webAO/client.js +++ b/webAO/client.ts @@ -22,7 +22,7 @@ import iniParse from './iniParse'; import getCookie from './utils/getCookie.js'; import setCookie from './utils/setCookie.js'; import { request } from './services/request.js'; -import { changeShoutVolume, changeSFXVolume } from './dom/changeVolume.js'; +import { changeShoutVolume, changeSFXVolume, changeTestimonyVolume } from './dom/changeVolume.js'; import setEmote from './client/setEmote.js'; import fileExists from './utils/fileExists.js'; import queryParser from './utils/queryParser.js'; @@ -62,6 +62,62 @@ let extrafeatures = []; let hdid; +declare global { + interface Window { + toggleShout: (shout: number) => void; + toggleMenu: (menu: number) => void; + updateBackgroundPreview: () => void; + redHPP: () => void; + addHPP: () => void; + redHPD: () => void; + addHPD: () => void; + guilty: () => void; + notguilty: () => void; + initCE: () => void; + initWT: () => void; + callMod: () => void; + randomCharacterOOC: () => void; + changeRoleOOC: () => void; + changeBackgroundOOC: () => void; + updateActionCommands: (side: string) => void; + updateEvidenceIcon: () => void; + resizeChatbox: () => void; + setChatbox: (style: string) => void; + getIndexFromSelect: (select_box: string, value: string) => Number; + cancelEvidence: () => void; + deleteEvidence: () => void; + editEvidence: () => void; + addEvidence: () => void; + pickEvidence: (evidence: any) => void; + pickEmotion: (emo: any) => void; + pickChar: (ccharacter: any) => void; + chartable_filter: (_event: any) => void; + ReconnectButton: (_event: any) => void; + opusCheck: (channel: any) => void; + imgError: (image: any) => void; + charError: (image: any) => void; + changeCharacter: (_event: any) => void; + switchChatOffset: () => void; + switchAspectRatio: () => void; + switchPanTilt: (addcheck: number) => void; + iniedit: () => void; + modcall_test: () => void; + reloadTheme: () => void; + changeCallwords: () => void; + changeBlipVolume: () => void; + changeMusicVolume: () => void; + area_click: (el: any) => void; + showname_click: (_event: any) => void; + mutelist_click: (_event: any) => void; + musiclist_click: (_event: any) => void; + musiclist_filter: (_event: any) => void; + resetOffset: (_event: any) => void; + onEnter: (event: any) => void; + onReplayGo: (_event: any) => void; + onOOCEnter: (_event: any) => void; + } +} + function isLowMemory() { if (/webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Nintendo|Opera Mini/i.test(navigator.userAgent)) { oldLoading = true; @@ -82,6 +138,28 @@ fpPromise let lastICMessageTime = new Date(0); class Client extends EventEmitter { + serv: any; + hp: number[]; + playerID: number; + charID: number; + char_list_length: number; + evidence_list_length: number; + music_list_length: number; + testimonyID: number; + chars: any; + emotes: any; + evidences: any; + areas: any; + musics: any; + musics_time: boolean; + callwords: string[]; + banned: boolean; + resources: any; + selectedEmote: number; + selectedEvidence: number; + checkUpdater: any; + _lastTimeICReceived: any; + constructor(address) { super(); if (mode !== 'replay') { @@ -220,7 +298,7 @@ class Client extends EventEmitter { * @param {string} message the message to send */ sendSelf(message) { - document.getElementById('client_ooclog').value += `${message}\r\n`; + (<HTMLInputElement>document.getElementById('client_ooclog')).value += `${message}\r\n`; this.handleSelf(message); } @@ -229,8 +307,8 @@ class Client extends EventEmitter { * @param {string} message the message to send */ sendOOC(message) { - setCookie('OOC_name', document.getElementById('OOC_name').value); - const oocName = `${escapeChat(encodeChat(document.getElementById('OOC_name').value))}`; + setCookie('OOC_name', (<HTMLInputElement>document.getElementById('OOC_name')).value); + const oocName = `${escapeChat(encodeChat((<HTMLInputElement>document.getElementById('OOC_name')).value))}`; const oocMessage = `${escapeChat(encodeChat(message))}`; const commands = { @@ -326,7 +404,7 @@ class Client extends EventEmitter { this.sendServer(serverMessage); if (mode === 'replay') { - document.getElementById('client_ooclog').value += `wait#${document.getElementById('client_replaytimer').value}#%\r\n`; + (<HTMLInputElement>document.getElementById('client_ooclog')).value += `wait#${(<HTMLInputElement>document.getElementById('client_replaytimer')).value}#%\r\n`; } } @@ -415,49 +493,49 @@ class Client extends EventEmitter { document.getElementById('client_version').innerText = `version ${version}`; // Load background array to select - const background_select = document.getElementById('bg_select'); - background_select.add(new Option('Custom', 0)); + const background_select = <HTMLSelectElement>document.getElementById('bg_select'); + background_select.add(new Option('Custom', '0')); vanilla_background_arr.forEach((background) => { background_select.add(new Option(background)); }); // Load evidence array to select - const evidence_select = document.getElementById('evi_select'); - evidence_select.add(new Option('Custom', 0)); + const evidence_select = <HTMLSelectElement>document.getElementById('evi_select'); + evidence_select.add(new Option('Custom', '0')); vanilla_evidence_arr.forEach((evidence) => { evidence_select.add(new Option(evidence)); }); // Read cookies and set the UI to its values - document.getElementById('OOC_name').value = getCookie('OOC_name') || `web${parseInt(Math.random() * 100 + 10)}`; + (<HTMLInputElement>document.getElementById('OOC_name')).value = getCookie('OOC_name') || `web${String(Math.round(Math.random() * 100 + 10))}`; // Read cookies and set the UI to its values const cookietheme = getCookie('theme') || 'default'; - document.querySelector(`#client_themeselect [value="${cookietheme}"]`).selected = true; + (<HTMLOptionElement>document.querySelector(`#client_themeselect [value="${cookietheme}"]`)).selected = true; reloadTheme(); const cookiechatbox = getCookie('chatbox') || 'dynamic'; - document.querySelector(`#client_chatboxselect [value="${cookiechatbox}"]`).selected = true; + (<HTMLOptionElement>document.querySelector(`#client_chatboxselect [value="${cookiechatbox}"]`)).selected = true; setChatbox(cookiechatbox); - document.getElementById('client_mvolume').value = getCookie('musicVolume') || 1; + (<HTMLInputElement>document.getElementById('client_mvolume')).value = getCookie('musicVolume') || '1'; changeMusicVolume(); - document.getElementById('client_sfxaudio').volume = getCookie('sfxVolume') || 1; + (<HTMLAudioElement>document.getElementById('client_sfxaudio')).volume = Number(getCookie('sfxVolume')) || 1; changeSFXVolume(); - document.getElementById('client_shoutaudio').volume = getCookie('shoutVolume') || 1; + (<HTMLAudioElement>document.getElementById('client_shoutaudio')).volume = Number(getCookie('shoutVolume')) || 1; changeShoutVolume(); - document.getElementById('client_testimonyaudio').volume = getCookie('testimonyVolume') || 1; + (<HTMLAudioElement>document.getElementById('client_testimonyaudio')).volume = Number(getCookie('testimonyVolume')) || 1; changeTestimonyVolume(); - document.getElementById('client_bvolume').value = getCookie('blipVolume') || 1; + (<HTMLInputElement>document.getElementById('client_bvolume')).value = getCookie('blipVolume') || '1'; changeBlipVolume(); - document.getElementById('ic_chat_name').value = getCookie('ic_chat_name'); - document.getElementById('showname').checked = getCookie('showname'); - showname_click(); + (<HTMLInputElement>document.getElementById('ic_chat_name')).value = getCookie('ic_chat_name'); + (<HTMLInputElement>document.getElementById('showname')).checked = Boolean(getCookie('showname')); + showname_click(0); - document.getElementById('client_callwords').value = getCookie('callwords'); + (<HTMLInputElement>document.getElementById('client_callwords')).value = getCookie('callwords'); } /** @@ -554,9 +632,9 @@ class Client extends EventEmitter { * @param {*} args packet arguments */ handleReplay() { - const ooclog = document.getElementById('client_ooclog'); + const ooclog = <HTMLInputElement>document.getElementById('client_ooclog'); const rawLog = false; - let rtime = document.getElementById('client_replaytimer').value; + let rtime: number = Number((<HTMLInputElement>document.getElementById('client_replaytimer')).value); const clines = ooclog.value.split(/\r?\n/); if (clines[0]) { @@ -564,7 +642,7 @@ class Client extends EventEmitter { this.handleSelf(currentLine); ooclog.value = clines.slice(1).join('\r\n'); if (currentLine.substr(0, 4) === 'wait' && rawLog === false) { - rtime = currentLine.split('#')[1]; + rtime = Number(currentLine.split('#')[1]); } else if (currentLine.substr(0, 2) !== 'MS') { rtime = 0; } @@ -591,11 +669,11 @@ class Client extends EventEmitter { let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d); let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d); - const filename = `chatlog-${da}-${mo}-${ye}`.toLowerCase() - downloadFile(messages.join('\n'), filename) + const filename = `chatlog-${da}-${mo}-${ye}`.toLowerCase(); + downloadFile(messages.join('\n'), filename); // Reset Chatbox to Empty - document.getElementById('client_inputbox').value = ''; + (<HTMLInputElement>document.getElementById('client_inputbox')).value = ''; } /** @@ -821,8 +899,8 @@ class Client extends EventEmitter { */ async handleCharacterInfo(chargs, charid) { if (chargs[0]) { - let cini = {}; - const img = document.getElementById(`demo_${charid}`); + let cini: any = {}; + const img = <HTMLImageElement>document.getElementById(`demo_${charid}`); const getCharIcon = async () => { const extensions = [ '.png', @@ -853,9 +931,9 @@ class Client extends EventEmitter { // If it does, give the user a visual indication that the character is unusable } - const mute_select = document.getElementById('mute_select'); + const mute_select = <HTMLSelectElement>document.getElementById('mute_select'); mute_select.add(new Option(safeTags(chargs[0]), charid)); - const pair_select = document.getElementById('pair_select'); + const pair_select = <HTMLSelectElement>document.getElementById('pair_select'); pair_select.add(new Option(safeTags(chargs[0]), charid)); // sometimes ini files lack important settings @@ -891,7 +969,7 @@ class Client extends EventEmitter { if (this.chars[charid].blips === '') { this.chars[charid].blips = this.chars[charid].gender; } - const iniedit_select = document.getElementById('client_ininame'); + const iniedit_select = <HTMLSelectElement>document.getElementById('client_ininame'); iniedit_select.add(new Option(safeTags(chargs[0]))); } else { console.warn(`missing charid ${charid}`); @@ -1005,10 +1083,10 @@ class Client extends EventEmitter { const bg_array = JSON.parse(bgdata); // the try catch will fail before here when there is no file - const bg_select = document.getElementById('bg_select'); + const bg_select = <HTMLSelectElement>document.getElementById('bg_select'); bg_select.innerHTML = ''; - bg_select.add(new Option('Custom', 0)); + bg_select.add(new Option('Custom', '0')); bg_array.forEach((background) => { bg_select.add(new Option(background)); }); @@ -1023,7 +1101,7 @@ class Client extends EventEmitter { const char_array = JSON.parse(chardata); // the try catch will fail before here when there is no file - const char_select = document.getElementById('client_ininame'); + const char_select = <HTMLSelectElement>document.getElementById('client_ininame'); char_select.innerHTML = ''; char_array.forEach((character) => { @@ -1040,13 +1118,13 @@ class Client extends EventEmitter { const evi_array = JSON.parse(evidata); // the try catch will fail before here when there is no file - const evi_select = document.getElementById('evi_select'); + const evi_select = <HTMLSelectElement>document.getElementById('evi_select'); evi_select.innerHTML = ''; evi_array.forEach((evi) => { evi_select.add(new Option(evi)); }); - evi_select.add(new Option('Custom', 0)); + evi_select.add(new Option('Custom', '0')); } catch (err) { console.warn('there was no evidence.json file'); } @@ -1058,9 +1136,9 @@ class Client extends EventEmitter { } addTrack(trackname) { - const newentry = document.createElement('OPTION'); + const newentry = <HTMLOptionElement>document.createElement('OPTION'); newentry.text = trackname; - document.getElementById('client_musiclist').options.add(newentry); + (<HTMLSelectElement>document.getElementById('client_musiclist')).options.add(newentry); this.musics.push(trackname); } @@ -1077,7 +1155,7 @@ class Client extends EventEmitter { // Create area button const newarea = document.createElement('SPAN'); - newarea.classList = 'area-button area-default'; + newarea.className = 'area-button area-default'; newarea.id = `area${id}`; newarea.innerText = thisarea.name; newarea.title = `Players: ${thisarea.players}\n` @@ -1203,14 +1281,14 @@ class Client extends EventEmitter { /** * Handles the kicked packet - * @param {String} type is it a kick or a ban - * @param {String} reason why + * @param {string} type is it a kick or a ban + * @param {string} reason why */ handleBans(type, reason) { document.getElementById('client_error').style.display = 'flex'; document.getElementById('client_errortext').innerHTML = `${type}:<br>${reason.replace(/\n/g, '<br />')}`; - document.getElementsByClassName('client_reconnect')[0].style.display = 'none'; - document.getElementsByClassName('client_reconnect')[1].style.display = 'none'; + (<HTMLElement>document.getElementsByClassName('client_reconnect')[0]).style.display = 'none'; + (<HTMLElement>document.getElementsByClassName('client_reconnect')[1]).style.display = 'none'; } /** @@ -1272,22 +1350,22 @@ class Client extends EventEmitter { viewport.bgname = safeTags(args[1]); const bgfolder = viewport.bgFolder; const bg_index = getIndexFromSelect('bg_select', viewport.bgname); - document.getElementById('bg_select').selectedIndex = bg_index; + (<HTMLSelectElement>document.getElementById('bg_select')).selectedIndex = bg_index; updateBackgroundPreview(); if (bg_index === 0) { - document.getElementById('bg_filename').value = viewport.bgname; + (<HTMLInputElement>document.getElementById('bg_filename')).value = viewport.bgname; } - tryUrls(`${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty`).then(resp => {document.getElementById('bg_preview').src = resp}); - tryUrls(`${bgfolder}defensedesk`).then((resp) => document.getElementById('client_def_bench').src = resp); - tryUrls(`${bgfolder}stand`).then(resp => {document.getElementById('client_wit_bench').src = resp}); - tryUrls(`${bgfolder}prosecutiondesk`).then(resp => {document.getElementById('client_pro_bench').src = resp}); - tryUrls(`${bgfolder}full`).then(resp => {document.getElementById('client_court').src = resp}); - tryUrls(`${bgfolder}defenseempty`).then(resp => {document.getElementById('client_court_def').src = resp}); - tryUrls(`${bgfolder}transition_def`).then(resp => {document.getElementById('client_court_deft').src = resp}); - tryUrls(`${bgfolder}witnessempty`).then(resp => {document.getElementById('client_court_wit').src = resp}); - tryUrls(`${bgfolder}transition_pro`).then(resp => {document.getElementById('client_court_prot').src = resp}); - tryUrls(`${bgfolder}prosecutorempty`).then(resp => {document.getElementById('client_court_pro').src = resp}); + tryUrls(`${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty`).then(resp => {(<HTMLImageElement>document.getElementById('bg_preview')).src = resp}); + tryUrls(`${bgfolder}defensedesk`).then((resp) => {(<HTMLImageElement>document.getElementById('client_def_bench')).src = resp}); + tryUrls(`${bgfolder}stand`).then(resp => {(<HTMLImageElement>document.getElementById('client_wit_bench')).src = resp}); + tryUrls(`${bgfolder}prosecutiondesk`).then(resp => {(<HTMLImageElement>document.getElementById('client_pro_bench')).src = resp}); + tryUrls(`${bgfolder}full`).then(resp => {(<HTMLImageElement>document.getElementById('client_court')).src = resp}); + tryUrls(`${bgfolder}defenseempty`).then(resp => {(<HTMLImageElement>document.getElementById('client_court_def')).src = resp}); + tryUrls(`${bgfolder}transition_def`).then(resp => {(<HTMLImageElement>document.getElementById('client_court_deft')).src = resp}); + tryUrls(`${bgfolder}witnessempty`).then(resp => {(<HTMLImageElement>document.getElementById('client_court_wit')).src = resp}); + tryUrls(`${bgfolder}transition_pro`).then(resp => {(<HTMLImageElement>document.getElementById('client_court_prot')).src = resp}); + tryUrls(`${bgfolder}prosecutorempty`).then(resp => {(<HTMLImageElement>document.getElementById('client_court_pro')).src = resp}); if (this.charID === -1) { viewport.changeBackground('jud'); @@ -1345,7 +1423,7 @@ class Client extends EventEmitter { handleTI(args) { const timerid = Number(args[1]); const type = Number(args[2]); - const timer_value = Number(args[3]); + const timer_value = args[3]; switch (type) { case 0: // @@ -1391,13 +1469,18 @@ class Client extends EventEmitter { */ handleID(args) { this.playerID = Number(args[1]); - this.serverSoftware = args[2].split('&')[0]; - if (this.serverSoftware === 'serverD') { this.serverVersion = args[2].split('&')[1]; } else if (this.serverSoftware === 'webAO') { + const serverSoftware = args[2].split('&')[0]; + let serverVersion; + if (serverSoftware === 'serverD') { + serverVersion = args[2].split('&')[1]; + } else if (serverSoftware === 'webAO') { oldLoading = false; this.sendSelf('PN#0#1#%'); - } else { this.serverVersion = args[3]; } + } else { + serverVersion = args[3]; + } - if (this.serverSoftware === 'serverD' && this.serverVersion === '1377.152') { oldLoading = true; } // bugged version + if (serverSoftware === 'serverD' && serverVersion === '1377.152') { oldLoading = true; } // bugged version } /** @@ -1448,7 +1531,7 @@ class Client extends EventEmitter { break; } - thisarea.classList = `area-button area-${this.areas[i].status.toLowerCase()}`; + thisarea.className = `area-button area-${this.areas[i].status.toLowerCase()}`; thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players}) [${this.areas[i].status}]`; @@ -1470,12 +1553,12 @@ class Client extends EventEmitter { extrafeatures = args; if (args.includes('yellowtext')) { - const colorselect = document.getElementById('textcolor'); + const colorselect = <HTMLSelectElement>document.getElementById('textcolor'); - colorselect.options[colorselect.options.length] = new Option('Yellow', 5); - colorselect.options[colorselect.options.length] = new Option('Grey', 6); - colorselect.options[colorselect.options.length] = new Option('Pink', 7); - colorselect.options[colorselect.options.length] = new Option('Cyan', 8); + colorselect.options[colorselect.options.length] = new Option('Yellow', '5'); + colorselect.options[colorselect.options.length] = new Option('Grey', '6'); + colorselect.options[colorselect.options.length] = new Option('Pink', '7'); + colorselect.options[colorselect.options.length] = new Option('Cyan', '8'); } if (args.includes('cccc_ic_support')) { @@ -1543,7 +1626,7 @@ class Client extends EventEmitter { for (let i = 0; i < this.char_list_length; i++) { const img = document.getElementById(`demo_${i}`); - if (args[i + 1] === '-1') { img.style.opacity = 0.25; } else if (args[i + 1] === '0') { img.style.opacity = 1; } + if (args[i + 1] === '-1') { img.style.opacity = '0.25'; } else if (args[i + 1] === '0') { img.style.opacity = '1'; } } } @@ -1613,7 +1696,7 @@ class Client extends EventEmitter { if (await fileExists(`${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/custom.gif`)) { document.getElementById('button_4').style.display = ''; } else { document.getElementById('button_4').style.display = 'none'; } - const iniedit_select = document.getElementById('client_ininame'); + const iniedit_select = <HTMLSelectElement>document.getElementById('client_ininame'); // Load iniswaps if there are any try { @@ -1624,12 +1707,9 @@ class Client extends EventEmitter { if (cswap.length > 0) { iniedit_select.innerHTML = ''; - function addIniswap(value) { - iniedit_select.add(new Option(safeTags(value))); - } + iniedit_select.add(new Option(safeTags(me.name))); - addIniswap(me.name); - cswap.forEach(addIniswap); + cswap.forEach((inisw) => iniedit_select.add(new Option(safeTags(inisw)))); } } catch (err) { console.info("character doesn't have iniswaps"); @@ -1668,7 +1748,7 @@ class Client extends EventEmitter { handleRD(_args) { this.sendSelf('BN#gs4#%'); this.sendSelf('DONE#%'); - const ooclog = document.getElementById('client_ooclog'); + const ooclog = <HTMLInputElement>document.getElementById('client_ooclog'); ooclog.value = ''; ooclog.readOnly = false; @@ -1678,6 +1758,30 @@ class Client extends EventEmitter { } class Viewport { + textnow: string; + chatmsg: any; + shouts: string[]; + colors: string[]; + blipChannels: any; + currentBlipChannel: number; + sfxaudio: any; + sfxplayed: number; + shoutaudio: any; + testimonyAudio: any; + music: any; + updater: any; + testimonyUpdater: any; + bgname: string; + lastChar: string; + lastEvi: number; + testimonyTimer: number; + shoutTimer: number; + tickTimer: number; + _animating: boolean; + startFirstTickCheck: boolean; + startSecondTickCheck: boolean; + startThirdTickCheck: boolean; + constructor() { this.textnow = ''; this.chatmsg = { @@ -1862,7 +1966,7 @@ class Viewport { if (viewport.chatmsg.type === 5) { console.warn('this is a zoom'); court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`; - bench.style.opacity = 0; + bench.style.opacity = '0'; } else { // Set src here @@ -1870,9 +1974,9 @@ class Viewport { if (desk) { const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1; bench.src = bgfolder + deskFilename; - bench.style.opacity = 1; + bench.style.opacity = '1'; } else { - bench.style.opacity = 0; + bench.style.opacity = '0'; } } @@ -1916,9 +2020,9 @@ class Viewport { this.testimonyAudio.src = client.resources[testimony].sfx; this.testimonyAudio.play(); - const testimonyOverlay = document.getElementById('client_testimony'); + const testimonyOverlay = <HTMLImageElement>document.getElementById('client_testimony'); testimonyOverlay.src = client.resources[testimony].src; - testimonyOverlay.style.opacity = 1; + testimonyOverlay.style.opacity = '1'; this.testimonyTimer = 0; this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL); @@ -1958,7 +2062,7 @@ class Viewport { disposeTestimony() { client.testimonyID = 0; this.testimonyTimer = 0; - document.getElementById('client_testimony').style.opacity = 0; + document.getElementById('client_testimony').style.opacity = '0'; clearTimeout(this.testimonyUpdater); } @@ -1988,13 +2092,13 @@ class Viewport { // stop last sfx from looping any longer this.sfxaudio.loop = false; - const fg = document.getElementById('client_fg'); + 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; + waitingBox.style.opacity = '0'; const eviBox = document.getElementById('client_evi'); @@ -2014,15 +2118,15 @@ class Viewport { const nameBoxInner = document.getElementById('client_inner_name'); const chatBoxInner = document.getElementById('client_inner_chat'); - const displayname = (document.getElementById('showname').checked && this.chatmsg.showname !== '') ? this.chatmsg.showname : this.chatmsg.nameplate; + const displayname = ((<HTMLInputElement>document.getElementById('showname')).checked && this.chatmsg.showname !== '') ? this.chatmsg.showname : this.chatmsg.nameplate; // Clear out the last message chatBoxInner.innerText = this.textnow; nameBoxInner.innerText = displayname; if (this.lastChar !== this.chatmsg.name) { - charLayers.style.opacity = 0; - pairLayers.style.opacity = 0; + charLayers.style.opacity = '0'; + pairLayers.style.opacity = '0'; } this.lastChar = this.chatmsg.name; @@ -2037,18 +2141,18 @@ class Viewport { } // gets which shout shall played - const shoutSprite = document.getElementById('client_shout'); + const shoutSprite = <HTMLImageElement>document.getElementById('client_shout'); const shout = this.shouts[this.chatmsg.objection]; if (shout) { // Hide message box - chatContainerBox.style.opacity = 0; + chatContainerBox.style.opacity = '0'; if (this.chatmsg.objection === 4) { shoutSprite.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/custom.gif`; } else { shoutSprite.src = client.resources[shout].src; shoutSprite.style.animation = 'bubble 700ms steps(10, jump-both)'; } - shoutSprite.style.opacity = 1; + shoutSprite.style.opacity = '1'; this.shoutaudio.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${shout}.opus`; this.shoutaudio.play(); @@ -2061,13 +2165,13 @@ class Viewport { let gifLength = 0; if (this.chatmsg.type === 1 && this.chatmsg.preanim !== '-') { - chatContainerBox.style.opacity = 0; + chatContainerBox.style.opacity = '0'; gifLength = await getAnimLength(`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${encodeURI(this.chatmsg.preanim)}`); this.chatmsg.startspeaking = false; } else { this.chatmsg.startspeaking = true; } - this.chatmsg.preanimdelay = parseInt(gifLength); + this.chatmsg.preanimdelay = gifLength; this.changeBackground(chatmsg.side); @@ -2154,8 +2258,8 @@ class Viewport { if (this.textnow === this.chatmsg.content) { this._animating = false; setEmote(AO_HOST, this, charName, charEmote, '(a)', false, this.chatmsg.side); - charLayers.style.opacity = 1; - waitingBox.style.opacity = 1; + charLayers.style.opacity = '1'; + waitingBox.style.opacity = '1'; clearTimeout(this.updater); } } @@ -2195,9 +2299,9 @@ class Viewport { const gamewindow = document.getElementById('client_gamewindow'); const waitingBox = document.getElementById('client_chatwaiting'); - const eviBox = document.getElementById('client_evi'); - const shoutSprite = document.getElementById('client_shout'); - const effectlayer = document.getElementById('client_fg'); + const eviBox = <HTMLImageElement>document.getElementById('client_evi'); + const shoutSprite = <HTMLImageElement>document.getElementById('client_shout'); + const effectlayer = <HTMLImageElement>document.getElementById('client_fg'); const chatBoxInner = document.getElementById('client_inner_chat'); let charLayers = document.getElementById('client_char'); let pairLayers = document.getElementById('client_pair_char'); @@ -2231,17 +2335,17 @@ class Viewport { // Pre-animation stuff if (this.chatmsg.preanimdelay > 0) { - shoutSprite.style.opacity = 0; + shoutSprite.style.opacity = '0'; shoutSprite.style.animation = ''; const preanim = this.chatmsg.preanim.toLowerCase(); setEmote(AO_HOST, this, charName, preanim, '', false, this.chatmsg.side); - charLayers.style.opacity = 1; + charLayers.style.opacity = '1'; } if (this.chatmsg.other_name) { - pairLayers.style.opacity = 1; + pairLayers.style.opacity = '1'; } else { - pairLayers.style.opacity = 0; + pairLayers.style.opacity = '0'; } // Done with first check, move to second this.startFirstTickCheck = false @@ -2253,7 +2357,7 @@ class Viewport { const hasNonInterruptingPreAnim = this.chatmsg.noninterrupting_preanim === 1 if (this.textnow !== this.chatmsg.content && hasNonInterruptingPreAnim) { const chatContainerBox = document.getElementById('client_chatcontainer'); - chatContainerBox.style.opacity = 1; + chatContainerBox.style.opacity = '1'; this.handleTextTick(charLayers) }else if (isShoutAndPreanimOver && this.startSecondTickCheck) { @@ -2267,7 +2371,7 @@ class Viewport { eviBox.style.width = 'auto'; eviBox.style.height = '36.5%'; - eviBox.style.opacity = 1; + eviBox.style.opacity = '1'; this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-evidenceshoop.opus`; this.testimonyAudio.play(); @@ -2281,34 +2385,28 @@ class Viewport { eviBox.style.left = '1em'; } } - - resizeChatbox(); - - const chatContainerBox = document.getElementById('client_chatcontainer'); - chatContainerBox.style.opacity = 1; - chatBoxInner.className = `text_${this.colors[this.chatmsg.color]}`; if (this.chatmsg.preanimdelay === 0) { - shoutSprite.style.opacity = 0; + shoutSprite.style.opacity = '0'; shoutSprite.style.animation = ''; } if (this.chatmsg.other_name) { setEmote(AO_HOST, this, pairName, pairEmote, '(a)', true, this.chatmsg.side); - pairLayers.style.opacity = 1; + pairLayers.style.opacity = '1'; } else { - pairLayers.style.opacity = 0; + pairLayers.style.opacity = '0'; } setEmote(AO_HOST, this, charName, charEmote, '(b)', false, this.chatmsg.side); - charLayers.style.opacity = 1; + charLayers.style.opacity = '1'; if (this.textnow === this.chatmsg.content) { setEmote(AO_HOST, this, charName, charEmote, '(a)', false, this.chatmsg.side); - charLayers.style.opacity = 1; - waitingBox.style.opacity = 1; + charLayers.style.opacity = '1'; + waitingBox.style.opacity = '1'; this._animating = false; clearTimeout(this.updater); } @@ -2333,8 +2431,8 @@ class Viewport { */ export function onOOCEnter(event) { if (event.keyCode === 13) { - client.sendOOC(document.getElementById('client_oocinputbox').value); - document.getElementById('client_oocinputbox').value = ''; + client.sendOOC((<HTMLInputElement>document.getElementById('client_oocinputbox')).value); + (<HTMLInputElement>document.getElementById('client_oocinputbox')).value = ''; } } window.onOOCEnter = onOOCEnter; @@ -2360,28 +2458,28 @@ export function onEnter(event) { const flip = ((document.getElementById('button_flip').classList.contains('dark')) ? 1 : 0); const flash = ((document.getElementById('button_flash').classList.contains('dark')) ? 1 : 0); const screenshake = ((document.getElementById('button_shake').classList.contains('dark')) ? 1 : 0); - const noninterrupting_preanim = ((document.getElementById('check_nonint').checked) ? 1 : 0); - const looping_sfx = ((document.getElementById('check_loopsfx').checked) ? 1 : 0); - const color = document.getElementById('textcolor').value; - const showname = document.getElementById('ic_chat_name').value; - const text = document.getElementById('client_inputbox').value; - const pairchar = document.getElementById('pair_select').value; - const pairoffset = document.getElementById('pair_offset').value; - const pairyoffset = document.getElementById('pair_y_offset').value; - const myrole = document.getElementById('role_select').value ? document.getElementById('role_select').value : mychar.side; - const additive = ((document.getElementById('check_additive').checked) ? 1 : 0); - const effect = document.getElementById('effect_select').value; + const noninterrupting_preanim = (((<HTMLInputElement>document.getElementById('check_nonint')).checked) ? 1 : 0); + const looping_sfx = (((<HTMLInputElement>document.getElementById('check_loopsfx')).checked) ? 1 : 0); + const color = (<HTMLInputElement>document.getElementById('textcolor')).value; + const showname = (<HTMLInputElement>document.getElementById('ic_chat_name')).value; + const text = (<HTMLInputElement>document.getElementById('client_inputbox')).value; + const pairchar = (<HTMLInputElement>document.getElementById('pair_select')).value; + const pairoffset = (<HTMLInputElement>document.getElementById('pair_offset')).value; + const pairyoffset = (<HTMLInputElement>document.getElementById('pair_y_offset')).value; + const myrole = (<HTMLInputElement>document.getElementById('role_select')).value ? (<HTMLInputElement>document.getElementById('role_select')).value : mychar.side; + const additive = (((<HTMLInputElement>document.getElementById('check_additive')).checked) ? 1 : 0); + const effect = (<HTMLInputElement>document.getElementById('effect_select')).value; let sfxname = '0'; let sfxdelay = 0; let emote_mod = myemo.zoom; - if (document.getElementById('sendsfx').checked) { + if ((<HTMLInputElement>document.getElementById('sendsfx')).checked) { sfxname = myemo.sfx; sfxdelay = myemo.sfxdelay; } // not to overwrite a 5 from the ini or anything else - if (document.getElementById('sendpreanim').checked) { + if ((<HTMLInputElement>document.getElementById('sendpreanim')).checked) { if (emote_mod === 0) { emote_mod = 1; } } else if (emote_mod === 1) { emote_mod = 0; } @@ -2424,11 +2522,11 @@ window.onEnter = onEnter; * was successfully sent/presented. */ function resetICParams() { - document.getElementById('client_inputbox').value = ''; + (<HTMLInputElement>document.getElementById('client_inputbox')).value = ''; document.getElementById('button_flash').className = 'client_button'; document.getElementById('button_shake').className = 'client_button'; - document.getElementById('sendpreanim').checked = false; + (<HTMLInputElement>document.getElementById('sendpreanim')).checked = false; if (selectedShout) { document.getElementById(`button_${selectedShout}`).className = 'client_button'; @@ -2437,8 +2535,8 @@ function resetICParams() { } export function resetOffset(_event) { - document.getElementById('pair_offset').value = 0; - document.getElementById('pair_y_offset').value = 0; + (<HTMLInputElement>document.getElementById('pair_offset')).value = '0'; + (<HTMLInputElement>document.getElementById('pair_y_offset')).value = '0'; } window.resetOffset = resetOffset; @@ -2447,14 +2545,14 @@ window.resetOffset = resetOffset; * @param {MouseEvent} event */ export function musiclist_filter(_event) { - const musiclist_element = document.getElementById('client_musiclist'); - const searchname = document.getElementById('client_musicsearch').value; + const musiclist_element = <HTMLSelectElement>document.getElementById('client_musiclist'); + const searchname = (<HTMLInputElement>document.getElementById('client_musicsearch')).value; musiclist_element.innerHTML = ''; for (const trackname of client.musics) { if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) { - const newentry = document.createElement('OPTION'); + const newentry = <HTMLOptionElement>document.createElement('OPTION'); newentry.text = trackname; musiclist_element.options.add(newentry); } @@ -2467,12 +2565,12 @@ window.musiclist_filter = musiclist_filter; * @param {MouseEvent} event */ export function musiclist_click(_event) { - const playtrack = document.getElementById('client_musiclist').value; + const playtrack = (<HTMLInputElement>document.getElementById('client_musiclist')).value; client.sendMusicChange(playtrack); // This is here so you can't actually select multiple tracks, // even though the select tag has the multiple option to render differently - const musiclist_elements = document.getElementById('client_musiclist').selectedOptions; + const musiclist_elements = (<HTMLSelectElement>document.getElementById('client_musiclist')).selectedOptions; for (let i = 0; i < musiclist_elements.length; i++) { musiclist_elements[i].selected = false; } @@ -2484,7 +2582,7 @@ window.musiclist_click = musiclist_click; * @param {MouseEvent} event */ export function mutelist_click(_event) { - const mutelist = document.getElementById('mute_select'); + const mutelist = <HTMLSelectElement>document.getElementById('mute_select'); const selected_character = mutelist.options[mutelist.selectedIndex]; if (client.chars[selected_character.value].muted === false) { @@ -2503,12 +2601,12 @@ window.mutelist_click = mutelist_click; * @param {MouseEvent} event */ export function showname_click(_event) { - setCookie('showname', document.getElementById('showname').checked); - setCookie('ic_chat_name', document.getElementById('ic_chat_name').value); + setCookie('showname', String((<HTMLInputElement>document.getElementById('showname')).checked)); + setCookie('ic_chat_name', (<HTMLInputElement>document.getElementById('ic_chat_name')).value); - const css_s = document.getElementById('nameplate_setting'); + const css_s = <HTMLAnchorElement>document.getElementById('nameplate_setting'); - if (document.getElementById('showname').checked) { css_s.href = 'styles/shownames.css'; } else { css_s.href = 'styles/nameplates.css'; } + if ((<HTMLInputElement>document.getElementById('showname')).checked) { css_s.href = 'styles/shownames.css'; } else { css_s.href = 'styles/nameplates.css'; } } window.showname_click = showname_click; @@ -2531,26 +2629,18 @@ window.area_click = area_click; * Triggered by the music volume slider. */ export function changeMusicVolume() { - viewport.musicVolume = document.getElementById('client_mvolume').value; - setCookie('musicVolume', document.getElementById('client_mvolume').value); + viewport.musicVolume = (<HTMLInputElement>document.getElementById('client_mvolume')).value; + setCookie('musicVolume', viewport.musicVolume); } window.changeMusicVolume = changeMusicVolume; /** - * Triggered by the testimony volume slider. - */ -export function changeTestimonyVolume() { - setCookie('testimonyVolume', document.getElementById('client_testimonyaudio').volume); -} -window.changeTestimonyVolume = changeTestimonyVolume; - -/** * Triggered by the blip volume slider. */ export function changeBlipVolume() { - const blipVolume = document.getElementById('client_bvolume').value; + const blipVolume = (<HTMLInputElement>document.getElementById('client_bvolume')).value; viewport.blipChannels.forEach((channel) => channel.volume = blipVolume); - setCookie('blipVolume', document.getElementById('client_bvolume').value); + setCookie('blipVolume', blipVolume); } window.changeBlipVolume = changeBlipVolume; @@ -2558,9 +2648,9 @@ window.changeBlipVolume = changeBlipVolume; * Triggered by the theme selector. */ export function reloadTheme() { - viewport.theme = document.getElementById('client_themeselect').value; + viewport.theme = (<HTMLSelectElement>document.getElementById('client_themeselect')).value; setCookie('theme', viewport.theme); - document.getElementById('client_theme').href = `styles/${viewport.theme}.css`; + (<HTMLAnchorElement>document.getElementById('client_theme')).href = `styles/${viewport.theme}.css`; } window.reloadTheme = reloadTheme; @@ -2568,7 +2658,7 @@ window.reloadTheme = reloadTheme; * Triggered by a changed callword list */ export function changeCallwords() { - client.callwords = document.getElementById('client_callwords').value.split('\n'); + client.callwords = (<HTMLInputElement>document.getElementById('client_callwords')).value.split('\n'); setCookie('callwords', client.callwords); } window.changeCallwords = changeCallwords; @@ -2585,7 +2675,7 @@ window.modcall_test = modcall_test; * Triggered by the ini button. */ export async function iniedit() { - const ininame = document.getElementById('client_ininame').value; + const ininame = (<HTMLInputElement>document.getElementById('client_ininame')).value; const inicharID = client.charID; await client.handleCharacterInfo(ininame.split('&'), inicharID); client.handlePV((`PV#0#CID#${inicharID}`).split('#')); @@ -2598,13 +2688,13 @@ window.iniedit = iniedit; export async function switchPanTilt(addcheck) { const background = document.getElementById('client_fullview'); if (addcheck === 1) { - document.getElementById('client_pantilt').checked = true; + (<HTMLInputElement>document.getElementById('client_pantilt')).checked = true; document.getElementById('client_court').style.display = ''; } else if (addcheck === 2) { - document.getElementById('client_pantilt').checked = false; + (<HTMLInputElement>document.getElementById('client_pantilt')).checked = false; document.getElementById('client_court').style.display = 'none'; } - if (document.getElementById('client_pantilt').checked) { + if ((<HTMLInputElement>document.getElementById('client_pantilt')).checked) { background.style.transition = '0.5s ease-in-out'; } else { background.style.transition = 'none'; @@ -2617,8 +2707,8 @@ window.switchPanTilt = switchPanTilt; */ export async function switchAspectRatio() { const background = document.getElementById('client_background'); - const offsetCheck = document.getElementById('client_hdviewport_offset'); - if (document.getElementById('client_hdviewport').checked) { + const offsetCheck = <HTMLInputElement>document.getElementById('client_hdviewport_offset'); + if ((<HTMLInputElement>document.getElementById('client_hdviewport')).checked) { background.style.paddingBottom = '56.25%'; offsetCheck.disabled = false; } else { @@ -2633,12 +2723,12 @@ window.switchAspectRatio = switchAspectRatio; */ export async function switchChatOffset() { const container = document.getElementById('client_chatcontainer'); - if (document.getElementById('client_hdviewport_offset').checked) { + if ((<HTMLInputElement>document.getElementById('client_hdviewport_offset')).checked) { container.style.width = '80%'; container.style.left = '10%'; } else { container.style.width = '100%'; - container.style.left = 0; + container.style.left = '0'; } } window.switchChatOffset = switchChatOffset; @@ -2677,7 +2767,7 @@ window.imgError = imgError; /** * Triggered when there was an error loading a sound - * @param {HTMLImageElement} image the element containing the missing sound + * @param {HTMLAudioElement} image the element containing the missing sound */ export function opusCheck(channel) { const audio = channel.src @@ -2686,6 +2776,7 @@ export function opusCheck(channel) { } console.info(`failed to load sound ${channel.src}`); let oldsrc = ''; + let newsrc = ''; oldsrc = channel.src; if (!oldsrc.endsWith('.opus')) { newsrc = oldsrc.replace('.mp3', '.opus'); @@ -2719,10 +2810,10 @@ function appendICLog(msg, showname = '', nameplate = '', time = new Date()) { const shownameField = document.createElement('span'); const nameplateField = document.createElement('span'); const textField = document.createElement('span'); - nameplateField.classList = 'iclog_name iclog_nameplate'; + nameplateField.className = 'iclog_name iclog_nameplate'; nameplateField.appendChild(document.createTextNode(nameplate)); - shownameField.classList = 'iclog_name iclog_showname'; + shownameField.className = 'iclog_name iclog_showname'; if (showname === '' || !showname) { shownameField.appendChild(document.createTextNode(nameplate)); } else { shownameField.appendChild(document.createTextNode(showname)); } textField.className = 'iclog_text'; @@ -2756,7 +2847,7 @@ function appendICLog(msg, showname = '', nameplate = '', time = new Date()) { /** * check if the message contains an entry on our callword list - * @param {String} message + * @param {string} message */ export function checkCallword(message) { client.callwords.forEach(testCallword); @@ -2775,7 +2866,7 @@ export function checkCallword(message) { * @param {MouseEvent} event */ export function chartable_filter(_event) { - const searchname = document.getElementById('client_charactersearch').value; + const searchname = (<HTMLInputElement>document.getElementById('client_charactersearch')).value; client.chars.forEach((character, charid) => { const demothing = document.getElementById(`demo_${charid}`); @@ -2810,17 +2901,17 @@ window.pickChar = pickChar; export function pickEmotion(emo) { try { if (client.selectedEmote !== -1) { - document.getElementById(`emo_${client.selectedEmote}`).classList = 'emote_button'; + document.getElementById(`emo_${client.selectedEmote}`).className = 'emote_button'; } } catch (err) { - // do nothing + // do nothing } client.selectedEmote = emo; - document.getElementById(`emo_${emo}`).classList = 'emote_button dark'; + document.getElementById(`emo_${emo}`).className = 'emote_button dark'; - document.getElementById('sendsfx').checked = (client.emote.sfx.length > 1); + (<HTMLInputElement>document.getElementById('sendsfx')).checked = (client.emote.sfx.length > 1); - document.getElementById('sendpreanim').checked = (client.emote.zoom == 1); + (<HTMLInputElement>document.getElementById('sendpreanim')).checked = (client.emote.zoom == 1); } window.pickEmotion = pickEmotion; @@ -2828,8 +2919,7 @@ window.pickEmotion = pickEmotion; * Highlights and selects an evidence for in-character chat. * @param {string} evidence the evidence to be presented */ -export function pickEvidence(evidenceID) { - const evidence = Number(evidenceID); +export function pickEvidence(evidence: number) { if (client.selectedEvidence !== evidence) { // Update selected evidence if (client.selectedEvidence > 0) { @@ -2839,14 +2929,14 @@ export function pickEvidence(evidenceID) { client.selectedEvidence = evidence; // Show evidence on information window - document.getElementById('evi_name').value = client.evidences[evidence - 1].name; - document.getElementById('evi_desc').value = client.evidences[evidence - 1].desc; + (<HTMLInputElement>document.getElementById('evi_name')).value = client.evidences[evidence - 1].name; + (<HTMLInputElement>document.getElementById('evi_desc')).value = client.evidences[evidence - 1].desc; // Update icon const icon_id = getIndexFromSelect('evi_select', client.evidences[evidence - 1].filename); - document.getElementById('evi_select').selectedIndex = icon_id; + (<HTMLSelectElement>document.getElementById('evi_select')).selectedIndex = icon_id; if (icon_id === 0) { - document.getElementById('evi_filename').value = client.evidences[evidence - 1].filename; + (<HTMLInputElement>document.getElementById('evi_filename')).value = client.evidences[evidence - 1].filename; } updateEvidenceIcon(); @@ -2865,12 +2955,12 @@ window.pickEvidence = pickEvidence; * Add evidence. */ export function addEvidence() { - const evidence_select = document.getElementById('evi_select'); + const evidence_select = <HTMLSelectElement>document.getElementById('evi_select'); client.sendPE( - document.getElementById('evi_name').value, - document.getElementById('evi_desc').value, + (<HTMLInputElement>document.getElementById('evi_name')).value, + (<HTMLInputElement>document.getElementById('evi_desc')).value, evidence_select.selectedIndex === 0 - ? document.getElementById('evi_filename').value + ? (<HTMLInputElement>document.getElementById('evi_filename')).value : evidence_select.options[evidence_select.selectedIndex].text, ); cancelEvidence(); @@ -2881,14 +2971,14 @@ window.addEvidence = addEvidence; * Edit selected evidence. */ export function editEvidence() { - const evidence_select = document.getElementById('evi_select'); + const evidence_select = <HTMLSelectElement>document.getElementById('evi_select'); const id = parseInt(client.selectedEvidence) - 1; client.sendEE( id, - document.getElementById('evi_name').value, - document.getElementById('evi_desc').value, + (<HTMLInputElement>document.getElementById('evi_name')).value, + (<HTMLInputElement>document.getElementById('evi_desc')).value, evidence_select.selectedIndex === 0 - ? document.getElementById('evi_filename').value + ? (<HTMLInputElement>document.getElementById('evi_filename')).value : evidence_select.options[evidence_select.selectedIndex].text, ); cancelEvidence(); @@ -2916,12 +3006,12 @@ export function cancelEvidence() { client.selectedEvidence = 0; // Clear evidence on information window - document.getElementById('evi_select').selectedIndex = 0; + (<HTMLSelectElement>document.getElementById('evi_select')).selectedIndex = 0; updateEvidenceIcon(); // Update icon widget - document.getElementById('evi_filename').value = ''; - document.getElementById('evi_name').value = ''; - document.getElementById('evi_desc').value = ''; - document.getElementById('evi_preview').src = `${AO_HOST}misc/empty.png`; // Clear icon + (<HTMLInputElement>document.getElementById('evi_filename')).value = ''; + (<HTMLInputElement>document.getElementById('evi_name')).value = ''; + (<HTMLInputElement>document.getElementById('evi_desc')).value = ''; + (<HTMLImageElement>document.getElementById('evi_preview')).src = `${AO_HOST}misc/empty.png`; // Clear icon // Update button document.getElementById('evi_add').className = 'client_button hover_button'; @@ -2936,9 +3026,9 @@ window.cancelEvidence = cancelEvidence; * @param {string} select_box the select element name * @param {string} value the value that need to be compared */ -export function getIndexFromSelect(select_box, value) { +export function getIndexFromSelect(select_box: string, value: string) { // Find if icon alraedy existed in select box - const select_element = document.getElementById(select_box); + const select_element = <HTMLSelectElement>document.getElementById(select_box); for (let i = 1; i < select_element.length; ++i) { if (select_element.options[i].value === value) { return i; @@ -2951,9 +3041,11 @@ window.getIndexFromSelect = getIndexFromSelect; /** * Set the style of the chatbox */ -export function setChatbox(style) { - const chatbox_theme = document.getElementById('chatbox_theme'); - const selected_theme = document.getElementById('client_chatboxselect').value; +export function setChatbox(style: string) { + const chatbox_theme = <HTMLAnchorElement>document.getElementById('chatbox_theme'); + const themeselect = <HTMLSelectElement>document.getElementById('client_chatboxselect'); + const selected_theme = themeselect.value; + setCookie('chatbox', selected_theme); if (selected_theme === 'dynamic') { if (chatbox_arr.includes(style)) { @@ -2982,9 +3074,9 @@ window.resizeChatbox = resizeChatbox; * Update evidence icon. */ export function updateEvidenceIcon() { - const evidence_select = document.getElementById('evi_select'); - const evidence_filename = document.getElementById('evi_filename'); - const evidence_iconbox = document.getElementById('evi_preview'); + const evidence_select = <HTMLSelectElement>document.getElementById('evi_select'); + const evidence_filename = <HTMLInputElement>document.getElementById('evi_filename'); + const evidence_iconbox = <HTMLImageElement>document.getElementById('evi_preview'); if (evidence_select.selectedIndex === 0) { evidence_filename.style.display = 'initial'; @@ -2999,7 +3091,7 @@ window.updateEvidenceIcon = updateEvidenceIcon; /** * Update evidence icon. */ -export function updateActionCommands(side) { +export function updateActionCommands(side: string) { if (side === 'jud') { document.getElementById('judge_action').style.display = 'inline-table'; document.getElementById('no_action').style.display = 'none'; @@ -3009,9 +3101,9 @@ export function updateActionCommands(side) { } // Update role selector - for (let i = 0, role_select = document.getElementById('role_select').options; i < role_select.length; i++) { - if (side === role_select[i].value) { - role_select.selectedIndex = i; + for (let i = 0, role_select = <HTMLSelectElement>document.getElementById('role_select'); i < role_select.options.length; i++) { + if (side === role_select.options[i].value) { + role_select.options.selectedIndex = i; return; } } @@ -3022,9 +3114,9 @@ window.updateActionCommands = updateActionCommands; * Change background via OOC. */ export function changeBackgroundOOC() { - const selectedBG = document.getElementById('bg_select'); + const selectedBG = <HTMLSelectElement>document.getElementById('bg_select'); const changeBGCommand = "bg $1"; - const bgFilename = document.getElementById('bg_filename'); + const bgFilename = <HTMLInputElement>document.getElementById('bg_filename'); let filename = ''; if (selectedBG.selectedIndex === 0) { @@ -3041,11 +3133,11 @@ window.changeBackgroundOOC = changeBackgroundOOC; * Change role via OOC. */ export function changeRoleOOC() { - const new_role = document.getElementById('role_select').value; + const roleselect = <HTMLInputElement>document.getElementById('role_select'); - client.sendOOC(`/pos ${new_role}`); - client.sendServer(`SP#${new_role}#%`); - updateActionCommands(new_role); + client.sendOOC(`/pos ${roleselect.value}`); + client.sendServer(`SP#${roleselect.value}#%`); + updateActionCommands(roleselect.value); } window.changeRoleOOC = changeRoleOOC; @@ -3141,9 +3233,9 @@ window.redHPP = redHPP; * Update background preview. */ export function updateBackgroundPreview() { - const background_select = document.getElementById('bg_select'); - const background_filename = document.getElementById('bg_filename'); - const background_preview = document.getElementById('bg_preview'); + const background_select = <HTMLSelectElement>document.getElementById('bg_select'); + const background_filename = <HTMLInputElement>document.getElementById('bg_filename'); + const background_preview = <HTMLImageElement>document.getElementById('bg_preview'); if (background_select.selectedIndex === 0) { background_filename.style.display = 'initial'; @@ -3157,9 +3249,9 @@ window.updateBackgroundPreview = updateBackgroundPreview; /** * Highlights and selects a menu. - * @param {string} menu the menu to be selected + * @param {number} menu the menu to be selected */ -export function toggleMenu(menu) { +export function toggleMenu(menu: number) { if (menu !== selectedMenu) { document.getElementById(`menu_${menu}`).className = 'menu_button active'; document.getElementById(`content_${menu}`).className = 'menu_content active'; @@ -3173,9 +3265,9 @@ window.toggleMenu = toggleMenu; /** * Highlights and selects a shout for in-character chat. * If the same shout button is selected, then the shout is canceled. - * @param {string} shout the new shout to be selected + * @param {number} shout the new shout to be selected */ -export function toggleShout(shout) { +export function toggleShout(shout: number) { if (shout === selectedShout) { document.getElementById(`button_${shout}`).className = 'client_button'; selectedShout = 0; diff --git a/webAO/dom/changeVolume.js b/webAO/dom/changeVolume.js index 4ef3027..0f7d47e 100644 --- a/webAO/dom/changeVolume.js +++ b/webAO/dom/changeVolume.js @@ -10,6 +10,14 @@ export function changeSFXVolume() { window.changeSFXVolume = changeSFXVolume; /** + * Triggered by the testimony volume slider. + */ + export function changeTestimonyVolume() { + setCookie('testimonyVolume', document.getElementById('client_testimonyaudio').volume); +} +window.changeTestimonyVolume = changeTestimonyVolume; + +/** * Triggered by the shout volume slider. */ diff --git a/webpack.config.js b/webpack.config.js index 07bca15..c12a11b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,7 @@ dotenv.config(); module.exports = { entry: { ui: './webAO/ui.js', - client: './webAO/client.js', + client: './webAO/client.ts', master: './webAO/master.ts', dom: glob.sync('./webAO/dom/*.js'), components: glob.sync('./webAO/components/*.js'), |