From 1296cecb0690bbe70c109693625cb424297a0b40 Mon Sep 17 00:00:00 2001 From: "caleb.mabry.15@cnu.edu" Date: Sat, 12 Mar 2022 22:06:52 -0500 Subject: Removing console logs adding function for different char icons --- webAO/client.js | 29 +++++++++++++++++++++++------ webAO/utils/calculateApngLength.js | 1 - webAO/utils/fileExists.js | 25 ++++++++++++++++++++----- 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 2c1a831..0c7c4b6 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -780,13 +780,28 @@ class Client extends EventEmitter { async handleCharacterInfo(chargs, charid) { if (chargs[0]) { let cini = {}; - const cswap = {}; - const icon = `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char_icon.png`; + const getCharIcon = async () => { + const extensions = [ + '.png', + '.webp', + ]; + const charIconBaseUrl = `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char_icon`; + for (let i = 0; i < extensions.length; i++) { + const fileUrl = charIconBaseUrl + extensions[i]; + const exists = await fileExists(fileUrl); + if (exists) { + return fileUrl + } + } + return transparentPNG + }; + const charIconUrlResponse = await getCharIcon(); + const icon = charIconUrlResponse || transparentPNG; const img = document.getElementById(`demo_${charid}`); img.alt = chargs[0]; img.src = icon; // seems like a good time to load the icon - + // If the ini doesn't exist on the server this will throw an error try { const cinidata = await request(`${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char.ini`); @@ -853,12 +868,13 @@ class Client extends EventEmitter { */ handleCI(args) { // Loop through the 10 characters that were sent + for (let i = 2; i <= args.length - 2; i++) { if (i % 2 === 0) { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = args[i - 1]; - setTimeout(() => this.handleCharacterInfo(chargs, charid), charid * 10); + setTimeout(() => this.handleCharacterInfo(chargs, charid), 500) } } // Request the next pack @@ -870,13 +886,14 @@ class Client extends EventEmitter { * in one packet. * @param {Array} args packet arguments */ - handleSC(args) { + async handleSC(args) { document.getElementById('client_loadingtext').innerHTML = 'Loading Characters'; for (let i = 1; i < args.length; i++) { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = i - 1; - setTimeout(() => this.handleCharacterInfo(chargs, charid), charid * 10); + + this.handleCharacterInfo(chargs, charid) } // We're done with the characters, request the music this.sendServer('RM#%'); diff --git a/webAO/utils/calculateApngLength.js b/webAO/utils/calculateApngLength.js index bc6b3fa..86c2073 100644 --- a/webAO/utils/calculateApngLength.js +++ b/webAO/utils/calculateApngLength.js @@ -12,7 +12,6 @@ const calculateApngLength = (apngFile) => { && d[i + 1] === 0x63 && d[i + 2] === 0x54 && d[i + 3] === 0x4C) { - console.log("found apng header"); // numerator and denominator let delay = ((d[i + 21] / d[i + 23]) * 1000) diff --git a/webAO/utils/fileExists.js b/webAO/utils/fileExists.js index 6d32a1e..3065112 100644 --- a/webAO/utils/fileExists.js +++ b/webAO/utils/fileExists.js @@ -1,8 +1,23 @@ -const fileExists = async (url) => { - const xhr = new XMLHttpRequest(); - xhr.open('HEAD', url, false); - xhr.send(); - return xhr.status === 200; +const fileExists = async (url) => { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('HEAD', url); + xhr.onload = function (e) { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + resolve(true) + } else { + reject(false) + } + } + }; + xhr.onerror = function (e) { + resolve(false) + }; + xhr.send(null); + }) + + }; export default fileExists; -- cgit From 39da04dc796b635b43879d285bc9d2c2aabc8761 Mon Sep 17 00:00:00 2001 From: "caleb.mabry.15@cnu.edu" Date: Sat, 12 Mar 2022 22:07:48 -0500 Subject: Lint --- webAO/client.js | 18 ++-- webAO/client/setEmote.js | 4 +- webAO/master.js | 176 ++++++++++++++++++------------------- webAO/utils/calculateApngLength.js | 28 +++--- webAO/utils/fileExists.js | 37 ++++---- webAO/utils/getAnimLength.js | 2 +- 6 files changed, 130 insertions(+), 135 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 0c7c4b6..e07c7e9 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -21,7 +21,7 @@ import chatbox_arr from './styles/chatbox/chatboxes.js'; import iniParse from './iniParse'; import getCookie from './utils/getCookie.js'; import setCookie from './utils/setCookie.js'; -import {request} from './services/request.js'; +import { request } from './services/request.js'; import { changeShoutVolume, changeSFXVolume } from './dom/changeVolume.js'; import setEmote from './client/setEmote.js'; import fileExists from './utils/fileExists.js'; @@ -790,10 +790,10 @@ class Client extends EventEmitter { const fileUrl = charIconBaseUrl + extensions[i]; const exists = await fileExists(fileUrl); if (exists) { - return fileUrl + return fileUrl; } } - return transparentPNG + return transparentPNG; }; const charIconUrlResponse = await getCharIcon(); @@ -801,7 +801,7 @@ class Client extends EventEmitter { const img = document.getElementById(`demo_${charid}`); img.alt = chargs[0]; img.src = icon; // seems like a good time to load the icon - + // If the ini doesn't exist on the server this will throw an error try { const cinidata = await request(`${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char.ini`); @@ -874,7 +874,7 @@ class Client extends EventEmitter { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = args[i - 1]; - setTimeout(() => this.handleCharacterInfo(chargs, charid), 500) + setTimeout(() => this.handleCharacterInfo(chargs, charid), 500); } } // Request the next pack @@ -892,8 +892,8 @@ class Client extends EventEmitter { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = i - 1; - - this.handleCharacterInfo(chargs, charid) + + this.handleCharacterInfo(chargs, charid); } // We're done with the characters, request the music this.sendServer('RM#%'); @@ -1542,7 +1542,7 @@ class Client extends EventEmitter { esfxd = 0; } // Make sure the asset server is case insensitive, or that everything on it is lowercase - + emotes[i] = { desc: emoteinfo[0].toLowerCase(), preanim: emoteinfo[1].toLowerCase(), @@ -1553,7 +1553,7 @@ class Client extends EventEmitter { frame_screenshake: '', frame_realization: '', frame_sfx: '', - button: `${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/emotions/button${i}_off.png`, + button: `${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/emotions/button${i}_off.png`, }; emotesList.innerHTML += ` { hdid = result.visitorId; - check_https(); - - fetch("https://servers.aceattorneyonline.com/servers") + check_https(); + + fetch('https://servers.aceattorneyonline.com/servers') .then(cachedServerlist) - .then(response => loadServerlist(response)) + .then((response) => loadServerlist(response)) .catch(cachedServerlist); - fetch("https://servers.aceattorneyonline.com/version") - .then(response => response.text()) - .then(response => processVersion(response)); + fetch('https://servers.aceattorneyonline.com/version') + .then((response) => response.text()) + .then((response) => processVersion(response)); - // i don't need the ms to play alone - setTimeout(() => checkOnline(-1, '127.0.0.1:50001'), 0); -}); + // i don't need the ms to play alone + setTimeout(() => checkOnline(-1, '127.0.0.1:50001'), 0); + }); export function check_https() { - if (document.location.protocol === 'https:') { + if (document.location.protocol === 'https:') { document.getElementById('https_error').style.display = ''; - } + } } export function setServ(ID) { - selectedServer = ID; + selectedServer = ID; - if (document.getElementById(`server${ID}`).className === '') { checkOnline(ID, `${servers[ID].ip}:${servers[ID].ws_port}`); } + if (document.getElementById(`server${ID}`).className === '') { checkOnline(ID, `${servers[ID].ip}:${servers[ID].ws_port}`); } - if (servers[ID].description !== undefined) { - document.getElementById('serverdescription_content').innerHTML = `${servers[ID].online}
${safeTags(servers[ID].description)}`; - } else { - document.getElementById('serverdescription_content').innerHTML = ''; - } + if (servers[ID].description !== undefined) { + document.getElementById('serverdescription_content').innerHTML = `${servers[ID].online}
${safeTags(servers[ID].description)}`; + } else { + document.getElementById('serverdescription_content').innerHTML = ''; + } } window.setServ = setServ; function checkOnline(serverID, coIP) { - let oserv; - if (serverID !== -2) { - try { - oserv = new WebSocket(`ws://${coIP}`); - } catch (SecurityError) { - document.getElementById(`server${serverID}`).className = 'unavailable'; - return; - } - } - - // define what the callbacks do - function onCOOpen(_e) { - document.getElementById(`server${serverID}`).className = 'available'; - oserv.send(`HI#${hdid}#%`); - oserv.send('ID#webAO#webAO#%'); - } - - function onCOMessage(e) { - const comsg = e.data; - const coheader = comsg.split('#', 2)[0]; - const coarguments = comsg.split('#').slice(1); - if (coheader === 'PN') { - servers[serverID].online = `Online: ${Number(coarguments[0])}/${Number(coarguments[1])}`; - oserv.close(); - return; - } else if (coheader === 'BD') { - servers[serverID].online = 'Banned'; - servers[serverID].description = coarguments[0]; - oserv.close(); - return; - } - if (serverID === selectedServer) { - document.getElementById('serverdescription_content').innerHTML = `${servers[serverID].online}
${safeTags(servers[serverID].description)}`; - } - } - - // assign the callbacks - oserv.onopen = function (evt) { - onCOOpen(evt); - }; - - oserv.onmessage = function (evt) { - onCOMessage(evt); - }; - - oserv.onerror = function (_evt) { - document.getElementById(`server${serverID}`).className = 'unavailable'; - }; + let oserv; + if (serverID !== -2) { + try { + oserv = new WebSocket(`ws://${coIP}`); + } catch (SecurityError) { + document.getElementById(`server${serverID}`).className = 'unavailable'; + return; + } + } + + // define what the callbacks do + function onCOOpen(_e) { + document.getElementById(`server${serverID}`).className = 'available'; + oserv.send(`HI#${hdid}#%`); + oserv.send('ID#webAO#webAO#%'); + } + + function onCOMessage(e) { + const comsg = e.data; + const coheader = comsg.split('#', 2)[0]; + const coarguments = comsg.split('#').slice(1); + if (coheader === 'PN') { + servers[serverID].online = `Online: ${Number(coarguments[0])}/${Number(coarguments[1])}`; + oserv.close(); + return; + } if (coheader === 'BD') { + servers[serverID].online = 'Banned'; + servers[serverID].description = coarguments[0]; + oserv.close(); + return; + } + if (serverID === selectedServer) { + document.getElementById('serverdescription_content').innerHTML = `${servers[serverID].online}
${safeTags(servers[serverID].description)}`; + } + } + + // assign the callbacks + oserv.onopen = function (evt) { + onCOOpen(evt); + }; + + oserv.onmessage = function (evt) { + onCOMessage(evt); + }; + + oserv.onerror = function (_evt) { + document.getElementById(`server${serverID}`).className = 'unavailable'; + }; } function loadServerlist(thelist) { - localStorage.setItem('masterlist', JSON.stringify(thelist)); - processServerlist(thelist) + localStorage.setItem('masterlist', JSON.stringify(thelist)); + processServerlist(thelist); } function cachedServerlist(response) { - if (!response.ok) { - document.getElementById('ms_error').style.display = 'block'; - processServerlist(JSON.parse(localStorage.getItem('masterlist'))); - return; - } - return response.json(); + if (!response.ok) { + document.getElementById('ms_error').style.display = 'block'; + processServerlist(JSON.parse(localStorage.getItem('masterlist'))); + return; + } + return response.json(); } function processServerlist(thelist) { - for (let i = 0; i < thelist.length - 1; i++) { - const serverEntry = thelist[i]; + for (let i = 0; i < thelist.length - 1; i++) { + const serverEntry = thelist[i]; - servers[i] = serverEntry; + servers[i] = serverEntry; - const ipport = serverEntry.ip + ":" + serverEntry.ws_port; + const ipport = `${serverEntry.ip}:${serverEntry.ws_port}`; - if (serverEntry.ws_port) { - document.getElementById("masterlist").innerHTML += - `

  • ${safeTags(serverEntry.name)}

    ` + if (serverEntry.ws_port) { + document.getElementById('masterlist').innerHTML + += `

  • ${safeTags(serverEntry.name)}

    ` + `Watch` + `Join
    • `; - } - } - return; + } + } } function processVersion(data) { - console.debug(data); - document.getElementById("clientinfo").innerHTML = `Client version: ${version}`; - document.getElementById("serverinfo").innerHTML = `Master server version: ${data}`; + console.debug(data); + document.getElementById('clientinfo').innerHTML = `Client version: ${version}`; + document.getElementById('serverinfo').innerHTML = `Master server version: ${data}`; } diff --git a/webAO/utils/calculateApngLength.js b/webAO/utils/calculateApngLength.js index 86c2073..932f581 100644 --- a/webAO/utils/calculateApngLength.js +++ b/webAO/utils/calculateApngLength.js @@ -1,25 +1,25 @@ - /** +/** * Adds up the chunk delays to find out how long a APNG is * @param {data} apngFile the APNG data */ const calculateApngLength = (apngFile) => { const d = new Uint8Array(apngFile); - // https://wiki.mozilla.org/APNG_Specification#.60fcTL.60:_The_Frame_Control_Chunk - let duration = 0; - for (var i = 0; i < d.length; i++) { - // Find fcTL header (66 63 54 4C) - if (d[i] === 0x66 + // https://wiki.mozilla.org/APNG_Specification#.60fcTL.60:_The_Frame_Control_Chunk + let duration = 0; + for (let i = 0; i < d.length; i++) { + // Find fcTL header (66 63 54 4C) + if (d[i] === 0x66 && d[i + 1] === 0x63 && d[i + 2] === 0x54 && d[i + 3] === 0x4C) { - // numerator and denominator - let delay = ((d[i + 21] / d[i + 23]) * 1000) + // numerator and denominator + const delay = ((d[i + 21] / d[i + 23]) * 1000); - // minimum is 100ms - duration += delay < 100 ? 100 : delay; - } - } - console.debug(duration); - return duration * 10; + // minimum is 100ms + duration += delay < 100 ? 100 : delay; + } + } + console.debug(duration); + return duration * 10; }; export default calculateApngLength; diff --git a/webAO/utils/fileExists.js b/webAO/utils/fileExists.js index 3065112..13958e0 100644 --- a/webAO/utils/fileExists.js +++ b/webAO/utils/fileExists.js @@ -1,23 +1,18 @@ - -const fileExists = async (url) => { - return new Promise((resolve, reject) => { - const xhr = new XMLHttpRequest(); - xhr.open('HEAD', url); - xhr.onload = function (e) { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - resolve(true) - } else { - reject(false) - } +const fileExists = async (url) => new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('HEAD', url); + xhr.onload = function (e) { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + resolve(true); + } else { + reject(false); } - }; - xhr.onerror = function (e) { - resolve(false) - }; - xhr.send(null); - }) - - -}; + } + }; + xhr.onerror = function (e) { + resolve(false); + }; + xhr.send(null); +}); export default fileExists; diff --git a/webAO/utils/getAnimLength.js b/webAO/utils/getAnimLength.js index 1441548..aa303cf 100644 --- a/webAO/utils/getAnimLength.js +++ b/webAO/utils/getAnimLength.js @@ -1,6 +1,6 @@ import calculatorHandler from './calculatorHandler'; import fileExists from './fileExists.js'; -import {requestBuffer} from '../services/request.js'; +import { requestBuffer } from '../services/request.js'; /** * Gets animation length. If the animation cannot be found, it will * silently fail and return 0 instead. -- cgit From af6b6a6d5cbf669024d88146ca5913a0676e4368 Mon Sep 17 00:00:00 2001 From: "caleb.mabry.15@cnu.edu" Date: Sun, 13 Mar 2022 01:29:10 -0500 Subject: Resolve too many network calls --- webAO/client.js | 25 +++++++++++++++---------- webAO/utils/fileExists.js | 2 +- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index e07c7e9..36e2555 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -778,29 +778,28 @@ class Client extends EventEmitter { * @param {Number} charid character ID */ async handleCharacterInfo(chargs, charid) { + if (chargs[0]) { let cini = {}; + const img = document.getElementById(`demo_${charid}`); const getCharIcon = async () => { const extensions = [ '.png', '.webp', ]; + img.alt = chargs[0] const charIconBaseUrl = `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char_icon`; for (let i = 0; i < extensions.length; i++) { const fileUrl = charIconBaseUrl + extensions[i]; const exists = await fileExists(fileUrl); if (exists) { - return fileUrl; + img.alt = chargs[0]; + img.src = fileUrl; + return } } - return transparentPNG; }; - - const charIconUrlResponse = await getCharIcon(); - const icon = charIconUrlResponse || transparentPNG; - const img = document.getElementById(`demo_${charid}`); - img.alt = chargs[0]; - img.src = icon; // seems like a good time to load the icon + await getCharIcon(); // If the ini doesn't exist on the server this will throw an error try { @@ -844,7 +843,7 @@ class Client extends EventEmitter { side: safeTags(cini.options.side).toLowerCase(), chat: (cini.options.chat === '') ? safeTags(cini.options.chat).toLowerCase() : safeTags(cini.options.category).toLowerCase(), evidence: chargs[3], - icon, + icon: img.src, inifile: cini, muted: false, }; @@ -887,12 +886,18 @@ class Client extends EventEmitter { * @param {Array} args packet arguments */ async handleSC(args) { + const sleep = ms => new Promise(r => setTimeout(r, ms)); + + // Add this so people can see characters loading on the screen. + document.getElementById('client_loading').style.display = 'none'; + document.getElementById('client_charselect').style.display = 'block'; + document.getElementById('client_loadingtext').innerHTML = 'Loading Characters'; for (let i = 1; i < args.length; i++) { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = i - 1; - + await sleep(.1) // TODO: Too many network calls without this. net::ERR_INSUFFICIENT_RESOURCES this.handleCharacterInfo(chargs, charid); } // We're done with the characters, request the music diff --git a/webAO/utils/fileExists.js b/webAO/utils/fileExists.js index 13958e0..7978cbc 100644 --- a/webAO/utils/fileExists.js +++ b/webAO/utils/fileExists.js @@ -6,7 +6,7 @@ const fileExists = async (url) => new Promise((resolve, reject) => { if (xhr.status === 200) { resolve(true); } else { - reject(false); + resolve(false); } } }; -- cgit From d9a78c0f6ec11ced9748eaca2f62336a2201fbbc Mon Sep 17 00:00:00 2001 From: "caleb.mabry.15@cnu.edu" Date: Sun, 13 Mar 2022 01:29:40 -0500 Subject: LINT!! --- webAO/client.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 36e2555..6cdcc50 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -778,7 +778,6 @@ class Client extends EventEmitter { * @param {Number} charid character ID */ async handleCharacterInfo(chargs, charid) { - if (chargs[0]) { let cini = {}; const img = document.getElementById(`demo_${charid}`); @@ -787,7 +786,7 @@ class Client extends EventEmitter { '.png', '.webp', ]; - img.alt = chargs[0] + img.alt = chargs[0]; const charIconBaseUrl = `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char_icon`; for (let i = 0; i < extensions.length; i++) { const fileUrl = charIconBaseUrl + extensions[i]; @@ -795,7 +794,7 @@ class Client extends EventEmitter { if (exists) { img.alt = chargs[0]; img.src = fileUrl; - return + return; } } }; @@ -886,7 +885,7 @@ class Client extends EventEmitter { * @param {Array} args packet arguments */ async handleSC(args) { - const sleep = ms => new Promise(r => setTimeout(r, ms)); + const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); // Add this so people can see characters loading on the screen. document.getElementById('client_loading').style.display = 'none'; @@ -897,7 +896,7 @@ class Client extends EventEmitter { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = i - 1; - await sleep(.1) // TODO: Too many network calls without this. net::ERR_INSUFFICIENT_RESOURCES + await sleep(0.1); // TODO: Too many network calls without this. net::ERR_INSUFFICIENT_RESOURCES this.handleCharacterInfo(chargs, charid); } // We're done with the characters, request the music -- cgit