@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,155 @@
+import * as PIXI from "pixi.js";
+import { getFloorMatrix, getLeftMatrix, getRightMatrix } from "../matrixes";
+export class StairCorner extends PIXI.Container {
+    constructor(_props) {
+        super();
+        this._props = _props;
+        this._tileHeight = 0;
+        this._tileLeftColor = 0;
+        this._tileRightColor = 0;
+        this._tileTopColor = 0;
+        this.sortableChildren = true;
+    }
+    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 { type } = this._props;
+        for (let i = 0; i < 4; i++) {
+            if (type === "front") {
+                this.addChild(...this._createStairBoxFront(3 - i));
+            }
+            else if (type === "left") {
+                this.addChild(...this._createStairBoxLeft(3 - i));
+            }
+            else if (type === "right") {
+                this.addChild(...this._createStairBoxRight(3 - i));
+            }
+        }
+    }
+    destroySprites() {
+        var _a;
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    destroy() {
+        super.destroy();
+        this.destroySprites();
+    }
+    _createStairBoxFront(index) {
+        const baseXLeft = +stairBase * index;
+        const baseYLeft = -stairBase * index * 1.5;
+        const baseXRight = 0;
+        const baseYRight = -stairBase * index * 2;
+        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 tileLeft = createSprite(getFloorMatrix(baseXLeft, baseYLeft), this._tileTopColor, new PIXI.Point());
+        tileLeft.width = 32 - 8 * index;
+        tileLeft.height = 8;
+        const tileRight = createSprite(getFloorMatrix(baseXRight + 32 - stairBase, baseYRight + stairBase * 1.5), this._tileTopColor, new PIXI.Point(0, 0));
+        tileRight.width = stairBase;
+        tileRight.height = 32 - 8 * index;
+        const borderLeft = createSprite(getLeftMatrix(baseXLeft - 8 * index, baseYLeft - 8 * index * 0.5, {
+            width: 32,
+            height: this._tileHeight,
+        }), this._tileLeftColor, new PIXI.Point(0, 0));
+        borderLeft.width = 32 - 8 * index;
+        borderLeft.height = this._tileHeight;
+        const borderRight = createSprite(getRightMatrix(baseXRight - stairBase * index, -stairBase * index * 1.5, {
+            width: 32,
+            height: this._tileHeight,
+        }), this._tileRightColor, new PIXI.Point(0, 0));
+        borderRight.width = 32 - 8 * index;
+        borderRight.height = this._tileHeight;
+        return [borderLeft, borderRight, tileLeft, tileRight];
+    }
+    _createStairBoxLeft(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 tileRight = createSprite(getFloorMatrix(baseX + 32 - stairBase, baseY + stairBase * 1.5), this._tileTopColor, new PIXI.Point(0, 0));
+        tileRight.width = stairBase;
+        tileRight.height = 32 - 8 * index;
+        tileRight.zIndex = 2;
+        const borderRight = createSprite(getRightMatrix(baseX - stairBase * index, -stairBase * index, {
+            width: 32,
+            height: this._tileHeight,
+        }), this._tileRightColor, new PIXI.Point(0, 0));
+        borderRight.width = 32 - 8 * index;
+        borderRight.height = this._tileHeight;
+        borderRight.zIndex = 1;
+        if (index == 0) {
+            const cornerOne = createSprite(getFloorMatrix(baseX + 40, -4), this._tileTopColor, new PIXI.Point(0, 0));
+            cornerOne.width = 8;
+            cornerOne.height = 8;
+            cornerOne.zIndex = 0;
+            const cornerTwo = createSprite(getFloorMatrix(baseX + 24, -12), this._tileTopColor, new PIXI.Point(0, 0));
+            cornerTwo.width = 8;
+            cornerTwo.height = 8;
+            cornerTwo.zIndex = 0;
+            return [tileRight, borderRight, cornerOne, cornerTwo];
+        }
+        else {
+            return [tileRight, borderRight];
+        }
+    }
+    _createStairBoxRight(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 + 8 * index, baseY + 8 * index * 0.5), this._tileTopColor, new PIXI.Point(0, 0));
+        tile.width = 32 - 8 * index;
+        tile.height = 8;
+        tile.zIndex = 2;
+        const borderLeft = createSprite(getLeftMatrix(baseX, baseY, { width: 32, height: this._tileHeight }), this._tileLeftColor, new PIXI.Point(0, 0));
+        borderLeft.width = 32 - 8 * index;
+        borderLeft.height = this._tileHeight;
+        borderLeft.zIndex = 1;
+        if (index == 0) {
+            const cornerOne = createSprite(getFloorMatrix(baseX + 8, -4), this._tileTopColor, new PIXI.Point(0, 0));
+            cornerOne.width = 8;
+            cornerOne.height = 8;
+            cornerOne.zIndex = 0;
+            const cornerTwo = createSprite(getFloorMatrix(baseX + 24, -12), this._tileTopColor, new PIXI.Point(0, 0));
+            cornerTwo.width = 8;
+            cornerTwo.height = 8;
+            cornerTwo.zIndex = 0;
+            return [tile, borderLeft, cornerOne, cornerTwo];
+        }
+        else {
+            return [tile, borderLeft];
+        }
+    }
+}
+const stairBase = 8;

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

@@ -0,0 +1,101 @@
+import * as PIXI from "pixi.js";
+import { getFloorMatrix, getLeftMatrix, getRightMatrix } from "../matrixes";
+export class Tile extends PIXI.Container {
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this._updateSprites();
+    }
+    get tilePositions() {
+        return this._tilePositions;
+    }
+    set tilePositions(value) {
+        this._tilePositions = value;
+        this._updateSprites();
+    }
+    get tileHeight() {
+        return this._tileHeight;
+    }
+    set tileHeight(value) {
+        this._tileHeight = value;
+        this._updateSprites();
+    }
+    constructor(props) {
+        super();
+        this.props = props;
+        this._tilePositions = new PIXI.Point(0, 0);
+        this._showBorders = { showLeftBorder: true, showRightBorder: true };
+        this._texture = props.texture;
+        this._color = props.color;
+        this._tileHeight = props.tileHeight;
+        this._showBorders = props.showBorders;
+        this._updateSprites();
+    }
+    update(data) {
+        this.tileHeight = data.tileHeight;
+        this._roomPartData = data;
+        this._texture = data.tileTexture;
+        this._updateSprites();
+    }
+    _updateSprites() {
+        var _a, _b, _c;
+        var _d, _e, _f, _g, _h, _j;
+        this.removeChildren();
+        const tileMatrix = getFloorMatrix(0, 0);
+        const top = new PIXI.Graphics()
+            .moveTo(0, 0)
+            .lineTo(32, -16)
+            .lineTo(64, 0)
+            .lineTo(32, 16)
+            .lineTo(0, 0)
+            .fill({
+            textureSpace: "global",
+            texture: (_d = this._texture) !== null && _d !== void 0 ? _d : PIXI.Texture.WHITE,
+            color: (_e = (_a = this._roomPartData) === null || _a === void 0 ? void 0 : _a.tileTopColor) !== null && _e !== void 0 ? _e : 0,
+            matrix: new PIXI.Matrix(1, 0.5, 1, -0.5, 0, 0),
+        });
+        top.position.set(tileMatrix.tx, tileMatrix.ty);
+        this.addChild(top);
+        if (this._showBorders.showLeftBorder) {
+            const borderLeftMatrix = getLeftMatrix(0, 0, {
+                width: 32,
+                height: this.tileHeight,
+            });
+            const left = new PIXI.Graphics()
+                .moveTo(0, 0)
+                .lineTo(0, this.tileHeight)
+                .lineTo(32, 16 + this.tileHeight)
+                .lineTo(32, 16)
+                .fill({
+                textureSpace: "global",
+                texture: (_f = this._texture) !== null && _f !== void 0 ? _f : PIXI.Texture.WHITE,
+                color: (_g = (_b = this._roomPartData) === null || _b === void 0 ? void 0 : _b.tileLeftColor) !== null && _g !== void 0 ? _g : 0,
+                matrix: borderLeftMatrix,
+            });
+            left.position.set(0, 16);
+            this.addChild(left);
+        }
+        if (this._showBorders.showRightBorder) {
+            const borderRightMatrix = getRightMatrix(0, 0, {
+                width: 32,
+                height: this.tileHeight,
+            });
+            const right = new PIXI.Graphics()
+                .moveTo(32, 16)
+                .lineTo(32, 16 + this.tileHeight)
+                .lineTo(64, this.tileHeight)
+                .lineTo(64, 0)
+                .lineTo(32, 16)
+                .fill({
+                textureSpace: "global",
+                texture: (_h = this._texture) !== null && _h !== void 0 ? _h : PIXI.Texture.WHITE,
+                color: (_j = (_c = this._roomPartData) === null || _c === void 0 ? void 0 : _c.tileRightColor) !== null && _j !== void 0 ? _j : 0,
+                matrix: borderRightMatrix,
+            });
+            right.position.set(0, 16);
+            this.addChild(right);
+        }
+    }
+}

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

@@ -0,0 +1,156 @@
+import * as PIXI from "pixi.js";
+import { BehaviorSubject } from "rxjs";
+import { isPointInside } from "../../../util/isPointInside";
+import { TILE_CURSOR, } from "../../events/interfaces/IEventGroup";
+export class TileCursor extends PIXI.Container {
+    constructor(_eventManager, _roomPosition, onClick, onOver, onOut) {
+        super();
+        this._eventManager = _eventManager;
+        this._roomPosition = _roomPosition;
+        this.onClick = onClick;
+        this.onOver = onOver;
+        this.onOut = onOut;
+        this._hover = false;
+        this._isTileCursorDestroyed = false;
+        this._subject = new BehaviorSubject(undefined);
+        this._emitRectangle = () => {
+            var _a, _b;
+            let x = this.worldTransform.tx;
+            let y = this.worldTransform.ty;
+            let width = 64;
+            let height = 32;
+            const m = (_b = (_a = this._eventManager).getCoordinateRootMatrix) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (m != null) {
+                x = (x - m.tx) / m.a;
+                y = (y - m.ty) / m.d;
+            }
+            const last = this._lastRect;
+            if (last != null && last.x === x && last.y === y)
+                return;
+            this._lastRect = { x, y, width, height };
+            this._subject.next(this._lastRect);
+        };
+        this._roomX = _roomPosition.roomX;
+        this._roomY = _roomPosition.roomY;
+        this._roomZ = _roomPosition.roomZ;
+        this._graphics = this._createGraphics();
+        this._updateGraphics();
+        this.addChild(this._graphics);
+        this.onRender = this._emitRectangle;
+        this._eventManager.register(this);
+    }
+    getEventGroupIdentifier() {
+        return TILE_CURSOR;
+    }
+    getGroup() {
+        return this;
+    }
+    getRectangleObservable() {
+        return this._subject;
+    }
+    getEventZOrder() {
+        return -1000;
+    }
+    triggerPointerTargetChanged(event) { }
+    triggerClick(event) {
+        this.onClick({
+            roomX: this._roomX,
+            roomY: this._roomY,
+            roomZ: this._roomZ,
+        }, event);
+    }
+    triggerPointerDown(event) { }
+    triggerPointerUp(event) { }
+    triggerPointerOver(event) {
+        if (this._isTileCursorDestroyed)
+            return;
+        this._updateHover(true);
+        this.onOver({ roomX: this._roomX, roomY: this._roomY, roomZ: this._roomZ });
+    }
+    triggerPointerOut(event) {
+        if (this._isTileCursorDestroyed)
+            return;
+        this._updateHover(false);
+        this.onOut({ roomX: this._roomX, roomY: this._roomY, roomZ: this._roomZ });
+    }
+    createDebugSprite() {
+        return undefined;
+    }
+    hits(x, y) {
+        const pos = this.getGlobalPosition();
+        const transform = this.worldTransform;
+        const scaleX = Math.sqrt(transform.a * transform.a + transform.b * transform.b) || 1;
+        const scaleY = Math.sqrt(transform.c * transform.c + transform.d * transform.d) || 1;
+        const diffX = (x - pos.x) / scaleX;
+        const diffY = (y - pos.y) / scaleY;
+        return this._pointInside([diffX, diffY], [
+            [points.p1.x, points.p1.y],
+            [points.p2.x, points.p2.y],
+            [points.p3.x, points.p3.y],
+            [points.p4.x, points.p4.y],
+        ]);
+    }
+    getHitDetectionZIndex() {
+        return -1000;
+    }
+    destroy() {
+        this._isTileCursorDestroyed = true;
+        this._eventManager.remove(this);
+        this._graphics.destroy();
+        super.destroy();
+    }
+    _createGraphics() {
+        const graphics = new PIXI.Graphics();
+        return graphics;
+    }
+    _updateGraphics() {
+        if (this._isTileCursorDestroyed)
+            return;
+        const graphics = this._graphics;
+        if (graphics == null)
+            return;
+        graphics.clear();
+        if (this._hover) {
+            drawBorder(graphics, 0x000000, 0.33, 0);
+            drawBorder(graphics, 0xa7d1e0, 1, -2);
+            drawBorder(graphics, 0xffffff, 1, -3);
+        }
+    }
+    _updateHover(hover) {
+        if (this._hover === hover)
+            return;
+        this._hover = hover;
+        this._updateGraphics();
+        if (hover) {
+            this.onOver(this._roomPosition);
+        }
+        else {
+            this.onOut(this._roomPosition);
+        }
+    }
+    _pointInside(point, vs) {
+        return isPointInside(point, vs);
+    }
+}
+const points = {
+    p1: { x: 0, y: 16 },
+    p2: { x: 32, y: 0 },
+    p3: { x: 64, y: 16 },
+    p4: { x: 32, y: 32 },
+};
+function drawBorder(graphics, color, alpha = 1, offsetY) {
+    graphics
+        .moveTo(points.p1.x, points.p1.y + offsetY)
+        .lineTo(points.p2.x, points.p2.y + offsetY)
+        .lineTo(points.p3.x, points.p3.y + offsetY)
+        .lineTo(points.p4.x, points.p4.y + offsetY)
+        .closePath()
+        .fill({ color, alpha });
+    graphics
+        .moveTo(points.p1.x + 6, points.p1.y + offsetY)
+        .lineTo(points.p2.x, points.p2.y + 3 + offsetY)
+        .lineTo(points.p3.x - 6, points.p3.y + offsetY)
+        .lineTo(points.p4.x, points.p4.y - 3 + offsetY)
+        .closePath()
+        .cut();
+}

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

@@ -0,0 +1,142 @@
+import * as PIXI from "pixi.js";
+export class WallLeft extends PIXI.Container {
+    constructor(props) {
+        super();
+        this.props = props;
+        this._offsets = { x: 0, y: 0 };
+        this._borderWidth = 0;
+        this._wallHeight = 0;
+        this._wallWidth = 32;
+        this._tileHeight = 0;
+        this._wallLeftColor = 0;
+        this._wallRightColor = 0;
+        this._wallTopColor = 0;
+        this._drawHitArea = false;
+        this._hideBorder = false;
+        this._roomZ = 0;
+        this._hideBorder = props.hideBorder;
+        //this._update();
+    }
+    get roomZ() {
+        return this._roomZ;
+    }
+    /** Height of the wall in pixels, measured from the tile's floor line up. */
+    get pixelHeight() {
+        return this._wallHeight;
+    }
+    set roomZ(value) {
+        this._roomZ = value;
+        this._update();
+    }
+    get wallY() {
+        return -this._wallHeight;
+    }
+    get wallHeight() {
+        if (this.props.cutawayHeight != null) {
+            return this._wallHeight - this.props.cutawayHeight;
+        }
+        return this._wallHeight;
+    }
+    update(data) {
+        this._borderWidth = data.borderWidth;
+        this._wallHeight = data.wallHeight - this.roomZ * 32;
+        this._tileHeight = data.tileHeight;
+        this._wallLeftColor = data.wallLeftColor;
+        this._wallRightColor = data.wallRightColor;
+        this._wallTopColor = data.wallTopColor;
+        this._wallTexture = data.wallTexture;
+        this._update();
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this._hitAreaElement) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.removeChildren();
+    }
+    _update() {
+        if (this._hitAreaElement != null) {
+            this.props.hitAreaContainer.removeChild(this._hitAreaElement);
+            this._hitAreaElement = undefined;
+        }
+        this.removeChildren();
+        const hitArea = new PIXI.Polygon(this._getDisplayPoints());
+        this.hitArea = hitArea;
+        const primary = this._createPrimarySprite();
+        const border = this._createBorderSprite();
+        const top = this._createTopSprite();
+        this.addChild(primary);
+        if (!this._hideBorder) {
+            this.addChild(border);
+        }
+        this.addChild(top);
+        const graphics = new PIXI.Graphics();
+        graphics.poly(this._getDisplayPoints()).fill(0xff00ff);
+        graphics.alpha = this._drawHitArea ? 1 : 0;
+        const handleMoveEvent = (event) => {
+            if (event.target === graphics) {
+                const position = event.getLocalPosition(graphics);
+                this.props.onMouseMove({ offsetX: position.x, offsetY: position.y });
+            }
+        };
+        graphics.on("pointermove", handleMoveEvent);
+        graphics.on("pointerover", handleMoveEvent);
+        graphics.on("pointerout", () => {
+            this.props.onMouseOut();
+        });
+        graphics.eventMode = "static";
+        this._hitAreaElement = graphics;
+        this._hitAreaElement.x = this.x;
+        this._hitAreaElement.y = this.y;
+        this._hitAreaElement.scale.copyFrom(this.scale);
+        this.props.hitAreaContainer.addChild(this._hitAreaElement);
+    }
+    _getDisplayPoints() {
+        var _a, _b;
+        return [
+            new PIXI.Point(this._getOffsetX() + this._borderWidth, this._wallWidth / 2 - ((_a = this.props.cutawayHeight) !== null && _a !== void 0 ? _a : 0)),
+            new PIXI.Point(this._getOffsetX() + this._wallWidth + this._borderWidth, -((_b = this.props.cutawayHeight) !== null && _b !== void 0 ? _b : 0)),
+            new PIXI.Point(this._getOffsetX() + this._wallWidth + this._borderWidth, -this._wallHeight),
+            new PIXI.Point(this._getOffsetX() + this._borderWidth, -this._wallHeight + this._wallWidth / 2),
+        ];
+    }
+    _getOffsetX() {
+        return this.scale.x * this._offsets.x - this._borderWidth;
+    }
+    _createPrimarySprite() {
+        var _a;
+        const sprite = new PIXI.TilingSprite({
+            texture: (_a = this._wallTexture) !== null && _a !== void 0 ? _a : PIXI.Texture.WHITE,
+            width: this._wallWidth,
+            height: this.wallHeight,
+        });
+        sprite.setFromMatrix(new PIXI.Matrix(-1, 0.5, 0, 1));
+        sprite.x = this._getOffsetX() + this._borderWidth + this._wallWidth;
+        sprite.y = this.wallY;
+        sprite.tint = this._wallLeftColor;
+        return sprite;
+    }
+    _createBorderSprite() {
+        const border = new PIXI.TilingSprite({
+            texture: PIXI.Texture.WHITE,
+            width: this._borderWidth,
+            height: this._wallHeight + this._tileHeight,
+        });
+        border.setFromMatrix(new PIXI.Matrix(-1, -0.5, 0, 1));
+        border.y = this.wallY + this._wallWidth / 2;
+        border.x = this._getOffsetX() + this._borderWidth;
+        border.tint = this._wallRightColor;
+        return border;
+    }
+    _createTopSprite() {
+        const border = new PIXI.TilingSprite({
+            texture: PIXI.Texture.WHITE,
+            width: this._borderWidth,
+            height: this._wallWidth,
+        });
+        border.setFromMatrix(new PIXI.Matrix(1, 0.5, 1, -0.5));
+        border.x = this._getOffsetX() + 0;
+        border.y = this.wallY + this._wallWidth / 2 - this._borderWidth / 2;
+        border.tint = this._wallTopColor;
+        return border;
+    }
+}

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

@@ -0,0 +1,47 @@
+import * as PIXI from "pixi.js";
+export class WallOuterCorner extends PIXI.Container {
+    constructor() {
+        super();
+        this._borderWidth = 0;
+        this._wallHeight = 0;
+        this._roomZ = 0;
+        this._wallTopColor = 0;
+    }
+    get roomZ() {
+        return this._roomZ;
+    }
+    set roomZ(value) {
+        this._roomZ = value;
+        this._update();
+    }
+    get wallY() {
+        return -this._wallHeight;
+    }
+    update(data) {
+        this._borderWidth = data.borderWidth;
+        this._wallHeight = data.wallHeight;
+        this._wallTopColor = data.wallTopColor;
+        this._update();
+    }
+    _createTopSprite() {
+        const border = new PIXI.TilingSprite({
+            texture: PIXI.Texture.WHITE,
+            width: this._borderWidth,
+            height: this._borderWidth,
+        });
+        border.setFromMatrix(new PIXI.Matrix(1, 0.5, 1, -0.5));
+        border.tint = this._wallTopColor;
+        border.x = -this._borderWidth;
+        border.y =
+            -this._wallHeight +
+                this.roomZ * 32 -
+                32 / 2 +
+                this._borderWidth / 2 +
+                (32 - this._borderWidth);
+        return border;
+    }
+    _update() {
+        this.removeChildren();
+        this.addChild(this._createTopSprite());
+    }
+}

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

@@ -0,0 +1,14 @@
+import { WallLeft } from "./WallLeft";
+export class WallRight extends WallLeft {
+    constructor(props) {
+        super(props);
+    }
+    _update() {
+        this._offsets = { x: this._wallWidth, y: 0 };
+        this.scale.x = -1;
+        const left = this._wallLeftColor;
+        this._wallLeftColor = this._wallRightColor;
+        this._wallRightColor = left;
+        super._update();
+    }
+}