feat: op run place to board

packages/client/src/mud/createSystemCalls.ts

@@ -5,6 +5,7 @@ import {
   opRunBuyHero,
   opRunChangeHeroCoordinate,
   opRunPlaceBackInventory,
+  opRunPlaceToBoard,
 } from "@/opRender";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
@@ -106,9 +107,23 @@ export function createSystemCalls(
     await waitForTransaction(tx);
   };
 
-  const placeToBoard = async (index: bigint, x: number, y: number) => {
-    const tx = await worldContract.write.placeToBoard([index, x, y]);
-    await waitForTransaction(tx);
+  const placeToBoard = async (index: number, x: number, y: number) => {
+    const { heroOverrideId, playerOverrideId } = opRunPlaceToBoard(
+      setupNetworkResult,
+      clientComponents,
+      index,
+      x,
+      y
+    );
+    try {
+      const tx = await worldContract.write.placeToBoard([BigInt(index), x, y]);
+      await waitForTransaction(tx);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      Hero.removeOverride(heroOverrideId);
+      Player.removeOverride(playerOverrideId);
+    }
   };
 
   const changeHeroCoordinate = async (index: number, x: number, y: number) => {

packages/client/src/opRender/changeHeroCoordinate.ts

@@ -32,6 +32,6 @@ export function opRunChangeHeroCoordinate(
   return id;
 }
 
-function encodeXY(x: number, y: number) {
+export function encodeXY(x: number, y: number) {
   return (x << 8) + y;
 }

packages/client/src/opRender/index.ts

@@ -2,3 +2,4 @@ export * from "./buyHero";
 export * from "./sellHero";
 export * from "./changeHeroCoordinate";
 export * from "./placeBackInventory";
+export * from "./placeToBoard";

packages/client/src/opRender/placeToBoard.ts

@@ -0,0 +1,73 @@
+import { ClientComponents } from "@/mud/createClientComponents";
+import { SetupNetworkResult } from "@/mud/setupNetwork";
+import { Entity, getComponentValueStrict } from "@latticexyz/recs";
+import { encodeXY } from "./changeHeroCoordinate";
+import { Hex, hexToNumber, numberToHex } from "viem";
+import { uuid } from "@latticexyz/utils";
+import { encodeEntity } from "@latticexyz/store-sync/recs";
+import { pushToArray, removeElementByIndex } from "./utils";
+
+export function opRunPlaceToBoard(
+  { playerEntity }: SetupNetworkResult,
+  { Player, Hero }: ClientComponents,
+  heroIndex: number,
+  x: number,
+  y: number
+): { heroOverrideId: string; playerOverrideId: string } {
+  const playerData = getComponentValueStrict(Player, playerEntity);
+  // ensure this place is not occupied
+  if (
+    playerData.heroes
+      .map((h) => {
+        const heroValue = getComponentValueStrict(Hero, h as Entity);
+        return encodeXY(heroValue.x, heroValue.y);
+      })
+      .indexOf(encodeXY(x, y)) !== -1
+  ) {
+    throw Error("this coordination is occupied");
+  }
+
+  // calculate hero entity
+  const heroEntity = encodeEntity(
+    { id: "bytes32" },
+    {
+      id: numberToHex(
+        (hexToNumber(playerEntity as Hex) << 32) + playerData.heroOrderIdx + 1,
+        { size: 32 }
+      ),
+    }
+  );
+
+  // get hero creatureId
+  const creatureId = playerData.inventory[heroIndex];
+
+  // pop hero from inventory
+  playerData.inventory = removeElementByIndex(playerData.inventory, heroIndex);
+  // add to heroes array
+  playerData.heroes = pushToArray(playerData.heroes, heroEntity.toString());
+
+  // override hero
+  const heroOverrideId = uuid();
+
+  Hero.addOverride(heroOverrideId, {
+    entity: heroEntity,
+    value: {
+      creatureId: creatureId,
+      x: x,
+      y: y,
+    },
+  });
+
+  // override player
+  const playerOverrideId = uuid();
+  Player.addOverride(playerOverrideId, {
+    entity: playerEntity,
+    value: {
+      inventory: playerData.inventory,
+      heroes: playerData.heroes,
+      heroOrderIdx: playerData.heroOrderIdx + 1,
+    },
+  });
+
+  return { heroOverrideId, playerOverrideId };
+}

packages/client/src/opRender/utils.ts

@@ -22,6 +22,19 @@ export function popArrayByIndex<T>(array: T[], index: number): T[] {
   return array;
 }
 
+export function removeElementByIndex(array: number[], index: number): number[] {
+  return array.map((v, i) => {
+    if (i === index) {
+      return 0;
+    }
+    return v;
+  });
+}
+
+export function pushToArray<T>(array: T[], value: T): T[] {
+  return [...array, value];
+}
+
 export function popArrayByIndexes<T>(array: T[], indexes: number[]): T[] {
   const lastValues = [];