From 3b80b4e1fa3de2d7d9591c0ccca5ce23c4afe93a Mon Sep 17 00:00:00 2001 From: sD Date: Sat, 21 Dec 2019 21:30:24 +0100 Subject: add area indicators --- webAO/client.css | 30 ++++++++++++++++++++++++---- webAO/client.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 82 insertions(+), 8 deletions(-) diff --git a/webAO/client.css b/webAO/client.css index 82199e2..0783922 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -508,19 +508,41 @@ img { font-size: 1.5em; } -.location-box { +.area-button { border-style: solid; - background-color: #7B2900; min-width: 120px; margin: 5px; display: inline-block; padding: 6px; border-radius: 5px; - border-color: white; + border-color: black; border-width: 1px; cursor: pointer; } -.location-box:hover { +.area-button:hover { border-color: #FFD081; +} +.area-default { + background-color: rgb(54,198,68); +} + +.area-looking { + background-color: rgb(255,255,0); +} + +.area-casing { + background-color: rgb(255,166,0); +} + +.area-recess { + background-color: rgb(255,190,30); +} + +.area-rp { + background-color: rgb(200,52,252); +} + +.area-gaming { + background-color: rgb(55,255,255); } \ No newline at end of file diff --git a/webAO/client.js b/webAO/client.js index 8705aaa..a09ea75 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -94,6 +94,7 @@ class Client extends EventEmitter { this.chars = []; this.emotes = []; this.evidences = []; + this.areas = []; this.resources = { "holdit": { @@ -716,8 +717,15 @@ class Client extends EventEmitter { } else { // Create area button const newarea = document.createElement("SPAN"); - newarea.className = "location-box"; + newarea.classList = "area-button area-default"; + newarea.id = "area" + i; newarea.textContent = args[i]; + this.areas[i] = { + name: safe_tags(args[i]), + players: 0, + status: "IDLE" + }; + newarea.onclick = function () { area_click(this); }; @@ -878,11 +886,55 @@ class Client extends EventEmitter { /** * Handle the change of players in an area. - * webAO doesn't have this feature yet, but i want the warning to go away. + * ARUP#0#20#8#2#0#5#2#4#1#5#% * @param {Array} args packet arguments */ - handleARUP(_args) { - // TODO: webAO doesn't have this feature yet + handleARUP(args) { + args = args.slice(1); + + switch(args[0]) { + case "0": + for (let i = 1; i < args.length - 1; i++) { + this.areas[i].players = args[i]; + const thisarea = document.getElementById("area" + i); + thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; + } + break; + case "1": + for (let i = 1; i < args.length - 1; i++) { + this.areas[i].status = args[i]; + const thisarea = document.getElementById("area" + i); + + switch (args[i]) { + case "LOOKING-FOR-PLAYERS": + thisarea.classList = "area-button area-looking"; + break; + case "CASING": + thisarea.classList = "area-button area-casing"; + break; + case "RECESS": + thisarea.classList = "area-button area-recess"; + break; + case "RP": + thisarea.classList = "area-button area-rp"; + break; + case "GAMING": + thisarea.classList = "area-button area-gaming"; + break; + default: + thisarea.classList = "area-button area-default"; + break; + } + + } + break; + case "2": + break; + case "3": + break; + } + + } /** -- cgit From 9c45746e60abd16e5214cdba7ec8692ab7dfe011 Mon Sep 17 00:00:00 2001 From: sD Date: Sat, 21 Dec 2019 21:33:29 +0100 Subject: black text is better readable --- webAO/client.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webAO/client.css b/webAO/client.css index 0783922..f2bf434 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -515,9 +515,10 @@ img { display: inline-block; padding: 6px; border-radius: 5px; - border-color: black; + border-color: white; border-width: 1px; cursor: pointer; + color: #000; } .area-button:hover { -- cgit From 729892862bcd4e4afd46a9bc2ba1cb99848c8be6 Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 19:22:57 +0100 Subject: make area buttons work again --- webAO/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/client.js b/webAO/client.js index a09ea75..4898ef4 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1667,7 +1667,7 @@ window.showname_click = showname_click; * @param {MouseEvent} event */ export function area_click(el) { - const area = el.textContent; + const area = client.areas[el.id.substr(4)].name; client.sendMusicChange(area); const areaHr = document.createElement("div"); -- cgit From ba8ec61733a6d582f939fffbe04793d31ec2d12e Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 19:37:30 +0100 Subject: add locked and spectatable --- webAO/client.css | 13 +++++++++---- webAO/client.js | 6 ++++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/webAO/client.css b/webAO/client.css index f2bf434..c91d643 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -144,10 +144,6 @@ img { width: 100%; } -.area_btn { - width: 20%; -} - #client_court { position: absolute; height: 100%; @@ -524,6 +520,7 @@ img { .area-button:hover { border-color: #FFD081; } + .area-default { background-color: rgb(54,198,68); } @@ -546,4 +543,12 @@ img { .area-gaming { background-color: rgb(55,255,255); +} + +.area-locked { + background-color: rgb(127,127,127); +} + +.area-spectatable { + background-color: rgb(54,198,68); } \ No newline at end of file diff --git a/webAO/client.js b/webAO/client.js index 4898ef4..493598d 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -906,6 +906,9 @@ class Client extends EventEmitter { const thisarea = document.getElementById("area" + i); switch (args[i]) { + case "LOCKED": + thisarea.classList = "area-button area-locked"; + break; case "LOOKING-FOR-PLAYERS": thisarea.classList = "area-button area-looking"; break; @@ -921,6 +924,9 @@ class Client extends EventEmitter { case "GAMING": thisarea.classList = "area-button area-gaming"; break; + case "SPECTATABLE": + thisarea.classList = "area-button area-spectatable"; + break; default: thisarea.classList = "area-button area-default"; break; -- cgit From 23eae97b475c246a40f92207eddd002cc468f5de Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:44:28 +0100 Subject: lookup tables are for beginners --- webAO/client.css | 2 +- webAO/client.js | 34 +++------------------------------- 2 files changed, 4 insertions(+), 32 deletions(-) diff --git a/webAO/client.css b/webAO/client.css index 6cea13a..787d35f 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -525,7 +525,7 @@ img { background-color: rgb(54,198,68); } -.area-looking { +.area-looking-for-players { background-color: rgb(255,255,0); } diff --git a/webAO/client.js b/webAO/client.js index dd788b8..e1a2fd3 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -887,52 +887,24 @@ class Client extends EventEmitter { /** * Handle the change of players in an area. - * ARUP#0#20#8#2#0#5#2#4#1#5#% * @param {Array} args packet arguments */ handleARUP(args) { args = args.slice(1); switch(args[0]) { - case "0": + case "0": // playercount for (let i = 1; i < args.length - 1; i++) { this.areas[i].players = args[i]; const thisarea = document.getElementById("area" + i); thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; } break; - case "1": + case "1": // status for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - - switch (args[i]) { - case "LOCKED": - thisarea.classList = "area-button area-locked"; - break; - case "LOOKING-FOR-PLAYERS": - thisarea.classList = "area-button area-looking"; - break; - case "CASING": - thisarea.classList = "area-button area-casing"; - break; - case "RECESS": - thisarea.classList = "area-button area-recess"; - break; - case "RP": - thisarea.classList = "area-button area-rp"; - break; - case "GAMING": - thisarea.classList = "area-button area-gaming"; - break; - case "SPECTATABLE": - thisarea.classList = "area-button area-spectatable"; - break; - default: - thisarea.classList = "area-button area-default"; - break; - } - + thisarea.classList = "area-button " + args[i]; } break; case "2": -- cgit From d6d07a509e8ecbb54e37acea9399a8090c7c45c2 Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:46:17 +0100 Subject: oof --- webAO/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/client.js b/webAO/client.js index e1a2fd3..fc42a17 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -904,7 +904,7 @@ class Client extends EventEmitter { for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button " + args[i]; + thisarea.classList = "area-button area-" + args[i]; } break; case "2": -- cgit From 2f2a440fd8e8a553459c4cf915b34b3f83b74b4b Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:48:19 +0100 Subject: add idle and play it safe --- webAO/client.css | 4 ++++ webAO/client.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/webAO/client.css b/webAO/client.css index 787d35f..7a0d449 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -525,6 +525,10 @@ img { background-color: rgb(54,198,68); } +.area-idle { + background-color: rgb(54,198,68); +} + .area-looking-for-players { background-color: rgb(255,255,0); } diff --git a/webAO/client.js b/webAO/client.js index fc42a17..5dac931 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -904,7 +904,7 @@ class Client extends EventEmitter { for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button area-" + args[i]; + thisarea.classList = "area-button area-" + safe_tags(args[i]).toLowerCase(); } break; case "2": -- cgit From ab5a95dcdc622bb2c7cd35e2cc29c1881c882eb2 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 25 Dec 2019 17:41:25 +0100 Subject: add tooltip with CM and area lock --- webAO/client.js | 63 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 27 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 5dac931..817277f 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -716,20 +716,26 @@ class Client extends EventEmitter { newentry.text = args[i]; hmusiclist.options.add(newentry); } else { - // Create area button - const newarea = document.createElement("SPAN"); - newarea.classList = "area-button area-default"; - newarea.id = "area" + i; - newarea.textContent = args[i]; this.areas[i] = { name: safe_tags(args[i]), players: 0, - status: "IDLE" + status: "IDLE", + cm: "", + locked: "FREE" }; + // Create area button + let newarea = document.createElement("SPAN"); + newarea.classList = "area-button area-default"; + newarea.id = "area" + i; + newarea.innerText = this.areas[i].name; + newarea.title = "Players:
" + + "Status:
" + + "CM: "; newarea.onclick = function () { area_click(this); }; + document.getElementById("areas").appendChild(newarea); } } @@ -891,29 +897,32 @@ class Client extends EventEmitter { */ handleARUP(args) { args = args.slice(1); + for (let i = 1; i < args.length - 1; i++) { + if (this.areas[i]) { // the server sends us ARUP before we even get the area list + const thisarea = document.getElementById("area" + i); + switch(args[0]) { + case "0": // playercount + this.areas[i].players = Number(args[i]); + thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players})`; + break; + case "1": // status + this.areas[i].status = safe_tags(args[i]); + thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase(); + break; + case "2": + this.areas[i].cm = safe_tags(args[i]); + break; + case "3": + this.areas[i].locked = safe_tags(args[i]); + break; + } - switch(args[0]) { - case "0": // playercount - for (let i = 1; i < args.length - 1; i++) { - this.areas[i].players = args[i]; - const thisarea = document.getElementById("area" + i); - thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; - } - break; - case "1": // status - for (let i = 1; i < args.length - 1; i++) { - this.areas[i].status = args[i]; - const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button area-" + safe_tags(args[i]).toLowerCase(); - } - break; - case "2": - break; - case "3": - break; + thisarea.title = `Players: ${this.areas[i].players}\n` + + `Status: ${this.areas[i].status}\n` + + `CM: ${this.areas[i].cm}\n` + + `Area lock: ${this.areas[i].locked}`; + } } - - } /** -- cgit