create-mud 2.0.0-alpha.1.21 → 2.0.0-alpha.1.211

package/dist/templates/phaser/packages/client/src/mud/createClientComponents.ts

@@ -0,0 +1,10 @@
+import { SetupNetworkResult } from "./setupNetwork";
+
+export type ClientComponents = ReturnType<typeof createClientComponents>;
+
+export function createClientComponents({ components }: SetupNetworkResult) {
+  return {
+    ...components,
+    // add your client components or overrides here
+  };
+}

package/dist/templates/phaser/packages/client/src/mud/createSystemCalls.ts

@@ -0,0 +1,21 @@
+import { getComponentValue } from "@latticexyz/recs";
+import { awaitStreamValue } from "@latticexyz/utils";
+import { ClientComponents } from "./createClientComponents";
+import { SetupNetworkResult } from "./setupNetwork";
+
+export type SystemCalls = ReturnType<typeof createSystemCalls>;
+
+export function createSystemCalls(
+  { worldSend, txReduced$, singletonEntity }: SetupNetworkResult,
+  { Counter }: ClientComponents
+) {
+  const increment = async () => {
+    const tx = await worldSend("increment", []);
+    await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
+    return getComponentValue(Counter, singletonEntity);
+  };
+
+  return {
+    increment,
+  };
+}

package/dist/templates/phaser/packages/client/src/mud/getNetworkConfig.ts

@@ -0,0 +1,53 @@
+import { SetupContractConfig, getBurnerWallet } from "@latticexyz/std-client";
+import worldsJson from "contracts/worlds.json";
+import { supportedChains } from "./supportedChains";
+
+const worlds = worldsJson as Partial<Record<string, { address: string; blockNumber?: number }>>;
+
+type NetworkConfig = SetupContractConfig & {
+  privateKey: string;
+  faucetServiceUrl?: string;
+  snapSync?: boolean;
+};
+
+export async function getNetworkConfig(): Promise<NetworkConfig> {
+  const params = new URLSearchParams(window.location.search);
+
+  const chainId = Number(params.get("chainId") || import.meta.env.VITE_CHAIN_ID || 31337);
+  const chainIndex = supportedChains.findIndex((c) => c.id === chainId);
+  const chain = supportedChains[chainIndex];
+  if (!chain) {
+    throw new Error(`Chain ${chainId} not found`);
+  }
+
+  const world = worlds[chain.id.toString()];
+  const worldAddress = params.get("worldAddress") || world?.address;
+  if (!worldAddress) {
+    throw new Error(`No world address found for chain ${chainId}. Did you run \`mud deploy\`?`);
+  }
+
+  const initialBlockNumber = params.has("initialBlockNumber")
+    ? Number(params.get("initialBlockNumber"))
+    : world?.blockNumber ?? -1; // -1 will attempt to find the block number from RPC
+
+  return {
+    clock: {
+      period: 1000,
+      initialTime: 0,
+      syncInterval: 5000,
+    },
+    provider: {
+      chainId,
+      jsonRpcUrl: params.get("rpc") ?? chain.rpcUrls.default.http[0],
+      wsRpcUrl: params.get("wsRpc") ?? chain.rpcUrls.default.webSocket?.[0],
+    },
+    privateKey: getBurnerWallet().value,
+    chainId,
+    modeUrl: params.get("mode") ?? chain.modeUrl,
+    faucetServiceUrl: params.get("faucet") ?? chain.faucetUrl,
+    worldAddress,
+    initialBlockNumber,
+    snapSync: params.get("snapSync") === "true",
+    disableCache: params.get("cache") === "false",
+  };
+}

package/dist/templates/phaser/packages/client/src/mud/setup.ts

@@ -0,0 +1,16 @@
+import { createClientComponents } from "./createClientComponents";
+import { createSystemCalls } from "./createSystemCalls";
+import { setupNetwork } from "./setupNetwork";
+
+export type SetupResult = Awaited<ReturnType<typeof setup>>;
+
+export async function setup() {
+  const network = await setupNetwork();
+  const components = createClientComponents(network);
+  const systemCalls = createSystemCalls(network, components);
+  return {
+    network,
+    components,
+    systemCalls,
+  };
+}

package/dist/templates/phaser/packages/client/src/mud/setupNetwork.ts

@@ -0,0 +1,102 @@
+import { setupMUDV2Network } from "@latticexyz/std-client";
+import { createFastTxExecutor, createFaucetService, getSnapSyncRecords } from "@latticexyz/network";
+import { getNetworkConfig } from "./getNetworkConfig";
+import { defineContractComponents } from "./contractComponents";
+import { world } from "./world";
+import { Contract, Signer, utils } from "ethers";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
+import { getTableIds } from "@latticexyz/utils";
+import storeConfig from "contracts/mud.config";
+
+export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
+
+export async function setupNetwork() {
+  const contractComponents = defineContractComponents(world);
+  const networkConfig = await getNetworkConfig();
+  const result = await setupMUDV2Network<typeof contractComponents, typeof storeConfig>({
+    networkConfig,
+    world,
+    contractComponents,
+    syncThread: "main",
+    storeConfig,
+    worldAbi: IWorld__factory.abi,
+  });
+
+  // Request drip from faucet
+  const signer = result.network.signer.get();
+  if (networkConfig.faucetServiceUrl && signer) {
+    const address = await signer.getAddress();
+    console.info("[Dev Faucet]: Player address -> ", address);
+
+    const faucet = createFaucetService(networkConfig.faucetServiceUrl);
+
+    const requestDrip = async () => {
+      const balance = await signer.getBalance();
+      console.info(`[Dev Faucet]: Player balance -> ${balance}`);
+      const lowBalance = balance?.lte(utils.parseEther("1"));
+      if (lowBalance) {
+        console.info("[Dev Faucet]: Balance is low, dripping funds to player");
+        // Double drip
+        await faucet.dripDev({ address });
+        await faucet.dripDev({ address });
+      }
+    };
+
+    requestDrip();
+    // Request a drip every 20 seconds
+    setInterval(requestDrip, 20000);
+  }
+
+  const provider = result.network.providers.get().json;
+  const signerOrProvider = signer ?? provider;
+  // Create a World contract instance
+  const worldContract = IWorld__factory.connect(networkConfig.worldAddress, signerOrProvider);
+
+  if (networkConfig.snapSync) {
+    const currentBlockNumber = await provider.getBlockNumber();
+    const tableRecords = await getSnapSyncRecords(
+      networkConfig.worldAddress,
+      getTableIds(storeConfig),
+      currentBlockNumber,
+      signerOrProvider
+    );
+
+    console.log(`Syncing ${tableRecords.length} records`);
+    result.startSync(tableRecords, currentBlockNumber);
+  } else {
+    result.startSync();
+  }
+
+  // Create a fast tx executor
+  const fastTxExecutor =
+    signer?.provider instanceof JsonRpcProvider
+      ? await createFastTxExecutor(signer as Signer & { provider: JsonRpcProvider })
+      : null;
+
+  // TODO: infer this from fastTxExecute signature?
+  type BoundFastTxExecuteFn<C extends Contract> = <F extends keyof C>(
+    func: F,
+    args: Parameters<C[F]>,
+    options?: {
+      retryCount?: number;
+    }
+  ) => Promise<ReturnType<C[F]>>;
+
+  function bindFastTxExecute<C extends Contract>(contract: C): BoundFastTxExecuteFn<C> {
+    return async function (...args) {
+      if (!fastTxExecutor) {
+        throw new Error("no signer");
+      }
+      const { tx } = await fastTxExecutor.fastTxExecute(contract, ...args);
+      return await tx;
+    };
+  }
+
+  return {
+    ...result,
+    worldContract,
+    worldSend: bindFastTxExecute(worldContract),
+    fastTxExecutor,
+  };
+}

package/dist/templates/phaser/packages/client/src/mud/supportedChains.ts

@@ -0,0 +1,5 @@
+import { MUDChain, latticeTestnet } from "@latticexyz/common/chains";
+import { foundry } from "@wagmi/chains";
+
+// If you are deploying to chains other than anvil or Lattice testnet, add them here
+export const supportedChains: MUDChain[] = [foundry, latticeTestnet];

package/dist/templates/phaser/packages/client/src/mud/world.ts

@@ -0,0 +1,3 @@
+import { createWorld } from "@latticexyz/recs";
+
+export const world = createWorld();

package/dist/templates/phaser/packages/client/src/store.ts

@@ -0,0 +1,38 @@
+import { createStore } from "zustand/vanilla";
+import createReactStore from "zustand";
+import { NetworkLayer } from "./layers/network/createNetworkLayer";
+import { PhaserLayer } from "./layers/phaser/createPhaserLayer";
+
+export type Store = {
+  networkLayer: NetworkLayer | null;
+  phaserLayer: PhaserLayer | null;
+  devMode: boolean;
+};
+
+export type UIStore = {
+  networkLayer: NetworkLayer;
+  phaserLayer: PhaserLayer;
+  devMode: boolean;
+};
+
+export const store = createStore<Store>(() => ({
+  networkLayer: null,
+  phaserLayer: null,
+  devMode: false,
+}));
+
+export const useStore = createReactStore(store);
+
+export const useMUD = () => {
+  const { networkLayer, phaserLayer, devMode } = useStore();
+
+  if (networkLayer === null || phaserLayer === null) {
+    throw new Error("Store not initialized");
+  }
+
+  return {
+    networkLayer,
+    phaserLayer,
+    devMode,
+  } as UIStore;
+};

package/dist/templates/phaser/packages/client/src/ui/App.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useNetworkLayer } from "./hooks/useNetworkLayer";
+import { useStore } from "../store";
+import { PhaserLayer } from "./PhaserLayer";
+import { UIRoot } from "./UIRoot";
+
+export const App = () => {
+  const networkLayer = useNetworkLayer();
+
+  useEffect(() => {
+    if (networkLayer) {
+      useStore.setState({ networkLayer });
+    }
+  }, [networkLayer]);
+
+  return (
+    <div>
+      <PhaserLayer networkLayer={networkLayer} />
+
+      <UIRoot />
+    </div>
+  );
+};

package/dist/templates/phaser/packages/client/src/ui/LoadingScreen/BootScreen.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const BootScreen = ({ children }: Props) => {
+  return (
+    <Container>
+      <div>
+        <>{children || <>&nbsp;</>}</>
+      </div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgb(0 0 0 / 100%);
+  display: grid;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  transition: all 2s ease;
+  grid-gap: 50px;
+  z-index: 100;
+  pointer-events: none;
+  color: white;
+
+  div {
+    font-family: "Lattice Pixel", sans-serif;
+  }
+
+  img {
+    transition: all 2s ease;
+    width: 100px;
+  }
+`;

package/dist/templates/phaser/packages/client/src/ui/LoadingScreen/LoadingBar.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+export const LoadingBar: React.FC<{ percentage: number; className?: string }> = ({ percentage, className }) => {
+  return (
+    <Wrapper className={className}>
+      <Inner percentage={percentage} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: relative;
+  height: 4px;
+  background-color: #2a2a2a;
+`;
+const Inner = styled.div<{ percentage: number }>`
+  height: 100%;
+  width: ${(p) => p.percentage}%;
+  background-color: #fff;
+`;

package/dist/templates/phaser/packages/client/src/ui/LoadingScreen/LoadingScreen.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import { SyncState } from "@latticexyz/network";
+import { LoadingBar } from "./LoadingBar";
+import { BootScreen } from "./BootScreen";
+import { useComponentValue } from "@latticexyz/react";
+import { useMUD } from "../../store";
+
+export const LoadingScreen = () => {
+  const {
+    networkLayer: {
+      components: { LoadingState },
+      singletonEntity,
+    },
+  } = useMUD();
+
+  const loadingState = useComponentValue(LoadingState, singletonEntity, {
+    msg: "Connecting...",
+    percentage: 0,
+    state: SyncState.CONNECTING,
+  });
+
+  if (loadingState.state === SyncState.LIVE) {
+    return null;
+  }
+
+  return (
+    <BootScreen>
+      {loadingState.msg}
+      <LoadingContainer>
+        {Math.floor(loadingState.percentage)}%
+        <Loading percentage={loadingState.percentage} />
+      </LoadingContainer>
+    </BootScreen>
+  );
+};
+
+const LoadingContainer = styled.div`
+  display: grid;
+  justify-items: start;
+  justify-content: start;
+  align-items: center;
+  height: 30px;
+  width: 100%;
+  grid-gap: 20px;
+  grid-template-columns: auto 1fr;
+`;
+
+const Loading = styled(LoadingBar)`
+  width: 100%;
+  min-width: 200px;
+`;

package/dist/templates/phaser/packages/client/src/ui/LoadingScreen/index.ts

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

package/dist/templates/phaser/packages/client/src/ui/PhaserLayer.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from "react";
+import { NetworkLayer } from "../layers/network/createNetworkLayer";
+import { useStore } from "../store";
+import { usePhaserLayer } from "./hooks/usePhaserLayer";
+
+type Props = {
+  networkLayer: NetworkLayer | null;
+};
+
+export const PhaserLayer = ({ networkLayer }: Props) => {
+  const { ref: phaserRef, phaserLayer } = usePhaserLayer({ networkLayer });
+
+  useEffect(() => {
+    if (phaserLayer) {
+      useStore.setState({ phaserLayer });
+    }
+  }, [phaserLayer]);
+
+  return <div ref={phaserRef} />;
+};

package/dist/templates/phaser/packages/client/src/ui/UIRoot.tsx

@@ -0,0 +1,20 @@
+import { useStore } from "../store";
+import { LoadingScreen } from "./LoadingScreen";
+import { Wrapper } from "./Wrapper";
+
+export const UIRoot = () => {
+  const layers = useStore((state) => {
+    return {
+      networkLayer: state.networkLayer,
+      phaserLayer: state.phaserLayer,
+    };
+  });
+
+  if (!layers.networkLayer || !layers.phaserLayer) return <></>;
+
+  return (
+    <Wrapper>
+      <LoadingScreen />
+    </Wrapper>
+  );
+};

package/dist/templates/phaser/packages/client/src/ui/Wrapper.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  pointer-events: none;
+`;

package/dist/templates/phaser/packages/client/src/ui/hooks/useNetworkLayer.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useMemo } from "react";
+import { createNetworkLayer } from "../../layers/network/createNetworkLayer";
+import { usePromiseValue } from "./usePromiseValue";
+
+export const useNetworkLayer = () => {
+  const networkLayerPromise = useMemo(() => {
+    return createNetworkLayer();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      networkLayerPromise.then((networkLayer) => networkLayer.world.dispose());
+    };
+  }, [networkLayerPromise]);
+
+  return usePromiseValue(networkLayerPromise);
+};

package/dist/templates/phaser/packages/client/src/ui/hooks/usePhaserLayer.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import useResizeObserver, { ResizeHandler } from "use-resize-observer";
+import { throttle } from "lodash";
+import { createPhaserLayer } from "../../layers/phaser/createPhaserLayer";
+import { NetworkLayer } from "../../layers/network/createNetworkLayer";
+import { usePromiseValue } from "./usePromiseValue";
+import { phaserConfig } from "../../layers/phaser/configurePhaser";
+
+const createContainer = () => {
+  const container = document.createElement("div");
+  container.style.width = "100vw";
+  container.style.height = "100vh";
+  container.style.pointerEvents = "all";
+  container.style.overflow = "hidden";
+  return container;
+};
+
+type Props = {
+  networkLayer: NetworkLayer | null;
+};
+
+export const usePhaserLayer = ({ networkLayer }: Props) => {
+  const parentRef = useRef<HTMLElement | null>(null);
+  const [{ width, height }, setSize] = useState({ width: 0, height: 0 });
+
+  const { phaserLayerPromise, container } = useMemo(() => {
+    if (!networkLayer) return { phaserLayerPromise: null, container: null };
+
+    const container = createContainer();
+    if (parentRef.current) {
+      parentRef.current.appendChild(container);
+    }
+
+    return {
+      container,
+      phaserLayerPromise: createPhaserLayer(networkLayer, {
+        ...phaserConfig,
+        scale: {
+          ...phaserConfig.scale,
+          parent: container,
+          mode: Phaser.Scale.NONE,
+          width,
+          height,
+        },
+      }),
+    };
+
+    // We don't want width/height to recreate phaser layer, so we ignore linter
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [networkLayer]);
+
+  useEffect(() => {
+    return () => {
+      phaserLayerPromise?.then((phaserLayer) => phaserLayer.world.dispose());
+      container?.remove();
+    };
+  }, [container, phaserLayerPromise]);
+
+  const phaserLayer = usePromiseValue(phaserLayerPromise);
+
+  const onResize = useMemo<ResizeHandler>(() => {
+    return throttle(({ width, height }) => {
+      setSize({ width: width ?? 0, height: height ?? 0 });
+    }, 500);
+  }, []);
+
+  useResizeObserver({
+    ref: container,
+    onResize,
+  });
+
+  const ref = useCallback(
+    (el: HTMLElement | null) => {
+      parentRef.current = el;
+      if (container) {
+        if (parentRef.current) {
+          parentRef.current.appendChild(container);
+        } else {
+          container.remove();
+        }
+      }
+    },
+    [container]
+  );
+
+  return useMemo(() => ({ ref, phaserLayer }), [ref, phaserLayer]);
+};

package/dist/templates/phaser/packages/client/src/ui/hooks/usePromiseValue.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState, useRef } from "react";
+
+export const usePromiseValue = <T>(promise: Promise<T> | null) => {
+  const promiseRef = useRef<typeof promise>(promise);
+  const [value, setValue] = useState<T | null>(null);
+  useEffect(() => {
+    if (!promise) return;
+    let isMounted = true;
+    promiseRef.current = promise;
+    // TODO: do something with promise errors?
+    promise.then((resolvedValue) => {
+      // skip if unmounted (state changes will cause errors otherwise)
+      if (!isMounted) return;
+      // If our promise was replaced before it resolved, ignore the result
+      if (promiseRef.current !== promise) return;
+
+      setValue(resolvedValue);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [promise]);
+  return value;
+};

package/dist/templates/phaser/packages/client/src/ui/theme/ClickWrapper.tsx

@@ -0,0 +1,18 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+/**
+ * Wrap any piece of UI that needs to receive click events with this.
+ * Make sure it is unmounted when the click events are no longer needed.
+ */
+export const ClickWrapper = (props: Props) => {
+  const { children, style } = props;
+  const newStyle = { pointerEvents: "all", ...style } as Record<string, string>;
+
+  return (
+    <div {...props} style={newStyle}>
+      {children}
+    </div>
+  );
+};

package/dist/templates/phaser/packages/client/src/ui/theme/SpriteImage.tsx

@@ -0,0 +1,52 @@
+import { Sprites } from "../../layers/phaser/constants";
+import atlasJson from "../../../public/assets/atlases/atlas.json";
+import { useMUD } from "../../store";
+
+export const SpriteImage = ({ spriteKey, scale }: { spriteKey: Sprites; scale?: number }) => {
+  const {
+    phaserLayer: {
+      scenes: {
+        Main: {
+          config: { sprites },
+        },
+      },
+    },
+  } = useMUD();
+
+  const imageScale = scale ?? 1;
+  const sprite = sprites[spriteKey];
+  const frame = sprite.frame;
+
+  const atlasDimensions = atlasJson.textures[0].size;
+  const spriteAtlasEntry = atlasJson.textures[0].frames.find((atlasFrame) => atlasFrame.filename === frame);
+
+  if (!spriteAtlasEntry) throw new Error(`Could not find sprite ${spriteKey} in atlas`);
+
+  const containerStyle = {
+    width: `${spriteAtlasEntry.sourceSize.w * imageScale}px`,
+    height: `${spriteAtlasEntry.sourceSize.h * imageScale}px`,
+    overflow: "hidden",
+    position: "relative",
+  } as Record<string, string>;
+
+  const imgStyle = {
+    imageRendering: "pixelated",
+    maxWidth: `${atlasDimensions.w * imageScale}px`,
+    maxHeight: `${atlasDimensions.h * imageScale}px`,
+    height: `${atlasDimensions.h * imageScale}px`,
+    width: `${atlasDimensions.w * imageScale}px`,
+    marginTop: `-${spriteAtlasEntry.frame.y * imageScale}px`,
+    marginLeft: `-${spriteAtlasEntry.frame.x * imageScale}px`,
+    clipPath: `inset(${spriteAtlasEntry.frame.y + 1}px ${
+      atlasDimensions.w - (spriteAtlasEntry.frame.x + spriteAtlasEntry.sourceSize.w)
+    }px ${atlasDimensions.h - (spriteAtlasEntry.frame.y + spriteAtlasEntry.sourceSize.h)}px ${
+      spriteAtlasEntry.frame.x
+    }px)`,
+  } as Record<string, string>;
+
+  return (
+    <div style={containerStyle}>
+      <img src="assets/atlases/atlas.png" style={imgStyle} />
+    </div>
+  );
+};

package/dist/templates/{minimal → phaser}/packages/client/tsconfig.json

@@ -11,10 +11,9 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   },
   "include": ["src"]
 }