create-mud 2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242 → 2.2.17-923ab7f680d27d21d0c6daa84df58977b680b7f3

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 (119) hide show
  1. package/dist/cli.js +1 -1
  2. package/dist/cli.js.map +1 -1
  3. package/package.json +1 -1
  4. package/templates/phaser/.gitignore_ +7 -0
  5. package/templates/phaser/packages/art/.gitignore_ +0 -0
  6. package/templates/phaser/packages/client/.gitignore_ +3 -0
  7. package/templates/phaser/packages/contracts/.gitignore_ +9 -0
  8. package/templates/react/.gitignore_ +16 -0
  9. package/templates/react/mprocs.yaml +9 -1
  10. package/templates/react/packages/client/.gitignore_ +1 -0
  11. package/templates/react/packages/client/index.html +2 -2
  12. package/templates/react/packages/client/package.json +17 -9
  13. package/templates/react/packages/client/postcss.config.cjs +6 -0
  14. package/templates/react/packages/client/src/App.tsx +41 -100
  15. package/templates/react/packages/client/src/Providers.tsx +35 -0
  16. package/templates/react/packages/client/src/common.ts +26 -0
  17. package/templates/react/packages/client/src/game/GameMap.tsx +102 -0
  18. package/templates/react/packages/client/src/game/useKeyboardMovement.ts +26 -0
  19. package/templates/react/packages/client/src/index.tsx +17 -32
  20. package/templates/react/packages/client/src/mud/Explorer.tsx +32 -0
  21. package/templates/react/packages/client/src/mud/Synced.tsx +14 -0
  22. package/templates/react/packages/client/src/mud/stash.ts +4 -0
  23. package/templates/react/packages/client/src/mud/useSyncStatus.ts +21 -0
  24. package/templates/react/packages/client/src/mud/useWorldContract.ts +44 -0
  25. package/templates/react/packages/client/src/ui/AsyncButton.tsx +41 -0
  26. package/templates/react/packages/client/src/ui/ErrorFallback.tsx +58 -0
  27. package/templates/react/packages/client/src/ui/icons/ArrowDownIcon.tsx +22 -0
  28. package/templates/react/packages/client/src/ui/icons/MUDIcon.tsx +25 -0
  29. package/templates/react/packages/client/src/wagmiConfig.ts +49 -0
  30. package/templates/react/packages/client/tailwind.config.ts +10 -0
  31. package/templates/react/packages/client/tsconfig.json +1 -1
  32. package/templates/react/packages/client/vite.config.ts +2 -7
  33. package/templates/react/packages/contracts/.env +1 -1
  34. package/templates/react/packages/contracts/.gitignore_ +13 -0
  35. package/templates/react/packages/contracts/mud.config.ts +6 -8
  36. package/templates/react/packages/contracts/out/IWorld.sol/IWorld.abi.json +2021 -0
  37. package/templates/react/packages/contracts/package.json +1 -0
  38. package/templates/react/packages/contracts/script/PostDeploy.s.sol +1 -9
  39. package/templates/react/packages/contracts/src/MoveSystem.sol +26 -0
  40. package/templates/react/packages/contracts/src/codegen/common.sol +11 -0
  41. package/templates/react/packages/contracts/src/codegen/index.sol +1 -1
  42. package/templates/react/packages/contracts/src/codegen/tables/Position.sol +318 -0
  43. package/templates/{react-ecs/packages/contracts/src/codegen/world/IIncrementSystem.sol → react/packages/contracts/src/codegen/world/IMoveSystem.sol} +5 -3
  44. package/templates/react/packages/contracts/src/codegen/world/IWorld.sol +2 -2
  45. package/templates/react/packages/contracts/test/MoveTest.t.sol +25 -0
  46. package/templates/react/packages/contracts/test/WorldTest.t.sol +16 -0
  47. package/templates/react/packages/contracts/worlds.json +1 -1
  48. package/templates/react-ecs/.gitignore_ +16 -0
  49. package/templates/react-ecs/mprocs.yaml +9 -1
  50. package/templates/react-ecs/package.json +1 -2
  51. package/templates/react-ecs/packages/client/.gitignore_ +1 -0
  52. package/templates/react-ecs/packages/client/index.html +2 -2
  53. package/templates/react-ecs/packages/client/package.json +16 -9
  54. package/templates/react-ecs/packages/client/postcss.config.cjs +6 -0
  55. package/templates/react-ecs/packages/client/src/App.tsx +66 -21
  56. package/templates/react-ecs/packages/client/src/Providers.tsx +29 -0
  57. package/templates/react-ecs/packages/client/src/common.ts +27 -0
  58. package/templates/react-ecs/packages/client/src/game/GameMap.tsx +112 -0
  59. package/templates/react-ecs/packages/client/src/game/useKeyboardMovement.ts +26 -0
  60. package/templates/react-ecs/packages/client/src/index.tsx +17 -32
  61. package/templates/react-ecs/packages/client/src/mud/Explorer.tsx +32 -0
  62. package/templates/react-ecs/packages/client/src/mud/Synced.tsx +14 -0
  63. package/templates/react-ecs/packages/client/src/mud/recs.ts +6 -0
  64. package/templates/react-ecs/packages/client/src/mud/useSyncStatus.ts +17 -0
  65. package/templates/react-ecs/packages/client/src/mud/useWorldContract.ts +44 -0
  66. package/templates/react-ecs/packages/client/src/ui/AsyncButton.tsx +41 -0
  67. package/templates/react-ecs/packages/client/src/ui/ErrorFallback.tsx +58 -0
  68. package/templates/react-ecs/packages/client/src/ui/icons/ArrowDownIcon.tsx +22 -0
  69. package/templates/react-ecs/packages/client/src/ui/icons/MUDIcon.tsx +25 -0
  70. package/templates/react-ecs/packages/client/src/wagmiConfig.ts +49 -0
  71. package/templates/react-ecs/packages/client/tailwind.config.ts +10 -0
  72. package/templates/react-ecs/packages/client/tsconfig.json +1 -1
  73. package/templates/react-ecs/packages/client/vite.config.ts +2 -7
  74. package/templates/react-ecs/packages/contracts/.env +1 -1
  75. package/templates/react-ecs/packages/contracts/.gitignore_ +13 -0
  76. package/templates/react-ecs/packages/contracts/mud.config.ts +11 -6
  77. package/templates/react-ecs/packages/contracts/out/IWorld.sol/IWorld.abi.json +2039 -0
  78. package/templates/react-ecs/packages/contracts/package.json +1 -0
  79. package/templates/react-ecs/packages/contracts/script/PostDeploy.s.sol +1 -5
  80. package/templates/react-ecs/packages/contracts/src/Entity.sol +20 -0
  81. package/templates/react-ecs/packages/contracts/src/MoveSystem.sol +30 -0
  82. package/templates/react-ecs/packages/contracts/src/SpawnSystem.sol +18 -0
  83. package/templates/react-ecs/packages/contracts/src/codegen/common.sol +11 -0
  84. package/templates/react-ecs/packages/contracts/src/codegen/index.sol +3 -1
  85. package/templates/react-ecs/packages/contracts/src/codegen/tables/{Counter.sol → EntityCount.sol} +35 -35
  86. package/templates/react-ecs/packages/contracts/src/codegen/tables/Owner.sol +202 -0
  87. package/templates/react-ecs/packages/contracts/src/codegen/tables/Position.sol +321 -0
  88. package/templates/{react/packages/contracts/src/codegen/world/ITasksSystem.sol → react-ecs/packages/contracts/src/codegen/world/IMoveSystem.sol} +6 -9
  89. package/templates/react-ecs/packages/contracts/src/codegen/world/ISpawnSystem.sol +15 -0
  90. package/templates/react-ecs/packages/contracts/src/codegen/world/IWorld.sol +3 -2
  91. package/templates/react-ecs/packages/contracts/src/createEntity.sol +11 -0
  92. package/templates/react-ecs/packages/contracts/test/MoveTest.t.sol +39 -0
  93. package/templates/react-ecs/packages/contracts/test/WorldTest.t.sol +16 -0
  94. package/templates/react-ecs/packages/contracts/worlds.json +1 -1
  95. package/templates/threejs/.gitignore_ +7 -0
  96. package/templates/threejs/packages/client/.gitignore_ +3 -0
  97. package/templates/threejs/packages/contracts/.gitignore_ +9 -0
  98. package/templates/vanilla/.gitignore_ +7 -0
  99. package/templates/vanilla/packages/client/.gitignore_ +3 -0
  100. package/templates/vanilla/packages/contracts/.gitignore_ +9 -0
  101. package/templates/react/packages/client/src/MUDContext.tsx +0 -21
  102. package/templates/react/packages/client/src/mud/createSystemCalls.ts +0 -56
  103. package/templates/react/packages/client/src/mud/getNetworkConfig.ts +0 -76
  104. package/templates/react/packages/client/src/mud/setup.ts +0 -18
  105. package/templates/react/packages/client/src/mud/setupNetwork.ts +0 -101
  106. package/templates/react/packages/client/src/mud/supportedChains.ts +0 -20
  107. package/templates/react/packages/contracts/src/codegen/tables/Tasks.sol +0 -522
  108. package/templates/react/packages/contracts/src/systems/TasksSystem.sol +0 -24
  109. package/templates/react/packages/contracts/test/TasksTest.t.sol +0 -30
  110. package/templates/react-ecs/packages/client/src/MUDContext.tsx +0 -21
  111. package/templates/react-ecs/packages/client/src/mud/createClientComponents.ts +0 -21
  112. package/templates/react-ecs/packages/client/src/mud/createSystemCalls.ts +0 -51
  113. package/templates/react-ecs/packages/client/src/mud/getNetworkConfig.ts +0 -77
  114. package/templates/react-ecs/packages/client/src/mud/setup.ts +0 -21
  115. package/templates/react-ecs/packages/client/src/mud/setupNetwork.ts +0 -106
  116. package/templates/react-ecs/packages/client/src/mud/supportedChains.ts +0 -20
  117. package/templates/react-ecs/packages/client/src/mud/world.ts +0 -3
  118. package/templates/react-ecs/packages/contracts/src/systems/IncrementSystem.sol +0 -14
  119. package/templates/react-ecs/packages/contracts/test/CounterTest.t.sol +0 -31
package/dist/cli.js CHANGED
@@ -1,4 +1,4 @@
1
- import r from"node:fs/promises";import t from"node:path";import{fileURLToPath as j}from"node:url";import h from"yargs-interactive";import y from"fast-glob";var c={name:"create-mud",version:"2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",type:"module",bin:"bin/cli.js",files:["bin","dist","templates"],scripts:{build:"pnpm run build:js","build:js":"tsup && pnpm run copy-templates",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist","copy-templates":"tsx ./scripts/copy-templates.ts",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run copy-templates && pnpm vitest --run && 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":"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project","test:react":"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project","test:react-ecs":"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project","test:threejs":"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project","test:vanilla":"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project"},dependencies:{"fast-glob":"^3.3.3","yargs-interactive":"^3.0.1"},devDependencies:{"@types/yargs-interactive":"^2.1.6",execa:"^7.0.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var o=["react","react-ecs","phaser","threejs","vanilla"];import f from"node:fs/promises";async function m(e){try{return await f.access(e),!0}catch{return!1}}var b=j(import.meta.url),v=t.dirname(b);async function w(){h().usage("$0 [args]").interactive({interactive:{default:!0},name:{describe:"Name your project",type:"input"},template:{describe:"Pick a template",type:"list",choices:o},"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}).then(async e=>{if(!e.name)throw new Error("No project name provided.");let s=t.join(process.cwd(),e.name);if(await m(s))throw new Error(`Target directory "${s}" already exists.`);let p=t.join(v,"..","templates",e.template),l=await y("**/*",{cwd:p,dot:!0});for(let a of l){let i=t.join(p,a),n=t.join(s,a);if(await r.mkdir(t.dirname(n),{recursive:!0}),/package\.json$/.test(i)){let u=await r.readFile(i,"utf-8");await r.writeFile(n,u.replaceAll(/{{mud-version}}/g,e.mudVersion),"utf-8")}else await r.copyFile(i,n)}console.log(`
1
+ import s from"node:fs/promises";import t from"node:path";import{fileURLToPath as j}from"node:url";import h from"yargs-interactive";import y from"fast-glob";var c={name:"create-mud",version:"2.2.17-923ab7f680d27d21d0c6daa84df58977b680b7f3",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",type:"module",bin:"bin/cli.js",files:["bin","dist","templates"],scripts:{build:"pnpm run build:js","build:js":"tsup && pnpm run copy-templates",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist","copy-templates":"tsx ./scripts/copy-templates.ts",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run copy-templates && pnpm vitest --run && 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":"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project","test:react":"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project","test:react-ecs":"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project","test:threejs":"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project","test:vanilla":"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project"},dependencies:{"fast-glob":"^3.3.3","yargs-interactive":"^3.0.1"},devDependencies:{"@types/yargs-interactive":"^2.1.6",execa:"^7.0.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var o=["react","react-ecs","phaser","threejs","vanilla"];import f from"node:fs/promises";async function m(e){try{return await f.access(e),!0}catch{return!1}}var b=j(import.meta.url),v=t.dirname(b);async function w(){h().usage("$0 [args]").interactive({interactive:{default:!0},name:{describe:"Name your project",type:"input"},template:{describe:"Pick a template",type:"list",choices:o},"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}).then(async e=>{if(!e.name)throw new Error("No project name provided.");let n=t.join(process.cwd(),e.name);if(await m(n))throw new Error(`Target directory "${n}" already exists.`);let a=t.join(v,"..","templates",e.template),l=await y("**/*",{cwd:a,dot:!0});for(let p of l){let r=t.join(a,p),i=t.join(n,p);if(await s.mkdir(t.dirname(i),{recursive:!0}),/package\.json$/.test(r)){let u=await s.readFile(r,"utf-8");await s.writeFile(i,u.replaceAll(/{{mud-version}}/g,e.mudVersion),"utf-8")}else/\.gitignore_$/.test(r)?await s.copyFile(r,i.replace(/_$/,"")):await s.copyFile(r,i)}console.log(`
2
2
  New project created! Run it with:
3
3
 
4
4
  cd ${e.name}
package/dist/cli.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/bin/cli.ts","../package.json","../src/common.ts","../src/exists.ts"],"sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport yargsInteractive from \"yargs-interactive\";\nimport glob from \"fast-glob\";\nimport packageJson from \"../../package.json\";\nimport { templates } from \"../common\";\nimport { exists } from \"../exists\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nasync function run() {\n yargsInteractive()\n .usage(\"$0 [args]\")\n .interactive({\n interactive: { default: true },\n name: {\n describe: \"Name your project\",\n type: \"input\",\n },\n template: {\n describe: \"Pick a template\",\n type: \"list\",\n choices: templates,\n },\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 .then(async (args) => {\n if (!args.name) throw new Error(\"No project name provided.\");\n\n const destDir = path.join(process.cwd(), args.name);\n if (await exists(destDir)) {\n throw new Error(`Target directory \"${destDir}\" already exists.`);\n }\n\n const sourceDir = path.join(__dirname, \"..\", \"templates\", args.template);\n const files = await glob(\"**/*\", { cwd: sourceDir, dot: true });\n\n for (const filename of files) {\n const sourceFile = path.join(sourceDir, filename);\n const destFile = path.join(destDir, filename);\n\n await fs.mkdir(path.dirname(destFile), { recursive: true });\n\n if (/package\\.json$/.test(sourceFile)) {\n const source = await fs.readFile(sourceFile, \"utf-8\");\n await fs.writeFile(destFile, source.replaceAll(/{{mud-version}}/g, args.mudVersion), \"utf-8\");\n } else {\n await fs.copyFile(sourceFile, destFile);\n }\n }\n\n console.log(`\nNew project created! Run it with:\n\n cd ${args.name}\n pnpm install\n pnpm dev\n\nHave fun! For more info, check the docs at https://mud.dev/\n`);\n });\n}\n\nrun();\n","{\n \"name\": \"create-mud\",\n \"version\": \"2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242\",\n \"description\": \"Create a new MUD project\",\n \"license\": \"MIT\",\n \"author\": \"Lattice <mud@lattice.xyz>\",\n \"type\": \"module\",\n \"bin\": \"bin/cli.js\",\n \"files\": [\n \"bin\",\n \"dist\",\n \"templates\"\n ],\n \"scripts\": {\n \"build\": \"pnpm run build:js\",\n \"build:js\": \"tsup && pnpm run copy-templates\",\n \"clean\": \"pnpm run clean:js\",\n \"clean:js\": \"shx rm -rf dist\",\n \"copy-templates\": \"tsx ./scripts/copy-templates.ts\",\n \"dev\": \"tsup --watch\",\n \"prepublishOnly\": \"npm run clean && npm run build\",\n \"test\": \"pnpm run copy-templates && pnpm vitest --run && 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\": \"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:react\": \"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:react-ecs\": \"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:threejs\": \"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:vanilla\": \"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project\"\n },\n \"dependencies\": {\n \"fast-glob\": \"^3.3.3\",\n \"yargs-interactive\": \"^3.0.1\"\n },\n \"devDependencies\": {\n \"@types/yargs-interactive\": \"^2.1.6\",\n \"execa\": \"^7.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\",\n \"registry\": \"https://registry.npmjs.org\"\n }\n}\n","// We define these here to keep them in the order we want to present in the CLI.\n// Tests will ensure this list stays up to date.\nexport const templates = [\"react\", \"react-ecs\", \"phaser\", \"threejs\", \"vanilla\"];\n","import fs from \"node:fs/promises\";\n\nexport async function exists(path: string) {\n try {\n await fs.access(path);\n return true;\n } catch {\n return false;\n }\n}\n"],"mappings":"AAAA,OAAOA,MAAQ,mBACf,OAAOC,MAAU,YACjB,OAAS,iBAAAC,MAAqB,WAC9B,OAAOC,MAAsB,oBAC7B,OAAOC,MAAU,YCJjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,KAAQ,SACR,IAAO,aACP,MAAS,CACP,MACA,OACA,WACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,kCACZ,MAAS,oBACT,WAAY,kBACZ,iBAAkB,kCAClB,IAAO,eACP,eAAkB,iCAClB,KAAQ,2KACR,UAAW,gBACX,cAAe,iHACf,aAAc,gHACd,iBAAkB,oHAClB,eAAgB,kHAChB,eAAgB,iHAClB,EACA,aAAgB,CACd,YAAa,SACb,oBAAqB,QACvB,EACA,gBAAmB,CACjB,2BAA4B,SAC5B,MAAS,QACX,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,ECvCO,IAAMC,EAAY,CAAC,QAAS,YAAa,SAAU,UAAW,SAAS,ECF9E,OAAOC,MAAQ,mBAEf,eAAsBC,EAAOC,EAAc,CACzC,GAAI,CACF,aAAMF,EAAG,OAAOE,CAAI,EACb,EACT,MAAQ,CACN,MAAO,EACT,CACF,CHAA,IAAMC,EAAaC,EAAc,YAAY,GAAG,EAC1CC,EAAYC,EAAK,QAAQH,CAAU,EAEzC,eAAeI,GAAM,CACnBC,EAAiB,EACd,MAAM,WAAW,EACjB,YAAY,CACX,YAAa,CAAE,QAAS,EAAK,EAC7B,KAAM,CACJ,SAAU,oBACV,KAAM,OACR,EACA,SAAU,CACR,SAAU,kBACV,KAAM,OACN,QAASC,CACX,EACA,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CAAC,EACA,KAAK,MAAOC,GAAS,CACpB,GAAI,CAACA,EAAK,KAAM,MAAM,IAAI,MAAM,2BAA2B,EAE3D,IAAMC,EAAUN,EAAK,KAAK,QAAQ,IAAI,EAAGK,EAAK,IAAI,EAClD,GAAI,MAAME,EAAOD,CAAO,EACtB,MAAM,IAAI,MAAM,qBAAqBA,CAAO,mBAAmB,EAGjE,IAAME,EAAYR,EAAK,KAAKD,EAAW,KAAM,YAAaM,EAAK,QAAQ,EACjEI,EAAQ,MAAMC,EAAK,OAAQ,CAAE,IAAKF,EAAW,IAAK,EAAK,CAAC,EAE9D,QAAWG,KAAYF,EAAO,CAC5B,IAAMG,EAAaZ,EAAK,KAAKQ,EAAWG,CAAQ,EAC1CE,EAAWb,EAAK,KAAKM,EAASK,CAAQ,EAI5C,GAFA,MAAMG,EAAG,MAAMd,EAAK,QAAQa,CAAQ,EAAG,CAAE,UAAW,EAAK,CAAC,EAEtD,iBAAiB,KAAKD,CAAU,EAAG,CACrC,IAAMG,EAAS,MAAMD,EAAG,SAASF,EAAY,OAAO,EACpD,MAAME,EAAG,UAAUD,EAAUE,EAAO,WAAW,mBAAoBV,EAAK,UAAU,EAAG,OAAO,CAC9F,MACE,MAAMS,EAAG,SAASF,EAAYC,CAAQ,CAE1C,CAEA,QAAQ,IAAI;AAAA;AAAA;AAAA,OAGXR,EAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,CAKf,CACG,CAAC,CACL,CAEAJ,EAAI","names":["fs","path","fileURLToPath","yargsInteractive","glob","package_default","templates","fs","exists","path","__filename","fileURLToPath","__dirname","path","run","yargsInteractive","templates","package_default","args","destDir","exists","sourceDir","files","glob","filename","sourceFile","destFile","fs","source"]}
1
+ {"version":3,"sources":["../src/bin/cli.ts","../package.json","../src/common.ts","../src/exists.ts"],"sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport yargsInteractive from \"yargs-interactive\";\nimport glob from \"fast-glob\";\nimport packageJson from \"../../package.json\";\nimport { templates } from \"../common\";\nimport { exists } from \"../exists\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nasync function run() {\n yargsInteractive()\n .usage(\"$0 [args]\")\n .interactive({\n interactive: { default: true },\n name: {\n describe: \"Name your project\",\n type: \"input\",\n },\n template: {\n describe: \"Pick a template\",\n type: \"list\",\n choices: templates,\n },\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 .then(async (args) => {\n if (!args.name) throw new Error(\"No project name provided.\");\n\n const destDir = path.join(process.cwd(), args.name);\n if (await exists(destDir)) {\n throw new Error(`Target directory \"${destDir}\" already exists.`);\n }\n\n const sourceDir = path.join(__dirname, \"..\", \"templates\", args.template);\n const files = await glob(\"**/*\", { cwd: sourceDir, dot: true });\n\n for (const filename of files) {\n const sourceFile = path.join(sourceDir, filename);\n const destFile = path.join(destDir, filename);\n\n await fs.mkdir(path.dirname(destFile), { recursive: true });\n\n if (/package\\.json$/.test(sourceFile)) {\n const source = await fs.readFile(sourceFile, \"utf-8\");\n await fs.writeFile(destFile, source.replaceAll(/{{mud-version}}/g, args.mudVersion), \"utf-8\");\n } else if (/\\.gitignore_$/.test(sourceFile)) {\n await fs.copyFile(sourceFile, destFile.replace(/_$/, \"\"));\n } else {\n await fs.copyFile(sourceFile, destFile);\n }\n }\n\n console.log(`\nNew project created! Run it with:\n\n cd ${args.name}\n pnpm install\n pnpm dev\n\nHave fun! For more info, check the docs at https://mud.dev/\n`);\n });\n}\n\nrun();\n","{\n \"name\": \"create-mud\",\n \"version\": \"2.2.17-923ab7f680d27d21d0c6daa84df58977b680b7f3\",\n \"description\": \"Create a new MUD project\",\n \"license\": \"MIT\",\n \"author\": \"Lattice <mud@lattice.xyz>\",\n \"type\": \"module\",\n \"bin\": \"bin/cli.js\",\n \"files\": [\n \"bin\",\n \"dist\",\n \"templates\"\n ],\n \"scripts\": {\n \"build\": \"pnpm run build:js\",\n \"build:js\": \"tsup && pnpm run copy-templates\",\n \"clean\": \"pnpm run clean:js\",\n \"clean:js\": \"shx rm -rf dist\",\n \"copy-templates\": \"tsx ./scripts/copy-templates.ts\",\n \"dev\": \"tsup --watch\",\n \"prepublishOnly\": \"npm run clean && npm run build\",\n \"test\": \"pnpm run copy-templates && pnpm vitest --run && 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\": \"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:react\": \"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:react-ecs\": \"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:threejs\": \"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project\",\n \"test:vanilla\": \"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project\"\n },\n \"dependencies\": {\n \"fast-glob\": \"^3.3.3\",\n \"yargs-interactive\": \"^3.0.1\"\n },\n \"devDependencies\": {\n \"@types/yargs-interactive\": \"^2.1.6\",\n \"execa\": \"^7.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\",\n \"registry\": \"https://registry.npmjs.org\"\n }\n}\n","// We define these here to keep them in the order we want to present in the CLI.\n// Tests will ensure this list stays up to date.\nexport const templates = [\"react\", \"react-ecs\", \"phaser\", \"threejs\", \"vanilla\"];\n","import fs from \"node:fs/promises\";\n\nexport async function exists(path: string) {\n try {\n await fs.access(path);\n return true;\n } catch {\n return false;\n }\n}\n"],"mappings":"AAAA,OAAOA,MAAQ,mBACf,OAAOC,MAAU,YACjB,OAAS,iBAAAC,MAAqB,WAC9B,OAAOC,MAAsB,oBAC7B,OAAOC,MAAU,YCJjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,KAAQ,SACR,IAAO,aACP,MAAS,CACP,MACA,OACA,WACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,kCACZ,MAAS,oBACT,WAAY,kBACZ,iBAAkB,kCAClB,IAAO,eACP,eAAkB,iCAClB,KAAQ,2KACR,UAAW,gBACX,cAAe,iHACf,aAAc,gHACd,iBAAkB,oHAClB,eAAgB,kHAChB,eAAgB,iHAClB,EACA,aAAgB,CACd,YAAa,SACb,oBAAqB,QACvB,EACA,gBAAmB,CACjB,2BAA4B,SAC5B,MAAS,QACX,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,ECvCO,IAAMC,EAAY,CAAC,QAAS,YAAa,SAAU,UAAW,SAAS,ECF9E,OAAOC,MAAQ,mBAEf,eAAsBC,EAAOC,EAAc,CACzC,GAAI,CACF,aAAMF,EAAG,OAAOE,CAAI,EACb,EACT,MAAQ,CACN,MAAO,EACT,CACF,CHAA,IAAMC,EAAaC,EAAc,YAAY,GAAG,EAC1CC,EAAYC,EAAK,QAAQH,CAAU,EAEzC,eAAeI,GAAM,CACnBC,EAAiB,EACd,MAAM,WAAW,EACjB,YAAY,CACX,YAAa,CAAE,QAAS,EAAK,EAC7B,KAAM,CACJ,SAAU,oBACV,KAAM,OACR,EACA,SAAU,CACR,SAAU,kBACV,KAAM,OACN,QAASC,CACX,EACA,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CAAC,EACA,KAAK,MAAOC,GAAS,CACpB,GAAI,CAACA,EAAK,KAAM,MAAM,IAAI,MAAM,2BAA2B,EAE3D,IAAMC,EAAUN,EAAK,KAAK,QAAQ,IAAI,EAAGK,EAAK,IAAI,EAClD,GAAI,MAAME,EAAOD,CAAO,EACtB,MAAM,IAAI,MAAM,qBAAqBA,CAAO,mBAAmB,EAGjE,IAAME,EAAYR,EAAK,KAAKD,EAAW,KAAM,YAAaM,EAAK,QAAQ,EACjEI,EAAQ,MAAMC,EAAK,OAAQ,CAAE,IAAKF,EAAW,IAAK,EAAK,CAAC,EAE9D,QAAWG,KAAYF,EAAO,CAC5B,IAAMG,EAAaZ,EAAK,KAAKQ,EAAWG,CAAQ,EAC1CE,EAAWb,EAAK,KAAKM,EAASK,CAAQ,EAI5C,GAFA,MAAMG,EAAG,MAAMd,EAAK,QAAQa,CAAQ,EAAG,CAAE,UAAW,EAAK,CAAC,EAEtD,iBAAiB,KAAKD,CAAU,EAAG,CACrC,IAAMG,EAAS,MAAMD,EAAG,SAASF,EAAY,OAAO,EACpD,MAAME,EAAG,UAAUD,EAAUE,EAAO,WAAW,mBAAoBV,EAAK,UAAU,EAAG,OAAO,CAC9F,KAAW,gBAAgB,KAAKO,CAAU,EACxC,MAAME,EAAG,SAASF,EAAYC,EAAS,QAAQ,KAAM,EAAE,CAAC,EAExD,MAAMC,EAAG,SAASF,EAAYC,CAAQ,CAE1C,CAEA,QAAQ,IAAI;AAAA;AAAA;AAAA,OAGXR,EAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,CAKf,CACG,CAAC,CACL,CAEAJ,EAAI","names":["fs","path","fileURLToPath","yargsInteractive","glob","package_default","templates","fs","exists","path","__filename","fileURLToPath","__dirname","path","run","yargsInteractive","templates","package_default","args","destDir","exists","sourceDir","files","glob","filename","sourceFile","destFile","fs","source"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-mud",
3
- "version": "2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242",
3
+ "version": "2.2.17-923ab7f680d27d21d0c6daa84df58977b680b7f3",
4
4
  "description": "Create a new MUD project",
5
5
  "license": "MIT",
6
6
  "author": "Lattice <mud@lattice.xyz>",
@@ -0,0 +1,7 @@
1
+ node_modules
2
+
3
+ # mud artifacts
4
+ .mud
5
+ # sqlite indexer data
6
+ *.db
7
+ *.db-journal
File without changes
@@ -0,0 +1,3 @@
1
+ node_modules
2
+ dist
3
+ .DS_Store
@@ -0,0 +1,9 @@
1
+ out/
2
+ cache/
3
+ node_modules/
4
+ bindings/
5
+ artifacts/
6
+ broadcast/
7
+
8
+ # Ignore MUD deploy artifacts
9
+ deploys/**/*.json
@@ -0,0 +1,16 @@
1
+ .DS_Store
2
+ logs
3
+ *.log
4
+
5
+ node_modules
6
+
7
+ .env.*
8
+
9
+ # foundry
10
+ cache
11
+ broadcast
12
+ out/*
13
+ !out/IWorld.sol
14
+ out/IWorld.sol/*
15
+ !out/IWorld.sol/IWorld.abi.json
16
+ !out/IWorld.sol/IWorld.abi.d.json.ts
@@ -1,3 +1,4 @@
1
+ scrollback: 10000
1
2
  procs:
2
3
  client:
3
4
  cwd: packages/client
@@ -5,9 +6,16 @@ procs:
5
6
  contracts:
6
7
  cwd: packages/contracts
7
8
  shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545
9
+ deploy-prereqs:
10
+ cwd: packages/contracts
11
+ shell: pnpm deploy-local-prereqs
12
+ env:
13
+ DEBUG: "mud:*"
14
+ # Anvil default account (0x70997970C51812dc3A010C7d01b50e0d17dc79C8)
15
+ PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
8
16
  anvil:
9
17
  cwd: packages/contracts
10
- shell: anvil --base-fee 0 --block-time 2
18
+ shell: anvil --block-time 2
11
19
  explorer:
12
20
  cwd: packages/contracts
13
21
  shell: pnpm explorer
@@ -1,9 +1,9 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>a minimal MUD client</title>
6
+ <title>a MUD app</title>
7
7
  </head>
8
8
  <body>
9
9
  <div id="react-root"></div>
@@ -6,31 +6,39 @@
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "build": "vite build",
9
- "dev": "wait-port localhost:8545 && vite",
9
+ "dev": "vite",
10
10
  "preview": "vite preview",
11
11
  "test": "tsc --noEmit"
12
12
  },
13
13
  "dependencies": {
14
14
  "@latticexyz/common": "{{mud-version}}",
15
- "@latticexyz/dev-tools": "{{mud-version}}",
15
+ "@latticexyz/entrykit": "{{mud-version}}",
16
+ "@latticexyz/explorer": "{{mud-version}}",
16
17
  "@latticexyz/react": "{{mud-version}}",
17
18
  "@latticexyz/schema-type": "{{mud-version}}",
19
+ "@latticexyz/stash": "{{mud-version}}",
18
20
  "@latticexyz/store-sync": "{{mud-version}}",
19
21
  "@latticexyz/utils": "{{mud-version}}",
20
22
  "@latticexyz/world": "{{mud-version}}",
23
+ "@tanstack/react-query": "^5.63.0",
21
24
  "contracts": "workspace:*",
22
- "react": "^18.2.0",
23
- "react-dom": "^18.2.0",
24
- "rxjs": "7.5.5",
25
- "viem": "2.21.19"
25
+ "react": "18.2.0",
26
+ "react-dom": "18.2.0",
27
+ "react-error-boundary": "5.0.0",
28
+ "tailwind-merge": "^2.6.0",
29
+ "viem": "2.21.19",
30
+ "wagmi": "2.12.11"
26
31
  },
27
32
  "devDependencies": {
28
33
  "@types/react": "18.2.22",
29
34
  "@types/react-dom": "18.2.7",
30
- "@vitejs/plugin-react": "^3.1.0",
35
+ "@vitejs/plugin-react": "^4.3.4",
36
+ "autoprefixer": "^10.4.20",
31
37
  "eslint-plugin-react": "7.31.11",
32
38
  "eslint-plugin-react-hooks": "4.6.0",
33
- "vite": "^4.2.1",
34
- "wait-port": "^1.0.4"
39
+ "postcss": "^8.4.49",
40
+ "tailwindcss": "^3.4.17",
41
+ "vite": "^6.0.7",
42
+ "vite-plugin-mud": "{{mud-version}}"
35
43
  }
36
44
  }
@@ -0,0 +1,6 @@
1
+ module.exports = {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ };
@@ -1,105 +1,46 @@
1
- import { useMUD } from "./MUDContext";
2
-
3
- const styleUnset = { all: "unset" } as const;
4
-
5
- export const App = () => {
6
- const {
7
- network: { tables, useStore },
8
- systemCalls: { addTask, toggleTask, deleteTask },
9
- } = useMUD();
10
-
11
- const tasks = useStore((state) => {
12
- const records = Object.values(state.getRecords(tables.Tasks));
13
- records.sort((a, b) => Number(a.value.createdAt - b.value.createdAt));
14
- return records;
15
- });
1
+ import { stash } from "./mud/stash";
2
+ import { useRecords } from "@latticexyz/stash/react";
3
+ import { AccountButton } from "@latticexyz/entrykit/internal";
4
+ import { Direction } from "./common";
5
+ import mudConfig from "contracts/mud.config";
6
+ import { useMemo } from "react";
7
+ import { GameMap } from "./game/GameMap";
8
+ import { useWorldContract } from "./mud/useWorldContract";
9
+ import { Synced } from "./mud/Synced";
10
+ import { useSync } from "@latticexyz/store-sync/react";
11
+
12
+ export function App() {
13
+ const players = useRecords({ stash, table: mudConfig.tables.app__Position });
14
+
15
+ const sync = useSync();
16
+ const worldContract = useWorldContract();
17
+ const onMove = useMemo(
18
+ () =>
19
+ sync.data && worldContract
20
+ ? async (direction: Direction) => {
21
+ const tx = await worldContract.write.app__move([mudConfig.enums.Direction.indexOf(direction)]);
22
+ await sync.data.waitForTransaction(tx);
23
+ }
24
+ : undefined,
25
+ [sync.data, worldContract],
26
+ );
16
27
 
17
28
  return (
18
29
  <>
19
- <table>
20
- <tbody>
21
- {tasks.map((task) => (
22
- <tr key={task.id}>
23
- <td align="right">
24
- <input
25
- type="checkbox"
26
- checked={task.value.completedAt > 0n}
27
- title={task.value.completedAt === 0n ? "Mark task as completed" : "Mark task as incomplete"}
28
- onChange={async (event) => {
29
- event.preventDefault();
30
- const checkbox = event.currentTarget;
31
-
32
- checkbox.disabled = true;
33
- try {
34
- await toggleTask(task.key.id);
35
- } finally {
36
- checkbox.disabled = false;
37
- }
38
- }}
39
- />
40
- </td>
41
- <td>{task.value.completedAt > 0n ? <s>{task.value.description}</s> : <>{task.value.description}</>}</td>
42
- <td align="right">
43
- <button
44
- type="button"
45
- title="Delete task"
46
- style={styleUnset}
47
- onClick={async (event) => {
48
- event.preventDefault();
49
- if (!window.confirm("Are you sure you want to delete this task?")) return;
50
-
51
- const button = event.currentTarget;
52
- button.disabled = true;
53
- try {
54
- await deleteTask(task.key.id);
55
- } finally {
56
- button.disabled = false;
57
- }
58
- }}
59
- >
60
- &times;
61
- </button>
62
- </td>
63
- </tr>
64
- ))}
65
- </tbody>
66
- <tfoot>
67
- <tr>
68
- <td>
69
- <input type="checkbox" disabled />
70
- </td>
71
- <td colSpan={2}>
72
- <form
73
- onSubmit={async (event) => {
74
- event.preventDefault();
75
- const form = event.currentTarget;
76
- const fieldset = form.querySelector("fieldset");
77
- if (!(fieldset instanceof HTMLFieldSetElement)) return;
78
-
79
- const formData = new FormData(form);
80
- const desc = formData.get("description");
81
- if (typeof desc !== "string") return;
82
-
83
- fieldset.disabled = true;
84
- try {
85
- await addTask(desc);
86
- form.reset();
87
- } finally {
88
- fieldset.disabled = false;
89
- }
90
- }}
91
- >
92
- <fieldset style={styleUnset}>
93
- <input type="text" name="description" />{" "}
94
- <button type="submit" title="Add task">
95
- Add
96
- </button>
97
- </fieldset>
98
- </form>
99
- </td>
100
- </tr>
101
- </tfoot>
102
- </table>
30
+ <div className="fixed inset-0 grid place-items-center p-4">
31
+ <Synced
32
+ fallback={({ message, percentage }) => (
33
+ <div className="tabular-nums">
34
+ {message} ({percentage.toFixed(1)}%)…
35
+ </div>
36
+ )}
37
+ >
38
+ <GameMap players={players} onMove={onMove} />
39
+ </Synced>
40
+ </div>
41
+ <div className="fixed top-2 right-2">
42
+ <AccountButton />
43
+ </div>
103
44
  </>
104
45
  );
105
- };
46
+ }
@@ -0,0 +1,35 @@
1
+ import { WagmiProvider } from "wagmi";
2
+ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
3
+ import { ReactNode } from "react";
4
+ import { createSyncAdapter } from "@latticexyz/store-sync/internal";
5
+ import { SyncProvider } from "@latticexyz/store-sync/react";
6
+ import { stash } from "./mud/stash";
7
+ import { defineConfig, EntryKitProvider } from "@latticexyz/entrykit/internal";
8
+ import { wagmiConfig } from "./wagmiConfig";
9
+ import { chainId, getWorldAddress, startBlock } from "./common";
10
+
11
+ const queryClient = new QueryClient();
12
+
13
+ export type Props = {
14
+ children: ReactNode;
15
+ };
16
+
17
+ export function Providers({ children }: Props) {
18
+ const worldAddress = getWorldAddress();
19
+ return (
20
+ <WagmiProvider config={wagmiConfig}>
21
+ <QueryClientProvider client={queryClient}>
22
+ <EntryKitProvider config={defineConfig({ chainId, worldAddress })}>
23
+ <SyncProvider
24
+ chainId={chainId}
25
+ address={worldAddress}
26
+ startBlock={startBlock}
27
+ adapter={createSyncAdapter({ stash })}
28
+ >
29
+ {children}
30
+ </SyncProvider>
31
+ </EntryKitProvider>
32
+ </QueryClientProvider>
33
+ </WagmiProvider>
34
+ );
35
+ }
@@ -0,0 +1,26 @@
1
+ import mudConfig from "contracts/mud.config";
2
+ import { chains } from "./wagmiConfig";
3
+ import { Chain } from "viem";
4
+
5
+ export const chainId = import.meta.env.CHAIN_ID;
6
+ export const worldAddress = import.meta.env.WORLD_ADDRESS;
7
+ export const startBlock = import.meta.env.START_BLOCK;
8
+
9
+ export const url = new URL(window.location.href);
10
+
11
+ export type Direction = (typeof mudConfig.enums.Direction)[number];
12
+
13
+ export function getWorldAddress() {
14
+ if (!worldAddress) {
15
+ throw new Error("No world address configured. Is the world still deploying?");
16
+ }
17
+ return worldAddress;
18
+ }
19
+
20
+ export function getChain(): Chain {
21
+ const chain = chains.find((c) => c.id === chainId);
22
+ if (!chain) {
23
+ throw new Error(`No chain configured for chain ID ${chainId}.`);
24
+ }
25
+ return chain;
26
+ }
@@ -0,0 +1,102 @@
1
+ import { serialize, useAccount } from "wagmi";
2
+ import { useKeyboardMovement } from "./useKeyboardMovement";
3
+ import { Address, Hex, hexToBigInt, keccak256 } from "viem";
4
+ import { ArrowDownIcon } from "../ui/icons/ArrowDownIcon";
5
+ import { twMerge } from "tailwind-merge";
6
+ import { Direction } from "../common";
7
+ import mudConfig from "contracts/mud.config";
8
+ import { AsyncButton } from "../ui/AsyncButton";
9
+ import { useAccountModal } from "@latticexyz/entrykit/internal";
10
+
11
+ export type Props = {
12
+ readonly players?: readonly {
13
+ readonly player: Address;
14
+ readonly x: number;
15
+ readonly y: number;
16
+ }[];
17
+
18
+ readonly onMove?: (direction: Direction) => Promise<void>;
19
+ };
20
+
21
+ const size = 40;
22
+ const scale = 100 / size;
23
+
24
+ function getColorAngle(seed: Hex) {
25
+ return Number(hexToBigInt(keccak256(seed)) % 360n);
26
+ }
27
+
28
+ const rotateClassName = {
29
+ North: "rotate-0",
30
+ East: "rotate-90",
31
+ South: "rotate-180",
32
+ West: "-rotate-90",
33
+ } as const satisfies Record<Direction, `${"" | "-"}rotate-${number}`>;
34
+
35
+ export function GameMap({ players = [], onMove }: Props) {
36
+ const { openAccountModal } = useAccountModal();
37
+ const { address: userAddress } = useAccount();
38
+ const currentPlayer = players.find((player) => player.player.toLowerCase() === userAddress?.toLowerCase());
39
+ useKeyboardMovement(onMove);
40
+ return (
41
+ <div className="aspect-square w-full max-w-[40rem]">
42
+ <div className="relative w-full h-full border-8 border-black/10">
43
+ {onMove
44
+ ? mudConfig.enums.Direction.map((direction) => (
45
+ <button
46
+ key={direction}
47
+ title={`Move ${direction.toLowerCase()}`}
48
+ className={twMerge(
49
+ "outline-0 absolute inset-0 cursor-pointer grid p-4",
50
+ rotateClassName[direction],
51
+ "transition bg-gradient-to-t from-transparent via-transparent to-blue-50 text-blue-400 opacity-0 hover:opacity-40 active:opacity-100",
52
+ )}
53
+ style={{ clipPath: "polygon(0% 0%, 100% 0%, 50% 50%)" }}
54
+ onClick={() => onMove(direction)}
55
+ >
56
+ <ArrowDownIcon className="rotate-180 text-4xl self-start justify-self-center" />
57
+ </button>
58
+ ))
59
+ : null}
60
+
61
+ {players.map((player) => (
62
+ <div
63
+ key={player.player}
64
+ className="absolute bg-current"
65
+ style={{
66
+ color: `hwb(${getColorAngle(player.player)} 40% 20%)`,
67
+ width: `${scale}%`,
68
+ height: `${scale}%`,
69
+ left: `${((((player.x + size / 2) % size) + size) % size) * scale}%`,
70
+ top: `${((size - ((player.y + size / 2) % size)) % size) * scale}%`,
71
+ }}
72
+ title={serialize(player, null, 2)}
73
+ >
74
+ {player === currentPlayer ? <div className="w-full h-full bg-current animate-ping opacity-50" /> : null}
75
+ </div>
76
+ ))}
77
+
78
+ {!currentPlayer ? (
79
+ onMove ? (
80
+ <div className="absolute inset-0 grid place-items-center">
81
+ <AsyncButton
82
+ 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"
83
+ onClick={() => onMove("North")}
84
+ >
85
+ Spawn<span className="hidden group-aria-busy:inline">ing…</span>
86
+ </AsyncButton>
87
+ </div>
88
+ ) : (
89
+ <div className="absolute inset-0 grid place-items-center">
90
+ <button
91
+ 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"
92
+ onClick={openAccountModal}
93
+ >
94
+ Sign in to play
95
+ </button>
96
+ </div>
97
+ )
98
+ ) : null}
99
+ </div>
100
+ </div>
101
+ );
102
+ }
@@ -0,0 +1,26 @@
1
+ import { useEffect } from "react";
2
+ import { Direction } from "../common";
3
+
4
+ const keys = new Map<KeyboardEvent["key"], Direction>([
5
+ ["ArrowUp", "North"],
6
+ ["ArrowRight", "East"],
7
+ ["ArrowDown", "South"],
8
+ ["ArrowLeft", "West"],
9
+ ]);
10
+
11
+ export const useKeyboardMovement = (move: undefined | ((direction: Direction) => void)) => {
12
+ useEffect(() => {
13
+ if (!move) return;
14
+
15
+ const listener = (event: KeyboardEvent) => {
16
+ const direction = keys.get(event.key);
17
+ if (direction == null) return;
18
+
19
+ event.preventDefault();
20
+ move(direction);
21
+ };
22
+
23
+ window.addEventListener("keydown", listener);
24
+ return () => window.removeEventListener("keydown", listener);
25
+ }, [move]);
26
+ };
@@ -1,34 +1,19 @@
1
- import ReactDOM from "react-dom/client";
1
+ import "tailwindcss/tailwind.css";
2
+ import { StrictMode } from "react";
3
+ import { createRoot } from "react-dom/client";
4
+ import { Providers } from "./Providers";
2
5
  import { App } from "./App";
3
- import { setup } from "./mud/setup";
4
- import { MUDProvider } from "./MUDContext";
5
- import mudConfig from "contracts/mud.config";
6
+ import { Explorer } from "./mud/Explorer";
7
+ import { ErrorBoundary } from "react-error-boundary";
8
+ import { ErrorFallback } from "./ui/ErrorFallback";
6
9
 
7
- const rootElement = document.getElementById("react-root");
8
- if (!rootElement) throw new Error("React root not found");
9
- const root = ReactDOM.createRoot(rootElement);
10
-
11
- // TODO: figure out if we actually want this to be async or if we should render something else in the meantime
12
- setup().then(async (result) => {
13
- root.render(
14
- <MUDProvider value={result}>
15
- <App />
16
- </MUDProvider>,
17
- );
18
-
19
- // https://vitejs.dev/guide/env-and-mode.html
20
- if (import.meta.env.DEV) {
21
- const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
22
- mountDevTools({
23
- config: mudConfig,
24
- publicClient: result.network.publicClient,
25
- walletClient: result.network.walletClient,
26
- latestBlock$: result.network.latestBlock$,
27
- storedBlockLogs$: result.network.storedBlockLogs$,
28
- worldAddress: result.network.worldContract.address,
29
- worldAbi: result.network.worldContract.abi,
30
- write$: result.network.write$,
31
- useStore: result.network.useStore,
32
- });
33
- }
34
- });
10
+ createRoot(document.getElementById("react-root")!).render(
11
+ <StrictMode>
12
+ <ErrorBoundary FallbackComponent={ErrorFallback}>
13
+ <Providers>
14
+ <App />
15
+ <Explorer />
16
+ </Providers>
17
+ </ErrorBoundary>
18
+ </StrictMode>,
19
+ );
@@ -0,0 +1,32 @@
1
+ import { useState } from "react";
2
+ import { getChain, getWorldAddress } from "../common";
3
+ import { MUDIcon } from "../ui/icons/MUDIcon";
4
+
5
+ export function Explorer() {
6
+ const [open, setOpen] = useState(false);
7
+
8
+ const chain = getChain();
9
+ const worldAddress = getWorldAddress();
10
+
11
+ const explorerUrl = chain.blockExplorers?.worldsExplorer?.url;
12
+ if (!explorerUrl) return null;
13
+
14
+ return (
15
+ <div className="fixed bottom-0 inset-x-0 flex flex-col opacity-80 transition hover:opacity-100">
16
+ <button
17
+ type="button"
18
+ onClick={() => setOpen(!open)}
19
+ className="outline-none flex justify-end gap-2 p-2 font-medium leading-none text-black"
20
+ >
21
+ {open ? (
22
+ <>Close</>
23
+ ) : (
24
+ <>
25
+ Explore <MUDIcon className="text-orange-500" />
26
+ </>
27
+ )}
28
+ </button>
29
+ {open ? <iframe src={`${explorerUrl}/${worldAddress}`} className="bg-black h-[50vh]" /> : null}
30
+ </div>
31
+ );
32
+ }