create-mud 2.0.1 → 2.0.2-main-f2bc5409
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.
package/dist/cli.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
"use strict";var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.
|
|
2
|
+
"use strict";var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.2-main-f2bc5409",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 && ./scripts/copy-templates.sh",clean:"pnpm run clean:js","clean:js":"rimraf 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 && rimraf test-project","test:react":"dist/cli.js test-project --template react && rimraf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && rimraf test-project","test:threejs":"dist/cli.js test-project --template threejs && rimraf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && rimraf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var c=(0,s.resolve)(__dirname,"..","dist","templates");(0,t.create)("create-mud",{templateRoot:c,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:r,packageManager:a})=>`Done! Play in the MUD with \`cd ${r.name}\` and \`${a} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:e.version}}});
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@latticexyz/store-sync": "{{mud-version}}",
|
|
21
21
|
"@latticexyz/utils": "{{mud-version}}",
|
|
22
22
|
"@latticexyz/world": "{{mud-version}}",
|
|
23
|
-
"@react-three/fiber": "^8.
|
|
23
|
+
"@react-three/fiber": "^8.15.19",
|
|
24
24
|
"contracts": "workspace:*",
|
|
25
25
|
"react": "^18.2.0",
|
|
26
26
|
"react-dom": "^18.2.0",
|
|
@@ -1,27 +1,84 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable react/no-unknown-property */
|
|
2
|
+
// Workaround react-three-fiber types by disabling unknown properties:
|
|
3
|
+
// https://github.com/pmndrs/react-three-fiber/discussions/2487
|
|
4
|
+
|
|
2
5
|
import { Canvas, Color, ThreeElements, useThree } from "@react-three/fiber";
|
|
3
6
|
import { useComponentValue, useEntityQuery } from "@latticexyz/react";
|
|
4
7
|
import { getComponentValueStrict, Has } from "@latticexyz/recs";
|
|
5
8
|
import { useMUD } from "./MUDContext";
|
|
6
9
|
import { useKeyboardMovement } from "./useKeyboardMovement";
|
|
7
10
|
|
|
8
|
-
const
|
|
11
|
+
const headerStyle = { backgroundColor: "black", color: "white" };
|
|
12
|
+
const cellStyle = { padding: 20 };
|
|
13
|
+
|
|
14
|
+
const Plane = () => {
|
|
9
15
|
return (
|
|
10
|
-
|
|
11
|
-
{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
<>
|
|
17
|
+
<mesh position={[0, -1, 0]}>
|
|
18
|
+
<boxGeometry args={[20, 0.1, 20]} />
|
|
19
|
+
<meshStandardMaterial color="#000" opacity="0.9" transparent />
|
|
20
|
+
</mesh>
|
|
21
|
+
|
|
22
|
+
<mesh position={[0, 3, -10]}>
|
|
23
|
+
<boxGeometry args={[20, 5, 0.1]} />
|
|
24
|
+
<meshStandardMaterial color="#F00" opacity="0.5" transparent />
|
|
25
|
+
</mesh>
|
|
26
|
+
|
|
27
|
+
<mesh position={[10, 3, 0]}>
|
|
28
|
+
<boxGeometry args={[0.1, 5, 20]} />
|
|
29
|
+
<meshStandardMaterial color="#0F0" opacity="0.5" transparent />
|
|
30
|
+
</mesh>
|
|
31
|
+
|
|
32
|
+
<mesh position={[5, 2, 0]}>
|
|
33
|
+
<sphereGeometry args={[2, 10, 10]} />
|
|
34
|
+
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
|
|
35
|
+
</mesh>
|
|
36
|
+
|
|
37
|
+
<mesh position={[0, 2, 5]}>
|
|
38
|
+
<sphereGeometry args={[2, 10, 10]} />
|
|
39
|
+
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
|
|
40
|
+
</mesh>
|
|
41
|
+
|
|
42
|
+
<mesh position={[-5, 2, 0]}>
|
|
43
|
+
<sphereGeometry args={[2, 10, 10]} />
|
|
44
|
+
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
|
|
45
|
+
</mesh>
|
|
46
|
+
|
|
47
|
+
<mesh position={[0, 2, -5]}>
|
|
48
|
+
<sphereGeometry args={[2, 10, 10]} />
|
|
49
|
+
<meshStandardMaterial color="#FF0" opacity="0.8" transparent />
|
|
50
|
+
</mesh>
|
|
51
|
+
|
|
52
|
+
<mesh position={[5, 2, -5]}>
|
|
53
|
+
<sphereGeometry args={[1, 10, 10]} />
|
|
54
|
+
<meshStandardMaterial color="#008" opacity="0.8" transparent />
|
|
55
|
+
</mesh>
|
|
56
|
+
|
|
57
|
+
<mesh position={[5, 2, 5]}>
|
|
58
|
+
<sphereGeometry args={[1, 10, 10]} />
|
|
59
|
+
<meshStandardMaterial color="#008" opacity="0.8" transparent />
|
|
60
|
+
</mesh>
|
|
61
|
+
|
|
62
|
+
<mesh position={[-5, 2, -5]}>
|
|
63
|
+
<sphereGeometry args={[1, 10, 10]} />
|
|
64
|
+
<meshStandardMaterial color="#008" opacity="0.8" transparent />
|
|
65
|
+
</mesh>
|
|
66
|
+
</>
|
|
15
67
|
);
|
|
16
68
|
};
|
|
17
69
|
|
|
18
70
|
const Player = (props: ThreeElements["mesh"] & { color: Color }) => {
|
|
19
71
|
return (
|
|
20
|
-
|
|
21
|
-
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
72
|
+
<>
|
|
73
|
+
<mesh {...props}>
|
|
74
|
+
<boxGeometry args={[1, 2, 1]} />
|
|
75
|
+
<meshStandardMaterial color={props.color} />
|
|
76
|
+
</mesh>
|
|
77
|
+
<mesh {...props}>
|
|
78
|
+
<boxGeometry args={[1, 2, 1]} />
|
|
79
|
+
<meshStandardMaterial color={props.color} />
|
|
80
|
+
</mesh>
|
|
81
|
+
</>
|
|
25
82
|
);
|
|
26
83
|
};
|
|
27
84
|
|
|
@@ -58,7 +115,7 @@ const Scene = () => {
|
|
|
58
115
|
<ambientLight />
|
|
59
116
|
{/* eslint-disable-next-line react/no-unknown-property */}
|
|
60
117
|
<pointLight position={[10, 10, 10]} />
|
|
61
|
-
<Plane
|
|
118
|
+
<Plane />
|
|
62
119
|
{players.map((p, i) => (
|
|
63
120
|
<Player
|
|
64
121
|
key={i}
|
|
@@ -72,10 +129,88 @@ const Scene = () => {
|
|
|
72
129
|
|
|
73
130
|
const styles = { height: "100vh" };
|
|
74
131
|
|
|
132
|
+
const Directions = () => {
|
|
133
|
+
return (
|
|
134
|
+
<>
|
|
135
|
+
<p>
|
|
136
|
+
You are the rectangular prism, moving around the scene. To move use <b>W</b>, <b>A</b>, <b>S</b>, and <b>D</b>.
|
|
137
|
+
You can also move up (<b>T</b>) and down (<b>G</b>).
|
|
138
|
+
</p>
|
|
139
|
+
</>
|
|
140
|
+
);
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const PlayerInfo = () => {
|
|
144
|
+
const {
|
|
145
|
+
components: { Position },
|
|
146
|
+
network: { playerEntity },
|
|
147
|
+
} = useMUD();
|
|
148
|
+
|
|
149
|
+
const playerPosition = useComponentValue(Position, playerEntity);
|
|
150
|
+
|
|
151
|
+
if (!playerPosition) {
|
|
152
|
+
return (
|
|
153
|
+
<div style={headerStyle}>
|
|
154
|
+
<table>
|
|
155
|
+
<tbody>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>
|
|
158
|
+
<h2>Reading player position</h2>
|
|
159
|
+
</td>
|
|
160
|
+
<td>
|
|
161
|
+
<Directions />
|
|
162
|
+
</td>
|
|
163
|
+
</tr>
|
|
164
|
+
</tbody>
|
|
165
|
+
</table>
|
|
166
|
+
</div>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<div style={headerStyle}>
|
|
172
|
+
<table>
|
|
173
|
+
<tbody>
|
|
174
|
+
<tr>
|
|
175
|
+
<td>
|
|
176
|
+
<table>
|
|
177
|
+
<tbody>
|
|
178
|
+
<tr>
|
|
179
|
+
<th>Coordinate</th>
|
|
180
|
+
<th>Value</th>
|
|
181
|
+
</tr>
|
|
182
|
+
<tr>
|
|
183
|
+
<th>x</th>
|
|
184
|
+
<td align="right">{playerPosition.x}</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<th>y</th>
|
|
188
|
+
<td align="right">{playerPosition.y}</td>
|
|
189
|
+
</tr>
|
|
190
|
+
<tr>
|
|
191
|
+
<th>z</th>
|
|
192
|
+
<td align="right">{playerPosition.z}</td>
|
|
193
|
+
</tr>
|
|
194
|
+
</tbody>
|
|
195
|
+
</table>
|
|
196
|
+
</td>
|
|
197
|
+
<td style={cellStyle}>
|
|
198
|
+
<Directions />
|
|
199
|
+
</td>
|
|
200
|
+
</tr>
|
|
201
|
+
</tbody>
|
|
202
|
+
</table>
|
|
203
|
+
</div>
|
|
204
|
+
);
|
|
205
|
+
};
|
|
206
|
+
|
|
75
207
|
export const App = () => {
|
|
76
208
|
return (
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
|
|
209
|
+
<>
|
|
210
|
+
<PlayerInfo />
|
|
211
|
+
<Canvas style={styles}>
|
|
212
|
+
<Scene />
|
|
213
|
+
</Canvas>
|
|
214
|
+
</>
|
|
80
215
|
);
|
|
81
216
|
};
|
|
@@ -8,22 +8,22 @@ export const useKeyboardMovement = () => {
|
|
|
8
8
|
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
const listener = (e: KeyboardEvent) => {
|
|
11
|
-
if (e.key === "
|
|
11
|
+
if (e.key === "w") {
|
|
12
12
|
moveBy(1, 0, 0);
|
|
13
13
|
}
|
|
14
|
-
if (e.key === "
|
|
14
|
+
if (e.key === "s") {
|
|
15
15
|
moveBy(-1, 0, 0);
|
|
16
16
|
}
|
|
17
|
-
if (e.key === "
|
|
17
|
+
if (e.key === "a") {
|
|
18
18
|
moveBy(0, 0, -1);
|
|
19
19
|
}
|
|
20
|
-
if (e.key === "
|
|
20
|
+
if (e.key === "d") {
|
|
21
21
|
moveBy(0, 0, 1);
|
|
22
22
|
}
|
|
23
|
-
if (e.key === "
|
|
23
|
+
if (e.key === "t") {
|
|
24
24
|
moveBy(0, 1, 0);
|
|
25
25
|
}
|
|
26
|
-
if (e.
|
|
26
|
+
if (e.key === "g") {
|
|
27
27
|
moveBy(0, -1, 0);
|
|
28
28
|
}
|
|
29
29
|
};
|