[WIP] Refactor the chessboard using Phaser.js

packages/client/package.json

@@ -27,11 +27,13 @@
     "contracts": "workspace:*",
     "dayjs": "^1.11.9",
     "ethers": "^5.7.2",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
     "tailwindcss": "^3.3.3",
+    "use-resize-observer": "^9.1.0",
     "viem": "1.6.0"
   },
   "devDependencies": {

packages/client/src/App.tsx

@@ -1,5 +1,6 @@
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
+import { PhaserLayer } from "./PhaserLayer";
 import AutoChess from "./ui/ChessMain";
 import JoinGame from "./ui/JoinGame";
 import "./index.css";
@@ -19,6 +20,7 @@ export const App = () => {
 
   return (
     <>
+      <PhaserLayer />
       {isPlay ? <AutoChess /> : <JoinGame />}
       <div className="absolute bottom-24 left-4 grid">
         <SelectNetwork />

packages/client/src/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;
+  }
+`;

packages/client/src/LoadingScreen/LoadingBar.tsx

@@ -0,0 +1,24 @@
+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;
+`;

packages/client/src/LoadingScreen/LoadingScreen.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+import { LoadingBar } from "./LoadingBar";
+import { BootScreen } from "./BootScreen";
+import { useComponentValue } from "@latticexyz/react";
+import { useMUD } from "../../store";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { SyncStep } from "@latticexyz/store-sync";
+
+export const LoadingScreen = () => {
+  const {
+    networkLayer: {
+      components: { SyncProgress },
+    },
+  } = useMUD();
+
+  const syncProgress = useComponentValue(SyncProgress, singletonEntity, {
+    message: "Connecting",
+    percentage: 0,
+    step: SyncStep.INITIALIZE,
+    latestBlockNumber: 0n,
+    lastBlockNumberProcessed: 0n,
+  });
+
+  if (syncProgress.step === SyncStep.LIVE) {
+    return null;
+  }
+
+  return (
+    <BootScreen>
+      {syncProgress.message}…
+      <LoadingContainer>
+        {Math.floor(syncProgress.percentage)}%
+        <Loading percentage={syncProgress.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;
+`;

packages/client/src/LoadingScreen/index.ts

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

packages/client/src/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} />;
+};

packages/client/src/artTypes/world.ts

@@ -0,0 +1,9 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+export enum Tileset {
+  Grass = 0,
+  Mountain = 1,
+  Forest = 2,
+}
+export enum TileAnimationKey {}
+export const TileAnimations: { [key in TileAnimationKey]: number[] } = {};

packages/client/src/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);
+};

packages/client/src/hooks/usePhaserLayer.tsx

@@ -0,0 +1,93 @@
+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]);
+};

packages/client/src/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;
+};

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

@@ -0,0 +1,15 @@
+import { world } from "../../mud/world";
+import { setup } from "../../mud/setup";
+
+export type NetworkLayer = Awaited<ReturnType<typeof createNetworkLayer>>;
+
+export const createNetworkLayer = async () => {
+  const { components, systemCalls, network } = await setup();
+
+  return {
+    world,
+    systemCalls,
+    components,
+    network,
+  };
+};