@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,524 @@
+import * as PIXI from "pixi.js";
+import { Subject } from "rxjs";
+import { getZOrder } from "../../util/getZOrder";
+import { EventManagerContainer } from "../events/EventManagerContainer";
+import { Stair } from "./parts/Stair";
+import { StairCorner } from "./parts/StairCorner";
+import { Tile } from "./parts/Tile";
+import { TileCursor } from "./parts/TileCursor";
+import { WallLeft } from "./parts/WallLeft";
+import { WallOuterCorner } from "./parts/WallOuterCorner";
+import { WallRight } from "./parts/WallRight";
+import { RoomLandscapeMaskSprite } from "./RoomLandscapeMaskSprite";
+import { getTileMapBounds } from "./util/getTileMapBounds";
+import { LegacyWallGeometry } from "./util/LegacyWallGeometry";
+export class RoomModelVisualization extends PIXI.Container {
+    constructor(_eventManager, _application, parsedTileMap) {
+        super();
+        this._eventManager = _eventManager;
+        this._application = _application;
+        this.parsedTileMap = parsedTileMap;
+        this._hideTileCursor = false;
+        this._hideWalls = false;
+        this._hideFloor = false;
+        this._positionalContainer = new PIXI.Container();
+        this._behindWallLayer = new PIXI.Container();
+        this._wallLayer = new PIXI.Container();
+        this._tileLayer = new PIXI.Container();
+        this._primaryLayer = new PIXI.Container();
+        this._landscapeLayer = new PIXI.Container();
+        this._wallHitAreaLayer = new PIXI.Container();
+        this._masksLayer = new PIXI.Container();
+        this._walls = [];
+        this._tiles = [];
+        this._tileCursors = [];
+        this._masks = new Map();
+        this._parts = new Set();
+        this._borderWidth = 8;
+        this._tileHeight = 8;
+        this._wallHeight = 116;
+        this._onActiveTileChange = new Subject();
+        this._onActiveWallChange = new Subject();
+        this._onTileClick = new Subject();
+        this._refreshRoom = false;
+        this._rebuildRoom = false;
+        this._handleTick = () => {
+            if (this._rebuildRoom) {
+                this._rebuildRoom = false;
+                this._updateHeightmap();
+            }
+            if (this._refreshRoom) {
+                this._refreshRoom = false;
+                this._updateParts();
+            }
+        };
+        this._tileMapBounds = getTileMapBounds(this.parsedTileMap.parsedTileTypes, {
+            x: this.parsedTileMap.wallOffsets.x,
+            y: this.parsedTileMap.wallOffsets.y,
+        });
+        this._behindWallLayer.label = "BEHIND_WALL";
+        this._wallLayer.label = "WALL";
+        this._wallHitAreaLayer.label = "WALL_HIT";
+        this._tileLayer.label = "TILES";
+        this._landscapeLayer.label = "LANDSCAPE";
+        this._primaryLayer.label = "PRIMARY";
+        this.addChild(this._behindWallLayer);
+        this.addChild(this._wallLayer);
+        this.addChild(this._wallHitAreaLayer);
+        this.addChild(this._tileLayer);
+        this.addChild(this._landscapeLayer);
+        this.addChild(this._primaryLayer);
+        this.addChild(this._masksLayer);
+        this._positionalContainer.x = -this.roomBounds.minX;
+        this._positionalContainer.y = -this.roomBounds.minY;
+        this._primaryLayer.sortableChildren = true;
+        this._tileLayer.sortableChildren = true;
+        this._primaryLayer.interactiveChildren = false;
+        this._tileLayer.interactiveChildren = false;
+        this._behindWallLayer.interactiveChildren = false;
+        this._landscapeLayer.interactiveChildren = false;
+        this._masksLayer.interactiveChildren = false;
+        this.addChild(this._positionalContainer);
+        this._eventManager.coordinateRoot = this;
+        this._eventManagerContainer = new EventManagerContainer(this._application, this._eventManager);
+        this._updateHeightmap();
+        this._application.ticker.add(this._handleTick);
+    }
+    addPart(part) {
+        this._parts.add(part);
+        part.update(this._getCurrentRoomPartData());
+        return {
+            remove: () => {
+                this._parts.delete(part);
+            },
+        };
+    }
+    getMaskLevel(roomX, roomY) {
+        return {
+            roomX,
+            roomY,
+        };
+    }
+    get onTileClick() {
+        return this._onTileClick;
+    }
+    get hideFloor() {
+        return this._hideFloor;
+    }
+    set hideFloor(value) {
+        this._hideFloor = value;
+        this._rebuildRoom = true;
+    }
+    get hideWalls() {
+        return this._hideWalls;
+    }
+    set hideWalls(value) {
+        this._hideWalls = value;
+        this._rebuildRoom = true;
+    }
+    get hideTileCursor() {
+        return this._hideTileCursor;
+    }
+    set hideTileCursor(value) {
+        this._hideTileCursor = value;
+        this._rebuildRoom = true;
+    }
+    get wallTexture() {
+        return this._wallTexture;
+    }
+    set wallTexture(value) {
+        this._wallTexture = value;
+        this._refreshRoom = true;
+    }
+    get floorTexture() {
+        return this._floorTexture;
+    }
+    set floorTexture(value) {
+        this._floorTexture = value;
+        this._refreshRoom = true;
+    }
+    get wallHeight() {
+        return this._wallHeight;
+    }
+    set wallHeight(value) {
+        this._wallHeight = value;
+        this._refreshRoom = true;
+    }
+    get tileHeight() {
+        return this._tileHeight;
+    }
+    set tileHeight(value) {
+        this._tileHeight = value;
+        this._refreshRoom = true;
+    }
+    get wallDepth() {
+        return this._borderWidth;
+    }
+    set wallDepth(value) {
+        this._borderWidth = value;
+        this._refreshRoom = true;
+    }
+    get roomBounds() {
+        const hasWalls = this.hideWalls || this.hideFloor;
+        const minOffsetY = hasWalls ? 0 : -this._wallHeight - this._borderWidth;
+        const minXOffset = hasWalls ? 0 : -this._borderWidth;
+        const maxOffsetX = hasWalls ? 0 : this._borderWidth;
+        const maxOffsetY = hasWalls ? 0 : this._tileHeight;
+        return {
+            minX: this._tileMapBounds.minX + minXOffset,
+            maxX: this._tileMapBounds.maxX + maxOffsetX,
+            minY: this._tileMapBounds.minY + minOffsetY,
+            maxY: this._tileMapBounds.maxY + maxOffsetY,
+        };
+    }
+    get rectangle() {
+        return {
+            x: this.x,
+            y: this.y,
+            width: this.roomBounds.maxX - this.roomBounds.minX,
+            height: this.roomBounds.maxY - this.roomBounds.minY,
+        };
+    }
+    get wallLeftColor() {
+        return this._wallLeftColor;
+    }
+    set wallLeftColor(value) {
+        this._wallLeftColor = value;
+        this._refreshRoom = true;
+    }
+    get wallRightColor() {
+        return this._wallRightColor;
+    }
+    set wallRightColor(value) {
+        this._wallRightColor = value;
+        this._refreshRoom = true;
+    }
+    get wallTopColor() {
+        return this._wallTopColor;
+    }
+    set wallTopColor(value) {
+        this._wallTopColor = value;
+        this._refreshRoom = true;
+    }
+    get tileLeftColor() {
+        return this._tileLeftColor;
+    }
+    set tileLeftColor(value) {
+        this._tileLeftColor = value;
+        this._refreshRoom = true;
+    }
+    get tileRightColor() {
+        return this._tileRightColor;
+    }
+    set tileRightColor(value) {
+        this._tileRightColor = value;
+        this._refreshRoom = true;
+    }
+    get tileTopColor() {
+        return this._tileTopColor;
+    }
+    set tileTopColor(value) {
+        this._tileTopColor = value;
+        this._refreshRoom = true;
+    }
+    get onActiveTileChange() {
+        return this._onActiveTileChange.asObservable();
+    }
+    get onActiveWallChange() {
+        return this._onActiveWallChange.asObservable();
+    }
+    get container() {
+        return this._primaryLayer;
+    }
+    get behindWallContainer() {
+        return this._behindWallLayer;
+    }
+    get landscapeContainer() {
+        return this._landscapeLayer;
+    }
+    get floorContainer() {
+        return this._tileLayer;
+    }
+    get wallContainer() {
+        return this._wallLayer;
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        this._destroyAllSprites();
+        (_a = this._eventManagerContainer) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._eventManagerContainer = undefined;
+        this._application.ticker.remove(this._handleTick);
+    }
+    addMask(id, element) {
+        const existing = this._masks.get(id);
+        const current = existing !== null && existing !== void 0 ? existing : new RoomLandscapeMaskSprite({
+            renderer: this._application.renderer,
+            roomBounds: this.roomBounds,
+        });
+        current.addSprite(element);
+        this._primaryLayer.addChild(current);
+        if (existing == null) {
+            this._masks.set(id, current);
+            this._updateParts();
+        }
+        return {
+            update: () => current.updateSprite(element),
+            remove: () => current.removeSprite(element),
+            sprite: element,
+        };
+    }
+    getScreenPosition(roomX, roomY, roomZ) {
+        return this._getPosition(roomX, roomY, roomZ);
+    }
+    _getCurrentRoomPartData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return {
+            borderWidth: this._borderWidth,
+            tileHeight: this._tileHeight,
+            wallHeight: this._getLargestWallHeight(),
+            wallLeftColor: (_a = this._wallLeftColor) !== null && _a !== void 0 ? _a : 0x91949f,
+            wallRightColor: (_b = this._wallRightColor) !== null && _b !== void 0 ? _b : 0xbbbecd,
+            wallTopColor: (_c = this._wallTopColor) !== null && _c !== void 0 ? _c : 0x70727b,
+            tileLeftColor: (_d = this._tileLeftColor) !== null && _d !== void 0 ? _d : 0x838357,
+            tileRightColor: (_e = this._tileRightColor) !== null && _e !== void 0 ? _e : 0x666644,
+            tileTopColor: (_f = this._tileTopColor) !== null && _f !== void 0 ? _f : 0x989865,
+            tileTexture: (_g = this._floorTexture) !== null && _g !== void 0 ? _g : PIXI.Texture.WHITE,
+            wallTexture: (_h = this._wallTexture) !== null && _h !== void 0 ? _h : PIXI.Texture.WHITE,
+            masks: this._masks,
+        };
+    }
+    /**
+     * Wall parts subtract their own tile height from this, so it is measured from
+     * tile height zero rather than from the lowest tile in the room. Habbo caps
+     * how far above the floor a wall may reach, which is what stops a room with a
+     * tall platform from growing walls several screens high.
+     */
+    _getLargestWallHeight() {
+        return (Math.min(LegacyWallGeometry.MAX_WALL_ADDITIONAL_HEIGHT, this.parsedTileMap.highestTile) *
+            32 +
+            this._wallHeight);
+    }
+    _destroyAllSprites() {
+        [...this._tileCursors, ...this._tiles, ...this._walls].forEach((part) => part.destroy());
+        this._tileCursors = [];
+        this._tiles = [];
+        this._walls = [];
+    }
+    _updateHeightmap() {
+        this._destroyAllSprites();
+        for (let y = 0; y < this.parsedTileMap.parsedTileTypes.length; y++) {
+            for (let x = 0; x < this.parsedTileMap.parsedTileTypes[y].length; x++) {
+                const cell = this.parsedTileMap.parsedTileTypes[y][x];
+                this._createHeightmapElement(cell, x, y);
+            }
+        }
+        this._updateParts();
+        this._positionalContainer.x = -this.roomBounds.minX;
+        this._positionalContainer.y = -this.roomBounds.minY;
+    }
+    _updateParts() {
+        const currentRoomPartData = this._getCurrentRoomPartData();
+        [...this._tiles, ...this._walls, ...this._parts].forEach((tile) => tile.update(currentRoomPartData));
+    }
+    _createHeightmapElement(element, x, y) {
+        switch (element.type) {
+            case "wall":
+                this._createWallElement(element, x, y, element.height);
+                break;
+            case "tile":
+                this._createTileElement(x, y, element.z);
+                break;
+            case "door":
+                this._createDoor(x, y, element.z, element.wall);
+                break;
+            case "stairs":
+                this._createStair(x, y, element.z, element.kind);
+                break;
+            case "stairCorner":
+                this._createStairCorner(x, y, element.z, element.kind);
+                break;
+        }
+    }
+    _createStairCorner(x, y, z, kind) {
+        const stair = new StairCorner({ type: kind });
+        const position = this._getPosition(x, y, z);
+        stair.x = position.x;
+        stair.y = position.y;
+        this._tiles.push(stair);
+        this._tileLayer.addChild(stair);
+        this._createTileCursor(x, y, z);
+        this._createTileCursor(x, y, z + 1);
+    }
+    _createStair(x, y, z, direction) {
+        const stair = new Stair({
+            tileHeight: this._tileHeight,
+            direction,
+        });
+        const position = this._getPosition(x, y, z);
+        stair.x = position.x;
+        stair.y = position.y;
+        this._tiles.push(stair);
+        this._tileLayer.addChild(stair);
+        this._createTileCursor(x, y, z);
+        this._createTileCursor(x, y, z + 1);
+    }
+    _createDoor(x, y, z, wall) {
+        this._createTileElement(x, y, z, this._behindWallLayer);
+        if (wall) {
+            this._createLeftWall(x, y, z, { hideBorder: false, cutawayHeight: 90 });
+        }
+    }
+    shouldShowBorders(x, y) {
+        let bottomTile;
+        let rightTile;
+        const tileMap = this.parsedTileMap.parsedTileTypes;
+        const currentTile = tileMap[y][x];
+        if (tileMap[y + 1] !== undefined &&
+            tileMap[y + 1][x] !== undefined) {
+            bottomTile = tileMap[y + 1][x];
+        }
+        if (tileMap[y][x + 1] !== undefined) {
+            rightTile = tileMap[y][x + 1];
+        }
+        return {
+            showLeftBorder: (!Boolean(bottomTile) ||
+                ["stairs", "stairCorner", "door", "hidden"].includes(bottomTile === null || bottomTile === void 0 ? void 0 : bottomTile.type) ||
+                // @ts-ignore
+                ((bottomTile === null || bottomTile === void 0 ? void 0 : bottomTile.type) == 'tile' && (bottomTile === null || bottomTile === void 0 ? void 0 : bottomTile.z) != currentTile.z)),
+            showRightBorder: (!Boolean(rightTile) ||
+                ["stairs", "stairCorner", "door", "hidden"].includes(rightTile === null || rightTile === void 0 ? void 0 : rightTile.type) ||
+                // @ts-ignore
+                ((rightTile === null || rightTile === void 0 ? void 0 : rightTile.type) == 'tile' && (rightTile === null || rightTile === void 0 ? void 0 : rightTile.z) != currentTile.z))
+        };
+    }
+    _createTileElement(x, y, z, container) {
+        if (this._hideFloor)
+            return;
+        const showBorders = this.shouldShowBorders(x, y);
+        const tile = new Tile({ color: "#eeeeee", tileHeight: this._tileHeight, showBorders });
+        const xEven = x % 2 === 0;
+        const yEven = y % 2 === 0;
+        tile.tilePositions = new PIXI.Point(xEven ? 32 : 0, yEven ? 32 : 0);
+        const position = this._getPosition(x, y, z);
+        tile.x = position.x;
+        tile.y = position.y;
+        (container !== null && container !== void 0 ? container : this._tileLayer).addChild(tile);
+        this._tiles.push(tile);
+        this._createTileCursor(x, y, z, container);
+    }
+    _createTileCursor(x, y, z, container) {
+        if (this._hideTileCursor)
+            return;
+        const position = { roomX: x, roomY: y, roomZ: z };
+        const cursor = new TileCursor(this._eventManager, position, (pos, event) => {
+            this._onTileClick.next({ position, event });
+        }, () => {
+            this._onActiveTileChange.next(position);
+        }, () => {
+            this._onActiveTileChange.next(undefined);
+        });
+        const { x: posX, y: posY } = this._getPosition(x, y, z);
+        cursor.x = posX;
+        cursor.y = posY;
+        cursor.zIndex = getZOrder(x, y, z) - 1000;
+        this._tileCursors.push(cursor);
+        (container !== null && container !== void 0 ? container : this._primaryLayer).addChild(cursor);
+    }
+    _createRightWall(roomX, roomY, roomZ, options) {
+        var _a;
+        const wall = new WallRight({
+            hideBorder: (_a = options.hideBorder) !== null && _a !== void 0 ? _a : false,
+            onMouseMove: (event) => {
+                this._onActiveWallChange.next({
+                    roomX,
+                    roomY,
+                    offsetX: -event.offsetX,
+                    offsetY: event.offsetY + wall.pixelHeight - 16 - event.offsetX,
+                    wall: "r",
+                });
+            },
+            onMouseOut: () => {
+                this._onActiveWallChange.next(undefined);
+            },
+            hitAreaContainer: this._wallHitAreaLayer,
+        });
+        const { x, y } = this._getPosition(roomX, roomY + 1, roomZ);
+        wall.x = x + 32;
+        wall.y = y;
+        wall.roomZ = roomZ;
+        this._wallLayer.addChild(wall);
+        this._walls.push(wall);
+    }
+    _createLeftWall(roomX, roomY, roomZ, { hideBorder = false, cutawayHeight, }) {
+        if (this._hideWalls)
+            return;
+        const wall = new WallLeft({
+            hideBorder,
+            onMouseMove: (event) => {
+                this._onActiveWallChange.next({
+                    roomX,
+                    roomY,
+                    offsetX: event.offsetX,
+                    offsetY: event.offsetY + wall.pixelHeight,
+                    wall: "l",
+                });
+            },
+            onMouseOut: () => {
+                this._onActiveWallChange.next(undefined);
+            },
+            hitAreaContainer: this._wallHitAreaLayer,
+            cutawayHeight: cutawayHeight,
+        });
+        const { x, y } = this._getPosition(roomX + 1, roomY, roomZ);
+        wall.x = x;
+        wall.y = y;
+        wall.roomZ = roomZ;
+        this._wallLayer.addChild(wall);
+        this._walls.push(wall);
+    }
+    _createOuterBorder(roomX, roomY, roomZ) {
+        const wall = new WallOuterCorner();
+        const { x, y } = this._getPosition(roomX + 1, roomY, roomZ);
+        wall.x = x;
+        wall.y = y;
+        wall.roomZ = roomZ;
+        this._wallLayer.addChild(wall);
+        this._walls.push(wall);
+    }
+    _createWallElement(element, x, y, z) {
+        if (this._hideWalls || this._hideFloor)
+            return;
+        switch (element.kind) {
+            case "colWall":
+                this._createRightWall(x, y, z, { hideBorder: element.hideBorder });
+                break;
+            case "rowWall":
+                this._createLeftWall(x, y, z, { hideBorder: element.hideBorder });
+                break;
+            case "innerCorner":
+                this._createRightWall(x, y, z, { hideBorder: false });
+                this._createLeftWall(x, y, z, { hideBorder: true });
+                break;
+            case "outerCorner":
+                this._createOuterBorder(x, y, z);
+                break;
+        }
+    }
+    _getPosition(roomX, roomY, roomZ) {
+        const getBasePosition = () => {
+            return { x: roomX, y: roomY };
+        };
+        const { x, y } = getBasePosition();
+        const base = 32;
+        // TODO: Right now we are subtracting the tileMapBounds here.
+        // This is so the landscapes work correctly. This has something with the mask position being negative for some walls.
+        // This fixes it for now.
+        const xPos = x * base - y * base;
+        const yPos = x * (base / 2) + y * (base / 2);
+        return {
+            x: xPos,
+            y: yPos - roomZ * 32,
+        };
+    }
+}

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

@@ -0,0 +1,31 @@
+export class RoomObjectContainer {
+    constructor() {
+        this._roomObjects = new Set();
+    }
+    get roomObjects() {
+        return this._roomObjects;
+    }
+    get context() {
+        return this._context;
+    }
+    set context(value) {
+        this._context = value;
+    }
+    addRoomObject(object) {
+        if (this._context == null)
+            throw new Error("Context wasn't supplied to RoomObjectContainer");
+        if (this._roomObjects.has(object)) {
+            // The object already exists in this room.
+            return;
+        }
+        object.setParent(this._context);
+        this._roomObjects.add(object);
+    }
+    removeRoomObject(object) {
+        if (!this._roomObjects.has(object)) {
+            return;
+        }
+        this._roomObjects.delete(object);
+        object.destroy();
+    }
+}