algui - npm Package Compare versions

Comparing version 0.1.21 to 0.1.22

build/algui/index.d.ts

@@ -1,5 +0,4 @@
-import { GData } from "alclient";
+import { GData, Mage, Observer, Paladin, Priest, Ranger, Rogue, Warrior } from "alclient";
 import { Socket } from "socket.io-client";
-import { MapData } from "../definitions/server";
 export declare function startServer(port: number, g: GData): void;
-export declare function addSocket(tabName: string, characterSocket: Socket, initialPosition?: MapData): void;
+export declare function addSocket(tabName: string, characterSocket: Socket, object: Observer | Warrior | Priest | Mage | Ranger | Rogue | Paladin): void;

build/algui/index.js

@@ -0,1 +1,2 @@
+import { Mage, Paladin, Priest, Ranger, Rogue, Warrior } from "alclient";
 import Express from "express";
@@ -35,4 +36,10 @@ import Http from "http";
                 connection.emit("character", characterData);
+            if (tabData.items)
+                connection.emit("inventory", newTab, { gold: tabData.gold, items: tabData.items });
+            else
+                connection.emit("removeInv");
             if (tabData.bank)
-                connection.emit("bank", tabData.bank);
+                connection.emit("bank", newTab, tabData.bank);
+            else
+                connection.emit("removeBank");
         });
@@ -43,4 +50,9 @@ for (const [tab] of observers)
 }
-export function addSocket(tabName, characterSocket, initialPosition = { map: "main", x: 0, y: 0 }) {
+export function addSocket(tabName, characterSocket, object) {
     if (!observers.has(tabName)) {
+        const initialPosition = {
+            map: object.map,
+            x: object.x,
+            y: object.y
+        };
         observers.set(tabName, {
@@ -53,3 +65,15 @@ mapData: {
             monsters: new Map(),
-            players: new Map()
+            players: new Map(),
+            items: (object instanceof Warrior
+                || object instanceof Priest
+                || object instanceof Mage
+                || object instanceof Ranger
+                || object instanceof Rogue
+                || object instanceof Paladin) ? object.items : undefined,
+            gold: (object instanceof Warrior
+                || object instanceof Priest
+                || object instanceof Mage
+                || object instanceof Ranger
+                || object instanceof Rogue
+                || object instanceof Paladin) ? object.gold : undefined
         });
@@ -82,3 +106,3 @@ io.emit("newTab", tabName);
                     break;
-                if (args.ray) {
+                if (G.projectiles[args.projectile]?.ray) {
                     const data = args;
@@ -89,3 +113,3 @@ const rayData = {
                         pid: data.pid,
-                        ray: data.ray,
+                        ray: data.projectile,
                         x: attacker.x,
@@ -96,3 +120,3 @@ y: attacker.y
                 }
-                else if (args.projectile) {
+                else if (G.projectiles[args.projectile]?.animation) {
                     const data = args;
@@ -112,3 +136,2 @@ const projectileData = {
             case "chest_opened": {
-                const data = args;
                 break;
@@ -131,3 +154,2 @@ }
             case "disappearing_text": {
-                const data = args;
                 break;
@@ -141,3 +163,2 @@ }
             case "drop": {
-                const data = args;
                 break;
@@ -175,2 +196,3 @@ }
                     const characterData = {
+                        ctype: player.ctype,
                         cx: player.cx,
@@ -181,4 +203,7 @@ going_x: player.going_x,
                         id: player.id,
+                        level: player.level,
                         max_hp: player.max_hp,
+                        max_mp: player.max_mp,
                         moving: player.moving,
+                        mp: player.mp,
                         s: player.s || {},
@@ -197,7 +222,5 @@ skin: player.skin,
             case "game_log": {
-                const data = args;
                 break;
             }
             case "hit": {
-                const data = args;
                 break;
@@ -239,2 +262,3 @@ }
                     const characterData = {
+                        ctype: player.ctype,
                         cx: player.cx,
@@ -245,4 +269,7 @@ going_x: player.going_x,
                         id: player.id,
+                        level: player.level,
                         max_hp: player.max_hp,
+                        max_mp: player.max_mp,
                         moving: player.moving,
+                        mp: player.mp,
                         s: player.s || {},
@@ -266,2 +293,3 @@ skin: player.skin,
                 const characterData = {
+                    ctype: data.ctype,
                     cx: data.cx,
@@ -272,4 +300,7 @@ going_x: data.going_x,
                     id: data.id,
+                    level: data.level,
                     max_hp: data.max_hp,
+                    max_mp: data.max_mp,
                     moving: data.moving,
+                    mp: data.mp,
                     s: data.s || {},
@@ -282,5 +313,8 @@ skin: data.skin,
                 };
+                tabData.gold = data.gold;
+                tabData.items = data.items;
+                const invData = { gold: data.gold, items: data.items };
+                io.to(tabName).emit("inventory", tabName, invData);
                 if (data.user) {
                     tabData.bank = data.user;
-                    io.to(tabName).emit("bank", data.user);
                 }
@@ -287,0 +321,0 @@ io.to(tabName).emit("character", characterData);

build/client/index.js

@@ -37,3 +37,3 @@ import * as PIXI from "pixi.js";
 resize();
-PIXI.Loader.shared.add({ name: "m5x7", url: "./assets/m5x7.woff2" });
+PIXI.Loader.shared.add({ name: "m5x7", url: "./assets/m5x7.ttf" });
 for (const name in G.tilesets) {
@@ -53,5 +53,5 @@ const gTileset = G.tilesets[name];
     let currentMap = undefined;
-    const text = new PIXI.Text("map: undefined, x: 0.00, y: 0.00", { fill: "white", fontFamily: "m5x7", fontSize: 28, lineHeight: 28, lineJoin: "round", strokeThickness: 5 });
+    const text = new PIXI.Text("map: undefined, x: 0.00, y: 0.00", { fill: "white", fontFamily: "m5x7", fontSize: 48, lineHeight: 48, lineJoin: "round" });
     text.anchor.set(0, 0);
-    text.zIndex = 3;
+    text.zIndex = 4;
     app.stage.addChild(text);
@@ -67,2 +67,5 @@ PIXI.Ticker.shared.add(() => {
     viewport.addChild(hpBars);
+    const idTags = new PIXI.Container();
+    idTags.zIndex = 3;
+    viewport.addChild(idTags);
     const layers = {
@@ -72,2 +75,3 @@ background: undefined,
         hpBars: hpBars,
+        idTags: idTags,
         viewport: viewport
@@ -91,2 +95,5 @@ };
             document.body.appendChild(menu);
+            const submenu = document.createElement("div");
+            submenu.setAttribute("id", "submenu");
+            document.body.appendChild(submenu);
         }
@@ -109,5 +116,166 @@ const menu = document.getElementById("menu");
     });
+    let isInventoryDisplayed = false;
+    socket.on("inventory", (id, data) => {
+        if (isInventoryDisplayed) {
+            updateInv(data);
+        }
+        else {
+            const invID = `${id}_inv`;
+            let button = document.getElementById(invID);
+            if (!button) {
+                const menu = document.getElementById("submenu");
+                button = document.createElement("div");
+                button.id = invID;
+                button.setAttribute("class", "inv_button");
+                const text = document.createTextNode("Inventory");
+                button.appendChild(text);
+                menu.appendChild(button);
+            }
+            button.onclick = () => {
+                isInventoryDisplayed = true;
+                const modal = document.createElement("div");
+                modal.setAttribute("class", "modal");
+                modal.onclick = () => {
+                    isInventoryDisplayed = false;
+                    modal.parentElement.removeChild(modal);
+                };
+                const imodal = document.createElement("div");
+                imodal.setAttribute("style", "display: inline-block; margin-bottom: 0px; margin-top: 313px; padding: 10px; text-align: left; position: relative;");
+                modal.appendChild(imodal);
+                const invContain = document.createElement("div");
+                invContain.setAttribute("style", "background-color: black; border: 5px solid gray; padding: 2px; font-size: 24px; display: inline-block; vertical-align: bottom; margin-top: 40px; margin-bottom: 40px;");
+                imodal.appendChild(invContain);
+                const goldCell = document.createElement("div");
+                goldCell.setAttribute("style", "padding: 4px; font-size: 32px;");
+                const goldText = document.createElement("span");
+                goldText.id = "goldText";
+                goldText.setAttribute("style", "color: gold;");
+                goldText.textContent = "GOLD";
+                const goldNum = document.createElement("span");
+                goldNum.setAttribute("style", "color: white;");
+                goldNum.textContent = data.gold.toLocaleString("en-US");
+                goldCell.appendChild(goldText);
+                const tn = document.createTextNode(": ");
+                goldCell.appendChild(tn);
+                goldCell.appendChild(goldNum);
+                invContain.appendChild(goldCell);
+                const divBorder = document.createElement("div");
+                divBorder.setAttribute("style", "border-bottom: 5px solid gray; margin-bottom: 2px; margin-left: -5px; margin-right: -5px;");
+                invContain.appendChild(divBorder);
+                const items = data.items;
+                for (let i = 0; i < 9; i++) {
+                    const row = document.createElement("div");
+                    row.setAttribute("id", `row_${i}`);
+                    invContain.appendChild(row);
+                    for (let j = 0; j < 5; j++) {
+                        const slot = document.createElement("div");
+                        const slotNum = (i * 5) + j;
+                        slot.setAttribute("style", "position: relative; display: inline-block; margin: 2px; border: 2px solid gray; height: 46px; width: 46px; background: black; vertical-align: top;");
+                        const divSlot = document.createElement("div");
+                        divSlot.setAttribute("style", "background: black; position: absolute; bottom: -2px; left: -2px; border: 2px solid gray; padding: 3px;");
+                        row.appendChild(slot);
+                        slot.appendChild(divSlot);
+                        const divFrame = document.createElement("div");
+                        divFrame.setAttribute("style", "overflow: hidden; height: 40px; width: 40px;");
+                        divFrame.id = `frame_${slotNum}`;
+                        divSlot.appendChild(divFrame);
+                        const item = items[slotNum];
+                        if (!item)
+                            continue;
+                        const itemPos = G.positions[item.name];
+                        let itemFile = "./images/tiles/items/";
+                        switch (itemPos[0]) {
+                            case "":
+                                itemFile += "pack_20vt8.png";
+                                break;
+                            case "pack_1a":
+                                itemFile += "pack_1a.png";
+                                break;
+                            case "custom":
+                                itemFile += "custom.png";
+                                break;
+                        }
+                        const img = document.createElement("img");
+                        img.setAttribute("src", itemFile);
+                        const imgData = G.images[itemFile.replace("./", "/")];
+                        const width = imgData.width * 2;
+                        const height = imgData.height * 2;
+                        const itemLeft = -(itemPos[1] * 40);
+                        const itemTop = -(itemPos[2] * 40);
+                        img.setAttribute("style", `width: ${width}px; height: ${height}px; margin-top: ${itemTop}px; margin-left: ${itemLeft}px;`);
+                        divFrame.appendChild(img);
+                        if (item.q && item.q > 1) {
+                            const iq = document.createElement("div");
+                            let iqStyle = "border: 2px solid gray; background: black; padding: 1px 2px 1px 3px; position: absolute; right: -2px; bottom: -2px; text-align: center; line-height: 16px; font-size: 24px; height: 16px;";
+                            if (item.name.includes("hp"))
+                                iqStyle += " color: #F37A87;";
+                            else if (item.name.includes("mp"))
+                                iqStyle += " color: #66B3F6;";
+                            iq.setAttribute("style", iqStyle);
+                            iq.textContent = item.q.toString(10);
+                            divFrame.appendChild(iq);
+                        }
+                    }
+                }
+                document.body.appendChild(modal);
+            };
+        }
+    });
+    function updateInv(data) {
+        const goldText = document.getElementById("goldText");
+        goldText.textContent = data.gold.toLocaleString("en-US");
+        for (const i in data.items) {
+            const frame = document.getElementById(`frame_${i}`);
+            const item = data.items[i];
+            if (!item) {
+                if (!frame.hasChildNodes)
+                    continue;
+                frame.childNodes.forEach((node) => {
+                    frame.removeChild(node);
+                });
+            }
+            const itemPos = G.positions[item.name];
+            let itemFile = "./images/tiles/items/";
+            switch (itemPos[0]) {
+                case "":
+                    itemFile += "pack_20vt8.png";
+                    break;
+                case "pack_1a":
+                    itemFile += "pack_1a.png";
+                    break;
+                case "custom":
+                    itemFile += "custom.png";
+                    break;
+            }
+            const img = document.createElement("img");
+            img.setAttribute("src", itemFile);
+            const imgData = G.images[itemFile.replace("./", "/")];
+            const width = imgData.width * 2;
+            const height = imgData.height * 2;
+            const itemLeft = -(itemPos[1] * 40);
+            const itemTop = -(itemPos[2] * 40);
+            img.setAttribute("style", `width: ${width}px; height: ${height}px; margin-top: ${itemTop}px; margin-left: ${itemLeft}px;`);
+            frame.appendChild(img);
+            if (item.q && item.q > 1) {
+                const iq = document.createElement("div");
+                let iqStyle = "border: 2px solid gray; background: black; padding: 1px 2px 1px 3px; position: absolute; right: -2px; bottom: -2px; text-align: center; line-height: 16px; font-size: 24px; height: 16px;";
+                if (item.name.includes("hp"))
+                    iqStyle += " color: #F37A87;";
+                else if (item.name.includes("mp"))
+                    iqStyle += " color: #66B3F6;";
+                iq.setAttribute("style", iqStyle);
+                iq.textContent = item.q.toString(10);
+                frame.appendChild(iq);
+            }
+        }
+    }
+    socket.on("removeInv", () => {
+        const inv = document.getElementById("inv");
+        if (inv)
+            inv.parentNode.removeChild(inv);
+    });
     let lastMap = undefined;
     const mapCache = new Map();
     socket.on("map", (data) => {
+        viewport.plugins.remove("follow");
         currentMap = data.map;
@@ -114,0 +282,0 @@ text.text = `map: ${data.map}, x: ${data.x.toFixed(2)}, y: ${data.y.toFixed(2)}`;

build/client/map.js

@@ -119,5 +119,5 @@ import * as PIXI from "pixi.js";
             let minY = Number.MAX_SAFE_INTEGER;
-            let maxY = Number.MIN_SAFE_INTEGER;
+            const maxY = Number.MIN_SAFE_INTEGER;
             let isGroupAnimated = false;
-            for (const [index, x1, y1, x2, y2] of group) {
+            for (const [index, x1, y1] of group) {
                 if (x1 < minX)
@@ -127,30 +127,10 @@ minX = x1;
                     minY = y1;
-                if (y2 > maxY)
-                    maxY = y2;
                 const textures = getMapTextures(map, index);
                 if (textures.length == 1) {
                     const texture = textures[0];
-                    if (x2 != undefined) {
-                        for (let x = x1; x <= x2; x += texture.width) {
-                            for (let y = y1; y <= y2; y += texture.height) {
-                                groupTile.addChild(createTile(texture, x, y));
-                            }
-                        }
-                    }
-                    else {
-                        groupTile.addChild(createTile(texture, x1, y1));
-                    }
+                    groupTile.addChild(createTile(texture, x1, y1));
                 }
                 else {
                     isGroupAnimated = true;
-                    if (x2 != undefined) {
-                        for (let x = x1; x <= x2; x += textures[0].width) {
-                            for (let y = y1; y <= y2; y += textures[0].height) {
-                                groupTile.addChild(createAnimatedTile(textures, x, y));
-                            }
-                        }
-                    }
-                    else {
-                        groupTile.addChild(createAnimatedTile(textures, x1, y1));
-                    }
+                    groupTile.addChild(createAnimatedTile(textures, x1, y1));
                 }
@@ -157,0 +137,0 @@ }

build/client/projectile.js

@@ -29,3 +29,3 @@ import * as PIXI from "pixi.js";
         if (datum) {
-            datum.sprite.destroy({ children: true });
+            datum.sprite.destroy({ baseTexture: false, children: true, texture: false });
             projectiles.delete(pid);
@@ -43,3 +43,3 @@ }
         if (datum) {
-            datum.sprite.destroy({ children: true });
+            datum.sprite.destroy({ baseTexture: false, children: true, texture: false });
             rays.delete(pid);
@@ -60,2 +60,3 @@ }
         const textures = getProjectileTextures(projectile.projectile);
+        console.log(textures);
         sprite = new PIXI.AnimatedSprite(textures);
@@ -62,0 +63,0 @@ sprite.interactive = false;

build/client/sprite.d.ts

@@ -17,2 +17,4 @@ import * as PIXI from "pixi.js";
     hpBar: PIXI.Graphics;
+    idTag: PIXI.Graphics;
+    manaBar: PIXI.Graphics;
     sprite: PIXI.AnimatedSprite;
@@ -19,0 +21,0 @@ textures: PIXI.Texture[][];

build/client/sprite.js

 import * as PIXI from "pixi.js";
-import { getCosmeticFaceTextures, getCosmeticHairTextures, getCosmeticHatTextures, getCosmeticMakeupTextures, getSkinColorTextures, getSkinTextures, getSkinType } from "./texture";
+import { getCosmeticFaceTextures, getCosmeticHairTextures, getCosmeticHatTextures, getCosmeticHeadTextures, getCosmeticMakeupTextures, getSkinColorTextures, getSkinTextures, getSkinType } from "./texture";
 import G from "../G.json";
 import { addFilter, BURNED_FILTER, POISONED_FILTER, removeFilter } from "./filters";
-let focused;
+let focusedChar;
+let focusedMon;
 const monsters = new Map();
@@ -69,8 +70,9 @@ const characters = new Map();
         const hpBar = datum.hpBar;
-        hpBar.visible = (focused == datum.data.id) || (datum.focusedHover ?? false);
+        hpBar.visible = (focusedMon == datum.data.id) || (datum.focusedHover ?? false);
         if (hpBar.visible) {
             hpBar.clear();
-            hpBar.beginFill(0x000000).lineStyle(0).drawRect(datum.sprite.x, datum.sprite.y - 4, datum.sprite.width, 4)
-                .beginFill(0xFF0000).lineStyle(0).drawRect(datum.sprite.x + 1, datum.sprite.y - 3, (datum.sprite.width - 2) * datum.data.hp / datum.data.max_hp, 2);
-            hpBar.scale.set(1 / datum.sprite.scale.x, 1 / datum.sprite.scale.y);
+            const spriteHalfWidth = datum.sprite.width / 2;
+            hpBar.beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(datum.sprite.x - (20 - spriteHalfWidth), datum.sprite.y - 12, 40, 10)
+                .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(datum.sprite.x - (18 - spriteHalfWidth), datum.sprite.y - 10, 36, 6)
+                .beginFill(0xFF0000).lineStyle(1, 0xFF0000, 1, 1, true).drawRect(datum.sprite.x - (16 - spriteHalfWidth), datum.sprite.y - 8, 32 * (datum.data.hp / datum.data.max_hp), 2);
         }
@@ -82,4 +84,4 @@ datum.sprite.zIndex = datum.data.y;
         if (datum) {
-            datum.hpBar.destroy();
-            datum.sprite.destroy({ children: true });
+            datum.hpBar.destroy({ baseTexture: false, children: true, texture: false });
+            datum.sprite.destroy({ baseTexture: false, children: true, texture: false });
             monsters.delete(id);
@@ -151,9 +153,55 @@ }
         const hpBar = datum.hpBar;
-        hpBar.visible = (focused == datum.data.id) || (datum.focusedHover ?? false);
+        const manaBar = datum.manaBar;
+        hpBar.visible = (focusedChar == datum.data.id) || (datum.focusedHover ?? false);
+        manaBar.visible = (focusedChar == datum.data.id);
         if (hpBar.visible) {
             hpBar.clear();
-            hpBar.beginFill(0x000000).lineStyle(0).drawRect(datum.sprite.x, datum.sprite.y - 4, datum.sprite.width, 4)
-                .beginFill(0xFF0000).lineStyle(0).drawRect(datum.sprite.x + 1, datum.sprite.y - 3, (datum.sprite.width - 2) * datum.data.hp / datum.data.max_hp, 2);
-            hpBar.scale.set(1 / datum.sprite.scale.x, 1 / datum.sprite.scale.y);
+            const spriteHalfWidth = datum.sprite.width / 2;
+            hpBar.beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(datum.sprite.x - (20 - spriteHalfWidth), datum.sprite.y - 30, 40, 10)
+                .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(datum.sprite.x - (18 - spriteHalfWidth), datum.sprite.y - 28, 36, 6)
+                .beginFill(0xFF0000).lineStyle(1, 0xFF0000, 1, 1, true).drawRect(datum.sprite.x - (16 - spriteHalfWidth), datum.sprite.y - 26, 32 * (datum.data.hp / datum.data.max_hp), 2);
         }
+        if (manaBar.visible) {
+            manaBar.clear();
+            const spriteHalfWidth = datum.sprite.width / 2;
+            manaBar.beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(datum.sprite.x - (20 - spriteHalfWidth), datum.sprite.y - 6, 40, 10)
+                .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(datum.sprite.x - (18 - spriteHalfWidth), datum.sprite.y - 4, 36, 6)
+                .beginFill(0x0000FF).lineStyle(1, 0x0000FF, 1, 1, true).drawRect(datum.sprite.x - (16 - spriteHalfWidth), datum.sprite.y - 2, 32 * (datum.data.mp / datum.data.max_mp), 2);
+        }
+        const idTag = datum.idTag;
+        const idText = new PIXI.Text(datum.data.id, new PIXI.TextStyle({ align: "center", fill: 0xFFFFFF, fontFamily: "m5x7", fontSize: 24 }));
+        const idClass = new PIXI.Text(datum.data.ctype[0].toUpperCase(), new PIXI.TextStyle({ align: "center", fill: getClassColor(datum.data.ctype), fontFamily: "m5x7", fontSize: 24 }));
+        const idLvl = new PIXI.Text(datum.data.level.toString(), new PIXI.TextStyle({ align: "center", fill: 0xFFFFFF, fontFamily: "m5x7", fontSize: 24 }));
+        idText.blendMode = PIXI.BLEND_MODES.NORMAL_NPM;
+        idClass.blendMode = PIXI.BLEND_MODES.NORMAL_NPM;
+        idLvl.blendMode = PIXI.BLEND_MODES.NORMAL_NPM;
+        idText.scale.set(0.5);
+        idClass.scale.set(0.5);
+        idLvl.scale.set(0.5);
+        idText.roundPixels = true;
+        idClass.roundPixels = true;
+        idLvl.roundPixels = true;
+        idTag.visible = datum.sprite.visible;
+        idClass.visible = (focusedChar == datum.data.id) || (datum.focusedHover ?? false);
+        idLvl.visible = idClass.visible;
+        idText.x = datum.sprite.x - ((idText.width / 2) - (datum.sprite.width / 2));
+        idClass.x = idText.x - (idClass.width + 6);
+        idLvl.x = (idText.x + idText.width) + 6;
+        idText.y = datum.sprite.y - 18;
+        idClass.y = idText.y;
+        idLvl.y = idText.y;
+        idTag.clear();
+        idTag.blendMode = PIXI.BLEND_MODES.NORMAL_NPM;
+        idTag.beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(idText.x - 4, idText.y - 4, idText.width + 8, idText.height + 8)
+            .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(idText.x - 2, idText.y - 2, idText.width + 4, idText.height + 4);
+        if (idClass.visible) {
+            idTag.beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(idClass.x - 4, idClass.y - 4, idClass.width + 8, idClass.height + 8)
+                .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(idClass.x - 2, idClass.y - 2, idClass.width + 4, idClass.height + 4)
+                .beginFill(0x888888).lineStyle(1, 0x888888, 1, 1, true).drawRect(idLvl.x - 4, idLvl.y - 4, idLvl.width + 8, idLvl.height + 8)
+                .beginFill(0x000000).lineStyle(1, 0x000000, 1, 1, true).drawRect(idLvl.x - 2, idLvl.y - 2, idLvl.width + 4, idLvl.height + 4);
+        }
+        for (const child of idTag.children) {
+            child.destroy();
+        }
+        idTag.addChild(idText, idClass, idLvl);
         datum.sprite.zIndex = datum.data.y;
@@ -180,4 +228,6 @@ }
     if (character) {
-        character.hpBar.destroy();
-        character.sprite.destroy({ children: true });
+        character.hpBar.destroy({ baseTexture: false, children: true, texture: false });
+        character.manaBar.destroy({ baseTexture: false, children: true, texture: false });
+        character.idTag.destroy({ baseTexture: false, children: true, texture: false });
+        character.sprite.destroy({ baseTexture: false, children: true, texture: false });
         characters.delete(id);
@@ -192,9 +242,11 @@ return;
     for (const [, character] of characters) {
-        character.hpBar.destroy();
-        character.sprite.destroy({ children: true });
+        character.hpBar.destroy({ baseTexture: false, children: true, texture: false });
+        character.manaBar.destroy({ baseTexture: false, children: true, texture: false });
+        character.sprite.destroy({ baseTexture: false, children: true, texture: false });
+        character.idTag.destroy({ baseTexture: false, children: true, texture: false });
     }
     characters.clear();
     for (const [, monster] of monsters) {
-        monster.hpBar.destroy();
-        monster.sprite.destroy({ children: true });
+        monster.hpBar.destroy({ baseTexture: false, children: true, texture: false });
+        monster.sprite.destroy({ baseTexture: false, children: true, texture: false });
     }
@@ -229,11 +281,25 @@ monsters.clear();
         const hpBar = new PIXI.Graphics();
+        const manaBar = new PIXI.Graphics();
         hpBar.visible = false;
-        sprite.on("click", () => { focused = character.id; });
+        manaBar.visible = false;
+        sprite.on("click", () => {
+            if (focusedChar != character.id) {
+                focusedChar = character.id;
+            }
+            else {
+                focusedChar = null;
+            }
+        });
         sprite.on("mouseover", () => { datum.focusedHover = true; });
         sprite.on("mouseout", () => { datum.focusedHover = false; });
-        layers.hpBars.addChild(hpBar);
+        layers.hpBars.addChild(hpBar, manaBar);
+        const idTag = new PIXI.Graphics();
+        idTag.visible = false;
+        layers.idTags.addChild(idTag);
         const datum = {
             data: character,
             hpBar: hpBar,
+            idTag: idTag,
             lastDirection: initialDirection,
+            manaBar: manaBar,
             sprite: sprite,
@@ -257,3 +323,3 @@ textures: textures,
             if (character.cx.head) {
-                const headTextures = getCosmeticMakeupTextures(character.cx.head);
+                const headTextures = getCosmeticHeadTextures(character.cx.head);
                 const head = new PIXI.AnimatedSprite(headTextures[initialDirection]);
@@ -361,3 +427,10 @@ if (sprite.width !== head.width)
         hpBar.visible = false;
-        sprite.on("click", () => { focused = monster.id; });
+        sprite.on("click", () => {
+            if (focusedMon != monster.id) {
+                focusedMon = monster.id;
+            }
+            else {
+                focusedMon = null;
+            }
+        });
         sprite.on("mouseover", () => { datum.focusedHover = true; });
@@ -392,2 +465,14 @@ sprite.on("mouseout", () => { datum.focusedHover = false; });
 }
+function getClassColor(ctype) {
+    switch (ctype) {
+        case "merchant": return 0x7F7F7F;
+        case "mage": return 0x3E6EED;
+        case "warrior": return 0xF07F2F;
+        case "priest": return 0xEB4D82;
+        case "ranger": return 0x8A512B;
+        case "paladin": return 0xA3B4B9;
+        case "rogue": return 0x44B75C;
+        default: return 0xFFFFFF;
+    }
+}
 //# sourceMappingURL=sprite.js.map

build/client/texture.js

@@ -21,9 +21,12 @@ import * as PIXI from "pixi.js";
     textures = [];
-    const frame_width = baseTexture.width / gAnimation.frames;
-    const frame_height = baseTexture.height;
-    for (let i = 0; i < gAnimation.frames; i++) {
-        const x = i * frame_width;
-        const frame = new PIXI.Rectangle(x, 0, frame_width, frame_height);
-        textures.push(new PIXI.Texture(baseTexture, frame));
-    }
+    baseTexture.addListener("loaded", () => {
+        const frame_width = baseTexture.width / gAnimation.frames;
+        const frame_height = baseTexture.height;
+        for (let i = 0; i < gAnimation.frames; i++) {
+            const x = i * frame_width;
+            const frame = new PIXI.Rectangle(x, 0, frame_width, frame_height);
+            textures.push(new PIXI.Texture(baseTexture, frame));
+        }
+    });
+    animationTexturesCache.set(animation, textures);
     return textures;
@@ -30,0 +33,0 @@ };

build/definitions/client.d.ts

@@ -8,3 +8,4 @@ import { Viewport } from "pixi-viewport"
     hpBars: Container
+    idTags: Container
     viewport: Viewport
 }

build/definitions/server.d.ts

@@ -1,4 +0,5 @@
-import { BankInfo, CXData, MapName, ProjectileName, StatusInfo } from "alclient"
+import { BankInfo, CXData, ItemData, MapName, ProjectileName, StatusInfo } from "alclient"
 
 export type UICharacterData = {
+    ctype: string
     cx?: CXData
@@ -9,4 +10,7 @@ hp: number
     going_y: number
+    level: number
     max_hp: number
+    max_mp: number
     moving: boolean
+    mp: number
     s: StatusInfo
@@ -55,2 +59,7 @@ skin: string
 
+export type InventoryData = {
+    gold: number
+    items: ItemData[]
+}
+
 /** Signal to change the map, and center it at the coordinates provided */
@@ -68,7 +77,12 @@ export type MapData = {
     bank?: BankInfo
+    items?: ItemData[]
+    gold?: number
 }
 
 export type ServerToClientEvents = {
-    "bank": (bankInfo: BankInfo) => void
+    "bank": (id: string, bankInfo: BankInfo) => void
     "character": (characterData: UICharacterData) => void
+    "inventory": (id: string, data: InventoryData) => void
+    "removeInv": () => void
+    "removeBank": () => void
     "map": (mapData: MapData) => void
@@ -75,0 +89,0 @@ "monster": (MonsterData: UIMonsterData) => void

package.json

 {
   "name": "algui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "GUI Tests for the MMORPG Adventure.Land",
@@ -37,3 +37,3 @@ "main": "build/algui/index.js",
     "@typescript-eslint/parser": "^5.18.0",
-    "alclient": "^0.13.4",
+    "alclient": "^0.15.65",
     "copy-webpack-plugin": "^10.2.4",
@@ -56,2 +56,2 @@ "copyfiles": "^2.4.1",
   }
-}
+}

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of package files

314

increased by1.62%

Lines of code

23247

increased by1.5%

Worsened metrics

Total package byte prevSize

8808710

decreased by-1.4%

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes