beginnings of a UI

packages/ecs-browser/src/StyledComponents.ts

@@ -68,18 +68,11 @@ export const EntityEditorContainer = styled.div`
 `;
 
 export const BrowserContainer = styled.div`
-  grid-column: 3;
-  grid-row-start: 1;
-  grid-row-end: 4;
-  pointer-events: all;
-  max-height: calc(100vh - 100px);
   overflow: auto;
-
-  width: 300px;
-  justify-self: end;
-
   background-color: rgba(27, 28, 32, 1);
   color: #8c91a0;
+  height: 100%;
+  pointer-events: all;
 `;
 
 export const QueryBuilderForm = styled.form`

packages/phaserx/src/createCamera.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Gesture } from "@use-gesture/vanilla";
 import { BehaviorSubject, map, sampleTime, scan, Subject, throttleTime } from "rxjs";
-import { Camera, CameraConfig, GestureState, ObjectPool } from "./types";
+import { tileCoordToPixelCoord } from "./utils";
+import { Camera, CameraConfig, Coord, GestureState, ObjectPool } from "./types";
 
 export function createCamera(phaserCamera: Phaser.Cameras.Scene2D.Camera, options: CameraConfig): Camera {
   const phaserGame = document.getElementById(options.phaserSelector);
@@ -61,6 +62,12 @@ export function createCamera(phaserCamera: Phaser.Cameras.Scene2D.Camera, option
     objectPool.ignoreCamera(phaserCamera.id, ignore);
   }
 
+  function centerCameraOnCoord(coord: Coord, tileWidth: number, tileHeight: number) {
+    const worldCoordinate = tileCoordToPixelCoord(coord, tileWidth, tileHeight);
+    phaserCamera.centerOn(worldCoordinate.x, worldCoordinate.y);
+    requestAnimationFrame(() => worldView$.next(phaserCamera.worldView));
+  }
+
   return {
     phaserCamera,
     worldView$,
@@ -71,5 +78,6 @@ export function createCamera(phaserCamera: Phaser.Cameras.Scene2D.Camera, option
       wheelSub.unsubscribe();
       gesture.destroy();
     },
+    centerCameraOnCoord,
   };
 }

packages/phaserx/src/index.ts

@@ -17,7 +17,7 @@ export { createCamera } from "./createCamera";
 export { createChunks } from "./createChunks";
 export { createDebugger } from "./createDebugger";
 export { createCulling } from "./createCulling";
-export type { Asset } from "./types";
+export type { Asset, Camera } from "./types";
 export { AssetType } from "./constants";
 export {
   defineAssetsConfig,

packages/phaserx/src/types.ts

@@ -16,6 +16,7 @@ export type Camera = {
   zoom$: Observable<number>;
   ignore: (objectPool: ObjectPool, ignore: boolean) => void;
   dispose: () => void;
+  centerCameraOnCoord: (coord: Coord, tileWidth: number, tileHeight: number) => void;
 };
 
 export type GameObjectTypes = typeof GameObjectClasses;

packages/ri/client/src/layers/Local/createLocalLayer.ts

@@ -17,7 +17,6 @@ import {
   createPathSystem,
   createSyncSystem,
   createPositionSystem,
-  createImpSystem,
   createSelectionSystem,
 } from "./systems";
 import { DEFAULT_MOVE_SPEED } from "./constants";
@@ -89,8 +88,7 @@ export async function createLocalLayer(headless: HeadlessLayer) {
   };
 
   // Systems
-  createSelectionSystem(layer); // Enable selection system
-  createImpSystem(layer); // Enable imps
+  createSelectionSystem(layer);
   createSyncSystem(layer);
   createPositionSystem(layer);
   createDestinationSystem(layer);

packages/ri/client/src/layers/Local/systems/index.ts

@@ -1,5 +1,4 @@
 export { createSyncSystem } from "./SyncSystem";
-export { createImpSystem } from "./ImpSystem";
 export { createPathSystem } from "./PathSystem";
 export { createDestinationSystem } from "./DestinationSystem";
 export { createPositionSystem } from "./PositionSystem";

packages/ri/client/src/layers/Renderer/Phaser/createPhaserLayer.ts

@@ -27,6 +27,7 @@ import { curry } from "lodash";
 import { WorldCoord } from "@latticexyz/phaserx/src/types";
 import { createDrawHighlightCoordSystem } from "./systems/DrawHighlightCoordSystem";
 import { createDrawPotentialPathSystem } from "./systems/DrawPotentialPathSystem/createDrawPotentialPathSystem";
+import { createPlayerSpawnSystem } from "./systems/PlayerSpawnSystem";
 
 /**
  * The Phaser layer extends the Local layer.
@@ -90,12 +91,12 @@ export async function createPhaserLayer(local: LocalLayer) {
   createOutlineSystem(layer);
   createHueTintSystem(layer);
   createSelectionSystem(layer);
-  // createSelectionOutlineSystem(layer);
   createDrawDevHighlightSystem(layer);
   createInputSystem(layer);
   createDrawStaminaSystem(layer);
   createDrawHighlightCoordSystem(layer);
   createDrawPotentialPathSystem(layer);
+  createPlayerSpawnSystem(layer);
 
   return layer;
 }

packages/ri/client/src/layers/Renderer/Phaser/systems/InputSystem/createInputSystem.ts

@@ -11,7 +11,7 @@ export function createInputSystem(layer: PhaserLayer) {
     api: { highlightCoord },
     parentLayers: {
       headless: {
-        api: { moveEntity, joinGame },
+        api: { moveEntity },
       },
       local: {
         components: { Selected },
@@ -53,13 +53,4 @@ export function createInputSystem(layer: PhaserLayer) {
     .subscribe((coord) => {
       highlightCoord(coord);
     });
-
-  input.click$
-    .pipe(
-      map((pointer) => ({ x: pointer.worldX, y: pointer.worldY })), // Map pointer to pointer pixel cood
-      map((pixel) => pixelToWorldCoord(maps.Main, pixel)) // Map pixel coord to tile coord
-    )
-    .subscribe((coord) => {
-      joinGame(coord);
-    });
 }

packages/ri/client/src/layers/Renderer/Phaser/systems/PlayerSpawnSystem/createPlayerSpawnSystem.ts

@@ -0,0 +1,41 @@
+import { defineEnterSystem, getComponentValue, Has } from "@latticexyz/recs";
+import { getPlayerEntity } from "@latticexyz/std-client";
+import { PhaserLayer } from "../../types";
+
+export function createPlayerSpawnSystem(layer: PhaserLayer) {
+  const {
+    world,
+    parentLayers: {
+      network: {
+        personaId,
+        components: { OwnedBy, Persona, Position },
+      },
+    },
+    scenes: {
+      Main: {
+        camera,
+        maps: {
+          Main: { tileWidth, tileHeight },
+        },
+      },
+    },
+  } = layer;
+
+  let alreadyZoomed = false;
+
+  defineEnterSystem(world, [Has(OwnedBy), Has(Position)], ({ entity }) => {
+    if (alreadyZoomed) return;
+    if (!personaId) return;
+
+    const playerEntity = getPlayerEntity(Persona, personaId);
+    const ownedBy = getComponentValue(OwnedBy, entity)?.value;
+
+    if (ownedBy === world.entities[playerEntity]) {
+      const position = getComponentValue(Position, entity);
+      if (!position) return;
+
+      camera.centerCameraOnCoord(position, tileWidth, tileHeight);
+      alreadyZoomed = true;
+    }
+  });
+}

packages/ri/client/src/layers/Renderer/Phaser/systems/PlayerSpawnSystem/index.ts

@@ -0,0 +1 @@
+export * from "./createPlayerSpawnSystem";

packages/ri/client/src/layers/Renderer/Phaser/systems/SyncSystem/createSyncSystem.ts

@@ -1,8 +1,9 @@
-import { HasValue, Has, defineSyncSystem } from "@latticexyz/recs";
+import { HasValue, Has, defineSyncSystem, getComponentValue } from "@latticexyz/recs";
 import { PhaserLayer } from "../../types";
 import { LocalEntityTypes } from "../../../../Local/types";
 import { EntityTypes } from "../../../../Network/types";
 import { Animations, Assets } from "../../constants";
+import { getPersonaColor } from "@latticexyz/std-client";
 
 /**
  * The Sync system handles adding Phaser layer components to entites based on components they have on parent layers
@@ -12,7 +13,7 @@ export function createSyncSystem(layer: PhaserLayer) {
     world,
     parentLayers: {
       network: {
-        components: { EntityType },
+        components: { EntityType, Persona, OwnedBy },
       },
       local: {
         components: { LocalEntityType, Selected },
@@ -50,9 +51,23 @@ export function createSyncSystem(layer: PhaserLayer) {
 
   defineSyncSystem(
     world,
-    [HasValue(LocalEntityType, { entityType: LocalEntityTypes.Hero })],
+    [Has(OwnedBy)],
     () => HueTint,
-    () => ({ value: 0xff0000 })
+    (entity) => {
+      console.log("hue tint sync");
+
+      const ownedBy = getComponentValue(OwnedBy, entity)?.value;
+      if (!ownedBy) return { value: 0xff0000 };
+
+      const ownedByIndex = world.entityToIndex.get(ownedBy);
+      if (!ownedByIndex) return { value: 0xff0000 };
+
+      const ownerPersonaId = getComponentValue(Persona, ownedByIndex)?.value;
+      if (!ownerPersonaId) return { value: 0xff0000 };
+
+      const personaColor = getPersonaColor(ownerPersonaId);
+      return { value: personaColor };
+    }
   );
 
   defineSyncSystem(

packages/ri/client/src/layers/Renderer/React/components/ComponentBrowser.tsx

@@ -6,6 +6,12 @@ import { Component, Entity, hasComponent } from "@latticexyz/recs";
 export function registerComponentBrowser() {
   registerUIComponent(
     "ComponentBrowser",
+    {
+      rowStart: 1,
+      rowEnd: 5,
+      colStart: 6,
+      colEnd: 6
+    },
     (layers) => {
       const numEntities = layers.network.world.entities.length;
       if (numEntities > 1000) return numEntities;

packages/ri/client/src/layers/Renderer/React/components/JoinGame.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { registerUIComponent } from "../engine";
+import { getPersonaColor, getPlayerEntity } from "@latticexyz/std-client";
+import { getComponentValue } from "@latticexyz/recs";
+import { BigNumber } from "ethers";
+
+export function registerJoinGame() {
+  registerUIComponent(
+    "JoinGameWindow",
+    {
+      colStart: 3,
+      colEnd: 4,
+      rowStart: 1,
+      rowEnd: 1,
+    },
+    (layers) => {
+      const {
+        headless: {
+          api: { joinGame },
+        },
+        network: {
+          personaId,
+          components: { Persona },
+        },
+        local: {
+          singletonEntity,
+          components: { Selection },
+        },
+      } = layers;
+      const playerEntity = personaId ? getPlayerEntity(Persona, personaId) : undefined;
+      const selection = getComponentValue(Selection, singletonEntity);
+
+      return {
+        joinGame,
+        personaId,
+        playerEntity,
+        selection,
+      };
+    },
+    ({ joinGame, personaId, playerEntity, selection }) => {
+      const joined = !!playerEntity;
+      const playerColor = getPersonaColor(BigNumber.from(personaId).toHexString());
+
+      return (
+        <div>
+          <h1>Join Game</h1>
+          <p style={{ color: playerColor.toString(16) }} >PersonaId: {personaId}</p>
+          <p>Joined? {joined ? "yes" : "no"}</p>
+          {!joined && (
+            <button
+              disabled={!selection}
+              onClick={() => {
+                if (!selection) return;
+                joinGame({ x: selection.x, y: selection.y });
+              }}
+            >
+              Join at Position ({selection?.x},{selection?.y})
+            </button>
+          )}
+        </div>
+      );
+    }
+  );
+}