ttpg-darrell 1.0.17 → 1.0.18

package/build/cjs/index.d.ts

@@ -9,4 +9,5 @@ export * from "./setup/layout/layout-objects";
 export * from "./setup/spawn/spawn";
 export * from "./shuffle/shuffle";
 export * from "./triggerable-multicast-delegate/triggerable-multicast-delegate";
-export * from "./ui/player-name-take-seat";
+export * from "./ui/object/player-name-take-seat/player-name-take-seat";
+export * from "./ui/widget/d6widget/d6widget";

package/build/cjs/index.js

@@ -25,4 +25,5 @@ __exportStar(require("./setup/layout/layout-objects"), exports);
 __exportStar(require("./setup/spawn/spawn"), exports);
 __exportStar(require("./shuffle/shuffle"), exports);
 __exportStar(require("./triggerable-multicast-delegate/triggerable-multicast-delegate"), exports);
-__exportStar(require("./ui/player-name-take-seat"), exports);
+__exportStar(require("./ui/object/player-name-take-seat/player-name-take-seat"), exports);
+__exportStar(require("./ui/widget/d6widget/d6widget"), exports);

package/build/cjs/setup/spawn/spawn.js

@@ -12,6 +12,10 @@ class Spawn {
             return undefined;
         }
         const obj = api_1.world.createObjectFromTemplate(templateId, position);
+        if (obj) {
+            const name = api_1.world.getTemplateName(templateId);
+            obj.setName(name);
+        }
         return obj;
     }
     static spawnOrThrow(nsid, position) {

package/build/cjs/ui/object/player-name-take-seat/player-name-take-seat.d.ts

@@ -0,0 +1,19 @@
+import { Color, GameObject } from "@tabletop-playground/api";
+/**
+ * Display player name above-and-behind the card holder.
+ * Show a "take seat" button when no player in slot.
+ */
+export declare class PlayerNameTakeSeat {
+    static readonly DEFAULT_FONT_SIZE = 30;
+    private readonly _gameObject;
+    private readonly _nameText;
+    private readonly _nameBorder;
+    private readonly _takeSeatButton;
+    private readonly _widgetSwitcher;
+    private readonly _ui;
+    constructor(gameObject: GameObject);
+    setColor(color: Color): this;
+    setFont(fontName: string, fontPackageId?: string): this;
+    setFontSize(fontSize: number): this;
+    private _updatePlayerStatus;
+}

package/build/cjs/ui/object/player-name-take-seat/player-name-take-seat.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerNameTakeSeat = void 0;
+const api_1 = require("@tabletop-playground/api");
+/**
+ * Display player name above-and-behind the card holder.
+ * Show a "take seat" button when no player in slot.
+ */
+class PlayerNameTakeSeat {
+    constructor(gameObject) {
+        if (!gameObject) {
+            throw new Error("missing gameObject");
+        }
+        this._gameObject = gameObject;
+        this._nameText = new api_1.Text()
+            .setBold(true)
+            .setJustification(api_1.TextJustification.Center)
+            .setText(" Player Name ");
+        this._nameBorder = new api_1.Border()
+            .setColor([0, 0, 0, 0.75])
+            .setChild(this._nameText);
+        this._takeSeatButton = new api_1.Button().setBold(true).setText(" TAKE SEAT ");
+        this._widgetSwitcher = new api_1.WidgetSwitcher()
+            .addChild(this._takeSeatButton)
+            .addChild(this._nameBorder);
+        this._ui = new api_1.UIElement();
+        this._ui.presentationStyle = api_1.UIPresentationStyle.ViewAligned;
+        this._ui.useTransparency = true;
+        this._ui.useWidgetSize = true;
+        this._ui.widget = this._widgetSwitcher;
+        this._takeSeatButton.onClicked.add((button, player) => {
+            const thisSlot = this._gameObject.getOwningPlayerSlot();
+            if (thisSlot < 0) {
+                throw new Error("invalid player slot");
+            }
+            player.switchSlot(thisSlot);
+            // Make sure attached card holder follows.
+            const delayedResetCardHolder = () => {
+                if (this._gameObject instanceof api_1.CardHolder) {
+                    player.setHandHolder(this._gameObject);
+                }
+            };
+            process.nextTick(delayedResetCardHolder);
+        });
+        // Listen for events (delay processing by a frame for "final" state).
+        const eventHandler = () => {
+            process.nextTick(() => {
+                this._updatePlayerStatus();
+            });
+        };
+        api_1.globalEvents.onPlayerJoined.add(eventHandler);
+        api_1.globalEvents.onPlayerLeft.add(eventHandler);
+        api_1.globalEvents.onPlayerSwitchedSlots.add(eventHandler);
+        this._gameObject.onDestroyed.add(() => {
+            api_1.globalEvents.onPlayerJoined.remove(eventHandler);
+            api_1.globalEvents.onPlayerLeft.remove(eventHandler);
+            api_1.globalEvents.onPlayerSwitchedSlots.remove(eventHandler);
+        });
+        this._gameObject.addUI(this._ui);
+        this.setColor(gameObject.getPrimaryColor()).setFontSize(PlayerNameTakeSeat.DEFAULT_FONT_SIZE);
+        this._updatePlayerStatus();
+    }
+    setColor(color) {
+        this._nameText.setTextColor(color);
+        this._takeSeatButton.setTextColor(color);
+        return this;
+    }
+    setFont(fontName, fontPackageId) {
+        this._nameText.setFont(fontName, fontPackageId);
+        this._takeSeatButton.setFont(fontName, fontPackageId);
+        return this;
+    }
+    setFontSize(fontSize) {
+        this._nameText.setFontSize(fontSize);
+        this._takeSeatButton.setFontSize(fontSize);
+        // UI position.
+        const x = (this._gameObject.getPosition().x > 0 ? 1 : -1) * 15;
+        const z = fontSize / 5;
+        this._ui.position = new api_1.Vector(x, 0, z);
+        this._gameObject.updateUI(this._ui);
+        return this;
+    }
+    _updatePlayerStatus() {
+        // Calculate widget.
+        let widget = this._takeSeatButton;
+        // If seated player, show name.
+        const playerSlot = this._gameObject.getOwningPlayerSlot();
+        for (const player of api_1.world.getAllPlayers()) {
+            if (player.getSlot() === playerSlot) {
+                this._nameText.setText(` ${player.getName()} `);
+                widget = this._nameBorder;
+                break;
+            }
+        }
+        if (this._widgetSwitcher.getActiveWidget() !== widget) {
+            this._widgetSwitcher.setActiveWidget(widget);
+            this._gameObject.updateUI(this._ui);
+        }
+    }
+}
+exports.PlayerNameTakeSeat = PlayerNameTakeSeat;
+PlayerNameTakeSeat.DEFAULT_FONT_SIZE = 30;

package/build/cjs/ui/widget/d6widget/d6widget.d.ts

@@ -0,0 +1,48 @@
+import { Widget } from "@tabletop-playground/api";
+/**
+ * Show a single D6 face as a square widget.
+ *
+ * Do not extend a widget class, the class shell can be lost when retrieving
+ * via getChild, etc.  Use an explicit getWidget method for the widget.
+ */
+export declare class D6Widget {
+    private readonly _imageWidget;
+    private readonly _canvas;
+    private readonly _layoutBox;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Set the widget / single-face image size.
+     *
+     * @param size
+     * @returns self, for chaining
+     */
+    setSize(size: number): this;
+    /**
+     * Set the 3x3 dice face sheet:
+     *
+     * [ - 1 - ]
+     * [ 2 3 6 ]
+     * [ 5 4 - ]
+     *
+     * @param textureName
+     * @param texturePackageId
+     * @returns self, for chaining
+     */
+    setDiceImage(textureName: string, texturePackageId?: string): this;
+    /**
+     * Set which face is visible in the widget.
+     *
+     * @param index
+     * @returns self, for chaining
+     */
+    setFace(index: number): this;
+    /**
+     * Get a widget suitable for UI.
+     *
+     * @returns Widget
+     */
+    getWidget(): Widget;
+}

package/build/cjs/ui/widget/d6widget/d6widget.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D6Widget = void 0;
+const api_1 = require("@tabletop-playground/api");
+/**
+ * Show a single D6 face as a square widget.
+ *
+ * Do not extend a widget class, the class shell can be lost when retrieving
+ * via getChild, etc.  Use an explicit getWidget method for the widget.
+ */
+class D6Widget {
+    /**
+     * Constructor.
+     */
+    constructor() {
+        this._imageWidget = new api_1.ImageWidget();
+        this._canvas = new api_1.Canvas().addChild(this._imageWidget, 0, 0, 1, 1);
+        this._layoutBox = new api_1.LayoutBox().setChild(this._canvas);
+        this.setSize(50);
+        this.setFace(0);
+    }
+    /**
+     * Set the widget / single-face image size.
+     *
+     * @param size
+     * @returns self, for chaining
+     */
+    setSize(size) {
+        this._layoutBox.setOverrideHeight(size).setOverrideWidth(size);
+        this._imageWidget.setImageSize(size * 3, size * 3);
+        return this;
+    }
+    /**
+     * Set the 3x3 dice face sheet:
+     *
+     * [ - 1 - ]
+     * [ 2 3 6 ]
+     * [ 5 4 - ]
+     *
+     * @param textureName
+     * @param texturePackageId
+     * @returns self, for chaining
+     */
+    setDiceImage(textureName, texturePackageId) {
+        this._imageWidget.setImage(textureName, texturePackageId);
+        return this;
+    }
+    /**
+     * Set which face is visible in the widget.
+     *
+     * @param index
+     * @returns self, for chaining
+     */
+    setFace(index) {
+        const colRow = [
+            { col: 1, row: 0 }, // 1
+            { col: 0, row: 1 }, // 2
+            { col: 1, row: 1 }, // 3
+            { col: 1, row: 2 }, // 4
+            { col: 0, row: 2 }, // 5
+            { col: 2, row: 1 }, // 6
+        ];
+        const { col, row } = colRow[index];
+        if (typeof col !== "number" || typeof row !== "number") {
+            throw new Error("bad index");
+        }
+        // Shift the image so the visible portion is col/row of the 3x3.
+        const s = this._layoutBox.getOverrideWidth();
+        let x = col * -s;
+        let y = row * -s;
+        this._canvas.updateChild(this._imageWidget, x, y, s * 3, s * 3);
+        return this;
+    }
+    /**
+     * Get a widget suitable for UI.
+     *
+     * @returns Widget
+     */
+    getWidget() {
+        return this._layoutBox;
+    }
+}
+exports.D6Widget = D6Widget;

package/build/esm/index.d.ts

@@ -9,4 +9,5 @@ export * from "./setup/layout/layout-objects";
 export * from "./setup/spawn/spawn";
 export * from "./shuffle/shuffle";
 export * from "./triggerable-multicast-delegate/triggerable-multicast-delegate";
-export * from "./ui/player-name-take-seat";
+export * from "./ui/object/player-name-take-seat/player-name-take-seat";
+export * from "./ui/widget/d6widget/d6widget";

package/build/esm/index.js

@@ -9,4 +9,5 @@ export * from "./setup/layout/layout-objects";
 export * from "./setup/spawn/spawn";
 export * from "./shuffle/shuffle";
 export * from "./triggerable-multicast-delegate/triggerable-multicast-delegate";
-export * from "./ui/player-name-take-seat";
+export * from "./ui/object/player-name-take-seat/player-name-take-seat";
+export * from "./ui/widget/d6widget/d6widget";

package/build/esm/setup/spawn/spawn.js

@@ -9,6 +9,10 @@ export class Spawn {
             return undefined;
         }
         const obj = world.createObjectFromTemplate(templateId, position);
+        if (obj) {
+            const name = world.getTemplateName(templateId);
+            obj.setName(name);
+        }
         return obj;
     }
     static spawnOrThrow(nsid, position) {

package/build/esm/ui/object/player-name-take-seat/player-name-take-seat.d.ts

@@ -0,0 +1,19 @@
+import { Color, GameObject } from "@tabletop-playground/api";
+/**
+ * Display player name above-and-behind the card holder.
+ * Show a "take seat" button when no player in slot.
+ */
+export declare class PlayerNameTakeSeat {
+    static readonly DEFAULT_FONT_SIZE = 30;
+    private readonly _gameObject;
+    private readonly _nameText;
+    private readonly _nameBorder;
+    private readonly _takeSeatButton;
+    private readonly _widgetSwitcher;
+    private readonly _ui;
+    constructor(gameObject: GameObject);
+    setColor(color: Color): this;
+    setFont(fontName: string, fontPackageId?: string): this;
+    setFontSize(fontSize: number): this;
+    private _updatePlayerStatus;
+}

package/build/esm/ui/object/player-name-take-seat/player-name-take-seat.js

@@ -0,0 +1,98 @@
+import { Border, Button, CardHolder, Text, TextJustification, UIElement, UIPresentationStyle, Vector, WidgetSwitcher, globalEvents, world, } from "@tabletop-playground/api";
+/**
+ * Display player name above-and-behind the card holder.
+ * Show a "take seat" button when no player in slot.
+ */
+export class PlayerNameTakeSeat {
+    constructor(gameObject) {
+        if (!gameObject) {
+            throw new Error("missing gameObject");
+        }
+        this._gameObject = gameObject;
+        this._nameText = new Text()
+            .setBold(true)
+            .setJustification(TextJustification.Center)
+            .setText(" Player Name ");
+        this._nameBorder = new Border()
+            .setColor([0, 0, 0, 0.75])
+            .setChild(this._nameText);
+        this._takeSeatButton = new Button().setBold(true).setText(" TAKE SEAT ");
+        this._widgetSwitcher = new WidgetSwitcher()
+            .addChild(this._takeSeatButton)
+            .addChild(this._nameBorder);
+        this._ui = new UIElement();
+        this._ui.presentationStyle = UIPresentationStyle.ViewAligned;
+        this._ui.useTransparency = true;
+        this._ui.useWidgetSize = true;
+        this._ui.widget = this._widgetSwitcher;
+        this._takeSeatButton.onClicked.add((button, player) => {
+            const thisSlot = this._gameObject.getOwningPlayerSlot();
+            if (thisSlot < 0) {
+                throw new Error("invalid player slot");
+            }
+            player.switchSlot(thisSlot);
+            // Make sure attached card holder follows.
+            const delayedResetCardHolder = () => {
+                if (this._gameObject instanceof CardHolder) {
+                    player.setHandHolder(this._gameObject);
+                }
+            };
+            process.nextTick(delayedResetCardHolder);
+        });
+        // Listen for events (delay processing by a frame for "final" state).
+        const eventHandler = () => {
+            process.nextTick(() => {
+                this._updatePlayerStatus();
+            });
+        };
+        globalEvents.onPlayerJoined.add(eventHandler);
+        globalEvents.onPlayerLeft.add(eventHandler);
+        globalEvents.onPlayerSwitchedSlots.add(eventHandler);
+        this._gameObject.onDestroyed.add(() => {
+            globalEvents.onPlayerJoined.remove(eventHandler);
+            globalEvents.onPlayerLeft.remove(eventHandler);
+            globalEvents.onPlayerSwitchedSlots.remove(eventHandler);
+        });
+        this._gameObject.addUI(this._ui);
+        this.setColor(gameObject.getPrimaryColor()).setFontSize(PlayerNameTakeSeat.DEFAULT_FONT_SIZE);
+        this._updatePlayerStatus();
+    }
+    setColor(color) {
+        this._nameText.setTextColor(color);
+        this._takeSeatButton.setTextColor(color);
+        return this;
+    }
+    setFont(fontName, fontPackageId) {
+        this._nameText.setFont(fontName, fontPackageId);
+        this._takeSeatButton.setFont(fontName, fontPackageId);
+        return this;
+    }
+    setFontSize(fontSize) {
+        this._nameText.setFontSize(fontSize);
+        this._takeSeatButton.setFontSize(fontSize);
+        // UI position.
+        const x = (this._gameObject.getPosition().x > 0 ? 1 : -1) * 15;
+        const z = fontSize / 5;
+        this._ui.position = new Vector(x, 0, z);
+        this._gameObject.updateUI(this._ui);
+        return this;
+    }
+    _updatePlayerStatus() {
+        // Calculate widget.
+        let widget = this._takeSeatButton;
+        // If seated player, show name.
+        const playerSlot = this._gameObject.getOwningPlayerSlot();
+        for (const player of world.getAllPlayers()) {
+            if (player.getSlot() === playerSlot) {
+                this._nameText.setText(` ${player.getName()} `);
+                widget = this._nameBorder;
+                break;
+            }
+        }
+        if (this._widgetSwitcher.getActiveWidget() !== widget) {
+            this._widgetSwitcher.setActiveWidget(widget);
+            this._gameObject.updateUI(this._ui);
+        }
+    }
+}
+PlayerNameTakeSeat.DEFAULT_FONT_SIZE = 30;

package/build/esm/ui/widget/d6widget/d6widget.d.ts

@@ -0,0 +1,48 @@
+import { Widget } from "@tabletop-playground/api";
+/**
+ * Show a single D6 face as a square widget.
+ *
+ * Do not extend a widget class, the class shell can be lost when retrieving
+ * via getChild, etc.  Use an explicit getWidget method for the widget.
+ */
+export declare class D6Widget {
+    private readonly _imageWidget;
+    private readonly _canvas;
+    private readonly _layoutBox;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Set the widget / single-face image size.
+     *
+     * @param size
+     * @returns self, for chaining
+     */
+    setSize(size: number): this;
+    /**
+     * Set the 3x3 dice face sheet:
+     *
+     * [ - 1 - ]
+     * [ 2 3 6 ]
+     * [ 5 4 - ]
+     *
+     * @param textureName
+     * @param texturePackageId
+     * @returns self, for chaining
+     */
+    setDiceImage(textureName: string, texturePackageId?: string): this;
+    /**
+     * Set which face is visible in the widget.
+     *
+     * @param index
+     * @returns self, for chaining
+     */
+    setFace(index: number): this;
+    /**
+     * Get a widget suitable for UI.
+     *
+     * @returns Widget
+     */
+    getWidget(): Widget;
+}

package/build/esm/ui/widget/d6widget/d6widget.js

@@ -0,0 +1,79 @@
+import { Canvas, ImageWidget, LayoutBox, } from "@tabletop-playground/api";
+/**
+ * Show a single D6 face as a square widget.
+ *
+ * Do not extend a widget class, the class shell can be lost when retrieving
+ * via getChild, etc.  Use an explicit getWidget method for the widget.
+ */
+export class D6Widget {
+    /**
+     * Constructor.
+     */
+    constructor() {
+        this._imageWidget = new ImageWidget();
+        this._canvas = new Canvas().addChild(this._imageWidget, 0, 0, 1, 1);
+        this._layoutBox = new LayoutBox().setChild(this._canvas);
+        this.setSize(50);
+        this.setFace(0);
+    }
+    /**
+     * Set the widget / single-face image size.
+     *
+     * @param size
+     * @returns self, for chaining
+     */
+    setSize(size) {
+        this._layoutBox.setOverrideHeight(size).setOverrideWidth(size);
+        this._imageWidget.setImageSize(size * 3, size * 3);
+        return this;
+    }
+    /**
+     * Set the 3x3 dice face sheet:
+     *
+     * [ - 1 - ]
+     * [ 2 3 6 ]
+     * [ 5 4 - ]
+     *
+     * @param textureName
+     * @param texturePackageId
+     * @returns self, for chaining
+     */
+    setDiceImage(textureName, texturePackageId) {
+        this._imageWidget.setImage(textureName, texturePackageId);
+        return this;
+    }
+    /**
+     * Set which face is visible in the widget.
+     *
+     * @param index
+     * @returns self, for chaining
+     */
+    setFace(index) {
+        const colRow = [
+            { col: 1, row: 0 }, // 1
+            { col: 0, row: 1 }, // 2
+            { col: 1, row: 1 }, // 3
+            { col: 1, row: 2 }, // 4
+            { col: 0, row: 2 }, // 5
+            { col: 2, row: 1 }, // 6
+        ];
+        const { col, row } = colRow[index];
+        if (typeof col !== "number" || typeof row !== "number") {
+            throw new Error("bad index");
+        }
+        // Shift the image so the visible portion is col/row of the 3x3.
+        const s = this._layoutBox.getOverrideWidth();
+        let x = col * -s;
+        let y = row * -s;
+        this._canvas.updateChild(this._imageWidget, x, y, s * 3, s * 3);
+        return this;
+    }
+    /**
+     * Get a widget suitable for UI.
+     *
+     * @returns Widget
+     */
+    getWidget() {
+        return this._layoutBox;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttpg-darrell",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "TTPG TypeScript library",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",