@woosh/meep-engine 2.46.28 → 2.46.30

package/editor/view/ecs/components/TerrainController.js

@@ -0,0 +1,225 @@
+import DatGuiController from "./DatGuiController.js";
+import Vector2 from "../../../../src/core/geom/Vector2.js";
+import View from "../../../../src/view/View.js";
+import { NativeListController } from "../../../../src/view/controller/controls/NativeListController.js";
+import { TerrainLayer } from "../../../../src/engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import CheckersTextureURI from "../../../../src/engine/graphics/texture/CheckersTextureURI.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+import convertSampler2D2Canvas from "../../../../src/engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import { CanvasView } from "../../../../src/view/elements/CanvasView.js";
+import { scaleSampler2D } from "../../../../src/engine/graphics/texture/sampler/scaleSampler2D.js";
+import { Sampler2D } from "../../../../src/engine/graphics/texture/sampler/Sampler2D.js";
+import Signal from "../../../../src/core/events/signal/Signal.js";
+import Vector2Control from "../../../../src/view/controller/controls/Vector2Control.js";
+import GroupView from "../../../../src/view/elements/Group.js";
+import LabelView from "../../../../src/view/common/LabelView.js";
+import ObservedValue from "../../../../src/core/model/ObservedValue.js";
+import { SplatMapOptimizer } from "../../../../src/engine/ecs/terrain/ecs/splat/SplatMapOptimizer.js";
+
+class LayersController extends View {
+    /**
+     *
+     * @param {Terrain} terrain
+     * @param {TerrainLayers} layers
+     * @param {AssetManager} assetManager
+     */
+    constructor({ terrain, layers, assetManager }) {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('ui-terrain-layers-controller-view');
+
+
+        function updateLayers() {
+
+            terrain.layers.buildTexture();
+            terrain.layers.writeAllLayersDataIntoTexture();
+
+            terrain.updateMaterial();
+        }
+
+        const updateBus = new Signal();
+
+        this.bindSignal(layers.layers.on.added, () => {
+            terrain.splat.addWeightLayer();
+        });
+
+        this.bindSignal(layers.layers.on.removed, (layer, index) => {
+            terrain.splat.removeWeightLayer(index);
+            updateLayers();
+        });
+
+        this.addChild(
+            new NativeListController({
+                model: layers.layers,
+                elementFactory() {
+                    const layer = new TerrainLayer();
+
+                    layer.textureDiffuseURL = CheckersTextureURI;
+                    layer.size.set(1, 1);
+
+                    layer.loadTextureData(assetManager)
+                        .then(() => {
+
+                            updateLayers();
+
+                            updateBus.send1(layer);
+                        });
+
+                    return layer;
+                },
+                /**
+                 *
+                 * @param {TerrainLayer} layer
+                 * @return {View}
+                 */
+                elementViewFactory(layer) {
+                    const v = new EmptyView();
+
+                    v.bindSignal(updateBus, (l) => {
+                        if (l === layer) {
+                            update();
+                        }
+                    });
+
+                    v.addClass('ui-terrain-layer-controller-view');
+
+
+                    const vCanvas = new CanvasView();
+                    vCanvas.size.set(64, 64);
+
+                    const t = Sampler2D.uint8(layer.diffuse.itemSize, 64, 64);
+
+
+                    function update() {
+
+                        scaleSampler2D(layer.diffuse, t);
+
+                        convertSampler2D2Canvas(t, 1, 0, vCanvas.el);
+                    }
+
+                    update();
+
+
+                    v.addChild(vCanvas);
+
+                    const vURL = new EmptyView({ classList: ['url'], tag: 'input' });
+                    const elValue = vURL.el;
+
+                    elValue.setAttribute('type', 'text');
+                    elValue.value = layer.textureDiffuseURL;
+
+
+                    elValue.addEventListener('input', () => {
+                        const v = elValue.value;
+
+                        layer.textureDiffuseURL = v;
+
+                        layer.loadTextureData(assetManager).then(() => {
+                            update();
+
+                            const index = layers.layers.indexOf(layer);
+
+                            layers.writeLayerDataIntoTexture(index);
+                        });
+                    });
+
+                    const vSize = new Vector2Control();
+                    vSize.model.set(layer.size);
+
+                    v.bindSignal(layer.size.onChanged, terrain.updateMaterial, terrain);
+
+                    const groupView = new GroupView();
+                    groupView.add(new LabelView('size'));
+                    groupView.add(vSize);
+
+                    v.addChild(groupView);
+
+                    v.addChild(vURL);
+
+                    return v;
+                }
+            })
+        );
+    }
+}
+
+export class TerrainController extends View {
+    /**
+     *
+     * @param {AssetManager} assetManager
+     */
+    constructor(assetManager) {
+        super();
+
+        this.el = document.createElement('div');
+
+        this.model = new ObservedValue(null);
+
+        const self = this;
+
+        /**
+         *
+         * @param {Terrain} model
+         */
+        function setModel(model) {
+
+            self.removeAllChildren();
+            const controller = new DatGuiController();
+            self.addChild(controller);
+
+            if (model !== null) {
+                controller.addAction(() => {
+                    model.__tiles.rebuild();
+                }, 'Rebuild');
+
+                controller.addAction(() => {
+
+                    SplatMapOptimizer.optimizeSynchronous(model.splat)
+
+                }, 'Optimize Textures');
+
+                controller.add(model, 'size', { step: 1 });
+                controller.add(model, 'resolution').step(1);
+                controller.add(model, 'gridScale').step(1).name('Gird Size');
+
+                const proxy = {
+                    heightResolution: new Vector2(model.samplerHeight.width, model.samplerHeight.height),
+                    weightResolution: new Vector2(model.splat.size.x, model.splat.size.y),
+                    layerResolution: new Vector2(model.layers.resolution.x, model.layers.resolution.y),
+                };
+
+                proxy.heightResolution.onChanged.add((x, y) => {
+                    model.samplerHeight.resize(x, y);
+                });
+
+                proxy.weightResolution.onChanged.add((x, y) => {
+                    model.splat.resize(x, y, model.splat.depth);
+                });
+
+                proxy.layerResolution.onChanged.add((x, y) => {
+                    model.layers.resolution.set(x, y);
+
+                    model.layers.buildTexture();
+                    model.layers.writeAllLayersDataIntoTexture();
+                });
+
+                controller.add(proxy, 'heightResolution', { step: 1 });
+                controller.add(proxy, 'weightResolution', { step: 1 });
+                controller.add(proxy, 'layerResolution', { step: 1 });
+
+                if (model.preview.url === null) {
+                    model.preview.url = '';
+                }
+
+                controller.add(model.preview, 'url').name('preview url');
+                controller.add(model.preview, 'offset');
+                controller.add(model.preview, 'scale');
+
+                self.addChild(new LayersController({ terrain: model, layers: model.layers, assetManager }));
+            }
+        }
+
+        this.model.onChanged.add(setModel);
+    }
+}

package/editor/view/ecs/components/TransformController.js

@@ -0,0 +1,103 @@
+/**
+ * Created by Alex on 14/01/2017.
+ */
+
+
+import GuiControl from '../../../../src/view/controller/controls/GuiControl.js';
+import Vector3Control from '../../../../src/view/controller/controls/Vector3Control.js';
+import Vector3 from '../../../../src/core/geom/Vector3.js';
+
+import LabelView from '../../../../src/view/common/LabelView.js';
+
+import { Euler as ThreeEuler } from 'three';
+
+class TransformController extends GuiControl {
+    constructor() {
+        super();
+
+        this.cPosition = new Vector3Control();
+        this.cScale = new Vector3Control();
+        this.cRotation = new Vector3Control();
+
+        this.rotationProxy = new Vector3(0, 0, 0);
+
+        this.cRotation.model.set(this.rotationProxy);
+
+        const lPosition = new LabelView('Position');
+        const lScale = new LabelView('Scale');
+        const lRotation = new LabelView('Rotation');
+
+        this.addChild(lPosition);
+        this.addChild(this.cPosition);
+
+        this.addChild(lScale);
+        this.addChild(this.cScale);
+
+        this.addChild(lRotation);
+        this.addChild(this.cRotation);
+
+        const self = this;
+
+        this.handlers = {
+            updateRotationFromModel: function () {
+                if (self.isLinked) {
+                    requestAnimationFrame(self.handlers.updateRotationFromModel);
+                } else {
+                    return;
+                }
+
+                const transform = self.model.get();
+                if (transform !== null) {
+                    const euler = new ThreeEuler();
+                    euler.setFromQuaternion(transform.rotation);
+
+                    //suppress double updates
+                    self.rotationProxy.onChanged.remove(self.handlers.updateRotationToModel);
+
+                    if (!Number.isNaN(euler.x) && !Number.isNaN(euler.y) && !Number.isNaN(euler.z)) {
+                        self.rotationProxy.copy(euler);
+                    }
+
+                    //reactivate updates
+                    self.rotationProxy.onChanged.add(self.handlers.updateRotationToModel);
+                }
+            },
+            updateRotationToModel: function () {
+                const transform = self.model.get();
+                if (transform !== null) {
+                    transform.rotation.__setFromEuler(self.rotationProxy.x, self.rotationProxy.y, self.rotationProxy.z, 'XYZ');
+                }
+            },
+            modelChanged: function (newModel, oldModel) {
+                if (newModel !== null) {
+                    self.cPosition.model.set(newModel.position);
+                    self.cScale.model.set(newModel.scale);
+                    self.handlers.updateRotationFromModel();
+                }
+                if (oldModel !== null) {
+                    //do nothing really
+                }
+            }
+        };
+
+
+        this.bindSignal(this.model.onChanged, this.handlers.modelChanged);
+        this.bindSignal(this.rotationProxy.onChanged, this.handlers.updateRotationToModel);
+    }
+
+    link() {
+        super.link();
+
+        if (this.model.getValue() !== null) {
+            this.handlers.modelChanged(this.model.getValue(), null);
+        }
+    }
+
+    unlink() {
+        super.unlink();
+
+    }
+}
+
+
+export default TransformController;

package/editor/view/ecs/components/UnitShopController.js

@@ -0,0 +1,112 @@
+import View from "../../../../src/view/View.js";
+import ObservedValue from "../../../../src/core/model/ObservedValue.js";
+import ListView from "../../../../src/view/common/ListView.js";
+import DatGuiController from "./DatGuiController.js";
+import { ShopGoodType, UnitShopElement } from "../../../../../model/game/ecs/component/shop/UnitShop.js";
+import ObservedString from "../../../../src/core/model/ObservedString.js";
+
+export class UnitShopController extends View {
+    constructor() {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('unit-shop-controller');
+
+        /**
+         *
+         * @type {ObservedValue<UnitShop>}
+         */
+        this.model = new ObservedValue(null);
+
+
+        this.model.onChanged.add(shop => {
+
+            this.removeAllChildren();
+
+            let lock = false;
+            const json = new ObservedString(makeJSON());
+
+            json.onChanged.add(v => {
+                if (lock) {
+                    return;
+                }
+                lock = true;
+
+                try {
+                    const j = JSON.parse(v);
+                    shop.fromJSON(j);
+                } catch (e) {
+                    console.error(e);
+                } finally {
+                    lock = false;
+                }
+            });
+
+            const list = new ListView(shop.elements, {
+                classList: ['elements'],
+                elementFactory(el) {
+                    const view = new DatGuiController();
+
+                    function update() {
+                        updateJSON();
+                    }
+
+                    view.addEnumRaw(el, 'goodType', ShopGoodType).onChange(update);
+                    view.addControl(el, 'good').onChange(update);
+
+                    view.add(el, 'supply').onChange(update);
+                    view.add(el, 'supplyLimit').onChange(update);
+                    view.add(el, 'cooldown').onChange(update);
+                    view.add(el, 'cooldownCounter').onChange(update);
+
+                    view.addControl({
+                        remove() {
+                            shop.elements.removeOneOf(el);
+                        }
+                    }, 'remove');
+
+
+                    return view;
+                }
+            });
+
+            function makeJSON() {
+                return JSON.stringify(shop.toJSON(), 3, 3);
+            }
+
+            function updateJSON() {
+                lock = true;
+                try {
+                    const str = makeJSON();
+                    json.set(str);
+                } catch (e) {
+                    console.error(e);
+                } finally {
+                    lock = false;
+                }
+            }
+
+            list.bindSignal(shop.elements.on.added, updateJSON);
+            list.bindSignal(shop.elements.on.removed, updateJSON);
+
+            this.addChild(list);
+
+            const dat = new DatGuiController();
+
+            dat.addControl({
+                add() {
+                    const el = new UnitShopElement();
+
+                    shop.elements.add(el);
+                }
+            }, "add").name("+new");
+
+            dat.add({
+                json
+            }, 'json');
+
+            this.addChild(dat);
+
+        });
+    }
+}

package/editor/view/ecs/components/army/ArmyController.js

@@ -0,0 +1,130 @@
+import View from "../../../../../src/view/View.js";
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import { LineView } from "../common/LineView.js";
+import ButtonView from "../../../../../src/view/elements/button/ButtonView.js";
+import Aura from "../../../../../../model/game/unit/aura/Aura.js";
+import ObservedValue from "../../../../../src/core/model/ObservedValue.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+import ListView from "../../../../../src/view/common/ListView.js";
+import { AuraController } from "../unit/AuraController.js";
+
+/**
+ *
+ * @param {Army} army
+ * @param {AfflictionDescriptionDatabase} afflictions
+ * @return {View}
+ */
+function makeAuraAdder(army, afflictions) {
+
+    const vInput = new EmptyView({ classList: ['id'], tag: 'input' });
+
+    //item adder
+    return new LineView({
+        classList: [
+            'aura-adder'
+        ],
+        elements: [
+            vInput,
+            new ButtonView({
+                action() {
+                    const id = vInput.el.value;
+                    const description = afflictions.get(id);
+
+                    if (description === null) {
+
+                        console.error(`affliction '${id}' not found`);
+
+                        return;
+
+                    }
+
+                    const aura = new Aura();
+
+                    aura.affliction = description;
+
+                    if (army.auras.find(a => a.equals(aura))) {
+                        //aura already exists, prevent duplicates
+                        console.warn(`Army already has aura '${description.id}', preventing duplication`);
+                        return;
+                    }
+
+                    army.auras.add(aura);
+                },
+                name: 'Add',
+                classList: ['add']
+            })
+        ]
+    });
+}
+
+export class CombatUnitController extends View {
+
+    /**
+     *
+     * @param {CombatUnit} unit
+     * @param {function} remove
+     * @param {StaticKnowledgeDatabase} database
+     */
+    constructor({ unit, remove, database }) {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('el-combat-unit-controller');
+
+
+    }
+}
+
+export class ArmyController extends View {
+    /**
+     *
+     * @param {Localization} localization
+     * @param {AfflictionDescriptionDatabase} afflictionDatabase
+     */
+    constructor({ localization, afflictionDatabase }) {
+        super();
+
+        this.el = document.createElement('div');
+        this.addClass('ui-army-controller');
+
+        this.model = new ObservedValue(null);
+
+        const self = this;
+
+        /**
+         *
+         * @param {Army} model
+         */
+        function setModel(model) {
+            self.removeAllChildren();
+
+            if (model === null) {
+                return;
+            }
+
+            self.addChild(new LabelView('Auras:'));
+
+            const vList = new ListView(model.auras, {
+                classList: ['auras'],
+                elementFactory(aura) {
+
+                    const elementController = new AuraController({
+                        aura,
+                        localization,
+                        requestRemoval() {
+                            model.auras.removeOneOf(aura);
+                        }
+                    });
+
+                    return elementController;
+                }
+            });
+
+            self.addChild(vList);
+
+            self.addChild(makeAuraAdder(model, afflictionDatabase));
+        }
+
+        this.model.onChanged.add(setModel);
+    }
+}

package/editor/view/ecs/components/color/GaugeView.js

@@ -0,0 +1,107 @@
+import GuiControl from "../../../../../src/view/controller/controls/GuiControl.js";
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+import { PointerDevice } from "../../../../../src/engine/input/devices/PointerDevice.js";
+import { AutoCanvasView } from "../common/AutoCanvasView.js";
+import { clamp01 } from "../../../../../src/core/math/clamp01.js";
+
+export class GaugeView extends GuiControl {
+    /**
+     *
+     * @param {string} name
+     * @param {function} draw
+     * @param {string[]} classList
+     * @constructor
+     */
+    constructor({ name, draw, classList = [] }) {
+        super();
+
+        this.el.classList.add('gauge-view');
+        classList.forEach(c => this.addClass(c));
+
+        const self = this;
+
+        const vMark = new EmptyView();
+        vMark.el.classList.add('mark-view');
+
+        const c = new AutoCanvasView();
+
+        c.draw = function (ctx, width, height) {
+
+            const model = self.model.getValue();
+
+            const value = model !== null ? model.x : 0;
+
+            draw(ctx, value, self, width, height);
+        };
+
+        const vGauge = new EmptyView({ classList: ['gauge'] });
+        vGauge.addChild(c);
+        vGauge.addChild(vMark);
+
+        const vName = new LabelView(name);
+        this.addChild(vName);
+        this.addChild(vGauge);
+
+        function updateMark() {
+            const model = self.model.getValue();
+
+            const value = model !== null ? model.x : 0;
+
+            vMark.el.style.left = `${value * 100}%`;
+        }
+
+        function update() {
+            c.render();
+
+            updateMark();
+        }
+
+        this.render = update;
+
+        this.model.onChanged.add(function (color, oldColor) {
+            update();
+
+            if (color !== null) {
+                color.onChanged.add(update);
+            }
+
+            if (oldColor !== null) {
+                oldColor.onChanged.remove(update);
+            }
+
+        });
+
+
+        function setValue(v) {
+            const model = self.model.getValue();
+
+            if (model === null) {
+                return;
+            }
+
+            model.set(clamp01(v));
+        }
+
+        function setValueFromMouseEvent(event) {
+
+            const offsetX = event.offsetX;
+
+            setValue(offsetX / c.el.width);
+
+            update();
+        }
+
+        const pD = new PointerDevice(c.el);
+
+        pD.start();
+
+        pD.on.down.add(function (position, event) {
+            setValueFromMouseEvent(event);
+        });
+
+        pD.on.drag.add(function (position, origin, previousPosition, mouseEvent) {
+            setValueFromMouseEvent(mouseEvent);
+        });
+    }
+}