@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist/objects/room/TileMapEditorLayer.js

@@ -0,0 +1,331 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileMapEditorLayer = void 0;
+const PIXI = __importStar(require("pixi.js"));
+const TILE_W = 64;
+const TILE_H = 32;
+// How many tiles to extend beyond the room boundary in each direction
+const EXTEND = 8;
+// Internal tile grid (existing room tiles)
+const GRID_COLOR = 0xffffff;
+const GRID_ALPHA = 0.22;
+// External ghost tiles (beyond room boundary)
+const EXT_COLOR = 0x6699ff;
+const EXT_ALPHA = 0.08;
+const EXT_LINE = 0x6699ff;
+const EXT_LINE_A = 0.12;
+// Hover
+const HOVER_FILL = 0x99ccff;
+const HOVER_ALPHA = 0.4;
+// Selection rect
+const SEL_FILL = 0xffffff;
+const SEL_ALPHA = 0.28;
+const SEL_LINE = 0xffffff;
+const SEL_LINE_A = 0.9;
+class TileMapEditorLayer extends PIXI.Container {
+    setPanning(active) {
+        this._isPanMode = active;
+        if (active) {
+            this._isPainting = false;
+            this._dragStart = null;
+            this._dragEnd = null;
+            this._selectionLayer.clear();
+        }
+    }
+    constructor(room, onPaint) {
+        super();
+        this._gridInternal = new PIXI.Graphics();
+        this._gridExternal = new PIXI.Graphics();
+        this._selectionLayer = new PIXI.Graphics();
+        this._hoverLayer = new PIXI.Graphics();
+        this._activeTile = "0";
+        this._tilemap = [];
+        this._tilePositions = [];
+        this._dragStart = null;
+        this._dragEnd = null;
+        this._isPainting = false;
+        this._lastHovered = null;
+        this._isPanMode = false;
+        this._room = room;
+        this._onPaint = onPaint;
+        // Order: external ghost behind internal grid, selection + hover on top
+        this.addChild(this._gridExternal);
+        this.addChild(this._gridInternal);
+        this.addChild(this._selectionLayer);
+        this.addChild(this._hoverLayer);
+        this._build();
+        this._attachEvents();
+    }
+    setActiveTile(type) {
+        this._activeTile = type;
+    }
+    refresh() {
+        this._build();
+        this._selectionLayer.clear();
+        this._hoverLayer.clear();
+        this._lastHovered = null;
+        this._dragStart = null;
+        this._dragEnd = null;
+    }
+    // ─── Build ─────────────────────────────────────────────────────────────────
+    _isoPos(rx, ry) {
+        return this._room.getPosition(rx, ry, 0);
+    }
+    _build() {
+        var _a;
+        this._tilemap = this._room.getTileMap();
+        this._tilePositions = [];
+        this._gridInternal.clear();
+        this._gridExternal.clear();
+        const rows = this._tilemap.length;
+        const cols = rows > 0 ? this._tilemap[0].length : 0;
+        // Bounds of walkable area (ignoring x-wall tiles)
+        let minWalkX = Infinity, minWalkY = Infinity;
+        let maxWalkX = -Infinity, maxWalkY = -Infinity;
+        for (let ry = 0; ry < rows; ry++) {
+            for (let rx = 0; rx < cols; rx++) {
+                if (this._tilemap[ry][rx] !== "x") {
+                    if (rx < minWalkX)
+                        minWalkX = rx;
+                    if (rx > maxWalkX)
+                        maxWalkX = rx;
+                    if (ry < minWalkY)
+                        minWalkY = ry;
+                    if (ry > maxWalkY)
+                        maxWalkY = ry;
+                }
+            }
+        }
+        if (minWalkX === Infinity) {
+            minWalkX = 0;
+            maxWalkX = 0;
+            minWalkY = 0;
+            maxWalkY = 0;
+        }
+        // Extended grid range
+        const extMinX = minWalkX - EXTEND;
+        const extMinY = minWalkY - EXTEND;
+        const extMaxX = maxWalkX + EXTEND;
+        const extMaxY = maxWalkY + EXTEND;
+        this._gridInternal.lineStyle(0.8, GRID_COLOR, GRID_ALPHA);
+        for (let ry = 0; ry < rows; ry++) {
+            for (let rx = 0; rx < cols; rx++) {
+                if (this._tilemap[ry][rx] === "x")
+                    continue;
+                const { x: sx, y: sy } = this._isoPos(rx, ry);
+                this._tilePositions.push({ rx, ry, sx, sy, external: false });
+                this._drawDiamondLine(this._gridInternal, sx, sy);
+            }
+        }
+        // External ghost tiles
+        this._gridExternal.lineStyle(0.6, EXT_LINE, EXT_LINE_A);
+        for (let ry = extMinY; ry <= extMaxY; ry++) {
+            for (let rx = extMinX; rx <= extMaxX; rx++) {
+                // Skip if already an internal tile
+                const isInternal = ry >= 0 && ry < rows &&
+                    rx >= 0 && rx < cols &&
+                    ((_a = this._tilemap[ry]) === null || _a === void 0 ? void 0 : _a[rx]) !== "x";
+                if (isInternal)
+                    continue;
+                const { x: sx, y: sy } = this._isoPos(rx, ry);
+                this._tilePositions.push({ rx, ry, sx, sy, external: true });
+                // Fill ghost tile very subtly
+                this._gridExternal.beginFill(EXT_COLOR, EXT_ALPHA);
+                this._drawDiamondFill(this._gridExternal, sx, sy);
+                this._gridExternal.endFill();
+                this._drawDiamondLine(this._gridExternal, sx, sy);
+            }
+        }
+    }
+    // ─── Drawing helpers ───────────────────────────────────────────────────────
+    _drawDiamondLine(g, sx, sy) {
+        // Matches TileCursor points: p1(0,16) p2(32,0) p3(64,16) p4(32,32)
+        // sx/sy is top-left of the tile bounding box
+        g.moveTo(sx, sy + TILE_H / 2); // left
+        g.lineTo(sx + TILE_W / 2, sy); // top
+        g.lineTo(sx + TILE_W, sy + TILE_H / 2); // right
+        g.lineTo(sx + TILE_W / 2, sy + TILE_H); // bottom
+        g.closePath();
+    }
+    _drawDiamondFill(g, sx, sy) {
+        g.moveTo(sx, sy + TILE_H / 2);
+        g.lineTo(sx + TILE_W / 2, sy);
+        g.lineTo(sx + TILE_W, sy + TILE_H / 2);
+        g.lineTo(sx + TILE_W / 2, sy + TILE_H);
+        g.closePath();
+    }
+    _isErasing() {
+        return this._activeTile === "x";
+    }
+    _drawHover(tile) {
+        this._hoverLayer.clear();
+        if (!tile)
+            return;
+        const color = this._isErasing() ? 0xff6666 : tile.external ? 0xffaa44 : HOVER_FILL;
+        const lineColor = this._isErasing() ? 0xff6666 : 0xffffff;
+        const lineAlpha = this._isErasing() ? 0.5 : 0.85;
+        this._hoverLayer.beginFill(color, HOVER_ALPHA);
+        this._hoverLayer.lineStyle(1, lineColor, lineAlpha);
+        this._drawDiamondFill(this._hoverLayer, tile.sx, tile.sy);
+        this._hoverLayer.endFill();
+    }
+    _drawSelection(start, end) {
+        this._selectionLayer.clear();
+        const tiles = this._tilesInRect(start, end);
+        const erasing = this._isErasing();
+        for (const t of tiles) {
+            const color = erasing ? 0xff6666 : t.external ? 0xffaa44 : SEL_FILL;
+            const lineColor = erasing ? 0xff6666 : SEL_LINE;
+            const lineAlpha = erasing ? 0.5 : SEL_LINE_A;
+            this._selectionLayer.beginFill(color, SEL_ALPHA);
+            this._selectionLayer.lineStyle(1, lineColor, lineAlpha);
+            this._drawDiamondFill(this._selectionLayer, t.sx, t.sy);
+            this._selectionLayer.endFill();
+        }
+    }
+    // ─── Hit test ──────────────────────────────────────────────────────────────
+    _hitTest(canvasX, canvasY) {
+        // Get the global (stage-space) position of this layer's origin
+        // by using the world transform. This handles camera offsets correctly.
+        const wt = this.worldTransform;
+        // wt.tx/ty = global position of local (0,0)
+        // wt.a/b/c/d = scale/rotation (assumed no rotation, scale=1)
+        // local = (canvasXY - wt.tx/ty) / scale
+        const scaleX = wt ? wt.a : 1;
+        const scaleY = wt ? wt.d : 1;
+        const localX = wt ? (canvasX - wt.tx) / scaleX : canvasX;
+        const localY = wt ? (canvasY - wt.ty) / scaleY : canvasY;
+        let best = null;
+        let bestDist = Infinity;
+        for (const tile of this._tilePositions) {
+            const cx = tile.sx + TILE_W / 2;
+            const cy = tile.sy + TILE_H / 2;
+            const dx = Math.abs(localX - cx) / (TILE_W / 2);
+            const dy = Math.abs(localY - cy) / (TILE_H / 2);
+            if (dx + dy <= 1.05) {
+                const dist = dx + dy;
+                if (dist < bestDist) {
+                    bestDist = dist;
+                    best = tile;
+                }
+            }
+        }
+        return best;
+    }
+    _tilesInRect(start, end) {
+        const minX = Math.min(start.rx, end.rx);
+        const maxX = Math.max(start.rx, end.rx);
+        const minY = Math.min(start.ry, end.ry);
+        const maxY = Math.max(start.ry, end.ry);
+        return this._tilePositions.filter((t) => t.rx >= minX && t.rx <= maxX && t.ry >= minY && t.ry <= maxY);
+    }
+    // ─── Commit paint ──────────────────────────────────────────────────────────
+    _commitPaint(start, end) {
+        const tiles = this._tilesInRect(start, end);
+        if (tiles.length === 0)
+            return;
+        const hasExternal = tiles.some((t) => t.external);
+        if (hasExternal) {
+            // Calculate how much the tilemap must expand to include all selected tiles
+            const tilemap = this._room.getTileMap();
+            const rows = tilemap.length;
+            const cols = rows > 0 ? tilemap[0].length : 0;
+            const allRX = tiles.map((t) => t.rx);
+            const allRY = tiles.map((t) => t.ry);
+            const selMinX = Math.min(...allRX);
+            const selMinY = Math.min(...allRY);
+            const selMaxX = Math.max(...allRX);
+            const selMaxY = Math.max(...allRY);
+            this._onPaint(tiles.map((t) => ({ x: t.rx, y: t.ry })), this._activeTile, { minX: selMinX, minY: selMinY, maxX: selMaxX, maxY: selMaxY });
+        }
+        else {
+            this._onPaint(tiles.map((t) => ({ x: t.rx, y: t.ry })), this._activeTile);
+        }
+    }
+    // ─── Events ────────────────────────────────────────────────────────────────
+    _attachEvents() {
+        const view = this._room.application.view;
+        const onMove = (e) => {
+            const rect = view.getBoundingClientRect();
+            const tile = this._hitTest(e.clientX - rect.left, e.clientY - rect.top);
+            if (tile !== this._lastHovered) {
+                this._lastHovered = tile;
+                this._drawHover(tile);
+            }
+            if (this._isPainting && tile && this._dragStart) {
+                this._dragEnd = tile;
+                this._drawSelection(this._dragStart, this._dragEnd);
+            }
+        };
+        const onDown = (e) => {
+            if (e.button !== 0)
+                return;
+            if (this._isPanMode)
+                return;
+            const rect = view.getBoundingClientRect();
+            const tile = this._hitTest(e.clientX - rect.left, e.clientY - rect.top);
+            if (!tile)
+                return;
+            this._isPainting = true;
+            this._dragStart = tile;
+            this._dragEnd = tile;
+            this._drawSelection(tile, tile);
+        };
+        const onUp = () => {
+            if (this._isPainting && this._dragStart && this._dragEnd) {
+                this._commitPaint(this._dragStart, this._dragEnd);
+            }
+            this._isPainting = false;
+            this._dragStart = null;
+            this._dragEnd = null;
+            this._selectionLayer.clear();
+        };
+        view.addEventListener("pointermove", onMove);
+        view.addEventListener("pointerdown", onDown);
+        window.addEventListener("pointerup", onUp);
+        this._cleanup = () => {
+            view.removeEventListener("pointermove", onMove);
+            view.removeEventListener("pointerdown", onDown);
+            window.removeEventListener("pointerup", onUp);
+        };
+    }
+    destroy() {
+        var _a, _b;
+        (_b = (_a = this)._cleanup) === null || _b === void 0 ? void 0 : _b.call(_a);
+        super.destroy({ children: true });
+    }
+}
+exports.TileMapEditorLayer = TileMapEditorLayer;

package/dist/objects/room/data/LandscapeData.d.ts

@@ -0,0 +1,26 @@
+import { XmlData } from "../../../data/XmlData";
+import { LandscapeVisualization } from "../Landscape";
+/**
+ * Reads the landscape planes out of the room visualization xml that ships
+ * inside `room.swf`, and hands them over in the shape `Landscape` wants.
+ *
+ * Habbo writes item coordinates as percentages (`x="10%"`), so they arrive as
+ * fractions of the whole landscape here.
+ */
+export declare class LandscapeData extends XmlData {
+    private _planes;
+    constructor(xml: string);
+    private _findPlanes;
+    get ids(): string[];
+    private _percent;
+    private _number;
+    private _attr;
+    /**
+     * Resolves a material to the bitmap it tiles. Habbo materials are a matrix of
+     * cell columns; the landscapes in practice use a single repeating texture, so
+     * we take the first bitmap and tile that.
+     */
+    private _resolveMaterial;
+    getVisualization(id: string, size?: number): LandscapeVisualization | undefined;
+    toJson(): Record<string, LandscapeVisualization>;
+}

package/dist/objects/room/data/LandscapeData.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LandscapeData = void 0;
+const XmlData_1 = require("../../../data/XmlData");
+/**
+ * Reads the landscape planes out of the room visualization xml that ships
+ * inside `room.swf`, and hands them over in the shape `Landscape` wants.
+ *
+ * Habbo writes item coordinates as percentages (`x="10%"`), so they arrive as
+ * fractions of the whole landscape here.
+ */
+class LandscapeData extends XmlData_1.XmlData {
+    constructor(xml) {
+        super(xml);
+        this._planes = this._findPlanes();
+    }
+    _findPlanes() {
+        for (const selector of [
+            "landscapeData planes plane",
+            "landscapedata planes plane",
+            "landscapeData plane",
+            "landscapes landscape",
+        ]) {
+            const found = this.querySelectorAll(selector);
+            if (found.length > 0)
+                return found;
+        }
+        return [];
+    }
+    get ids() {
+        return this._planes
+            .map((plane) => plane.getAttribute("id"))
+            .filter((id) => id != null);
+    }
+    _percent(value) {
+        if (value == null || value.length === 0)
+            return 0;
+        const trimmed = value.endsWith("%") ? value.slice(0, -1) : value;
+        const parsed = parseFloat(trimmed);
+        if (isNaN(parsed))
+            return 0;
+        return value.endsWith("%") ? parsed / 100 : parsed;
+    }
+    _number(value) {
+        if (value == null)
+            return undefined;
+        const parsed = Number(value);
+        return isNaN(parsed) ? undefined : parsed;
+    }
+    _attr(element, ...names) {
+        for (const name of names) {
+            const value = element.getAttribute(name);
+            if (value != null)
+                return value;
+        }
+        return null;
+    }
+    /**
+     * Resolves a material to the bitmap it tiles. Habbo materials are a matrix of
+     * cell columns; the landscapes in practice use a single repeating texture, so
+     * we take the first bitmap and tile that.
+     */
+    _resolveMaterial(materialId) {
+        var _a, _b;
+        var _c;
+        if (materialId == null)
+            return undefined;
+        const material = this.querySelectorAll("material").find((element) => element.getAttribute("id") === materialId);
+        if (material == null)
+            return undefined;
+        const textureId = (_a = material
+            .querySelector("cell")) === null || _a === void 0 ? void 0 : _a.getAttribute("textureId");
+        if (textureId == null)
+            return undefined;
+        const texture = this.querySelectorAll("texture").find((element) => element.getAttribute("id") === textureId);
+        return ((_c = (_b = texture === null || texture === void 0 ? void 0 : texture.querySelector("bitmap")) === null || _b === void 0 ? void 0 : _b.getAttribute("assetName")) !== null && _c !== void 0 ? _c : undefined);
+    }
+    getVisualization(id, size = 64) {
+        var _a;
+        const plane = this._planes.find((element) => element.getAttribute("id") === id);
+        if (plane == null)
+            return undefined;
+        const visualizations = Array.from(plane.querySelectorAll("animatedVisualization, visualization"));
+        const visualization = (_a = visualizations.find((element) => this._number(element.getAttribute("size")) === size)) !== null && _a !== void 0 ? _a : visualizations[0];
+        if (visualization == null)
+            return undefined;
+        const layers = [];
+        Array.from(visualization.querySelectorAll("layer, animatedLayer")).forEach((element) => {
+            const items = Array.from(element.querySelectorAll("item, animationItem"));
+            if (items.length > 0) {
+                layers.push({
+                    items: items
+                        .map((item) => {
+                        var _a, _b;
+                        const asset = this._attr(item, "assetId", "asset");
+                        if (asset == null)
+                            return undefined;
+                        return {
+                            asset,
+                            x: this._percent(item.getAttribute("x")),
+                            y: this._percent(item.getAttribute("y")),
+                            randomX: this._percent(item.getAttribute("randomX")),
+                            randomY: this._percent(item.getAttribute("randomY")),
+                            speedX: (_a = this._number(item.getAttribute("speedX"))) !== null && _a !== void 0 ? _a : 0,
+                            speedY: (_b = this._number(item.getAttribute("speedY"))) !== null && _b !== void 0 ? _b : 0,
+                        };
+                    })
+                        .filter((item) => item != null),
+                });
+                return;
+            }
+            const align = element.getAttribute("align");
+            layers.push({
+                material: this._resolveMaterial(this._attr(element, "materialId", "material")),
+                color: this._number(element.getAttribute("color")),
+                align: align === "top" || align === "bottom" ? align : undefined,
+                offset: this._number(element.getAttribute("offset")),
+            });
+        });
+        return { layers };
+    }
+    toJson() {
+        const result = {};
+        this.ids.forEach((id) => {
+            const visualization = this.getVisualization(id);
+            if (visualization != null)
+                result[id] = visualization;
+        });
+        return result;
+    }
+}
+exports.LandscapeData = LandscapeData;

package/dist/objects/room/matrixes.d.ts

@@ -0,0 +1,9 @@
+export declare function getFloorMatrix(x: number, y: number): import("pixi.js").Matrix;
+export declare function getLeftMatrix(x: number, y: number, dim: {
+    width: number;
+    height: number;
+}): import("pixi.js").Matrix;
+export declare function getRightMatrix(x: number, y: number, dim: {
+    width: number;
+    height: number;
+}): import("pixi.js").Matrix;

package/dist/objects/room/matrixes.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFloorMatrix = getFloorMatrix;
+exports.getLeftMatrix = getLeftMatrix;
+exports.getRightMatrix = getRightMatrix;
+const createPlaneMatrix_1 = require("./util/createPlaneMatrix");
+function getFloorMatrix(x, y) {
+    return (0, createPlaneMatrix_1.createPlaneMatrix)({
+        c: { x: 0, y: 16 },
+        d: { x: 32, y: 0 },
+        a: { x: 64, y: 16 },
+        b: { x: 32, y: 32 },
+    }, { width: 32, height: 32, x, y });
+}
+function getLeftMatrix(x, y, dim) {
+    return (0, createPlaneMatrix_1.createPlaneMatrix)({
+        b: { x: 0, y: 16 },
+        c: { x: dim.width, y: 16 + dim.width / 2 },
+        d: { x: dim.width, y: 16 + dim.width / 2 + dim.height },
+        a: { x: 0, y: 16 + dim.height },
+    }, { width: dim.width, height: dim.height, x, y });
+}
+function getRightMatrix(x, y, dim) {
+    return (0, createPlaneMatrix_1.createPlaneMatrix)({
+        b: { x: 32, y: 32 },
+        c: { x: 32 + dim.width, y: 32 - dim.width / 2 },
+        d: { x: 32 + dim.width, y: 32 + dim.height - dim.width / 2 },
+        a: { x: 32, y: 32 + dim.height },
+    }, {
+        width: dim.width,
+        height: dim.height,
+        x: x,
+        y: y,
+    });
+}

package/dist/objects/room/parts/IRoomPart.d.ts

@@ -0,0 +1,4 @@
+import { RoomPartData } from "./RoomPartData";
+export interface IRoomPart {
+    update(data: RoomPartData): void;
+}

package/dist/objects/room/parts/IRoomPart.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/objects/room/parts/RoomPartData.d.ts

@@ -0,0 +1,15 @@
+import type * as PIXI from "pixi.js";
+export interface RoomPartData {
+    wallHeight: number;
+    borderWidth: number;
+    tileHeight: number;
+    wallLeftColor: number;
+    wallRightColor: number;
+    wallTopColor: number;
+    wallTexture: PIXI.Texture;
+    tileLeftColor: number;
+    tileRightColor: number;
+    tileTopColor: number;
+    tileTexture: PIXI.Texture;
+    masks: Map<string, PIXI.Sprite>;
+}

package/dist/objects/room/parts/RoomPartData.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/objects/room/parts/Stair.d.ts

@@ -0,0 +1,23 @@
+import * as PIXI from "pixi.js";
+import { IRoomPart } from "./IRoomPart";
+import { RoomPartData } from "./RoomPartData";
+interface Props {
+    tileHeight: number;
+    direction: 0 | 2;
+    texture?: PIXI.Texture;
+}
+export declare class Stair extends PIXI.Container implements IRoomPart {
+    private _props;
+    private _texture;
+    private _tileHeight;
+    private _tileLeftColor;
+    private _tileRightColor;
+    private _tileTopColor;
+    constructor(_props: Props);
+    update(data: RoomPartData): void;
+    updateSprites(): void;
+    _createStairBoxDirection0(index: number): PIXI.TilingSprite[];
+    _createStairBoxDirection2(index: number): PIXI.TilingSprite[];
+    destroy(): void;
+}
+export {};