create-mud 2.2.15-6aff69a91c627ddcc0c1dbccf7b71580e8e0a8fa → 2.2.15-7482a5ae322f26278722081838b6103ce6d264e6

package/dist/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-var l=Object.create;var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!u.call(e,r)&&r!==s&&a(e,r,{get:()=>t[r],enumerable:!(p=o(t,r))||p.enumerable});return e};var h=(e,t,s)=>(s=e!=null?l(d(e)):{},f(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e));var i=require("create-create-app"),n=h(require("path"));var c={name:"create-mud",version:"2.2.15-6aff69a91c627ddcc0c1dbccf7b71580e8e0a8fa",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && tsx ./scripts/copy-templates.ts",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && shx rm -rf test-project","test:react":"dist/cli.js test-project --template react && shx rm -rf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && shx rm -rf test-project","test:threejs":"dist/cli.js test-project --template threejs && shx rm -rf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && shx rm -rf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",execa:"^7.0.0",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var b=n.default.resolve(__dirname,"..","dist","templates");(0,i.create)("create-mud",{templateRoot:b,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:e,packageManager:t})=>`Done! Play in the MUD with \`cd ${e.name}\` and \`${t} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}});
+var l=Object.create;var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var h=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!u.call(e,r)&&r!==s&&a(e,r,{get:()=>t[r],enumerable:!(p=o(t,r))||p.enumerable});return e};var j=(e,t,s)=>(s=e!=null?l(d(e)):{},h(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e));var i=require("create-create-app"),n=j(require("path"));var c={name:"create-mud",version:"2.2.15-7482a5ae322f26278722081838b6103ce6d264e6",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && tsx ./scripts/copy-templates.ts",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && shx rm -rf test-project","test:react":"dist/cli.js test-project --template react && shx rm -rf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && shx rm -rf test-project","test:threejs":"dist/cli.js test-project --template threejs && shx rm -rf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && shx rm -rf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",execa:"^7.0.0",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var b=n.default.resolve(__dirname,"..","dist","templates");(0,i.create)("create-mud",{templateRoot:b,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:e,packageManager:t})=>`Done! Play in the MUD with \`cd ${e.name}\` and \`${t} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}});
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli.ts","../package.json"],"sourcesContent":["#!/usr/bin/env node\nimport { create } from \"create-create-app\";\nimport path from \"node:path\";\nimport packageJson from \"../package.json\";\n\nconst templateRoot = path.resolve(__dirname, \"..\", \"dist\", \"templates\");\n\n// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.\ncreate(\"create-mud\", {\n  templateRoot,\n  defaultTemplate: \"vanilla\",\n  // templates use pnpm workspaces, so default to that for now\n  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different\n  defaultPackageManager: \"pnpm\",\n  promptForDescription: false,\n  promptForAuthor: false,\n  promptForEmail: false,\n  promptForLicense: false,\n  promptForTemplate: true,\n  caveat: ({ answers, packageManager }) =>\n    `Done! Play in the MUD with \\`cd ${answers.name}\\` and \\`${packageManager} run dev\\``,\n  extra: {\n    \"mud-version\": {\n      type: \"input\",\n      describe: \"The version of MUD packages to use, defaults to latest\",\n      default: packageJson.version,\n    },\n  },\n});\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.15-6aff69a91c627ddcc0c1dbccf7b71580e8e0a8fa\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"bin\": \"dist/cli.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && tsx ./scripts/copy-templates.ts\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"dist/cli.js test-project --template phaser && shx rm -rf test-project\",\n    \"test:react\": \"dist/cli.js test-project --template react && shx rm -rf test-project\",\n    \"test:react-ecs\": \"dist/cli.js test-project --template react-ecs && shx rm -rf test-project\",\n    \"test:threejs\": \"dist/cli.js test-project --template threejs && shx rm -rf test-project\",\n    \"test:vanilla\": \"dist/cli.js test-project --template vanilla && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"create-create-app\": \"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^18.15.11\",\n    \"execa\": \"^7.0.0\",\n    \"tsup\": \"^6.7.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"],"mappings":";2cACA,IAAAA,EAAuB,6BACvBC,EAAiB,mBCFjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,IAAO,cACP,MAAS,CACP,MACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,0CACZ,MAAS,oBACT,WAAY,kBACZ,IAAO,eACP,eAAkB,iCAClB,KAAQ,2HACR,UAAW,gBACX,cAAe,wEACf,aAAc,uEACd,iBAAkB,2EAClB,eAAgB,yEAChB,eAAgB,wEAClB,EACA,aAAgB,CACd,oBAAqB,yFACvB,EACA,gBAAmB,CACjB,cAAe,YACf,MAAS,SACT,KAAQ,QACV,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,EDhCA,IAAMC,EAAe,EAAAC,QAAK,QAAQ,UAAW,KAAM,OAAQ,WAAW,KAGtE,UAAO,aAAc,CACnB,aAAAD,EACA,gBAAiB,UAGjB,sBAAuB,OACvB,qBAAsB,GACtB,gBAAiB,GACjB,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,GACnB,OAAQ,CAAC,CAAE,QAAAE,EAAS,eAAAC,CAAe,IACjC,mCAAmCD,EAAQ,gBAAgBC,cAC7D,MAAO,CACL,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CACF,CAAC","names":["import_create_create_app","import_node_path","package_default","templateRoot","path","answers","packageManager","package_default"]}
+{"version":3,"sources":["../src/cli.ts","../package.json"],"sourcesContent":["#!/usr/bin/env node\nimport { create } from \"create-create-app\";\nimport path from \"node:path\";\nimport packageJson from \"../package.json\";\n\nconst templateRoot = path.resolve(__dirname, \"..\", \"dist\", \"templates\");\n\n// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.\ncreate(\"create-mud\", {\n  templateRoot,\n  defaultTemplate: \"vanilla\",\n  // templates use pnpm workspaces, so default to that for now\n  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different\n  defaultPackageManager: \"pnpm\",\n  promptForDescription: false,\n  promptForAuthor: false,\n  promptForEmail: false,\n  promptForLicense: false,\n  promptForTemplate: true,\n  caveat: ({ answers, packageManager }) =>\n    `Done! Play in the MUD with \\`cd ${answers.name}\\` and \\`${packageManager} run dev\\``,\n  extra: {\n    \"mud-version\": {\n      type: \"input\",\n      describe: \"The version of MUD packages to use, defaults to latest\",\n      default: packageJson.version,\n    },\n  },\n});\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.15-7482a5ae322f26278722081838b6103ce6d264e6\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"bin\": \"dist/cli.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && tsx ./scripts/copy-templates.ts\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"dist/cli.js test-project --template phaser && shx rm -rf test-project\",\n    \"test:react\": \"dist/cli.js test-project --template react && shx rm -rf test-project\",\n    \"test:react-ecs\": \"dist/cli.js test-project --template react-ecs && shx rm -rf test-project\",\n    \"test:threejs\": \"dist/cli.js test-project --template threejs && shx rm -rf test-project\",\n    \"test:vanilla\": \"dist/cli.js test-project --template vanilla && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"create-create-app\": \"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^18.15.11\",\n    \"execa\": \"^7.0.0\",\n    \"tsup\": \"^6.7.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"],"mappings":";2cACA,IAAAA,EAAuB,6BACvBC,EAAiB,mBCFjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,IAAO,cACP,MAAS,CACP,MACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,0CACZ,MAAS,oBACT,WAAY,kBACZ,IAAO,eACP,eAAkB,iCAClB,KAAQ,2HACR,UAAW,gBACX,cAAe,wEACf,aAAc,uEACd,iBAAkB,2EAClB,eAAgB,yEAChB,eAAgB,wEAClB,EACA,aAAgB,CACd,oBAAqB,yFACvB,EACA,gBAAmB,CACjB,cAAe,YACf,MAAS,SACT,KAAQ,QACV,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,EDhCA,IAAMC,EAAe,EAAAC,QAAK,QAAQ,UAAW,KAAM,OAAQ,WAAW,KAGtE,UAAO,aAAc,CACnB,aAAAD,EACA,gBAAiB,UAGjB,sBAAuB,OACvB,qBAAsB,GACtB,gBAAiB,GACjB,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,GACnB,OAAQ,CAAC,CAAE,QAAAE,EAAS,eAAAC,CAAe,IACjC,mCAAmCD,EAAQ,gBAAgBC,cAC7D,MAAO,CACL,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CACF,CAAC","names":["import_create_create_app","import_node_path","package_default","templateRoot","path","answers","packageManager","package_default"]}

package/dist/templates/react/gitignore

@@ -1,7 +1,16 @@
+.DS_Store
+logs
+*.log
+
 node_modules
 
-# mud artifacts
-.mud
-# sqlite indexer data
-*.db
-*.db-journal
+.env.*
+
+# foundry
+cache
+broadcast
+out/*
+!out/IWorld.sol
+out/IWorld.sol/*
+!out/IWorld.sol/IWorld.abi.json
+!out/IWorld.sol/IWorld.abi.d.json.ts

package/dist/templates/react/mprocs.yaml

@@ -1,3 +1,4 @@
+scrollback: 10000
 procs:
   client:
     cwd: packages/client
@@ -5,9 +6,16 @@ procs:
   contracts:
     cwd: packages/contracts
     shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545
+  deploy-prereqs:
+    cwd: packages/contracts
+    shell: pnpm deploy-local-prereqs
+    env:
+      DEBUG: "mud:*"
+      # Anvil default account (0x70997970C51812dc3A010C7d01b50e0d17dc79C8)
+      PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
   anvil:
     cwd: packages/contracts
-    shell: anvil --base-fee 0 --block-time 2
+    shell: anvil --block-time 2
   explorer:
     cwd: packages/contracts
     shell: pnpm explorer

package/dist/templates/react/package.json

@@ -12,10 +12,10 @@
     "test": "pnpm recursive run test"
   },
   "devDependencies": {
-    "@latticexyz/cli": "{{mud-version}}",
-    "@latticexyz/common": "{{mud-version}}",
-    "@latticexyz/explorer": "{{mud-version}}",
-    "@latticexyz/store-indexer": "{{mud-version}}",
+    "@latticexyz/cli": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/common": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/explorer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/store-indexer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
     "@types/debug": "4.1.7",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
@@ -27,5 +27,29 @@
   "engines": {
     "node": "^18",
     "pnpm": "^8 || ^9"
+  },
+  "pnpm": {
+    "overrides": {
+      "@latticexyz/abi-ts": "{{mud-version}}",
+      "@latticexyz/block-logs-stream": "{{mud-version}}",
+      "@latticexyz/cli": "{{mud-version}}",
+      "@latticexyz/common": "{{mud-version}}",
+      "@latticexyz/config": "{{mud-version}}",
+      "@latticexyz/entrykit": "{{mud-version}}",
+      "@latticexyz/explorer": "{{mud-version}}",
+      "@latticexyz/gas-report": "{{mud-version}}",
+      "@latticexyz/paymaster": "{{mud-version}}",
+      "@latticexyz/protocol-parser": "{{mud-version}}",
+      "@latticexyz/recs": "{{mud-version}}",
+      "@latticexyz/schema-type": "{{mud-version}}",
+      "@latticexyz/stash": "{{mud-version}}",
+      "@latticexyz/store": "{{mud-version}}",
+      "@latticexyz/store-indexer": "{{mud-version}}",
+      "@latticexyz/store-sync": "{{mud-version}}",
+      "@latticexyz/utils": "{{mud-version}}",
+      "@latticexyz/world": "{{mud-version}}",
+      "@latticexyz/world-module-metadata": "{{mud-version}}",
+      "@latticexyz/world-modules": "{{mud-version}}"
+    }
   }
 }

package/dist/templates/react/packages/client/gitignore

@@ -1,3 +1 @@
-node_modules
 dist
-.DS_Store

package/dist/templates/react/packages/client/package.json

@@ -11,25 +11,34 @@
     "test": "tsc --noEmit"
   },
   "dependencies": {
-    "@latticexyz/common": "{{mud-version}}",
-    "@latticexyz/dev-tools": "{{mud-version}}",
-    "@latticexyz/react": "{{mud-version}}",
-    "@latticexyz/schema-type": "{{mud-version}}",
-    "@latticexyz/store-sync": "{{mud-version}}",
-    "@latticexyz/utils": "{{mud-version}}",
-    "@latticexyz/world": "{{mud-version}}",
+    "@latticexyz/common": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/entrykit": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/explorer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/react": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/schema-type": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/stash": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/store-sync": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/utils": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/world": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@tanstack/react-query": "^5.63.0",
     "contracts": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "fast-deep-equal": "^3.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rxjs": "7.5.5",
-    "viem": "2.21.19"
+    "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",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.20",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
     "vite": "^4.2.1",
     "wait-port": "^1.0.4"
   }

package/dist/templates/react/packages/client/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/dist/templates/react/packages/client/src/App.tsx

@@ -1,105 +1,43 @@
-import { useMUD } from "./MUDContext";
-
-const styleUnset = { all: "unset" } as const;
-
-export const App = () => {
-  const {
-    network: { tables, useStore },
-    systemCalls: { addTask, toggleTask, deleteTask },
-  } = useMUD();
-
-  const tasks = useStore((state) => {
-    const records = Object.values(state.getRecords(tables.Tasks));
-    records.sort((a, b) => Number(a.value.createdAt - b.value.createdAt));
-    return records;
-  });
+import { stash } from "./mud/stash";
+import { useSyncProgress } from "./mud/useSyncProgress";
+import { useRecords } from "@latticexyz/stash/react";
+import { AccountButton } from "@latticexyz/entrykit/internal";
+import { Direction } from "./common";
+import mudConfig from "contracts/mud.config";
+import { useMemo } from "react";
+import { GameMap } from "./GameMap";
+import { useWorldContract } from "./mud/useWorldContract";
+
+export function App() {
+  const { isLive, message, percentage } = useSyncProgress();
+
+  const players = useRecords({ stash, table: mudConfig.tables.app__Position });
+
+  const worldContract = useWorldContract();
+  const onMove = useMemo(
+    () =>
+      worldContract
+        ? async (direction: Direction) => {
+            await worldContract.write.app__move([mudConfig.enums.Direction.indexOf(direction)]);
+          }
+        : undefined,
+    [worldContract],
+  );
 
   return (
     <>
-      <table>
-        <tbody>
-          {tasks.map((task) => (
-            <tr key={task.id}>
-              <td align="right">
-                <input
-                  type="checkbox"
-                  checked={task.value.completedAt > 0n}
-                  title={task.value.completedAt === 0n ? "Mark task as completed" : "Mark task as incomplete"}
-                  onChange={async (event) => {
-                    event.preventDefault();
-                    const checkbox = event.currentTarget;
-
-                    checkbox.disabled = true;
-                    try {
-                      await toggleTask(task.key.id);
-                    } finally {
-                      checkbox.disabled = false;
-                    }
-                  }}
-                />
-              </td>
-              <td>{task.value.completedAt > 0n ? <s>{task.value.description}</s> : <>{task.value.description}</>}</td>
-              <td align="right">
-                <button
-                  type="button"
-                  title="Delete task"
-                  style={styleUnset}
-                  onClick={async (event) => {
-                    event.preventDefault();
-                    if (!window.confirm("Are you sure you want to delete this task?")) return;
-
-                    const button = event.currentTarget;
-                    button.disabled = true;
-                    try {
-                      await deleteTask(task.key.id);
-                    } finally {
-                      button.disabled = false;
-                    }
-                  }}
-                >
-                  &times;
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-        <tfoot>
-          <tr>
-            <td>
-              <input type="checkbox" disabled />
-            </td>
-            <td colSpan={2}>
-              <form
-                onSubmit={async (event) => {
-                  event.preventDefault();
-                  const form = event.currentTarget;
-                  const fieldset = form.querySelector("fieldset");
-                  if (!(fieldset instanceof HTMLFieldSetElement)) return;
-
-                  const formData = new FormData(form);
-                  const desc = formData.get("description");
-                  if (typeof desc !== "string") return;
-
-                  fieldset.disabled = true;
-                  try {
-                    await addTask(desc);
-                    form.reset();
-                  } finally {
-                    fieldset.disabled = false;
-                  }
-                }}
-              >
-                <fieldset style={styleUnset}>
-                  <input type="text" name="description" />{" "}
-                  <button type="submit" title="Add task">
-                    Add
-                  </button>
-                </fieldset>
-              </form>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
+      <div className="fixed inset-0 grid place-items-center p-4">
+        {isLive ? (
+          <GameMap players={players} onMove={onMove} />
+        ) : (
+          <div className="tabular-nums">
+            {message} ({percentage.toFixed(1)}%)…
+          </div>
+        )}
+      </div>
+      <div className="fixed top-2 right-2">
+        <AccountButton />
+      </div>
     </>
   );
-};
+}

package/dist/templates/react/packages/client/src/GameMap.tsx

@@ -0,0 +1,78 @@
+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 } from "./common";
+import mudConfig from "contracts/mud.config";
+
+export type Props = {
+  readonly players?: readonly {
+    readonly player: Address;
+    readonly x: number;
+    readonly y: number;
+  }[];
+
+  readonly onMove?: (direction: Direction) => 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 }: Props) {
+  const { address: userAddress } = useAccount();
+  useKeyboardMovement(onMove);
+  return (
+    <div className="aspect-square w-full max-w-[40rem]">
+      <div className="relative w-full h-full border-8 border-black/10">
+        {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(direction)}
+              >
+                <ArrowDownIcon className="rotate-180 text-4xl self-start justify-self-center" />
+              </button>
+            ))
+          : null}
+
+        {players.map((player) => (
+          <div
+            key={player.player}
+            className="absolute bg-current"
+            style={{
+              color: `hwb(${getColorAngle(player.player)} 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.player.toLowerCase() === userAddress?.toLowerCase() ? (
+              <div className="w-full h-full bg-current animate-ping opacity-50" />
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/templates/react/packages/client/src/Providers.tsx

@@ -0,0 +1,44 @@
+import { WagmiProvider } from "wagmi";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import { createSyncAdapter } from "@latticexyz/store-sync/internal";
+import { SyncProvider } from "@latticexyz/store-sync/react";
+import { stash } from "./mud/stash";
+import { Address } from "viem";
+import { defineConfig, EntryKitProvider } from "@latticexyz/entrykit/internal";
+import { wagmiConfig } from "./wagmiConfig";
+import { chainId } from "./common";
+
+const queryClient = new QueryClient();
+
+export type Props = {
+  worldDeploy: {
+    address: Address;
+    blockNumber: bigint | null;
+  };
+  children: ReactNode;
+};
+
+export function Providers({ worldDeploy, children }: Props) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <EntryKitProvider
+          config={defineConfig({
+            chainId,
+            worldAddress: worldDeploy.address,
+          })}
+        >
+          <SyncProvider
+            chainId={chainId}
+            address={worldDeploy.address}
+            startBlock={worldDeploy.blockNumber ?? undefined}
+            adapter={createSyncAdapter({ stash })}
+          >
+            {children}
+          </SyncProvider>
+        </EntryKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}

package/dist/templates/react/packages/client/src/common.ts

@@ -0,0 +1,6 @@
+import mudConfig from "contracts/mud.config";
+
+export const chainId = parseInt(import.meta.env.VITE_CHAIN_ID) || 31337;
+export const url = new URL(window.location.href);
+
+export type Direction = (typeof mudConfig.enums.Direction)[number];

package/dist/templates/react/packages/client/src/index.tsx

@@ -1,34 +1,20 @@
-import ReactDOM from "react-dom/client";
+import "tailwindcss/tailwind.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { getWorldDeploy } from "./mud/getWorldDeploy";
+import { Providers } from "./Providers";
 import { App } from "./App";
-import { setup } from "./mud/setup";
-import { MUDProvider } from "./MUDContext";
-import mudConfig from "contracts/mud.config";
-
-const rootElement = document.getElementById("react-root");
-if (!rootElement) throw new Error("React root not found");
-const root = ReactDOM.createRoot(rootElement);
+import { chainId } from "./common";
+import { Explorer } from "./mud/Explorer";
 
 // TODO: figure out if we actually want this to be async or if we should render something else in the meantime
-setup().then(async (result) => {
-  root.render(
-    <MUDProvider value={result}>
-      <App />
-    </MUDProvider>,
-  );
-
-  // https://vitejs.dev/guide/env-and-mode.html
-  if (import.meta.env.DEV) {
-    const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
-    mountDevTools({
-      config: mudConfig,
-      publicClient: result.network.publicClient,
-      walletClient: result.network.walletClient,
-      latestBlock$: result.network.latestBlock$,
-      storedBlockLogs$: result.network.storedBlockLogs$,
-      worldAddress: result.network.worldContract.address,
-      worldAbi: result.network.worldContract.abi,
-      write$: result.network.write$,
-      useStore: result.network.useStore,
-    });
-  }
-});
+getWorldDeploy(chainId).then((worldDeploy) =>
+  createRoot(document.getElementById("react-root")!).render(
+    <StrictMode>
+      <Providers worldDeploy={worldDeploy}>
+        <App />
+        <Explorer />
+      </Providers>
+    </StrictMode>,
+  ),
+);

package/dist/templates/react/packages/client/src/mud/Explorer.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { useEntryKitConfig } from "@latticexyz/entrykit/internal";
+import { MUDIcon } from "../ui/icons/MUDIcon";
+
+export function Explorer() {
+  const [open, setOpen] = useState(false);
+  const { chain, worldAddress } = useEntryKitConfig();
+  const explorerUrl = chain.blockExplorers?.worldsExplorer?.url;
+  if (!explorerUrl) return null;
+
+  return (
+    <div className="fixed bottom-0 inset-x-0 flex flex-col opacity-80 transition hover:opacity-100">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="outline-none flex justify-end gap-2 p-2 font-medium leading-none text-black"
+      >
+        {open ? (
+          <>Close</>
+        ) : (
+          <>
+            Explore <MUDIcon className="text-orange-500" />
+          </>
+        )}
+      </button>
+      {open ? (
+        <iframe src={`${explorerUrl}/${worldAddress}`} className={twMerge("bg-black", open ? "h-[50vh]" : "h-0")} />
+      ) : null}
+    </div>
+  );
+}

package/dist/templates/react/packages/client/src/mud/getWorldDeploy.ts

@@ -0,0 +1,23 @@
+import { Address } from "viem";
+
+export async function getWorldDeploy(chainId: number): Promise<{
+  chainId: number;
+  address: Address;
+  blockNumber: bigint | null;
+}> {
+  // TODO: figure out how to catch vite:import-analysis error when this file is missing
+  const { default: worlds } = await import("contracts/worlds.json").catch((error) => {
+    console.debug("Could not import worlds.json", error);
+    return { default: null };
+  });
+  const deploy = worlds?.[`${chainId}`];
+  if (!deploy) {
+    throw new Error(`No world deploy found for chain ${chainId} in "worlds.json".`);
+  }
+  console.log("chain:", chainId, "world:", deploy);
+  return {
+    chainId,
+    address: deploy.address,
+    blockNumber: deploy.blockNumber != null ? BigInt(deploy.blockNumber) : null,
+  };
+}

package/dist/templates/react/packages/client/src/mud/stash.ts

@@ -0,0 +1,4 @@
+import { createStash } from "@latticexyz/stash/internal";
+import config from "contracts/mud.config";
+
+export const stash = createStash(config);

package/dist/templates/react/packages/client/src/mud/useSyncProgress.ts

@@ -0,0 +1,21 @@
+import { stash } from "./stash";
+import { initialProgress, SyncProgress } from "@latticexyz/store-sync/internal";
+import { SyncStep } from "@latticexyz/store-sync";
+import { useMemo } from "react";
+import { useRecord } from "@latticexyz/stash/react";
+
+export function useSyncProgress() {
+  const progress = useRecord({
+    stash,
+    table: SyncProgress,
+    key: {},
+    defaultValue: initialProgress,
+  });
+  return useMemo(
+    () => ({
+      ...progress,
+      isLive: progress.step === SyncStep.LIVE,
+    }),
+    [progress],
+  );
+}

package/dist/templates/react/packages/client/src/mud/useWorldContract.ts

@@ -0,0 +1,45 @@
+import { useClient } from "wagmi";
+import { chainId } from "../common";
+import { Account, Chain, Client, GetContractReturnType, Transport, getContract } from "viem";
+import { useQuery } from "@tanstack/react-query";
+import { useSessionClient, useEntryKitConfig } from "@latticexyz/entrykit/internal";
+import { observer } from "@latticexyz/explorer/observer";
+import worldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+
+export function useWorldContract():
+  | GetContractReturnType<
+      typeof worldAbi,
+      {
+        public: Client<Transport, Chain>;
+        wallet: Client<Transport, Chain, Account>;
+      }
+    >
+  | undefined {
+  const { worldAddress } = useEntryKitConfig();
+  const client = useClient({ chainId });
+  const { data: sessionClient } = useSessionClient();
+
+  const { data: worldContract } = useQuery({
+    queryKey: ["worldContract", worldAddress, client?.uid, sessionClient?.uid],
+    queryFn: () => {
+      if (!client || !sessionClient) {
+        throw new Error("Not connected.");
+      }
+
+      return getContract({
+        abi: worldAbi,
+        address: worldAddress,
+        client: {
+          public: client,
+          wallet: sessionClient.extend(observer()),
+        },
+      });
+    },
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return worldContract;
+}