@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist-esm/objects/room/TileMapEditorLayer.js

@@ -0,0 +1,294 @@
+import * as PIXI from "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;
+export 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 });
+    }
+}

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

@@ -0,0 +1,128 @@
+import { XmlData } from "../../../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.
+ */
+export class LandscapeData extends 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;
+    }
+}

package/dist-esm/objects/room/matrixes.js

@@ -0,0 +1,30 @@
+import { createPlaneMatrix } from "./util/createPlaneMatrix";
+export function getFloorMatrix(x, y) {
+    return 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 });
+}
+export function getLeftMatrix(x, y, dim) {
+    return 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 });
+}
+export function getRightMatrix(x, y, dim) {
+    return 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-esm/objects/room/parts/IRoomPart.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/room/parts/Stair.js

@@ -0,0 +1,90 @@
+import * as PIXI from "pixi.js";
+import { getFloorMatrix, getLeftMatrix, getRightMatrix } from "../matrixes";
+export class Stair extends PIXI.Container {
+    constructor(_props) {
+        super();
+        this._props = _props;
+        this._tileHeight = 0;
+        this._tileLeftColor = 0;
+        this._tileRightColor = 0;
+        this._tileTopColor = 0;
+        this._tileHeight = _props.tileHeight;
+        this.updateSprites();
+    }
+    update(data) {
+        this._tileHeight = data.tileHeight;
+        this._tileLeftColor = data.tileLeftColor;
+        this._tileRightColor = data.tileRightColor;
+        this._tileTopColor = data.tileTopColor;
+        this._texture = data.tileTexture;
+        this.updateSprites();
+    }
+    updateSprites() {
+        this.removeChildren();
+        const { direction } = this._props;
+        for (let i = 0; i < 4; i++) {
+            if (direction === 0) {
+                this.addChild(...this._createStairBoxDirection0(3 - i));
+            }
+            else if (direction === 2) {
+                this.addChild(...this._createStairBoxDirection2(3 - i));
+            }
+        }
+    }
+    _createStairBoxDirection0(index) {
+        const baseX = +stairBase * index;
+        const baseY = -stairBase * index * 1.5;
+        const texture = this._texture;
+        function createSprite(matrix, tint, tilePosition) {
+            const tile = new PIXI.TilingSprite({
+                texture: texture !== null && texture !== void 0 ? texture : PIXI.Texture.WHITE,
+            });
+            tile.tilePosition.set(tilePosition.x, tilePosition.y);
+            tile.setFromMatrix(matrix);
+            tile.tint = tint;
+            return tile;
+        }
+        const tile = createSprite(getFloorMatrix(baseX, baseY), this._tileTopColor, new PIXI.Point(0, 0));
+        tile.width = 32;
+        tile.height = 8;
+        const borderLeft = createSprite(getLeftMatrix(baseX, baseY, { width: 32, height: this._tileHeight }), this._tileLeftColor, new PIXI.Point(0, 0));
+        borderLeft.width = 32;
+        borderLeft.height = this._tileHeight;
+        const borderRight = createSprite(getRightMatrix(baseX, baseY, { width: 8, height: this._tileHeight }), this._tileRightColor, new PIXI.Point(0, 0));
+        borderRight.width = 8;
+        borderRight.height = this._tileHeight;
+        return [borderLeft, borderRight, tile];
+    }
+    _createStairBoxDirection2(index) {
+        const baseX = -stairBase * index;
+        const baseY = -stairBase * index * 1.5;
+        const texture = this._texture;
+        function createSprite(matrix, tint) {
+            const tile = new PIXI.TilingSprite({
+                texture: texture !== null && texture !== void 0 ? texture : PIXI.Texture.WHITE,
+            });
+            tile.tilePosition.set(0, 0);
+            tile.setFromMatrix(matrix);
+            tile.tint = tint;
+            return tile;
+        }
+        const tile = createSprite(getFloorMatrix(baseX + 32 - stairBase, baseY + stairBase * 1.5), this._tileTopColor);
+        tile.width = stairBase;
+        tile.height = 32;
+        const borderLeft = createSprite(getLeftMatrix(baseX + 32 - stairBase, baseY + stairBase * 1.5, {
+            width: stairBase,
+            height: this._tileHeight,
+        }), this._tileLeftColor);
+        borderLeft.width = stairBase;
+        borderLeft.height = this._tileHeight;
+        const borderRight = createSprite(getRightMatrix(baseX, baseY, { width: 32, height: this._tileHeight }), this._tileRightColor);
+        borderRight.width = 32;
+        borderRight.height = this._tileHeight;
+        return [borderLeft, borderRight, tile];
+    }
+    destroy() {
+        super.destroy();
+        this.removeChildren();
+    }
+}
+const stairBase = 8;