Merge pull request #225 from AttorneyOnline/playerlist

Playerlist

public/client.html

@@ -631,4 +631,10 @@ <h3 id="client_version">version</h3>
 	</select>
 </template>
 
+<template id="players">
+	<meta name="frame-title" lang="en" content="Players">
+	<table id="client_playerlist"></table>
+	</select>
+</template>
+
 </html>

webAO/client/handleCharacterInfo.ts

@@ -6,6 +6,24 @@ import fileExists from "../utils/fileExists";
 import { AO_HOST } from "./aoHost";
 
 
+export const getCharIcon = async (img: HTMLImageElement, charname: string) => {
+    const extensions = [".png", ".webp"];
+    img.alt = charname;
+    const charIconBaseUrl = `${AO_HOST}characters/${encodeURI(
+        charname.toLowerCase()
+    )}/char_icon`;
+    for (let i = 0; i < extensions.length; i++) {
+        const fileUrl = charIconBaseUrl + extensions[i];
+        const exists = await fileExists(fileUrl);
+        if (exists) {
+            img.alt = charname;
+            img.title = charname;
+            img.src = fileUrl;
+            return;
+        }
+    }
+};
+
 /**
  * Handles the incoming character information, and downloads the sprite + ini for it
  * @param {Array} chargs packet arguments
@@ -15,24 +33,8 @@ export const handleCharacterInfo = async (chargs: string[], charid: number) => {
     const img = <HTMLImageElement>document.getElementById(`demo_${charid}`);
     if (chargs[0]) {
         let cini: any = {};
-        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) {
-                    img.alt = chargs[0];
-                    img.title = chargs[0];
-                    img.src = fileUrl;
-                    return;
-                }
-            }
-        };
-        getCharIcon();
+
+        getCharIcon(img, chargs[0]);
 
         // If the ini doesn't exist on the server this will throw an error
         try {

webAO/client/sender/index.ts

@@ -11,6 +11,7 @@ import {sendZZ} from './sendZZ'
 import {sendEE} from './sendEE'
 import {sendDE} from './sendDE'
 import {sendPE} from './sendPE'
+import {sendMA} from './sendMA'
 export interface ISender {
     sendIC: (deskmod: number,
         preanim: string,
@@ -50,6 +51,7 @@ export interface ISender {
     sendEE: (id: number, name: string, desc: string, img: string) => void
     sendDE:  (id: number) => void
     sendPE: (name: string, desc: string, img: string) => void
+    sendMA: (id: number, length: number, reason: string) => void
 }
 export const sender = {
     sendIC,
@@ -64,5 +66,6 @@ export const sender = {
     sendZZ,
     sendEE,
     sendDE,
-    sendPE
+    sendPE,
+    sendMA
 }

webAO/client/sender/sendMA.ts

@@ -0,0 +1,11 @@
+import { client } from "../../client";
+
+/**
+ * Sends mod command.
+ * @param {number} id player id
+ * @param {number} length in hours
+ * @param {string} reason player message
+ */
+export const sendMA = (id: number, length: number, reason: string) => {
+    client.sender.sendServer(`MA#${id}#${length}#${reason}#%`);
+}

webAO/dom/banPlayer.ts

@@ -0,0 +1,14 @@
+import { client } from '../client'
+/**
+ * Tries to ban a player from the playerlist
+ * @param {Number} id the players id
+ */
+export function banPlayer(id: number) {
+    let reason;
+    let length;
+    reason = prompt("Please enter the ban reason", "Being annoying");
+    length = Number(prompt("Please enter the ban length in minutes", "60"));
+
+    client.sender.sendMA(id, length, reason);
+}
+window.banPlayer = banPlayer;

webAO/dom/window.ts

@@ -26,7 +26,7 @@ declare global {
         editEvidence: () => void;
         addEvidence: () => void;
         pickEvidence: (evidence: any) => void;
-        pickEmotion: (emo: any) => void;
+        pickEmotion: (emo: number) => void;
         pickChar: (ccharacter: any) => void;
         chartable_filter: (_event: any) => void;
         ReconnectButton: (_event: any) => void;
@@ -52,6 +52,7 @@ declare global {
         onEnter: (event: any) => void;
         onReplayGo: (_event: any) => void;
         onOOCEnter: (_event: any) => void;
+        banPlayer: (id: number) => void;
         hcallback: (_event: any) => void;
     }
 }

webAO/packets/handlers/handlePR.ts

@@ -0,0 +1,44 @@
+import { client } from "../../client";
+import { banPlayer } from '../../dom/banPlayer'
+
+function addPlayer(playerID: number) {
+    const list = <HTMLTableElement>document.getElementById("client_playerlist");
+    const playerRow = list.insertRow();
+    playerRow.id = `client_playerlist_entry${playerID}`;
+
+    const imgCell = playerRow.insertCell(0);
+    const img = document.createElement('img');
+    imgCell.appendChild(img);
+
+    const name = document.createTextNode('Unknown');
+
+    const charNameCell = playerRow.insertCell(1);
+    charNameCell.appendChild(name);
+    const showNameCell = playerRow.insertCell(2);
+    showNameCell.appendChild(name);
+    const oocNameCell = playerRow.insertCell(3);
+    oocNameCell.appendChild(name);
+
+    const banCell = playerRow.insertCell(4);
+    const ban = <HTMLButtonElement>document.createElement("button");
+    ban.innerText = "Ban";
+    ban.onclick = () => { window.banPlayer(playerID) }
+    banCell.appendChild(ban);
+}
+
+function removePlayer(playerID: number) {
+    const playerRow = <HTMLTableElement>document.getElementById(`client_playerlist_entry${playerID}`);
+    playerRow.remove();
+}
+
+/**
+  * Handles a player joining or leaving
+  * @param {Array} args packet arguments
+  */
+export const handlePR = (args: string[]) => {
+    const playerID = Number(args[1]);
+    if (Number(args[2]) === 0)
+        addPlayer(playerID);
+    else if (Number(args[2]) === 1)
+        removePlayer(playerID);
+}

webAO/packets/handlers/handlePU.ts

@@ -0,0 +1,29 @@
+import { getCharIcon } from "../../client/handleCharacterInfo";
+
+/**
+  * Handles a playerlist update
+  * @param {Array} args packet arguments
+  */
+export const handlePU = (args: string[]) => {
+    const playerRow = <HTMLTableElement>document.getElementById(`client_playerlist_entry${Number(args[1])}`);
+    const type = Number(args[2]);
+    const data = args[3];
+    switch (type) {
+        case 0:
+            const oocName = <HTMLElement>playerRow.childNodes[3];
+            oocName.innerText = data;
+            break;
+        case 1:
+            const playerImg = <HTMLImageElement>playerRow.childNodes[0].firstChild;
+            getCharIcon(playerImg, data);
+            const charName = <HTMLElement>playerRow.childNodes[1];
+            charName.innerText = data;
+            break;
+        case 2:
+            const showName = <HTMLElement>playerRow.childNodes[2];
+            showName.innerText = data;
+            break;
+        default:
+            break;
+    }
+}

webAO/packets/handlers/handlePV.ts

@@ -4,6 +4,19 @@ import { updateActionCommands } from '../../dom/updateActionCommands'
 import { pickEmotion } from '../../dom/pickEmotion'
 import { AO_HOST } from "../../client/aoHost";
 
+function addEmoteButton(i: number, imgurl: string, desc: string) {
+    const emotesList = document.getElementById("client_emo");
+    const emote_item = new Image();
+    emote_item.id = "emo_" + i;
+    emote_item.className = "emote_button";
+    emote_item.src = imgurl;
+    emote_item.alt = desc;
+    emote_item.title = desc;
+    emote_item.onclick = () => { window.pickEmotion(i) }
+    emotesList.appendChild(emote_item);
+}
+
+
 /**
  * Handles the server's assignment of a character for the player to use.
  * PV # playerID (unused) # CID # character ID
@@ -17,7 +30,7 @@ export const handlePV = async (args: string[]) => {
     const me = client.chars[client.charID];
     client.selectedEmote = -1;
     const { emotes } = client;
-    const emotesList = document.getElementById("client_emo")!;
+    const emotesList = document.getElementById("client_emo");
     emotesList.style.display = "";
     emotesList.innerHTML = ""; // Clear emote box
     const ini = me.inifile;
@@ -72,14 +85,8 @@ export const handlePV = async (args: string[]) => {
                     button: url,
                 };
 
-                const emote_item = new Image();
-                emote_item.id = "emo_" + i;
-                emote_item.className = "emote_button";
-                emote_item.src = emotes[i].button;
-                emote_item.alt = emotes[i].desc;
-                emote_item.title = emotes[i].desc;
-                emote_item.onclick = () => { window.pickEmotion(i) }
-                emotesList.appendChild(emote_item);
+                addEmoteButton(i, url, emotes[i].desc);
+
                 if (i === 1) pickEmotion(1);
             } catch (e) {
                 console.error(`missing emote ${i}`);

webAO/packets/packets.ts

@@ -38,6 +38,8 @@ import { handleASS } from './handlers/handleASS'
 import { handleackMS } from './handlers/handleackMS'
 import { handleSP } from './handlers/handleSP'
 import { handleJD } from './handlers/handleJD'
+import { handlePU } from './handlers/handlePU'
+import { handlePR } from './handlers/handlePR'
 
 export const packets = {
     "MS": handleMS,
@@ -80,6 +82,8 @@ export const packets = {
     "ackMS": handleackMS,
     "SP": handleSP,
     "JD": handleJD,
+    "PU": handlePU,
+    "PR": handlePR,
     "decryptor": () => { },
     "CHECK": () => { },
     "CH": () => { },

webAO/ui.js

@@ -47,11 +47,22 @@ const config = {
           }],
         },
         {
-          type: 'component',
-          title: 'Music',
+          type: 'stack',
           width: 30,
-          componentName: 'template',
-          componentState: { id: 'music' },
+          content: [{
+            type: 'component',
+            isClosable: false,
+            title: 'Music',
+            componentName: 'template',
+            componentState: { id: 'music' },
+          },
+          {
+            type: 'component',
+            isClosable: false,
+            title: 'Players',
+            componentName: 'template',
+            componentState: { id: 'players' },
+          }],
         }],
       },
       {