feat: add input system

packages/client/src/layers/network/createNetworkLayer.ts

@@ -34,8 +34,8 @@ export async function createNetworkLayer(config: GameConfig) {
   const actions = createActionSystem(world, txReduced$);
 
   // --- API ------------------------------------------------------------------------
-  function move(entity: number, coord: Coord) {
-    systems["system.Move"].executeTyped(BigNumber.from(entity), coord);
+  function move(coord: Coord) {
+    systems["system.Move"].executeTyped(BigNumber.from(network.connectedAddress.get()), coord);
   }
 
   // --- CONTEXT --------------------------------------------------------------------

packages/client/src/layers/phaser/createPhaserLayer.ts

@@ -2,7 +2,7 @@ import { namespaceWorld } from "@latticexyz/recs";
 import { createPhaserEngine } from "@latticexyz/phaserx";
 import { phaserConfig } from "./config";
 import { NetworkLayer } from "../network";
-import { createPositionSystem } from "./systems";
+import { createPositionSystem, createInputSystem } from "./systems";
 
 /**
  * The Phaser layer is responsible for rendering game objects to the screen.
@@ -29,6 +29,7 @@ export async function createPhaserLayer(network: NetworkLayer) {
 
   // --- SYSTEMS --------------------------------------------------------------------
   createPositionSystem(network, context);
+  createInputSystem(network, context);
 
   return context;
 }

packages/client/src/layers/phaser/systems/createInputSystem.ts

@@ -0,0 +1,25 @@
+import { pixelCoordToTileCoord } from "@latticexyz/phaserx";
+import { NetworkLayer } from "../../network";
+import { PhaserLayer } from "../types";
+
+export function createInputSystem(network: NetworkLayer, phaser: PhaserLayer) {
+  const {
+    world,
+    scenes: {
+      Main: {
+        input,
+        maps: {
+          Main: { tileWidth, tileHeight },
+        },
+      },
+    },
+  } = phaser;
+
+  const clickSub = input.click$.subscribe((p) => {
+    const pointer = p as Phaser.Input.Pointer;
+    const tilePos = pixelCoordToTileCoord({ x: pointer.worldX, y: pointer.worldY }, tileWidth, tileHeight);
+    network.api.move(tilePos);
+  });
+
+  world.registerDisposer(() => clickSub?.unsubscribe());
+}

packages/client/src/layers/phaser/systems/index.ts

@@ -1 +1,2 @@
 export { createPositionSystem } from "./createPositionSystem";
+export { createInputSystem } from "./createInputSystem";