@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist-esm/objects/hitdetection/HitTexture.js

@@ -0,0 +1,116 @@
+import * as PIXI from "pixi.js";
+import { applyTextureProperties } from "../../util/applyTextureProperties";
+import { loadImageFromBlob } from "../../util/loadImageFromBlob";
+export class HitTexture {
+    get texture() {
+        return this._texture;
+    }
+    constructor(texture) {
+        this._texture = texture;
+        applyTextureProperties(this._texture);
+    }
+    static async fromSpriteSheet(spritesheet, name) {
+        const texture = spritesheet.textures[name];
+        if (texture == null) {
+            throw new Error(`Texture "${name}" not found in spritesheet`);
+        }
+        return new HitTexture(texture);
+    }
+    static fromHitmap(hitmap, width, height) {
+        const source = {
+            resource: { width, height },
+            resolution: 1,
+            pixelWidth: width,
+            scaleMode: "nearest",
+        };
+        const texture = {
+            source,
+            orig: { x: 0, y: 0 },
+            frame: { x: 0, y: 0, width, height },
+        };
+        const instance = new HitTexture(texture);
+        instance._cachedHitmap = hitmap;
+        return instance;
+    }
+    static async fromBlob(blob) {
+        const url = await loadImageFromBlob(blob);
+        return HitTexture.fromUrl(url);
+    }
+    static async fromUrl(imageUrl) {
+        const image = new Image();
+        // We set the crossOrigin here so the image element
+        // can fetch and display images hosted on another origin.
+        // Thanks to @danielsolartech for reporting.
+        // TODO: Add option to configure this somewhere?
+        image.crossOrigin = "anonymous";
+        image.src = imageUrl;
+        await new Promise((resolve, reject) => {
+            image.onload = () => {
+                resolve({ width: image.width, height: image.height });
+            };
+            image.onerror = (value) => reject(value);
+        });
+        const texture = PIXI.Texture.from(image);
+        return new HitTexture(texture);
+    }
+    getHitMap() {
+        return this._getHitMap();
+    }
+    hits(x, y, transform, options = { mirrorHorizonally: false }) {
+        var _a, _b;
+        const scaleX = (_a = transform.scaleX) !== null && _a !== void 0 ? _a : 1;
+        const scaleY = (_b = transform.scaleY) !== null && _b !== void 0 ? _b : 1;
+        if (options.mirrorHorizonally) {
+            x = -(x - transform.x) / scaleX;
+        }
+        else {
+            x = (x - transform.x) / scaleX;
+        }
+        y = (y - transform.y) / scaleY;
+        const frame = this._texture.frame;
+        const width = Math.max(1, Math.round(frame.width));
+        const height = Math.max(1, Math.round(frame.height));
+        const dx = Math.round(x);
+        const dy = Math.round(y);
+        if (dx < 0 || dy < 0 || dx >= width || dy >= height)
+            return false;
+        const hitmap = this._getHitMap();
+        const ind = dx + dy * width;
+        const ind1 = ind % 32;
+        const ind2 = (ind / 32) | 0;
+        return (hitmap[ind2] & (1 << ind1)) !== 0;
+    }
+    _getHitMap() {
+        var _a;
+        if (this._cachedHitmap == null) {
+            this._cachedHitmap = generateHitMap(this._texture);
+        }
+        return (_a = this._cachedHitmap) !== null && _a !== void 0 ? _a : new Uint32Array();
+    }
+}
+function generateHitMap(texture) {
+    const source = texture.source.resource;
+    if (source == null)
+        return new Uint32Array();
+    const frame = texture.frame;
+    const w = Math.max(1, Math.round(frame.width));
+    const h = Math.max(1, Math.round(frame.height));
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (context == null)
+        throw new Error("Invalid context 2d");
+    context.drawImage(source, Math.round(frame.x), Math.round(frame.y), w, h, 0, 0, w, h);
+    const threshold = 25;
+    const imageData = context.getImageData(0, 0, w, h);
+    const hitmap = new Uint32Array(Math.ceil((w * h) / 32));
+    for (let i = 0; i < w * h; i++) {
+        const ind1 = i % 32;
+        const ind2 = (i / 32) | 0;
+        if (imageData.data[i * 4 + 3] >= threshold) {
+            hitmap[ind2] = hitmap[ind2] | (1 << ind1);
+        }
+    }
+    return hitmap;
+}

package/dist-esm/objects/interfaces/IMoveable.js

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

package/dist-esm/objects/interfaces/IScreenPositioned.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,349 @@
+import * as PIXI from "pixi.js";
+import { RoomObject } from "../RoomObject";
+import { getMaskId } from "./util/getMaskId";
+export class Landscape extends RoomObject {
+    constructor() {
+        super();
+        this._wallHeight = 0;
+        this._wallHeightWithZ = 0;
+        this._masks = new Map();
+        this._unsubscribe = undefined;
+        this._assets = new Map();
+        this._animated = [];
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this._updateLandscapeImages();
+    }
+    get leftTexture() {
+        return this._leftTexturePromise;
+    }
+    set leftTexture(value) {
+        this._leftTexturePromise = value;
+        Promise.resolve(this._leftTexturePromise).then((value) => {
+            this._leftTexture = value;
+            this._updateLandscapeImages();
+        });
+    }
+    get rightTexture() {
+        return this._rightTexturePromise;
+    }
+    set rightTexture(value) {
+        this._rightTexturePromise = value;
+        Promise.resolve(this._rightTexturePromise).then((value) => {
+            this._rightTexture = value;
+            this._updateLandscapeImages();
+        });
+    }
+    setVisualization(visualization, assets = {}) {
+        this._visualization = {
+            layers: visualization.layers.map((layer) => { var _a; return ({
+                ...layer,
+                items: (_a = layer.items) === null || _a === void 0 ? void 0 : _a.map((item) => { var _a, _b; return ({
+                    ...item,
+                    x: item.x + Math.random() * ((_a = item.randomX) !== null && _a !== void 0 ? _a : 0),
+                    y: item.y + Math.random() * ((_b = item.randomY) !== null && _b !== void 0 ? _b : 0),
+                }); }),
+            }); }),
+        };
+        this._assets = new Map(Object.entries(assets));
+        this._updateLandscapeImages();
+    }
+    update(data) {
+        this._masks = data.masks;
+        this._wallHeightWithZ = data.wallHeight;
+        this._updateLandscapeImages();
+    }
+    destroyed() {
+        var _a, _b;
+        this._unsubscribe && this._unsubscribe();
+        this._unsubscribe = undefined;
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this._partNode) === null || _b === void 0 ? void 0 : _b.remove();
+    }
+    registered() {
+        this._partNode = this.roomVisualization.addPart(this);
+        this._unsubscribe = this.animationTicker.subscribe(() => this._updateAnimatedItems());
+        this._updateLandscapeImages();
+    }
+    _updateAnimatedItems() {
+        if (this._animated.length === 0)
+            return;
+        if (this._startedAt == null)
+            this._startedAt = performance.now();
+        const elapsed = performance.now() - this._startedAt;
+        this._animated.forEach(({ sprite, item, span, height, planeOffset, wrapX, wrapY }) => {
+            const point = getLandscapeItemPosition(item, span, height, elapsed);
+            sprite.x = point.x - planeOffset + wrapX * span;
+            sprite.y = point.y - height + wrapY * height;
+        });
+    }
+    _createDefaultMask() {
+        return new PIXI.Graphics();
+    }
+    _getMask(direction, roomX, roomY) {
+        const maskId = getMaskId(direction, roomX, roomY);
+        if (maskId != null) {
+            const mask = this._masks.get(maskId);
+            if (mask != null)
+                return mask;
+        }
+        return this._createDefaultMask();
+    }
+    /**
+     * Draws one landscape layer into a wall. `planeOffset` is how far along the
+     * whole landscape this wall starts, and `span` its total width, so a material
+     * tiles seamlessly and an item drifting off one wall arrives on the next.
+     */
+    _createLayer(layer, wall, width, planeOffset, span) {
+        var _a;
+        var _b;
+        const height = this._wallHeightWithZ;
+        if (layer.material != null) {
+            const texture = this._assets.get(layer.material);
+            if (texture != null) {
+                const material = new PIXI.TilingSprite({
+                    texture,
+                    width,
+                    height: layer.align === "top" ? height : texture.height,
+                });
+                material.tilePosition.set(-planeOffset, 0);
+                material.x = 0;
+                material.y =
+                    (layer.align === "top" ? -height : -texture.height) +
+                        ((_b = layer.offset) !== null && _b !== void 0 ? _b : 0);
+                if (layer.color != null)
+                    material.tint = layer.color;
+                wall.addChild(material);
+            }
+        }
+        else if (layer.color != null) {
+            const colored = new PIXI.TilingSprite(PIXI.Texture.WHITE, width, height);
+            colored.tint = layer.color;
+            colored.y = -height;
+            wall.addChild(colored);
+        }
+        (_a = layer.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+            const texture = this._assets.get(item.asset);
+            if (texture == null)
+                return;
+            // Four copies, offset by a full landscape in each axis, so an item that
+            // walks off one edge is already arriving at the opposite one.
+            [
+                [0, 0],
+                [-1, 0],
+                [0, -1],
+                [-1, -1],
+            ].forEach(([wrapX, wrapY]) => {
+                const sprite = new PIXI.Sprite(texture);
+                wall.addChild(sprite);
+                this._animated.push({
+                    sprite,
+                    item,
+                    span,
+                    height,
+                    planeOffset,
+                    wrapX,
+                    wrapY,
+                });
+            });
+        });
+    }
+    _updateLandscapeImages() {
+        var _a;
+        if (!this.mounted)
+            return;
+        const meta = getWallCollectionMeta(this.tilemap.getParsedTileTypes());
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._animated = [];
+        const container = new PIXI.Container();
+        const spanOf = (type) => meta
+            .filter((entry) => entry.type === type)
+            .reduce((total, entry) => total + Math.abs(entry.end - entry.start) * 32, 0);
+        const rowSpan = spanOf("rowWall");
+        const colSpan = spanOf("colWall");
+        let offsetRow = 0;
+        let offsetCol = 0;
+        meta.forEach((meta) => {
+            const width = Math.abs(meta.end - meta.start) * 32;
+            const wall = new PIXI.Container();
+            if (this._visualization == null) {
+                const colored = new PIXI.TilingSprite(PIXI.Texture.WHITE, width, this._wallHeightWithZ);
+                if (this.color != null) {
+                    colored.tint = parseInt(this.color.slice(1), 16);
+                }
+                else {
+                    colored.tint = 0xffffff;
+                }
+                colored.y = -this._wallHeightWithZ;
+                wall.addChild(colored);
+            }
+            else {
+                this._visualization.layers.forEach((layer) => this._createLayer(layer, wall, width, meta.type === "rowWall" ? offsetRow : offsetCol, meta.type === "rowWall" ? rowSpan : colSpan));
+            }
+            if (meta.type === "rowWall") {
+                const maskLevel = this.landscapeContainer.getMaskLevel(meta.level, 0);
+                const mask = this._getMask(2, maskLevel.roomX, 0);
+                wall.mask = mask;
+                const position = this.geometry.getPosition(meta.level + 1, meta.start, 0);
+                wall.setFromMatrix(new PIXI.Matrix(1, -0.5, 0, 1));
+                wall.x = position.x;
+                wall.y = position.y + 16;
+                if (this._visualization == null && this._leftTexture != null) {
+                    const graphics = new PIXI.TilingSprite({
+                        texture: this._leftTexture,
+                        width,
+                        height: this._leftTexture.height,
+                    });
+                    graphics.tilePosition.set(offsetRow, 0);
+                    graphics.texture = this._leftTexture;
+                    graphics.x = 0;
+                    graphics.y = -this._leftTexture.height;
+                    wall.addChild(graphics);
+                }
+                offsetRow += width;
+            }
+            else if (meta.type === "colWall") {
+                const maskLevel = this.landscapeContainer.getMaskLevel(0, meta.level);
+                const mask = this._getMask(4, 0, maskLevel.roomY);
+                wall.mask = mask;
+                const position = this.geometry.getPosition(meta.start + 1, meta.level + 1, 0);
+                wall.setFromMatrix(new PIXI.Matrix(1, 0.5, 0, 1));
+                wall.x = position.x + 32;
+                wall.y = position.y;
+                if (this._visualization == null && this._rightTexture != null) {
+                    const graphics = new PIXI.TilingSprite({
+                        texture: this._rightTexture,
+                        width,
+                        height: this._rightTexture.height,
+                    });
+                    graphics.texture = this._rightTexture;
+                    graphics.x = 0;
+                    graphics.y = -this._rightTexture.height;
+                    graphics.tilePosition.set(offsetCol, 0);
+                    wall.addChild(graphics);
+                }
+                offsetCol += width;
+            }
+            container.addChild(wall);
+        });
+        this._container = container;
+        this.roomVisualization.landscapeContainer.addChild(container);
+    }
+}
+const wrap = (value) => ((value % 1) + 1) % 1;
+/**
+ * Where an animated item sits after `elapsed` ms. Speeds are room units per
+ * second across the whole landscape, so the item crosses it in the same time
+ * no matter how large the room is.
+ */
+export function getLandscapeItemPosition(item, span, height, elapsed) {
+    const tilesX = span / 32;
+    const tilesY = height / 32;
+    return {
+        x: Math.trunc(wrap(item.x + (tilesX > 0 ? (item.speedX / tilesX) * (elapsed / 1000) : 0)) *
+            span),
+        y: Math.trunc(wrap(item.y + (tilesY > 0 ? (item.speedY / tilesY) * (elapsed / 1000) : 0)) *
+            height),
+    };
+}
+const getTile = (parsedTileMap, x, y) => {
+    const row = parsedTileMap[y];
+    if (row == null)
+        return;
+    return row[x];
+};
+export function getWallCollectionMeta(parsedTileMap) {
+    const start = getStartingWall(parsedTileMap);
+    if (start == null)
+        return [];
+    let x = start.x;
+    let y = start.y;
+    let done = false;
+    let meta = undefined;
+    const arr = [];
+    const maxSteps = parsedTileMap.length +
+        parsedTileMap.reduce((max, row) => { var _a; return Math.max(max, (_a = row === null || row === void 0 ? void 0 : row.length) !== null && _a !== void 0 ? _a : 0); }, 0) +
+        2;
+    for (let step = 0; step < maxSteps; step++) {
+        const currentWall = getTile(parsedTileMap, x, y);
+        const topWallPosition = { x, y: y - 1 };
+        const rightWallPosition = { x: x + 1, y };
+        const topWall = getTile(parsedTileMap, topWallPosition.x, topWallPosition.y);
+        const rightWall = getTile(parsedTileMap, rightWallPosition.x, rightWallPosition.y);
+        if (currentWall == null ||
+            (currentWall.type !== "wall" && currentWall.type !== "door"))
+            break;
+        const updateMeta = (newMeta) => {
+            if (meta == null) {
+                meta = newMeta;
+                return;
+            }
+            if (meta != null && meta.type !== newMeta.type) {
+                arr.push(meta);
+                meta = newMeta;
+                return;
+            }
+            meta = {
+                ...meta,
+                level: newMeta.level,
+                end: newMeta.end,
+            };
+        };
+        if (currentWall.type === "wall") {
+            switch (currentWall.kind) {
+                case "rowWall":
+                case "innerCorner":
+                    updateMeta({ type: "rowWall", start: y, end: y - 1, level: x });
+                    break;
+                case "colWall":
+                case "outerCorner":
+                    updateMeta({
+                        type: "colWall",
+                        start: x,
+                        end: x + (done ? 0 : 1),
+                        level: y,
+                    });
+                    break;
+            }
+        }
+        else if (currentWall.type === "door") {
+            updateMeta({ type: "rowWall", start: y, end: y - 1, level: x });
+        }
+        if (done) {
+            if (meta != null) {
+                arr.push(meta);
+            }
+            break;
+        }
+        if (topWall != null &&
+            (topWall.type === "wall" || topWall.type === "door")) {
+            x = topWallPosition.x;
+            y = topWallPosition.y;
+        }
+        else if (rightWall != null && rightWall.type === "wall") {
+            x = rightWallPosition.x;
+            y = rightWallPosition.y;
+        }
+        else {
+            done = true;
+        }
+    }
+    return arr;
+}
+export function getStartingWall(parsedTileMap) {
+    const startY = parsedTileMap.length - 1;
+    const width = parsedTileMap.reduce((max, row) => { var _a; return Math.max(max, (_a = row === null || row === void 0 ? void 0 : row.length) !== null && _a !== void 0 ? _a : 0); }, 0);
+    for (let x = 0; x < width; x++) {
+        for (let y = startY; y >= 0; y--) {
+            const current = getTile(parsedTileMap, x, y);
+            if (current != null && current.type === "wall") {
+                return { x, y };
+            }
+        }
+    }
+    return undefined;
+}

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

@@ -0,0 +1,22 @@
+import { parseTileMap } from "../../util/parseTileMap";
+export class ParsedTileMap {
+    get highestTile() {
+        return this._data.highestTile;
+    }
+    get largestDiff() {
+        return this._data.largestDiff;
+    }
+    get parsedTileTypes() {
+        return this._data.tilemap;
+    }
+    get wallOffsets() {
+        return this._data.wallOffsets;
+    }
+    constructor(tilemap) {
+        this.tilemap = tilemap;
+        this._data = parseTileMap(tilemap);
+    }
+    getRawTileMap() {
+        return this.tilemap.map((row) => [...row]);
+    }
+}