npm - create-mud - Versions diffs - 2.0.0-alpha.1.21 → 2.0.0-alpha.1.211 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/dist/templates/phaser/packages/client/.env ADDED Viewed

	@@ -0,0 +1 @@
1	+ VITE_CHAIN_ID=31337

package/dist/templates/phaser/packages/client/.eslintrc ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../.eslintrc", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

package/dist/templates/phaser/packages/client/index.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>a minimal MUD client</title>
+    <style>
+      body,
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      ul,
+      ol,
+      li,
+      dl,
+      dt,
+      dd,
+      form,
+      input,
+      textarea,
+      button,
+      img {
+        all: initial;
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="react-root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/dist/templates/phaser/packages/client/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "client",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "wait-port localhost:8545 && vite",
+    "initialize": "pnpm build",
+    "preview": "vite preview",
+    "test": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ethersproject/providers": "^5.7.2",
+    "@latticexyz/common": "{{mud-version}}",
+    "@latticexyz/dev-tools": "{{mud-version}}",
+    "@latticexyz/network": "{{mud-version}}",
+    "@latticexyz/phaserx": "{{mud-version}}",
+    "@latticexyz/react": "{{mud-version}}",
+    "@latticexyz/recs": "{{mud-version}}",
+    "@latticexyz/schema-type": "{{mud-version}}",
+    "@latticexyz/std-client": "{{mud-version}}",
+    "@latticexyz/utils": "{{mud-version}}",
+    "@latticexyz/world": "{{mud-version}}",
+    "@wagmi/chains": "^0.2.14",
+    "contracts": "workspace:*",
+    "ethers": "^5.7.2",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "simplex-noise": "^4.0.1",
+    "styled-components": "^5.3.10",
+    "use-resize-observer": "^9.1.0",
+    "zustand": "^4.3.8"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.194",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "vite": "^4.2.1",
+    "wait-port": "^1.0.4"
+  }
+}

package/dist/templates/phaser/packages/client/public/assets/atlases/atlas.json ADDED Viewed

@@ -0,0 +1,292 @@
+{
+    "meta": {
+        "app": "",
+        "version": "1.0.0"
+    },
+    "textures": [
+        {
+            "image": "atlas.png?timestamp=1684344504521",
+            "format": "RGBA8888",
+            "size": {
+                "w": 2048,
+                "h": 2048
+            },
+            "scale": 1,
+            "frames": [
+                {
+                    "filename": "sprites/golem/attack/0.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/attack/1.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 32,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/attack/2.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 0,
+                        "y": 32,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/attack/3.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 32,
+                        "y": 32,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/attack/4.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 64,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/attack/5.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 64,
+                        "y": 32,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/death/0.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 0,
+                        "y": 64,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/death/1.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 32,
+                        "y": 64,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/death/2.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 64,
+                        "y": 64,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/idle/0.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 96,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/idle/1.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 96,
+                        "y": 32,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/idle/2.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 96,
+                        "y": 64,
+                        "w": 32,
+                        "h": 32
+                    }
+                },
+                {
+                    "filename": "sprites/golem/idle/3.png",
+                    "rotated": false,
+                    "trimmed": false,
+                    "sourceSize": {
+                        "w": 32,
+                        "h": 32
+                    },
+                    "spriteSourceSize": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    },
+                    "frame": {
+                        "x": 0,
+                        "y": 0,
+                        "w": 32,
+                        "h": 32
+                    }
+                }
+            ]
+        }
+    ]
+}

package/dist/templates/phaser/packages/client/public/assets/atlases/atlas.png ADDED Viewed

Binary file

package/dist/templates/phaser/packages/client/public/assets/tilesets/world.png ADDED Viewed

Binary file

package/dist/templates/phaser/packages/client/src/artTypes/world.ts ADDED Viewed

@@ -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[] } = {};

package/dist/templates/phaser/packages/client/src/index.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./ui/App";
+import { mount as mountDevTools } from "@latticexyz/dev-tools";
+const rootElement = document.getElementById("react-root");
+if (!rootElement) throw new Error("React root not found");
+const root = ReactDOM.createRoot(rootElement);
+root.render(<App />);
+mountDevTools();

package/dist/templates/phaser/packages/client/src/layers/network/createNetworkLayer.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { world } from "../../mud/world";
+import { setup } from "../../mud/setup";
+export type NetworkLayer = Awaited<ReturnType<typeof createNetworkLayer>>;
+export const createNetworkLayer = async () => {
+  const {
+    components,
+    network: { singletonEntity },
+    systemCalls,
+  } = await setup();
+  // Give components a Human-readable ID
+  Object.entries(components).forEach(([name, component]) => {
+    component.id = name;
+  });
+  return {
+    world,
+    singletonEntity,
+    systemCalls,
+    components,
+  };
+};

package/dist/templates/phaser/packages/client/src/layers/phaser/configurePhaser.ts ADDED Viewed

@@ -0,0 +1,91 @@
+import {
+  defineSceneConfig,
+  AssetType,
+  defineScaleConfig,
+  defineMapConfig,
+  defineCameraConfig,
+} from "@latticexyz/phaserx";
+import worldTileset from "../../../public/assets/tilesets/world.png";
+import { TileAnimations, Tileset } from "../../artTypes/world";
+import { Sprites, Assets, Maps, Scenes, TILE_HEIGHT, TILE_WIDTH, Animations } from "./constants";
+const ANIMATION_INTERVAL = 200;
+const mainMap = defineMapConfig({
+  chunkSize: TILE_WIDTH * 64, // tile size * tile amount
+  tileWidth: TILE_WIDTH,
+  tileHeight: TILE_HEIGHT,
+  backgroundTile: [Tileset.Grass],
+  animationInterval: ANIMATION_INTERVAL,
+  tileAnimations: TileAnimations,
+  layers: {
+    layers: {
+      Background: { tilesets: ["Default"] },
+      Foreground: { tilesets: ["Default"] },
+    },
+    defaultLayer: "Background",
+  },
+});
+export const phaserConfig = {
+  sceneConfig: {
+    [Scenes.Main]: defineSceneConfig({
+      assets: {
+        [Assets.Tileset]: {
+          type: AssetType.Image,
+          key: Assets.Tileset,
+          path: worldTileset,
+        },
+        [Assets.MainAtlas]: {
+          type: AssetType.MultiAtlas,
+          key: Assets.MainAtlas,
+          // Add a timestamp to the end of the path to prevent caching
+          path: `/assets/atlases/atlas.json?timestamp=${Date.now()}`,
+          options: {
+            imagePath: "/assets/atlases/",
+          },
+        },
+      },
+      maps: {
+        [Maps.Main]: mainMap,
+      },
+      sprites: {
+        [Sprites.Soldier]: {
+          assetKey: Assets.MainAtlas,
+          frame: "sprites/soldier/idle/0.png",
+        },
+      },
+      animations: [
+        {
+          key: Animations.SwordsmanIdle,
+          assetKey: Assets.MainAtlas,
+          startFrame: 0,
+          endFrame: 3,
+          frameRate: 6,
+          repeat: -1,
+          prefix: "sprites/soldier/idle/",
+          suffix: ".png",
+        },
+      ],
+      tilesets: {
+        Default: {
+          assetKey: Assets.Tileset,
+          tileWidth: TILE_WIDTH,
+          tileHeight: TILE_HEIGHT,
+        },
+      },
+    }),
+  },
+  scale: defineScaleConfig({
+    parent: "phaser-game",
+    zoom: 1,
+    mode: Phaser.Scale.NONE,
+  }),
+  cameraConfig: defineCameraConfig({
+    pinchSpeed: 1,
+    wheelSpeed: 1,
+    maxZoom: 3,
+    minZoom: 1,
+  }),
+  cullingChunkSize: TILE_HEIGHT * 16,
+};

package/dist/templates/phaser/packages/client/src/layers/phaser/constants.ts ADDED Viewed

@@ -0,0 +1,22 @@
+export enum Scenes {
+  Main = "Main",
+}
+export enum Maps {
+  Main = "Main",
+}
+export enum Animations {
+  SwordsmanIdle = "SwordsmanIdle",
+}
+export enum Sprites {
+  Soldier,
+}
+export enum Assets {
+  MainAtlas = "MainAtlas",
+  Tileset = "Tileset",
+}
+export const TILE_HEIGHT = 32;
+export const TILE_WIDTH = 32;

package/dist/templates/phaser/packages/client/src/layers/phaser/createPhaserLayer.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { createPhaserEngine } from "@latticexyz/phaserx";
+import { namespaceWorld } from "@latticexyz/recs";
+import { NetworkLayer } from "../network/createNetworkLayer";
+import { registerSystems } from "./systems";
+export type PhaserLayer = Awaited<ReturnType<typeof createPhaserLayer>>;
+type PhaserEngineConfig = Parameters<typeof createPhaserEngine>[0];
+export const createPhaserLayer = async (networkLayer: NetworkLayer, phaserConfig: PhaserEngineConfig) => {
+  const world = namespaceWorld(networkLayer.world, "phaser");
+  const { game, scenes, dispose: disposePhaser } = await createPhaserEngine(phaserConfig);
+  world.registerDisposer(disposePhaser);
+  const { camera } = scenes.Main;
+  camera.phaserCamera.setBounds(-1000, -1000, 2000, 2000);
+  camera.phaserCamera.centerOn(0, 0);
+  const components = {};
+  const layer = {
+    networkLayer,
+    world,
+    game,
+    scenes,
+    components,
+  };
+  registerSystems(layer);
+  return layer;
+};

package/dist/templates/phaser/packages/client/src/layers/phaser/systems/createCamera.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { PhaserLayer } from "../createPhaserLayer";
+export const createCamera = (layer: PhaserLayer) => {
+  const {
+    scenes: {
+      Main: {
+        camera: { phaserCamera },
+      },
+    },
+  } = layer;
+  phaserCamera.centerOn(0, 0);
+};

package/dist/templates/phaser/packages/client/src/layers/phaser/systems/createMapSystem.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { Tileset } from "../../../artTypes/world";
+import { PhaserLayer } from "../createPhaserLayer";
+import { createNoise2D } from "simplex-noise";
+export function createMapSystem(layer: PhaserLayer) {
+  const {
+    scenes: {
+      Main: {
+        maps: {
+          Main: { putTileAt },
+        },
+      },
+    },
+  } = layer;
+  const noise = createNoise2D();
+  for (let x = -500; x < 500; x++) {
+    for (let y = -500; y < 500; y++) {
+      const coord = { x, y };
+      const seed = noise(x, y);
+      putTileAt(coord, Tileset.Grass, "Background");
+      if (seed >= 0.45) {
+        putTileAt(coord, Tileset.Mountain, "Foreground");
+      } else if (seed < -0.45) {
+        putTileAt(coord, Tileset.Forest, "Foreground");
+      }
+    }
+  }
+}

package/dist/templates/phaser/packages/client/src/layers/phaser/systems/index.ts ADDED Viewed

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

package/dist/templates/phaser/packages/client/src/layers/phaser/systems/registerSystems.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { PhaserLayer } from "../createPhaserLayer";
+import { createCamera } from "./createCamera";
+import { createMapSystem } from "./createMapSystem";
+export const registerSystems = (layer: PhaserLayer) => {
+  createCamera(layer);
+  createMapSystem(layer);
+};

package/dist/templates/phaser/packages/client/src/mud/contractComponents.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/* Autogenerated file. Do not edit manually. */
+import { TableId } from "@latticexyz/utils";
+import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
+export function defineContractComponents(world: World) {
+  return {
+    Counter: (() => {
+      const tableId = new TableId("", "Counter");
+      return defineComponent(
+        world,
+        {
+          value: RecsType.Number,
+        },
+        {
+          metadata: {
+            contractId: tableId.toHexString(),
+            tableId: tableId.toString(),
+          },
+        }
+      );
+    })(),
+  };
+}