feat: positional usage

app/ecs/components/wielder.js

@@ -8,7 +8,7 @@ export default class Wielder extends Component {
         const {Inventory, Wielder} = ecs.get(this.entity);
         return Inventory.item(Wielder.activeSlot + 1);
       }
-      useActiveItem(state) {
+      useActiveItem([state, where]) {
         const entity = ecs.get(this.entity);
         const {Ticking} = entity;
         const activeItem = this.activeItem();
@@ -19,6 +19,7 @@ export default class Wielder extends Component {
             script = script.clone();
             script.context.ecs = ecs;
             script.context.item = activeItem;
+            script.context.where = where;
             script.context.wielder = entity;
             Ticking.add(script.ticker());
           }

app/react/components/ui.jsx

@@ -1,4 +1,4 @@
-import {memo, useEffect, useRef, useState} from 'react';
+import {memo, useCallback, useEffect, useRef, useState} from 'react';
 
 import {useClient, usePacket} from '@/react/context/client.js';
 import {useDebug} from '@/react/context/debug.js';
@@ -166,10 +166,6 @@ function Ui({disconnected}) {
           }
           break;
         }
-        case ' ': {
-          actionPayload = {type: 'use', value: KEY_MAP[type]};
-          break;
-        }
         case 'Tab': {
           if ('keyDown' === type) {
             if (isInventoryOpen) {
@@ -433,6 +429,30 @@ function Ui({disconnected}) {
       document.body.removeEventListener('contextmenu', onContextMenu);
     };
   }, []);
+  const computePosition = useCallback(({clientX, clientY}) => {
+    if (!gameRef.current || !mainEntity) {
+      return;
+    }
+    const {top, left, width} = gameRef.current.getBoundingClientRect();
+    const master = ecs.get(1);
+    if (!master) {
+      return;
+    }
+    const {Camera} = ecs.get(mainEntity);
+    const size = width / RESOLUTION.x;
+    const camera = {
+      x: ((Camera.x * scale) - (RESOLUTION.x / 2)),
+      y: ((Camera.y * scale) - (RESOLUTION.y / 2)),
+    }
+    return {
+      x: (((clientX - left) / size) + camera.x) / scale,
+      y: (((clientY - top) / size) + camera.y) / scale,
+    };
+  }, [
+    ecs,
+    mainEntity,
+    scale,
+  ]);
   return (
     <div
       className={styles.ui}
@@ -458,39 +478,19 @@ function Ui({disconnected}) {
             event.preventDefault();
             return;
           }
+          const where = computePosition(event);
           switch (event.button) {
             case 0:
               if (devtoolsIsOpen) {
-                if (!gameRef.current || !mainEntity) {
-                  return;
-                }
-                const {top, left, width} = gameRef.current.getBoundingClientRect();
-                const master = ecs.get(1);
-                if (!master) {
-                  return;
-                }
-                const {Camera} = ecs.get(mainEntity);
-                const size = width / RESOLUTION.x;
-                const client = {
-                  x: (event.clientX - left) / size,
-                  y: (event.clientY - top) / size,
-                };
-                const camera = {
-                  x: ((Camera.x * scale) - (RESOLUTION.x / 2)),
-                  y: ((Camera.y * scale) - (RESOLUTION.y / 2)),
-                }
                 devEventsChannel.invoke(
                   'click',
-                  {
+                  where,
-                    x: (client.x + camera.x) / scale,
-                    y: (client.y + camera.y) / scale,
-                  },
                 );
               }
               else {
                 client.send({
                   type: 'Action',
-                  payload: {type: 'use', value: 1},
+                  payload: {type: 'use', value: [1, where]},
                 });
               }
               break;
@@ -511,11 +511,12 @@ function Ui({disconnected}) {
             event.preventDefault();
             return;
           }
+          const where = computePosition(event);
           switch (event.button) {
             case 0:
               client.send({
                 type: 'Action',
-                payload: {type: 'use', value: 0},
+                payload: {type: 'use', value: [0, where]},
               });
               break;
             case 2: