@woosh/meep-engine 2.46.29 → 2.46.30

package/editor/view/ecs/components/common/AutoCanvasView.js

@@ -0,0 +1,53 @@
+import { DomSizeObserver } from "../../../../../src/view/util/DomSizeObserver.js";
+import { CanvasView } from "../../../../../src/view/elements/CanvasView.js";
+
+/**
+ * Automatically tracks size on the screen, including that computed from CSS and - re-renders content when size changes
+ * @extends View
+ */
+export class AutoCanvasView extends CanvasView {
+    constructor({ classList = [] } = {}) {
+        super();
+
+        this.addClasses(classList);
+
+        const sizeObserver = new DomSizeObserver();
+        this.__sizeObserver = sizeObserver;
+
+        const size = sizeObserver.dimensions.size;
+
+        // subscribe to visual dimension changes
+        size.onChanged.add(this.render, this);
+
+        sizeObserver.watchView(this);
+        this.on.linked.add(this.render,this);
+    }
+
+    render() {
+        const dimensions = this.__sizeObserver.dimensions;
+        const size = dimensions.size;
+
+        const width = size.x;
+        const height = size.y;
+
+        if (width <= 0 || height <= 0) {
+            //canvas too small
+            return;
+        }
+
+        // resize canvas as necessary
+        this.size.set(width, height);
+
+        this.draw(this.context2d, width, height);
+    }
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} width
+     * @param {number} height
+     */
+    draw(ctx, width, height) {
+        //override this method
+    }
+}

package/editor/view/ecs/components/common/LineView.js

@@ -0,0 +1,17 @@
+import View from "../../../../../src/view/View.js";
+
+/**
+ * @extends {View}
+ */
+export class LineView extends View {
+    constructor({ elements = [], classList = [] }) {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('ui-line-view');
+
+        classList.forEach(c => this.addClass(c));
+
+        elements.forEach(e => this.addChild(e));
+    }
+}

package/editor/view/ecs/components/common/NumberController.js

@@ -0,0 +1,112 @@
+import View from "../../../../../src/view/View.js";
+import Vector1 from "../../../../../src/core/geom/Vector1.js";
+
+const DEFAULT_VALUE = 0;
+
+export class NumberController extends View {
+    /**
+     *
+     * @param {string[]} [classList]
+     * @param {number} [value]
+     * @param figures
+     */
+    constructor({ classList = [], value = 0, figures = 6 } = {}) {
+        super();
+
+        const _value = new Vector1(value);
+
+        /**
+         *
+         * @type {Vector1}
+         */
+        this.value = _value;
+
+        const el = document.createElement('input');
+        this.el = el;
+
+        this.addClasses(classList);
+
+        el.setAttribute('type', 'text');
+        el.setAttribute('spellcheck', false);
+        el.setAttribute('size', 2);
+
+        el.classList.add('ui-number-controller');
+
+        let lockForward = false;
+
+
+        /**
+         *
+         * @param {number} num_value
+         * @return {string}
+         */
+        function format_value_string(num_value) {
+
+            let str = String(num_value);
+
+            if (Math.abs(num_value) > 0 && Math.abs(num_value % 1).toString().length > (figures + 2)) {
+                const long_form = num_value.toFixed(figures);
+
+                const separator_index = long_form.indexOf('.');
+
+                if (separator_index !== -1) {
+                    // has a decimal fraction, remove trailing zeroes
+                    let i = long_form.length - 1;
+
+                    while (i > 0 && long_form.charAt(i) === "0") {
+                        i--;
+                    }
+
+                    if (long_form.charAt(i) === '.') {
+                        i--;
+                    }
+
+                    str = long_form.slice(0, i + 1);
+                } else {
+                    str = long_form;
+                }
+            }
+
+            return str;
+        }
+
+        function data2view() {
+
+            if (lockForward) {
+                return;
+            }
+
+            const num_value = _value.getValue();
+
+            el.value = format_value_string(num_value);
+
+        }
+
+        function view2data() {
+            lockForward = true;
+
+            const value = parseFloat(el.value);
+
+            if (Number.isNaN(value)) {
+                _value.set(DEFAULT_VALUE);
+            } else {
+                _value.set(value);
+            }
+
+            lockForward = false;
+        }
+
+        /**
+         * Input field stops being edited
+         */
+        function handle_blur() {
+            // reformat contents of the input field
+            el.value = format_value_string(_value.getValue());
+        }
+
+        _value.process(data2view);
+
+        el.addEventListener('input', view2data);
+        el.addEventListener('blur', handle_blur);
+    }
+}

package/editor/view/ecs/components/common/NumericIntervalController.js

@@ -0,0 +1,64 @@
+import { max2 } from "../../../../../src/core/math/max2.js";
+import { min2 } from "../../../../../src/core/math/min2.js";
+import View from "../../../../../src/view/View.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+import { NumberController } from "./NumberController.js";
+
+export class NumericIntervalController extends View {
+    /**
+     *
+     * @param {NumericInterval} interval
+     * @param {string} tag
+     */
+    constructor({ interval, tag = 'div' }) {
+        super();
+
+        this.el = document.createElement(tag);
+        this.addClass('ui-numeric-interval-controller');
+
+        const vMin = new NumberController({ classList: ['min'] });
+        const vMax = new NumberController({ classList: ['max'] });
+
+        this.addChild(vMin);
+
+        this.addChild(new LabelView('-', { classList: ['separator'], tag: 'span' }));
+
+        this.addChild(vMax);
+
+        let lockForward = false;
+
+        function syncForward() {
+
+            lockForward = true;
+
+            vMin.value.set(interval.min);
+            vMax.value.set(interval.max);
+
+            lockForward = false;
+        }
+
+        this.on.linked.add(syncForward);
+
+        this.bindSignal(interval.onChanged, syncForward);
+
+        this.bindSignal(vMin.value.onChanged, (v) => {
+            if (lockForward) {
+                return;
+            }
+
+            const max = max2(v, vMax.value.getValue());
+
+            interval.set(v, max)
+        });
+
+        this.bindSignal(vMax.value.onChanged, (v) => {
+            if (lockForward) {
+                return;
+            }
+
+            const min = min2(v, vMin.value.getValue());
+
+            interval.set(min, v)
+        });
+    }
+}

package/editor/view/ecs/components/gui/GUIElementController.js

@@ -0,0 +1,117 @@
+import View from "../../../../../src/view/View.js";
+import ObservedValue from "../../../../../src/core/model/ObservedValue.js";
+import DatGuiController from "../DatGuiController.js";
+import { GUIElementFlag } from "../../../../../src/engine/ecs/gui/GUIElement.js";
+
+export class GUIElementController extends View {
+    constructor() {
+        super();
+
+        this.el = document.createElement('div');
+
+        this.addClass('gui-element-controller');
+
+        this.model = new ObservedValue(null);
+
+        /**
+         *
+         * @param {GUIElement} el
+         */
+        const update = (el) => {
+            this.removeAllChildren();
+
+            const dat = new DatGuiController();
+
+            this.addChild(dat);
+
+            const proxy = {
+                klass: "",
+                group: "",
+                managed: el.getFlag(GUIElementFlag.Managed),
+                visible: el.visible.getValue()
+            };
+
+            if (typeof el.klass === "string") {
+                proxy.klass = el.klass;
+            }
+            if (typeof el.group === "string") {
+                proxy.group = el.group;
+            }
+
+            dat.addControl(proxy, 'klass').onChange(v => {
+                if (typeof v === "string" && v.trim() !== "") {
+                    el.klass = v;
+                } else {
+                    el.klass = null;
+                }
+            });
+
+            dat.addControl(proxy, 'group').onChange(v => {
+                if (typeof v === "string" && v.trim() !== "") {
+                    el.group = v;
+                } else {
+                    el.group = null;
+                }
+            });
+
+            dat.addControl(proxy, 'managed').onChange(v => {
+                el.writeFlag(GUIElementFlag.Managed, v);
+            });
+
+            dat.addControl(proxy, 'visible').onChange(v => {
+                el.visible.set(v);
+            });
+
+            const params = dat.addFolder('parameter');
+
+            function makeParam(paramName) {
+
+                params.add(el.parameters, paramName);
+                params.add({
+                    remove() {
+                        delete el.parameters[paramName];
+                        update(el);
+                    }
+                }, 'remove');
+
+            }
+
+            const pc = {
+                name: "",
+                type: "boolean",
+                create() {
+                    if (pc.name.trim() === "") {
+                        console.error("Parameter name is empty");
+                        return;
+                    }
+
+                    let v;
+
+                    if (pc.type === "boolean") {
+                        v = false;
+                    } else if (pc.type === "number") {
+                        v = 0;
+                    } else if (pc.type === "string") {
+                        v = "";
+                    }
+
+                    el.parameters[pc.name] = v;
+
+                    makeParam(pc.name);
+                }
+            };
+
+            params.add(pc, 'name');
+            params.add(pc, 'type', ["boolean", "number", "string"]);
+            params.add(pc, 'create');
+
+            for (let paramName in el.parameters) {
+                if (el.parameters.hasOwnProperty(paramName)) {
+                    makeParam(paramName);
+                }
+            }
+        };
+
+        this.model.onChanged.add(update);
+    }
+}

package/editor/view/ecs/components/items/ItemContainerController.js

@@ -0,0 +1,132 @@
+import { ItemController } from "./ItemController.js";
+import View from "../../../../../src/view/View.js";
+import ObservedValue from "../../../../../src/core/model/ObservedValue.js";
+import { NumericIntervalController } from "../common/NumericIntervalController.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+import { LineView } from "../common/LineView.js";
+import ListView from "../../../../../src/view/common/ListView.js";
+import ButtonView from "../../../../../src/view/elements/button/ButtonView.js";
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import Item from "../../../../../../model/game/ecs/component/Item.js";
+import { NumberController } from "../common/NumberController.js";
+
+/**
+ *
+ * @param {ItemContainer} itemContainer
+ * @param {ItemDescriptionDatabase} items
+ * @returns {View}
+ */
+function makeItemAdder(itemContainer, items) {
+
+    const vInput = new EmptyView({ classList: ['id'], tag: 'input' });
+
+    //item adder
+    return new LineView({
+        classList: [
+            'item-adder'
+        ],
+        elements: [
+            vInput,
+            new ButtonView({
+                action() {
+                    const id = vInput.el.value;
+                    const itemDescription = items.get(id);
+
+                    if (itemDescription === null) {
+
+                        console.error(`item '${id}' not found`);
+
+                        return;
+
+                    }
+
+                    const item = new Item();
+                    item.description = itemDescription;
+
+                    itemContainer.addItem(item);
+                },
+                name: 'Add',
+                classList: ['add']
+            })
+        ]
+    });
+}
+
+export class ItemContainerController extends View {
+    /**
+     *
+     * @param {Localization} localization
+     * @param {ItemDescriptionDatabase} itemDatabase
+     */
+    constructor({ localization, itemDatabase }) {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('ui-item-container-controller');
+
+        this.itemDatabase = itemDatabase;
+
+        this.model = new ObservedValue(null);
+
+        const self = this;
+
+
+        /**
+         *
+         * @param {ItemContainer} model
+         */
+        function setModel(model) {
+            self.removeAllChildren();
+
+            if (model !== null) {
+                self.addChild(new LineView({
+                    elements: [
+                        new LabelView('random', { tag: 'span' }),
+                        new NumericIntervalController({ interval: model.random, tag: 'span' })
+                    ],
+                    classList: ['random']
+                }));
+                const moneyController = new NumberController();
+
+                self.addChild(new LineView({
+                    elements: [
+                        new LabelView('money', { tag: 'span' }),
+                        moneyController
+                    ],
+                    classList: ['money']
+                }));
+
+                moneyController.value.onChanged.add((v) => model.money.set(v));
+                moneyController.bindSignal(model.money.onChanged, (v) => {
+                    moneyController.value.set(v);
+                });
+                moneyController.value.set(model.money.getValue());
+
+                self.addChild(new LabelView('Items:'));
+                const items = model.items;
+
+                const vList = new ListView(items, {
+                    classList: ['items'],
+                    elementFactory(item) {
+
+                        const itemController = new ItemController({
+                            item,
+                            localization,
+                            requestRemoval() {
+                                items.removeOneOf(item);
+                            }
+                        });
+
+                        return itemController;
+                    }
+                });
+
+                self.addChild(vList);
+
+                self.addChild(makeItemAdder(model, self.itemDatabase));
+            }
+        }
+
+        this.model.onChanged.add(setModel);
+    }
+}

package/editor/view/ecs/components/items/ItemContainerController.stories.js

@@ -0,0 +1,50 @@
+import { storiesOf } from "@storybook/html/dist/client/preview";
+import { Localization } from "../../../../../src/core/localization/Localization.js";
+import { ItemContainerController } from "./ItemContainerController.js";
+import ItemContainer from "../../../../../../model/game/ecs/component/item_container/ItemContainer.js";
+import Item from "../../../../../../model/game/ecs/component/Item.js";
+import { EngineHarness } from "../../../../../src/engine/EngineHarness.js";
+import { assert } from "../../../../../src/core/assert.js";
+
+const enginePromise = EngineHarness.getSingleton()
+    .initialize();
+
+enginePromise.then(engine => {
+
+    engine.gameView.el.style.visibility = 'hidden';
+});
+
+storiesOf("ItemContainerController", module)
+    .add('Basic', () => {
+        const localization = new Localization();
+
+        const icv = new ItemContainerController({ localization });
+
+        icv.link();
+
+        enginePromise.then(engine => {
+            icv.itemDatabase = engine.staticKnowledge.items;
+
+            const itemContainer = new ItemContainer();
+
+            itemContainer.random.set(1, 2);
+
+            const id = 'potion_of_major_knowledge';
+            const itemDescription = engine.staticKnowledge.items.get(id);
+
+            assert.notEqual(itemDescription, null, `item '${id}' not found`);
+
+            const item = new Item();
+
+            item.description = itemDescription;
+            item.count.set(3);
+
+
+            itemContainer.items.add(item);
+
+            icv.model.set(itemContainer);
+        });
+
+
+        return icv.el;
+    });

package/editor/view/ecs/components/items/ItemController.js

@@ -0,0 +1,52 @@
+import ImageView from "../../../../../src/view/elements/image/ImageView.js";
+import { LocalizedLabelView } from "../../../../../src/view/common/LocalizedLabelView.js";
+import ButtonView from "../../../../../src/view/elements/button/ButtonView.js";
+import View from "../../../../../src/view/View.js";
+import { NumberController } from "../common/NumberController.js";
+
+export class ItemController extends View {
+    /**
+     *
+     * @param {Item} item
+     * @param {Localization} localization
+     * @param {function} requestRemoval
+     */
+    constructor({ item, localization, requestRemoval }) {
+        super();
+
+        this.model = item;
+
+        this.el = document.createElement('div');
+        this.addClass('ui-item-controller');
+
+        /**
+         *
+         * @type {ItemDescription}
+         */
+        const itemDescription = item.description;
+
+        const iconView = new ImageView(itemDescription.icon);
+        iconView.addClass('icon');
+
+        this.addChild(iconView);
+
+        const vCount = new NumberController({ classList: ['count'] });
+
+        this.addChild(vCount);
+
+        this.addChild(new ButtonView({ action: requestRemoval, name: '', classList: ['remove'] }));
+
+        vCount.value.set(item.count.getValue());
+        this.bindSignal(item.count.onChanged, v => vCount.value.set(v));
+        this.bindSignal(vCount.value.onChanged, v => item.count.set(v));
+
+        const lName = new LocalizedLabelView({
+            id: itemDescription.getLocalizationKeyName(),
+            localization,
+            classList: ["name"]
+        });
+
+        this.addChild(lName);
+
+    }
+}