feat: sound

app/ecs-components/sound.js

@@ -0,0 +1,29 @@
+import Schema from '@/ecs/schema.js';
+
+export default function(Component) {
+  return class Sound extends Component {
+    mergeDiff(original, update) {
+      const merged = {};
+      if (update.play) {
+        merged.play = [
+          ...(original.play ?? []),
+          ...update.play,
+        ];
+      }
+      return merged;
+    }
+    instanceFromSchema() {
+      const Component = this;
+      const Instance = super.instanceFromSchema();
+      return class SoundInstance extends Instance {
+        play(source) {
+          Component.markChange(this.entity, 'play', [source]);
+        }
+      };
+    }
+    static schema = new Schema({
+      type: 'object',
+      properties: {},
+    });
+  }
+}

app/engine.js

@@ -188,6 +188,7 @@ export default class Engine {
       Position: {x: 368, y: 368},
       VisibleAabb: {},
       Speed: {speed: 100},
+      Sound: {},
       Sprite: {
         anchor: {x: 0.5, y: 0.8},
         animation: 'moving:down',

app/react-components/ui.jsx

@@ -159,6 +159,11 @@ export default function Ui({disconnected}) {
     for (const id in payload.ecs) {
       const entity = ecs.get(id);
       const update = payload.ecs[id];
+      if (update.Sound?.play) {
+        for (const sound of update.Sound.play) {
+          (new Audio(sound)).play();
+        }
+      }
       if (update?.MainEntity) {
         setMainEntity(localMainEntity = id);
       }

public/assets/hoe/start.js

@@ -1,4 +1,4 @@
-const {Controlled, Position, Sprite, Wielder} = wielder
+const {Controlled, Position, Sound, Sprite, Wielder} = wielder
 const {TileLayers} = ecs.get(1)
 const layer = TileLayers.layer(0)
 const projected = Wielder.project(Position.tile, item.tool.projection)
@@ -7,6 +7,7 @@ Controlled.locked = 1;
 const [, direction] = Sprite.animation.split(':');
 
 for (let i = 0; i < 2; ++i) {
+  Sound.play('/assets/hoe/dig.wav');
   Sprite.animation = ['moving', direction].join(':');
   await wait(300)
   Sprite.animation = ['idle', direction].join(':');