From 267c3b81fe8cd10578a6cd68e74cebbd5d130bf5 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Tue, 6 Aug 2024 16:13:19 +0200 Subject: add playerlist template --- public/client.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/client.html b/public/client.html index f4075b7..cfc6d88 100644 --- a/public/client.html +++ b/public/client.html @@ -631,4 +631,10 @@ + + -- cgit From a87d5a87167ee790b395f57eb5da19fbaa684537 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 7 Aug 2024 19:23:44 +0200 Subject: update layout --- public/client.html | 2 +- webAO/client/handleCharacterInfo.ts | 38 +++++++++++++++++++------------------ webAO/packets/handlers/handlePR.ts | 23 ++++++++++++++++++++++ webAO/packets/handlers/handlePU.ts | 9 +++++++++ webAO/packets/handlers/handlePV.ts | 25 +++++++++++++++--------- webAO/ui.js | 19 +++++++++++++++---- 6 files changed, 84 insertions(+), 32 deletions(-) create mode 100644 webAO/packets/handlers/handlePR.ts create mode 100644 webAO/packets/handlers/handlePU.ts diff --git a/public/client.html b/public/client.html index cfc6d88..ae27a2f 100644 --- a/public/client.html +++ b/public/client.html @@ -633,7 +633,7 @@ diff --git a/webAO/client/handleCharacterInfo.ts b/webAO/client/handleCharacterInfo.ts index 9d74a8b..86d1a09 100644 --- a/webAO/client/handleCharacterInfo.ts +++ b/webAO/client/handleCharacterInfo.ts @@ -6,6 +6,24 @@ import fileExists from "../utils/fileExists"; import { AO_HOST } from "./aoHost"; +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 = 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 { diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts new file mode 100644 index 0000000..1908077 --- /dev/null +++ b/webAO/packets/handlers/handlePR.ts @@ -0,0 +1,23 @@ +import { client } from "../../client"; + +function addPlayer(playerID) { +const list = document.getElementById("client_playerlist"); + +} + +function removePlayer(playerID) { + const list = document.getElementById("client_playerlist"); + +} + +/** + * 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); +} \ No newline at end of file diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts new file mode 100644 index 0000000..0bc1201 --- /dev/null +++ b/webAO/packets/handlers/handlePU.ts @@ -0,0 +1,9 @@ +import { getCharIcon } from "../../client/handleCharacterInfo"; + +/** + * Handles a playerlist update + * @param {Array} args packet arguments + */ +export const handlePU = (args: string[]) => { + const playerID = Number(args[1]); +} \ No newline at end of file diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts index 879d004..38657be 100644 --- a/webAO/packets/handlers/handlePV.ts +++ b/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}`); diff --git a/webAO/ui.js b/webAO/ui.js index f82688c..154b008 100644 --- a/webAO/ui.js +++ b/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' }, + }], }], }, { -- cgit From 26d5691ce5d3840c458745409a70f196dc5474f3 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 7 Aug 2024 19:33:35 +0200 Subject: adding and removing works --- webAO/client/handleCharacterInfo.ts | 2 +- webAO/packets/handlers/handlePR.ts | 21 +++++++++++++++------ webAO/packets/packets.ts | 4 ++++ 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/webAO/client/handleCharacterInfo.ts b/webAO/client/handleCharacterInfo.ts index 86d1a09..cd024b5 100644 --- a/webAO/client/handleCharacterInfo.ts +++ b/webAO/client/handleCharacterInfo.ts @@ -6,7 +6,7 @@ import fileExists from "../utils/fileExists"; import { AO_HOST } from "./aoHost"; -const getCharIcon = async (img: HTMLImageElement, charname: string) => { +export const getCharIcon = async (img: HTMLImageElement, charname: string) => { const extensions = [".png", ".webp"]; img.alt = charname; const charIconBaseUrl = `${AO_HOST}characters/${encodeURI( diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts index 1908077..aa365af 100644 --- a/webAO/packets/handlers/handlePR.ts +++ b/webAO/packets/handlers/handlePR.ts @@ -1,13 +1,22 @@ import { client } from "../../client"; -function addPlayer(playerID) { -const list = document.getElementById("client_playerlist"); +function addPlayer(playerID: Number) { + const list = 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 nameCell = playerRow.insertCell(1); + const name = document.createTextNode('Unknown'); + nameCell.appendChild(name); } -function removePlayer(playerID) { - const list = document.getElementById("client_playerlist"); - +function removePlayer(playerID: Number) { + const playerRow = document.getElementById(`client_playerlist_entry${playerID}`); + playerRow.remove(); } /** @@ -19,5 +28,5 @@ export const handlePR = (args: string[]) => { if (Number(args[2]) === 0) addPlayer(playerID); else if (Number(args[2]) === 1) - removePlayer(playerID); + removePlayer(playerID); } \ No newline at end of file diff --git a/webAO/packets/packets.ts b/webAO/packets/packets.ts index 79c43c1..ab6e3b0 100644 --- a/webAO/packets/packets.ts +++ b/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": () => { }, -- cgit From 8bbb97917a595ebbd2cef080b3df6cb331193663 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 7 Aug 2024 20:04:58 +0200 Subject: populate fields correctly --- webAO/packets/handlers/handlePR.ts | 9 +++++++-- webAO/packets/handlers/handlePU.ts | 22 +++++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts index aa365af..d3f4364 100644 --- a/webAO/packets/handlers/handlePR.ts +++ b/webAO/packets/handlers/handlePR.ts @@ -9,9 +9,14 @@ function addPlayer(playerID: Number) { const img = document.createElement('img'); imgCell.appendChild(img); - const nameCell = playerRow.insertCell(1); const name = document.createTextNode('Unknown'); - nameCell.appendChild(name); + + const charNameCell = playerRow.insertCell(1); + charNameCell.appendChild(name); + const showNameCell = playerRow.insertCell(2); + showNameCell.appendChild(name); + const oocNameCell = playerRow.insertCell(3); + oocNameCell.appendChild(name); } function removePlayer(playerID: Number) { diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts index 0bc1201..6db644b 100644 --- a/webAO/packets/handlers/handlePU.ts +++ b/webAO/packets/handlers/handlePU.ts @@ -5,5 +5,25 @@ import { getCharIcon } from "../../client/handleCharacterInfo"; * @param {Array} args packet arguments */ export const handlePU = (args: string[]) => { - const playerID = Number(args[1]); + const playerRow = document.getElementById(`client_playerlist_entry${Number(args[1])}`); + const type = Number(args[2]); + const data = args[3]; + switch (type) { + case 0: + const oocName = playerRow.childNodes[3]; + oocName.innerText = data; + break; + case 1: + const playerImg = playerRow.childNodes[0].firstChild; + getCharIcon(playerImg, data); + const charName = playerRow.childNodes[1]; + charName.innerText = data; + break; + case 2: + const showName = playerRow.childNodes[2]; + showName.innerText = data; + break; + default: + break; + } } \ No newline at end of file -- cgit From 73373ce08b060c97fcb6311e862b8261c3222d9f Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 7 Aug 2024 20:49:33 +0200 Subject: add ban button --- webAO/client/sender/index.ts | 5 ++++- webAO/client/sender/sendMA.ts | 11 +++++++++++ webAO/dom/banPlayer.ts | 14 ++++++++++++++ webAO/dom/window.ts | 3 ++- webAO/packets/handlers/handlePR.ts | 11 +++++++++-- webAO/packets/handlers/handlePV.ts | 2 +- 6 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 webAO/client/sender/sendMA.ts create mode 100644 webAO/dom/banPlayer.ts diff --git a/webAO/client/sender/index.ts b/webAO/client/sender/index.ts index 41a6bd5..4781ec1 100644 --- a/webAO/client/sender/index.ts +++ b/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 } \ No newline at end of file diff --git a/webAO/client/sender/sendMA.ts b/webAO/client/sender/sendMA.ts new file mode 100644 index 0000000..5ba4e4b --- /dev/null +++ b/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}#%`); +} \ No newline at end of file diff --git a/webAO/dom/banPlayer.ts b/webAO/dom/banPlayer.ts new file mode 100644 index 0000000..a8f6d5a --- /dev/null +++ b/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", ""); + length = Number(prompt("Please enter the ban length in hours", "")); + + client.sender.sendMA(id, length, reason); +} +window.banPlayer = banPlayer; \ No newline at end of file diff --git a/webAO/dom/window.ts b/webAO/dom/window.ts index 3215b89..f2cd86c 100644 --- a/webAO/dom/window.ts +++ b/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; } } diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts index d3f4364..a52ad1f 100644 --- a/webAO/packets/handlers/handlePR.ts +++ b/webAO/packets/handlers/handlePR.ts @@ -1,6 +1,7 @@ import { client } from "../../client"; +import { banPlayer } from '../../dom/banPlayer' -function addPlayer(playerID: Number) { +function addPlayer(playerID: number) { const list = document.getElementById("client_playerlist"); const playerRow = list.insertRow(); playerRow.id = `client_playerlist_entry${playerID}`; @@ -17,9 +18,15 @@ function addPlayer(playerID: Number) { showNameCell.appendChild(name); const oocNameCell = playerRow.insertCell(3); oocNameCell.appendChild(name); + + const banCell = playerRow.insertCell(4); + const ban = document.createElement("button"); + ban.innerText = "Ban"; + ban.onclick = () => { window.banPlayer(playerID) } + banCell.appendChild(ban); } -function removePlayer(playerID: Number) { +function removePlayer(playerID: number) { const playerRow = document.getElementById(`client_playerlist_entry${playerID}`); playerRow.remove(); } diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts index 38657be..5a04b89 100644 --- a/webAO/packets/handlers/handlePV.ts +++ b/webAO/packets/handlers/handlePV.ts @@ -4,7 +4,7 @@ import { updateActionCommands } from '../../dom/updateActionCommands' import { pickEmotion } from '../../dom/pickEmotion' import { AO_HOST } from "../../client/aoHost"; -function addEmoteButton(i: Number, imgurl: string, desc: string) { +function addEmoteButton(i: number, imgurl: string, desc: string) { const emotesList = document.getElementById("client_emo"); const emote_item = new Image(); emote_item.id = "emo_" + i; -- cgit From dc85197c9b966105813dd026480f9f6bc77d8b68 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 7 Aug 2024 23:40:05 +0200 Subject: correct units --- webAO/dom/banPlayer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webAO/dom/banPlayer.ts b/webAO/dom/banPlayer.ts index a8f6d5a..5a8894a 100644 --- a/webAO/dom/banPlayer.ts +++ b/webAO/dom/banPlayer.ts @@ -6,8 +6,8 @@ import { client } from '../client' export function banPlayer(id: number) { let reason; let length; - reason = prompt("Please enter the ban reason", ""); - length = Number(prompt("Please enter the ban length in hours", "")); + 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); } -- cgit