diff options
| -rw-r--r-- | .eslintrc.js | 36 | ||||
| -rw-r--r-- | webAO/client.html | 46 | ||||
| -rw-r--r-- | webAO/client.js | 176 |
3 files changed, 148 insertions, 110 deletions
diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c3c75e8 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,36 @@ +module.exports = { + "env": { + "browser": true, + "es6": true, + "jquery": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2016, + "sourceType": "module" + }, + "rules": { + "indent": [ + "error", + "tab" + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "warn", + "double" + ], + "semi": [ + "error", + "always" + ], + "no-console": [ + "off" + ], + "no-unused-vars": [ + "warn" + ] + } +};
\ No newline at end of file diff --git a/webAO/client.html b/webAO/client.html index 2343264..3db7762 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -55,9 +55,9 @@ </div> <br> <div id="client_buttons"> - <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)"> - <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)"> - <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)"> + <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleShout(1)"> + <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleShout(2)"> + <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleShout(3)"> <br> <br> <label for="textcolor">Text Color:</label> @@ -75,21 +75,21 @@ <br> <br> <label>Flip: </label> - <img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleflip()"> + <img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleFlip()"> <label>Effect: </label> - <img src="misc/flash.png" id="button_effect_1" alt="Flash" class="client_button" onclick="toggleaffect(1)"> - <img src="misc/shake.png" id="button_effect_2" alt="Shake" class="client_button" onclick="toggleaffect(2)"> + <img src="misc/flash.png" id="button_effect_1" alt="Flash" class="client_button" onclick="toggleEffect(1)"> + <img src="misc/shake.png" id="button_effect_2" alt="Shake" class="client_button" onclick="toggleEffect(2)"> </div> <fieldset style="margin:10px;"> <legend>Action Commands</legend> <!-- Judge Commands --> <span id="judge_action" style="display:none"> - <span id="menu_wt" onclick="initwt()" class="menu_icon"> + <span id="menu_wt" onclick="initWT()" class="menu_icon"> <i class="material-icons em-3">record_voice_over</i> <div>Witness <br>Testimony</div> </span> - <span id="menu_ce" onclick="initce()" class="menu_icon"> + <span id="menu_ce" onclick="initCE()" class="menu_icon"> <i class="material-icons em-3">question_answer</i> <div>Cross <br>Examination</div> @@ -120,7 +120,7 @@ </span> </fieldset> <br> - <span id="menu_cm" onclick="callmod()" class="menu_icon"> + <span id="menu_cm" onclick="callMod()" class="menu_icon"> <i class="material-icons em-3">report</i> <div>Call Mod</div> </span> @@ -130,23 +130,23 @@ <meta name="frame-title" lang="en" content="Log"> <div id="client_menu"> <div class="hrtext">↓ Main Menu ↓</div> - <span id="menu_1" onclick="togglemenu(1)" class="menu_icon active"> + <span id="menu_1" onclick="toggleMenu(1)" class="menu_icon active"> <i class="material-icons em-3">work</i> <div>Evidence</div> </span> - <span id="menu_2" onclick="togglemenu(2)" class="menu_icon"> + <span id="menu_2" onclick="toggleMenu(2)" class="menu_icon"> <i class="material-icons em-3">room</i> <div>Location</div> </span> - <span id="menu_3" onclick="togglemenu(3)" class="menu_icon"> + <span id="menu_3" onclick="toggleMenu(3)" class="menu_icon"> <i class="material-icons em-3">settings</i> <div>Settings</div> </span> - <span id="menu_4" onclick="togglemenu(4)" class="menu_icon"> + <span id="menu_4" onclick="toggleMenu(4)" class="menu_icon"> <i class="material-icons em-3">description</i> <div>Guide</div> </span> - <span id="menu_5" onclick="togglemenu(5)" class="menu_icon"> + <span id="menu_5" onclick="toggleMenu(5)" class="menu_icon"> <i class="material-icons em-3">person</i> <div>About</div> </span> @@ -176,16 +176,16 @@ <br> <br> <span style="display:block;text-align:center"> - <img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addevidence()"> - <img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editevidence()"> - <img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelevidence()"> - <img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="delevidence()"> + <img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addEvidence()"> + <img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editEvidence()"> + <img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelEvidence()"> + <img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="deleteEvidence()"> </span> </fieldset> <br> <div id="evidences"></div> <br> - <img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglepresent()"> + <img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglePresent()"> </span> <!-- Location section --> @@ -341,9 +341,11 @@ </select> </template> -<div id="callmod_dialog" title="Are you sure to call mod?"> +<div id="callmod_dialog" title="Call Mod"> <p> - <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>They might be very busy. Are you sure?</p> + <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span> + Are you sure you want to call a moderator? + </p> </div> <body> @@ -354,7 +356,7 @@ <button onclick="RetryButton()">RETRY</button> </div> <div id="client_charselect"> - <button onclick="pickchar(1001)">SPECTATE</button> + <button onclick="pickChar(1001)">SPECTATE</button> <table id="client_chartable"></table> </div> <div id="client_error" class="error" style="display: none"> diff --git a/webAO/client.js b/webAO/client.js index feafde3..dd1d7fa 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -14,7 +14,7 @@ location.search.substr(1).split("&").forEach(function (item) { const serverIP = queryDict.ip; let mode = queryDict.mode; -const AO_HOST = queryDict.asset || "http://assets.aceattorneyonline.com/base/"; +const AO_HOST = queryDict.asset || "http://s3.wasabisys.com/webao/base/"; const MUSIC_HOST = AO_HOST + "sounds/music/"; const BAR_WIDTH = 90; const BAR_HEIGHT = 20; @@ -248,7 +248,7 @@ class Client { */ joinServer() { this.serv.send(`HI#${navigator.userAgent.hashCode()}#%`); - this.serv.send("ID#webAO#2.4.5#%"); + this.serv.send("ID#webAO#2.3#%"); this.checkUpdater = setInterval(() => this.sendCheck(), 5000); } @@ -257,13 +257,16 @@ class Client { */ loadResources() { // Set to playerID to server chat name + // TODO: Make a text box for this! document.getElementById("OOC_name").value = "web" + this.playerID; + // Load evidence array to select const evidence_select = document.getElementById("evi_select"); evidence_select.add(new Option("Custom", 0)); evidence_arr.forEach(evidence => { evidence_select.add(new Option(evidence)); }); + // Load background array to select const background_select = document.getElementById("bg_select"); background_select.add(new Option("Custom", 0)); @@ -274,7 +277,7 @@ class Client { const shouts = ["holdit", "objection", "takethat"]; for (let i = 0; i < shouts.length; i++) { let shout_src = AO_HOST + this.resources[shouts[i]]["src"]; - FileExist(shout_src, this.callbackLoadImageResources, shouts[i]); + fileExists(shout_src, this.callbackLoadImageResources, shouts[i]); } // Calculate gif duration of testimony @@ -282,9 +285,9 @@ class Client { for (let i = 0; i < testimony.length; i++) { const testimony_src = `${AO_HOST}themes/default/${testimony[i]}.gif`; // Check image existed - FileExist(testimony_src, this.callbackLoadImageResources, testimony[i]); + fileExists(testimony_src, this.callbackLoadImageResources, testimony[i]); // Check sfx existed - FileExist(AO_HOST + this.resources[testimony[i]]["sfx"], this.callbackLoadSFXResources, testimony[i]); + fileExists(AO_HOST + this.resources[testimony[i]]["sfx"], this.callbackLoadSFXResources, testimony[i]); } // TODO: Cache some resources @@ -332,7 +335,7 @@ class Client { const target = document.getElementById("client_inner_chat"); const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { - var children = mutation.addedNodes; + const children = mutation.addedNodes; if (children !== null) { children.forEach(function (node) { if (node.tagName == "C") { @@ -460,7 +463,7 @@ class Client { // TODO: this if-statement might be a bug. if (args[4] != viewport.chatmsg.content) { document.getElementById("client_inner_chat").innerHTML = ""; - let chatmsg = { + const chatmsg = { // pre: escape(args[2]), character: -1, // Will do a linear search preanim: escape(args[2]), // XXX: why again? @@ -579,7 +582,7 @@ class Client { "desc": chargs[1], "evidence": chargs[3], "icon": AO_HOST + "characters/" + escape(chargs[0]) + "/char_icon.png" - } + }; } this.serv.send("RM#%"); } @@ -612,7 +615,7 @@ class Client { "desc": escapeHtml(decodeChat(unescapeChat(arg[1]))), "filename": escape(arg[2]), "icon": AO_HOST + "evidence/" + escape(arg[2]) - } + }; } const evidence_box = document.getElementById("evidences"); @@ -622,7 +625,7 @@ class Client { id="evi_${i}" alt="${this.evidences[i - 1].name}" class="client_button" - onclick="pickevidence(${i})">`; + onclick="pickEvidence(${i})">`; } } @@ -672,7 +675,7 @@ class Client { newarea.className = "location-box"; newarea.textContent = args[i]; newarea.onclick = function () { - area_click(this) + area_click(this); }; document.getElementById("areas").appendChild(newarea); } @@ -777,7 +780,7 @@ class Client { */ handleZZ(args) { const oocLog = document.getElementById("client_ooclog"); - oocLog.innerHTML += `\$Alert: ${decodeChat(unescapeChat(args[1]))}\r\n`; + oocLog.innerHTML += `$Alert: ${decodeChat(unescapeChat(args[1]))}\r\n`; if (oocLog.scrollTop > oocLog.scrollHeight - 60) { oocLog.scrollTop = oocLog.scrollHeight; } @@ -814,20 +817,19 @@ class Client { */ handleCharsCheck(args) { document.getElementById("client_chartable").innerHTML = ""; + let tr; for (let i = 0; i < this.chars.length; i++) { if (i % CHAR_SELECT_WIDTH == 0) { - var tr = document.createElement('TR'); + tr = document.createElement('TR'); } - let td = document.createElement('TD'); - let icon_chosen; - let thispick = this.chars[i].icon; + const td = document.createElement('TD'); + let icon_chosen = ""; + const thispick = this.chars[i].icon; if (args[i + 1] == "-1") { icon_chosen = " dark"; - } else { - icon_chosen = ""; } td.innerHTML = `<img class='demothing${icon_chosen}' id='demo_${i}' ` + - `src='${thispick}' alt='${this.chars[i].name}' onclick='pickchar(${i})' ` + + `src='${thispick}' alt='${this.chars[i].name}' onclick='pickChar(${i})' ` + `onerror='demoError(this);'>`; tr.appendChild(td); if (i % CHAR_SELECT_WIDTH == 0) { @@ -844,21 +846,21 @@ class Client { handlePV(args) { this.charID = args[3]; document.getElementById("client_charselect").style.display = "none"; - let me = this.me(); - let emotes = this.emotes; - let xhr = new XMLHttpRequest(); + const me = this.me(); + const emotes = this.emotes; + const xhr = new XMLHttpRequest(); xhr.withCredentials = false; document.getElementById("client_emo").innerHTML = ""; // Clear emote box xhr.open('GET', AO_HOST + 'characters/' + escape(this.me().name) + '/char.ini', true); xhr.responseType = 'text'; xhr.onload = function (e) { if (this.status == 200) { - let linifile = this.responseText; - let pinifile = INI.parse(linifile); + const linifile = this.responseText; + const pinifile = INI.parse(linifile); me.side = pinifile.Options.side; updateActionCommands(me.side); for (let i = 1; i < pinifile.Emotions.number; i++) { - let emoteinfo = pinifile.Emotions[i].split('#'); + const emoteinfo = pinifile.Emotions[i].split('#'); let esfx = "0"; let esfxd = "0"; if (typeof pinifile.SoundN !== 'undefined') { @@ -883,9 +885,9 @@ class Client { id="emo_${i}" alt="${emotes[i].desc}" class="client_button" - onclick="pickemotion(${i})">`; + onclick="pickEmotion(${i})">`; } - pickemotion(1); + pickEmotion(1); } }; xhr.send(); @@ -1018,13 +1020,13 @@ class Viewport { * @param {object} param */ getAnimLength(filename, callback, param) { - var request = new XMLHttpRequest(); + const request = new XMLHttpRequest(); request.open('GET', filename, true); request.responseType = 'arraybuffer'; request.addEventListener('load', function () { // Use gify API // https://github.com/rfrench/gify - var gifInfo = gify.getInfo(request.response); + const gifInfo = gify.getInfo(request.response); console.log(gifInfo["duration"]); // Return animation length callback(gifInfo["duration"], param); @@ -1188,7 +1190,7 @@ class Viewport { "4": "#0000ff", "5": "#ffff00", "6": "#aa00aa" - } + }; let stylecolor = "color: " + (colors[this.chatmsg.color] || "#ffffff"); document.getElementById("client_inner_chat").style = stylecolor; this.chatmsg.startspeaking = false; @@ -1255,7 +1257,7 @@ class INI { let match = line.match(regex.section); value[match[1]] = {}; section = match[1]; - }; + } }); return value; } @@ -1396,7 +1398,7 @@ window.demoError = demoError; * @param {object} param */ function fileExists(url, callback, param) { - var xhttp = new XMLHttpRequest(); + const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { callback(true, param, url); @@ -1415,41 +1417,41 @@ function fileExists(url, callback, param) { * @param {string} position the position to change into */ function changeBackground(position) { - var standname; - let bgfolder = viewport.bgFolder(); + let standname; + const bgfolder = viewport.bgFolder(); document.getElementById("client_fg").style.display = "none"; document.getElementById("client_bench").style.display = "none"; switch (position) { - case "def": - document.getElementById("client_court").src = bgfolder + "defenseempty.png" - document.getElementById("client_bench").style.display = "block"; - FileExist(bgfolder + "defensedesk.png", callbackChangeBackground, position); - standname = "defense"; - break; - case "pro": - document.getElementById("client_court").src = bgfolder + "prosecutorempty.png" - document.getElementById("client_bench").style.display = "block" - FileExist(bgfolder + "defensedesk.png", callbackChangeBackground, position); - standname = "prosecution"; - break; - case "hld": - document.getElementById("client_court").src = bgfolder + "helperstand.png" - standname = "defense"; - break; - case "hlp": - document.getElementById("client_court").src = bgfolder + "prohelperstand.png" - standname = "prosecution"; - break; - case "wit": - document.getElementById("client_court").src = bgfolder + "witnessempty.png" - document.getElementById("client_bench").style.display = "block" - document.getElementById("client_bench").src = bgfolder + "estrado.png" - standname = "prosecution"; - break; - case "jud": - document.getElementById("client_court").src = bgfolder + "judgestand.png" - standname = "prosecution"; - break; + case "def": + document.getElementById("client_court").src = bgfolder + "defenseempty.png"; + document.getElementById("client_bench").style.display = "block"; + fileExists(bgfolder + "defensedesk.png", callbackChangeBackground, position); + standname = "defense"; + break; + case "pro": + document.getElementById("client_court").src = bgfolder + "prosecutorempty.png"; + document.getElementById("client_bench").style.display = "block"; + fileExists(bgfolder + "defensedesk.png", callbackChangeBackground, position); + standname = "prosecution"; + break; + case "hld": + document.getElementById("client_court").src = bgfolder + "helperstand.png"; + standname = "defense"; + break; + case "hlp": + document.getElementById("client_court").src = bgfolder + "prohelperstand.png"; + standname = "prosecution"; + break; + case "wit": + document.getElementById("client_court").src = bgfolder + "witnessempty.png"; + document.getElementById("client_bench").style.display = "block"; + document.getElementById("client_bench").src = bgfolder + "estrado.png"; + standname = "prosecution"; + break; + case "jud": + document.getElementById("client_court").src = bgfolder + "judgestand.png"; + standname = "prosecution"; + break; } if (viewport.chatmsg.type == 5) { document.getElementById("client_bench").style.display = "none"; @@ -1468,15 +1470,15 @@ function callbackChangeBackground(result, position) { let bgfolder = viewport.bgFolder(); if (position == "def") { if (result) { - document.getElementById("client_bench").src = bgfolder + "defensedesk.png" + document.getElementById("client_bench").src = bgfolder + "defensedesk.png"; } else { - document.getElementById("client_bench").src = bgfolder + "bancodefensa.png" + document.getElementById("client_bench").src = bgfolder + "bancodefensa.png"; } } else { if (result) { - document.getElementById("client_bench").src = bgfolder + "prosecutiondesk.png" + document.getElementById("client_bench").src = bgfolder + "prosecutiondesk.png"; } else { - document.getElementById("client_bench").src = bgfolder + "bancoacusacion.png" + document.getElementById("client_bench").src = bgfolder + "bancoacusacion.png"; } } } @@ -1560,7 +1562,7 @@ export function pickEmotion(emo) { if (client.selectedEmote != -1) { document.getElementById("emo_" + client.selectedEmote).src = client.myEmote().button_off; } - client.selectedEmote = emo + client.selectedEmote = emo; document.getElementById("emo_" + emo).src = client.myEmote().button_on; } window.pickEmotion = pickEmotion; @@ -1596,7 +1598,7 @@ export function pickEvidence(evidence) { document.getElementById("evi_cancel").className = "client_button hover_button"; document.getElementById("evi_del").className = "client_button hover_button"; } else { - cancelevidence(); + cancelEvidence(); } } window.pickEvidence = pickEvidence; @@ -1608,11 +1610,11 @@ export function addEvidence() { let evidence_select = document.getElementById('evi_select'); client.sendPE(document.getElementById('evi_name').value, document.getElementById('evi_desc').value, - (evidence_select.selectedIndex == 0) ? - document.getElementById('evi_filename').value : - evidence_select.options[evidence_select.selectedIndex].text + evidence_select.selectedIndex == 0 ? + document.getElementById('evi_filename').value : + evidence_select.options[evidence_select.selectedIndex].text ); - cancelevidence(); + cancelEvidence(); } window.addEvidence = addEvidence; @@ -1625,11 +1627,11 @@ export function editEvidence() { client.sendEE(id, document.getElementById('evi_name').value, document.getElementById('evi_desc').value, - (evidence_select.selectedIndex == 0) ? - document.getElementById('evi_filename').value : - evidence_select.options[evidence_select.selectedIndex].text + evidence_select.selectedIndex == 0 ? + document.getElementById('evi_filename').value : + evidence_select.options[evidence_select.selectedIndex].text ); - cancelevidence(); + cancelEvidence(); } window.editEvidence = editEvidence; @@ -1639,7 +1641,7 @@ window.editEvidence = editEvidence; export function deleteEvidence() { let id = parseInt(client.selectedEvidence) - 1; client.sendDE(id); - cancelevidence(); + cancelEvidence(); } window.deleteEvidence = deleteEvidence; @@ -1676,7 +1678,7 @@ window.cancelEvidence = cancelEvidence; */ export function getIndexFromSelect(select_box, value) { //Find if icon alraedy existed in select box - let select_element = document.getElementById(select_box); + const select_element = document.getElementById(select_box); for (let i = 1; i < select_element.length; ++i) { if (select_element.options[i].value == value) { return i; @@ -1966,9 +1968,9 @@ function encodeChat(estring) { }); } else if (selectedEncoding == "utf16") { //Source: https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String - var buffer = new ArrayBuffer(estring.length * 2); - var result = new Uint16Array(buffer); - for (var i = 0, strLen = estring.length; i < strLen; i++) { + const buffer = new ArrayBuffer(estring.length * 2); + const result = new Uint16Array(buffer); + for (let i = 0, strLen = estring.length; i < strLen; i++) { result[i] = estring.charCodeAt(i); } return String(result); @@ -2025,11 +2027,10 @@ if (typeof (String.prototype.trim) === "undefined") { // Used for HDID calculation. String.prototype.hashCode = function () { - var hash = 0, - i, chr; + let hash = 0; if (this.length === 0) return hash; - for (i = 0; i < this.length; i++) { - chr = this.charCodeAt(i); + for (let i = 0; i < this.length; i++) { + const chr = this.charCodeAt(i); hash = ((hash << 5) - hash) + chr; hash |= 0; // Convert to 32bit integer } @@ -2047,7 +2048,6 @@ let viewport = new Viewport(); $(document).ready(function () { client.initialObservBBCode(); client.loadResources(); - }); // Create dialog and link to button |