hide out of area players

webAO/client.ts

@@ -124,6 +124,7 @@ class Client extends EventEmitter {
     chars: any;
     emotes: any;
     evidences: any;
+    area: number;
     areas: any;
     musics: any;
     musics_time: boolean;
@@ -183,6 +184,7 @@ class Client extends EventEmitter {
         this.chars = [];
         this.emotes = [];
         this.evidences = [];
+        this.area = 0;
         this.areas = [];
         this.musics = [];
         this.musics_time = false;

webAO/dom/areaClick.ts

@@ -1,15 +1,18 @@
 import { client } from '../client'
+import { updatePlayerAreas } from './updatePlayerAreas'
 /**
  * Triggered when an item on the area list is clicked.
  * @param {HTMLElement} el
  */
 export function area_click(el: HTMLElement) {
-    const area = client.areas[el.id.substr(4)].name;
+    const area = client.areas[el.id.substring(4)].name;
     client.sender.sendMusicChange(area);
 
     const areaHr = document.createElement("div");
     areaHr.className = "hrtext";
     areaHr.textContent = `switched to ${el.textContent}`;
     document.getElementById("client_log")!.appendChild(areaHr);
+    client.area = Number(el.id.substring(4));
+    updatePlayerAreas(client.area);
 }
 window.area_click = area_click;

webAO/dom/updatePlayerAreas.ts

@@ -0,0 +1,16 @@
+import { client } from '../client'
+import { area_click } from './areaClick';
+/**
+ * Triggered when someone switches areas
+ * @param {Number} ownarea
+ */
+export function updatePlayerAreas(ownarea: number) {
+    for (let i=0; i < client.areas.length; i++) {
+        if (i===ownarea)
+            for (let classelement of Array.from(document.getElementsByClassName(`area${i}`) as HTMLCollectionOf<HTMLElement>))
+                classelement.style.display = "";
+        else
+            for (let classelement of Array.from(document.getElementsByClassName(`area${i}`) as HTMLCollectionOf<HTMLElement>))
+                classelement.style.display = "none";
+    } 
+}

webAO/packets/handlers/handlePR.ts

@@ -5,6 +5,7 @@ function addPlayer(playerID: number) {
     const list = <HTMLTableElement>document.getElementById("client_playerlist");
     const playerRow = list.insertRow();
     playerRow.id = `client_playerlist_entry${playerID}`;
+    playerRow.className = `area0`;
 
     const imgCell = playerRow.insertCell(0);
     const img = document.createElement('img');

webAO/packets/handlers/handlePU.ts

@@ -1,4 +1,6 @@
+import { client } from "../../client";
 import { getCharIcon } from "../../client/handleCharacterInfo";
+import { updatePlayerAreas } from '../../dom/updatePlayerAreas'
 
 /**
   * Handles a playerlist update
@@ -23,6 +25,9 @@ export const handlePU = (args: string[]) => {
             const showName = <HTMLElement>playerRow.childNodes[2];
             showName.innerText = data;
             break;
+        case 3:
+            playerRow.className = `area${data}`;
+            updatePlayerAreas(client.area);
         default:
             break;
     }

webAO/styles/client.css

@@ -564,6 +564,7 @@
 }
 
 #client_playerlist {
+	width: 100%;
 	overflow-y: scroll;
 }