@woosh/meep-engine 2.48.1 → 2.48.5

package/src/view/interaction/CommandButtonView.js

@@ -1,159 +1,22 @@
-import View from "../View.js";
-import dom from "../DOM.js";
-import { globalMetrics } from "../../engine/metrics/GlobalMetrics.js";
-import { MetricsCategory } from "../../engine/metrics/MetricsCategory.js";
-import EntityBuilder from "../../engine/ecs/EntityBuilder.js";
-import { SoundEmitter } from "../../engine/sound/ecs/emitter/SoundEmitter.js";
-import { Transform } from "../../engine/ecs/transform/Transform.js";
-import { SoundEmitterChannels } from "../../engine/sound/ecs/emitter/SoundEmitterSystem.js";
-import { SerializationMetadata } from "../../engine/ecs/components/SerializationMetadata.js";
-import { BehaviorComponent } from "../../engine/intelligence/behavior/ecs/BehaviorComponent.js";
-import { DelayBehavior } from "../../engine/intelligence/behavior/util/DelayBehavior.js";
-import { SequenceBehavior } from "../../engine/intelligence/behavior/composite/SequenceBehavior.js";
-import { DieBehavior } from "../../engine/intelligence/behavior/ecs/DieBehavior.js";
+import { createInterfaceCommandButton } from "./createInterfaceCommandButton.js";
 
-class CommandButtonView extends View {
-    /**
-     *
-     * @param {InterfaceCommand} prop
-     * @param {GUIEngine} gui
-     * @param {EntityComponentDataset} ecd
-     * @constructor
-     * @extends {View}
-     */
-    constructor(prop, gui, ecd) {
-        super();
+/**
+ *
+ * @param {InterfaceCommand} prop
+ * @param {GUIEngine} gui
+ * @param {EntityComponentDataset} ecd
+ * @extends {View}
+ */
+export function makeCommandButtonView(prop, gui, ecd) {
 
-        /**
-         *
-         * @type {InteractionCommand}
-         */
-        const command = prop.command;
 
+    const buttonView = createInterfaceCommandButton({
+        command: prop,
+        gui,
+        ecd
+    });
 
-        const dButton = dom('button').css(prop.style).addClass('command-button-view');
+    buttonView.addClass('command-button-view');
 
-        dButton.addClass('command-' + command.id);
-
-        this.el = dButton.el;
-
-
-        prop.tags.forEach(tag => {
-            this.addClass(`tag-${tag}`);
-        });
-
-        /**
-         *
-         * @param {SoundTrack} sound
-         */
-        function playSound(sound) {
-            if (sound === null) {
-                return;
-            }
-
-            const soundEmitter = new SoundEmitter();
-            soundEmitter.isPositioned = false;
-            soundEmitter.channel = SoundEmitterChannels.Effects;
-
-            const track = sound.clone();
-
-            track.startWhenReady = true;
-            track.channel = SoundEmitterChannels.Effects;
-
-            const eb = new EntityBuilder();
-
-            track.on.ended.add(() => eb.destroy());
-
-            soundEmitter.tracks.add(track);
-
-            eb
-                .add(soundEmitter)
-                .add(BehaviorComponent.fromOne(SequenceBehavior.from([
-                    DelayBehavior.fromJSON({ value: 5 }),
-                    new DieBehavior()
-                ])))
-                .add(new Transform())
-                .add(SerializationMetadata.Transient)
-                .build(ecd);
-
-
-            track.on.ended.add(console.log);
-        }
-
-        dButton.el.onclick = function () {
-            if (command.enabled.getValue()) {
-                command.action();
-
-                playSound(prop.actionSound);
-
-                globalMetrics.record("command-used", {
-                    category: MetricsCategory.Interaction,
-                    label: command.id
-                });
-            }
-        };
-
-        dButton.on('mouseenter', () => {
-
-            if (command.enabled.getValue()) {
-                //only play the sound if the button is enabled
-                playSound(prop.hoverSound);
-            }
-        });
-
-        dButton.createChild('div').addClass('background');
-        dButton.createChild('div').addClass('foreground');
-
-        function updateEnableStatus() {
-            const v = command.enabled.getValue();
-
-            dButton.disabled = !v;
-            dButton.setClass('disabled', !v);
-            dButton.setClass('enabled', v);
-        }
-
-        function featureClassName(f) {
-            return "feature-" + f;
-        }
-
-        function addCommandFeature(f) {
-            dButton.addClass(featureClassName(f));
-        }
-
-        function removeCommandFeature(f) {
-            dButton.removeClass(featureClassName(f));
-        }
-
-        if (command.features !== undefined) {
-            command.features.forEach(addCommandFeature);
-            command.features.on.added.add(addCommandFeature);
-            command.features.on.removed.add(removeCommandFeature);
-        }
-
-        this.bindSignal(command.enabled.onChanged, updateEnableStatus);
-        this.bindSignal(command.features.on.added, addCommandFeature);
-        this.bindSignal(command.features.on.removed, removeCommandFeature);
-
-        const tooltip = prop.tooltip;
-
-        function tooltipFactory() {
-            return gui.localization.getString(tooltip);
-        }
-
-        if (tooltip !== undefined) {
-            gui.viewTooltips.manage(this, tooltipFactory);
-        }
-
-        this.on.linked.add(() => {
-            command.features.forEach(addCommandFeature);
-            updateEnableStatus();
-        });
-
-        this.on.unlinked.add(() => {
-            command.features.forEach(removeCommandFeature);
-        });
-    }
+    return buttonView;
 }
-
-
-export default CommandButtonView;

package/src/view/interaction/createInterfaceCommandButton.js

@@ -0,0 +1,124 @@
+import { createSound } from "../../engine/EntityCreator.js";
+import { SoundEmitterChannels } from "../../engine/sound/ecs/emitter/SoundEmitterSystem.js";
+import ButtonView from "../elements/button/ButtonView.js";
+import { globalMetrics } from "../../engine/metrics/GlobalMetrics.js";
+import { MetricsCategory } from "../../engine/metrics/MetricsCategory.js";
+
+/**
+ *
+ * @param {InterfaceCommand} command
+ * @param {GUIEngine} gui
+ * @param {EntityComponentDataset} ecd
+ * @returns {View}
+ */
+export function createInterfaceCommandButton({
+                                                 command,
+                                                 gui,
+                                                 ecd
+                                             }) {
+
+    /**
+     *
+     * @type {InteractionCommand}
+     */
+    const interaction = command.command;
+
+    /**
+     *
+     * @param {SoundTrack} sound
+     */
+    function playSound(sound) {
+        if (sound === null) {
+            return;
+        }
+
+        createSound({
+            timeout: 5,
+            track: sound,
+            positioned: false,
+            channel: SoundEmitterChannels.Effects
+        }).build(ecd);
+
+        // track.on.ended.add(console.log);
+    }
+
+    const button = new ButtonView({
+        action() {
+            if (interaction.enabled.getValue()) {
+                interaction.action();
+
+                playSound(command.actionSound);
+
+                globalMetrics.record("command-used", {
+                    category: MetricsCategory.Interaction,
+                    label: interaction.id
+                });
+            }
+        },
+        classList: [
+            `command-${interaction.id}`
+        ],
+        css: command.style
+    });
+
+    button.el.addEventListener('mouseenter', () => {
+
+        if (interaction.enabled.getValue()) {
+            //only play the sound if the button is enabled
+            playSound(command.hoverSound);
+        }
+    });
+
+
+    function updateEnableStatus() {
+        const v = interaction.enabled.getValue();
+
+        button.enabled = v;
+    }
+
+    function featureClassName(f) {
+        return "feature-" + f;
+    }
+
+    function addCommandFeature(f) {
+        button.addClass(featureClassName(f));
+    }
+
+    function removeCommandFeature(f) {
+        button.removeClass(featureClassName(f));
+    }
+
+    if (interaction.features !== undefined) {
+        interaction.features.forEach(addCommandFeature);
+        interaction.features.on.added.add(addCommandFeature);
+        interaction.features.on.removed.add(removeCommandFeature);
+    }
+
+    button.bindSignal(interaction.enabled.onChanged, updateEnableStatus);
+    button.bindSignal(interaction.features.on.added, addCommandFeature);
+    button.bindSignal(interaction.features.on.removed, removeCommandFeature);
+
+    function tooltipFactory() {
+        return gui.localization.getString(command.tooltip);
+    }
+
+    if (command.tooltip !== undefined) {
+        gui.viewTooltips.manage(button, tooltipFactory);
+    }
+
+    button.on.linked.add(() => {
+        interaction.features.forEach(addCommandFeature);
+        updateEnableStatus();
+    });
+
+    button.on.unlinked.add(() => {
+        interaction.features.forEach(removeCommandFeature);
+    });
+
+
+    command.tags.forEach(tag => {
+        button.addClass(`tag-${tag}`);
+    });
+
+    return button;
+}