create-mud 2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e → 2.2.17-ffefc8f000769d5ca625dd19290007a853a21788

package/{dist/templates/vanilla/packages/contracts/src/codegen/index.sol → templates/react/packages/contracts/src/codegen/common.sol}

@@ -3,4 +3,9 @@ pragma solidity >=0.8.24;
 
 /* Autogenerated file. Do not edit manually. */
 
-import { Counter } from "./tables/Counter.sol";
+enum Direction {
+  North,
+  East,
+  South,
+  West
+}

package/{dist/templates → templates}/react/packages/contracts/test/MoveTest.t.sol

@@ -3,7 +3,6 @@ pragma solidity >=0.8.24;
 
 import "forge-std/Test.sol";
 import { MudTest } from "@latticexyz/world/test/MudTest.t.sol";
-import { getKeysWithValue } from "@latticexyz/world-modules/src/modules/keyswithvalue/getKeysWithValue.sol";
 
 import { IWorld } from "../src/codegen/world/IWorld.sol";
 import { Position, PositionData } from "../src/codegen/tables/Position.sol";
@@ -20,7 +19,6 @@ contract MoveTest is MudTest {
 
     IWorld(worldAddress).app__move(Direction.North);
     position = Position.get(alice);
-
     assertEq(position.x, 0);
     assertEq(position.y, 1);
   }

package/templates/react/packages/contracts/test/WorldTest.t.sol

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+
+import "forge-std/Test.sol";
+import { MudTest } from "@latticexyz/world/test/MudTest.t.sol";
+
+contract WorldTest is MudTest {
+  function testWorldDeployed() public {
+    uint256 codeSize;
+    address addr = worldAddress;
+    assembly {
+      codeSize := extcodesize(addr)
+    }
+    assertTrue(codeSize > 0);
+  }
+}

package/templates/react/packages/contracts/worlds.json

@@ -0,0 +1,5 @@
+{
+  "31337": {
+    "address": "0xfdf868ea710ffd8cd33b829c5aff79edd15ecd5f"
+  }
+}

package/{dist/templates → templates}/react-ecs/packages/client/package.json

@@ -6,32 +6,39 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "wait-port localhost:8545 && vite",
+    "dev": "vite",
     "preview": "vite preview",
     "test": "tsc --noEmit"
   },
   "dependencies": {
     "@latticexyz/common": "{{mud-version}}",
-    "@latticexyz/dev-tools": "{{mud-version}}",
+    "@latticexyz/entrykit": "{{mud-version}}",
+    "@latticexyz/explorer": "{{mud-version}}",
     "@latticexyz/react": "{{mud-version}}",
     "@latticexyz/recs": "{{mud-version}}",
     "@latticexyz/schema-type": "{{mud-version}}",
     "@latticexyz/store-sync": "{{mud-version}}",
     "@latticexyz/utils": "{{mud-version}}",
     "@latticexyz/world": "{{mud-version}}",
+    "@tanstack/react-query": "^5.63.0",
     "contracts": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rxjs": "7.5.5",
-    "viem": "2.21.19"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "5.0.0",
+    "tailwind-merge": "^2.6.0",
+    "viem": "2.21.19",
+    "wagmi": "2.12.11"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "vite": "^4.2.1",
-    "wait-port": "^1.0.4"
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.7",
+    "vite-plugin-mud": "{{mud-version}}"
   }
 }

package/templates/react-ecs/packages/client/src/App.tsx

@@ -0,0 +1,74 @@
+import { AccountButton } from "@latticexyz/entrykit/internal";
+import { Direction, Entity } from "./common";
+import mudConfig from "contracts/mud.config";
+import { useMemo } from "react";
+import { GameMap } from "./game/GameMap";
+import { useWorldContract } from "./mud/useWorldContract";
+import { Synced } from "./mud/Synced";
+import { useSync } from "@latticexyz/store-sync/react";
+import { components } from "./mud/recs";
+import { useEntityQuery } from "@latticexyz/react";
+import { Has, getComponentValueStrict } from "@latticexyz/recs";
+import { Address } from "viem";
+
+export function App() {
+  const playerEntities = useEntityQuery([Has(components.Owner), Has(components.Position)]);
+  const players = useMemo(
+    () =>
+      playerEntities.map((entity) => {
+        const owner = getComponentValueStrict(components.Owner, entity);
+        const position = getComponentValueStrict(components.Position, entity);
+        return {
+          entity: entity as Entity,
+          owner: owner.owner as Address,
+          x: position.x,
+          y: position.y,
+        };
+      }),
+    [playerEntities],
+  );
+
+  const sync = useSync();
+  const worldContract = useWorldContract();
+
+  const onMove = useMemo(
+    () =>
+      sync.data && worldContract
+        ? async (entity: Entity, direction: Direction) => {
+            const tx = await worldContract.write.app__move([entity, mudConfig.enums.Direction.indexOf(direction)]);
+            await sync.data.waitForTransaction(tx);
+          }
+        : undefined,
+    [sync.data, worldContract],
+  );
+
+  const onSpawn = useMemo(
+    () =>
+      sync.data && worldContract
+        ? async () => {
+            const tx = await worldContract.write.app__spawn();
+            await sync.data.waitForTransaction(tx);
+          }
+        : undefined,
+    [sync.data, worldContract],
+  );
+
+  return (
+    <>
+      <div className="fixed inset-0 grid place-items-center p-4">
+        <Synced
+          fallback={({ message, percentage }) => (
+            <div className="tabular-nums">
+              {message} ({percentage.toFixed(1)}%)…
+            </div>
+          )}
+        >
+          <GameMap players={players} onMove={onMove} onSpawn={onSpawn} />
+        </Synced>
+      </div>
+      <div className="fixed top-2 right-2">
+        <AccountButton />
+      </div>
+    </>
+  );
+}

package/templates/react-ecs/packages/client/src/Providers.tsx

@@ -0,0 +1,29 @@
+import { WagmiProvider } from "wagmi";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import { SyncProvider } from "@latticexyz/store-sync/react";
+import { defineConfig, EntryKitProvider } from "@latticexyz/entrykit/internal";
+import { wagmiConfig } from "./wagmiConfig";
+import { chainId, getWorldAddress, startBlock } from "./common";
+import { syncAdapter } from "./mud/recs";
+
+const queryClient = new QueryClient();
+
+export type Props = {
+  children: ReactNode;
+};
+
+export function Providers({ children }: Props) {
+  const worldAddress = getWorldAddress();
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <EntryKitProvider config={defineConfig({ chainId, worldAddress })}>
+          <SyncProvider chainId={chainId} address={worldAddress} startBlock={startBlock} adapter={syncAdapter}>
+            {children}
+          </SyncProvider>
+        </EntryKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}

package/templates/react-ecs/packages/client/src/common.ts

@@ -0,0 +1,27 @@
+import mudConfig from "contracts/mud.config";
+import { chains } from "./wagmiConfig";
+import { Chain, Hex } from "viem";
+
+export const chainId = import.meta.env.CHAIN_ID;
+export const worldAddress = import.meta.env.WORLD_ADDRESS;
+export const startBlock = import.meta.env.START_BLOCK;
+
+export const url = new URL(window.location.href);
+
+export type Entity = Hex;
+export type Direction = (typeof mudConfig.enums.Direction)[number];
+
+export function getWorldAddress() {
+  if (!worldAddress) {
+    throw new Error("No world address configured. Is the world still deploying?");
+  }
+  return worldAddress;
+}
+
+export function getChain(): Chain {
+  const chain = chains.find((c) => c.id === chainId);
+  if (!chain) {
+    throw new Error(`No chain configured for chain ID ${chainId}.`);
+  }
+  return chain;
+}

package/templates/react-ecs/packages/client/src/game/GameMap.tsx

@@ -0,0 +1,112 @@
+import { serialize, useAccount } from "wagmi";
+import { useKeyboardMovement } from "./useKeyboardMovement";
+import { Address, Hex, hexToBigInt, keccak256 } from "viem";
+import { ArrowDownIcon } from "../ui/icons/ArrowDownIcon";
+import { twMerge } from "tailwind-merge";
+import { Direction, Entity } from "../common";
+import mudConfig from "contracts/mud.config";
+import { AsyncButton } from "../ui/AsyncButton";
+import { useAccountModal } from "@latticexyz/entrykit/internal";
+import { useMemo } from "react";
+
+export type Props = {
+  readonly players?: {
+    readonly entity: Entity;
+    readonly owner: Address;
+    readonly x: number;
+    readonly y: number;
+  }[];
+  readonly onMove?: (entity: Entity, direction: Direction) => Promise<void>;
+  readonly onSpawn?: () => Promise<void>;
+};
+
+const size = 40;
+const scale = 100 / size;
+
+function getColorAngle(seed: Hex) {
+  return Number(hexToBigInt(keccak256(seed)) % 360n);
+}
+
+const rotateClassName = {
+  North: "rotate-0",
+  East: "rotate-90",
+  South: "rotate-180",
+  West: "-rotate-90",
+} as const satisfies Record<Direction, `${"" | "-"}rotate-${number}`>;
+
+export function GameMap({ players = [], onMove, onSpawn }: Props) {
+  const { openAccountModal } = useAccountModal();
+  const { address: userAddress } = useAccount();
+
+  const currentPlayer = players.find((player) => player.owner.toLowerCase() === userAddress?.toLowerCase());
+
+  useKeyboardMovement(
+    useMemo(
+      () => (onMove && currentPlayer ? (direction: Direction) => onMove(currentPlayer.entity, direction) : undefined),
+      [currentPlayer, onMove],
+    ),
+  );
+
+  return (
+    <div className="aspect-square w-full max-w-[40rem]">
+      <div className="relative w-full h-full border-8 border-black/10">
+        {currentPlayer && onMove
+          ? mudConfig.enums.Direction.map((direction) => (
+              <button
+                key={direction}
+                title={`Move ${direction.toLowerCase()}`}
+                className={twMerge(
+                  "outline-0 absolute inset-0 cursor-pointer grid p-4",
+                  rotateClassName[direction],
+                  "transition bg-gradient-to-t from-transparent via-transparent to-blue-50 text-blue-400 opacity-0 hover:opacity-40 active:opacity-100",
+                )}
+                style={{ clipPath: "polygon(0% 0%, 100% 0%, 50% 50%)" }}
+                onClick={() => onMove(currentPlayer.entity, direction)}
+              >
+                <ArrowDownIcon className="rotate-180 text-4xl self-start justify-self-center" />
+              </button>
+            ))
+          : null}
+
+        {players.map((player) => (
+          <div
+            key={player.entity}
+            className="absolute bg-current"
+            style={{
+              color: `hwb(${getColorAngle(player.owner)} 40% 20%)`,
+              width: `${scale}%`,
+              height: `${scale}%`,
+              left: `${((((player.x + size / 2) % size) + size) % size) * scale}%`,
+              top: `${((size - ((player.y + size / 2) % size)) % size) * scale}%`,
+            }}
+            title={serialize(player, null, 2)}
+          >
+            {player === currentPlayer ? <div className="w-full h-full bg-current animate-ping opacity-50" /> : null}
+          </div>
+        ))}
+
+        {!currentPlayer ? (
+          onSpawn ? (
+            <div className="absolute inset-0 grid place-items-center">
+              <AsyncButton
+                className="group outline-0 p-4 border-4 border-green-400 transition ring-green-300 hover:ring-4 active:scale-95 rounded-lg text-lg font-medium aria-busy:pointer-events-none aria-busy:animate-pulse"
+                onClick={() => onSpawn()}
+              >
+                Spawn<span className="hidden group-aria-busy:inline">ing…</span>
+              </AsyncButton>
+            </div>
+          ) : (
+            <div className="absolute inset-0 grid place-items-center">
+              <button
+                className="group outline-0 p-4 border-4 border-green-400 transition ring-green-300 hover:ring-4 active:scale-95 rounded-lg text-lg font-medium aria-busy:pointer-events-none aria-busy:animate-pulse"
+                onClick={openAccountModal}
+              >
+                Sign in to play
+              </button>
+            </div>
+          )
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/react-ecs/packages/client/src/mud/Synced.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { useSyncStatus } from "./useSyncStatus";
+import { ComponentValue } from "@latticexyz/recs";
+import { components } from "./recs";
+
+export type Props = {
+  children: ReactNode;
+  fallback?: (props: ComponentValue<(typeof components)["SyncProgress"]["schema"]>) => ReactNode;
+};
+
+export function Synced({ children, fallback }: Props) {
+  const status = useSyncStatus();
+  return status.isLive ? children : fallback?.(status);
+}

package/templates/react-ecs/packages/client/src/mud/recs.ts

@@ -0,0 +1,6 @@
+import { createWorld } from "@latticexyz/recs";
+import { createSyncAdapter } from "@latticexyz/store-sync/recs";
+import config from "contracts/mud.config";
+
+export const world = createWorld();
+export const { syncAdapter, components } = createSyncAdapter({ world, config });

package/templates/react-ecs/packages/client/src/mud/useSyncStatus.ts

@@ -0,0 +1,17 @@
+import { initialProgress } from "@latticexyz/store-sync/internal";
+import { SyncStep } from "@latticexyz/store-sync";
+import { useMemo } from "react";
+import { useComponentValue } from "@latticexyz/react";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { components } from "./recs";
+
+export function useSyncStatus() {
+  const progress = useComponentValue(components.SyncProgress, singletonEntity, initialProgress);
+  return useMemo(
+    () => ({
+      ...progress,
+      isLive: progress.step === SyncStep.LIVE,
+    }),
+    [progress],
+  );
+}

package/{dist/templates/threejs → templates/react-ecs}/packages/contracts/.env

@@ -7,5 +7,5 @@
 # Enable debug logs for MUD CLI
 DEBUG=mud:*
 #
-# Anvil default private key:
+# Anvil default private key
 PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

package/templates/react-ecs/packages/contracts/mud.config.ts

@@ -0,0 +1,18 @@
+import { defineWorld } from "@latticexyz/world";
+
+export default defineWorld({
+  namespace: "app",
+  userTypes: {
+    Entity: { type: "bytes32", filePath: "./src/Entity.sol" },
+  },
+  enums: {
+    Direction: ["North", "East", "South", "West"],
+  },
+  tables: {
+    // singletons
+    EntityCount: { schema: { count: "uint256" }, key: [] },
+    // components
+    Owner: { id: "Entity", owner: "address" },
+    Position: { id: "Entity", x: "int32", y: "int32" },
+  },
+});