1
1
import { useEffect , useMemo } from "react" ;
2
2
import { SDK , createDojoStore } from "@dojoengine/sdk" ;
3
- import { Schema } from "./bindings.ts" ;
4
-
5
- import { useDojo } from "./useDojo.tsx" ;
6
3
import { getEntityIdFromKeys } from "@dojoengine/utils" ;
7
4
import { addAddressPadding } from "starknet" ;
8
5
6
+ import { Models , Schema } from "./bindings.ts" ;
7
+ import { useDojo } from "./useDojo.tsx" ;
8
+ import useModel from "./useModel.tsx" ;
9
+ import { useSystemCalls } from "./useSystemCalls.ts" ;
10
+
9
11
export const useDojoStore = createDojoStore < Schema > ( ) ;
10
12
11
- function App ( { db } : { db : SDK < Schema > } ) {
13
+ function App ( { sdk } : { sdk : SDK < Schema > } ) {
12
14
const {
13
15
account,
14
16
setup : { client } ,
15
17
} = useDojo ( ) ;
16
18
const state = useDojoStore ( ( state ) => state ) ;
17
19
const entities = useDojoStore ( ( state ) => state . entities ) ;
18
20
21
+ const { spawn } = useSystemCalls ( ) ;
22
+
19
23
const entityId = useMemo (
20
24
( ) => getEntityIdFromKeys ( [ BigInt ( account ?. account . address ) ] ) ,
21
25
[ account ?. account . address ]
@@ -25,7 +29,7 @@ function App({ db }: { db: SDK<Schema> }) {
25
29
let unsubscribe : ( ( ) => void ) | undefined ;
26
30
27
31
const subscribe = async ( ) => {
28
- const subscription = await db . subscribeEntityQuery (
32
+ const subscription = await sdk . subscribeEntityQuery (
29
33
{
30
34
dojo_starter : {
31
35
Moves : {
@@ -39,6 +43,17 @@ function App({ db }: { db: SDK<Schema> }) {
39
43
} ,
40
44
} ,
41
45
} ,
46
+ Position : {
47
+ $ : {
48
+ where : {
49
+ player : {
50
+ $is : addAddressPadding (
51
+ account . account . address
52
+ ) ,
53
+ } ,
54
+ } ,
55
+ } ,
56
+ } ,
42
57
} ,
43
58
} ,
44
59
( response ) => {
@@ -51,7 +66,8 @@ function App({ db }: { db: SDK<Schema> }) {
51
66
response . data &&
52
67
response . data [ 0 ] . entityId !== "0x0"
53
68
) {
54
- state . setEntities ( response . data ) ;
69
+ console . log ( "subscribed" , response . data [ 0 ] ) ;
70
+ state . updateEntity ( response . data [ 0 ] ) ;
55
71
}
56
72
} ,
57
73
{ logging : true }
@@ -67,12 +83,12 @@ function App({ db }: { db: SDK<Schema> }) {
67
83
unsubscribe ( ) ;
68
84
}
69
85
} ;
70
- } , [ db , account ?. account . address ] ) ;
86
+ } , [ sdk , account ?. account . address ] ) ;
71
87
72
88
useEffect ( ( ) => {
73
89
const fetchEntities = async ( ) => {
74
90
try {
75
- await db . getEntities (
91
+ await sdk . getEntities (
76
92
{
77
93
dojo_starter : {
78
94
Moves : {
@@ -107,15 +123,10 @@ function App({ db }: { db: SDK<Schema> }) {
107
123
} ;
108
124
109
125
fetchEntities ( ) ;
110
- } , [ db , account ?. account . address ] ) ;
126
+ } , [ sdk , account ?. account . address ] ) ;
111
127
112
- const position = useMemo ( ( ) => {
113
- return entities [ entityId ] ?. models ?. dojo_starter . Position ;
114
- } , [ entities ] ) ;
115
-
116
- const moves = useMemo ( ( ) => {
117
- return entities [ entityId ] ?. models ?. dojo_starter . Moves ;
118
- } , [ entities ] ) ;
128
+ const moves = useModel ( entityId , Models . Moves ) ;
129
+ const position = useModel ( entityId , Models . Position ) ;
119
130
120
131
return (
121
132
< div className = "bg-black min-h-screen w-full p-4 sm:p-8" >
@@ -165,11 +176,7 @@ function App({ db }: { db: SDK<Schema> }) {
165
176
< div className = "col-start-2" >
166
177
< button
167
178
className = "h-12 w-12 bg-gray-600 rounded-full shadow-md active:shadow-inner active:bg-gray-500 focus:outline-none text-2xl font-bold text-gray-200"
168
- onClick = { async ( ) =>
169
- await client . actions . spawn ( {
170
- account : account . account ,
171
- } )
172
- }
179
+ onClick = { async ( ) => await spawn ( ) }
173
180
>
174
181
+
175
182
</ button >
@@ -217,28 +224,10 @@ function App({ db }: { db: SDK<Schema> }) {
217
224
className = { `${ col } h-12 w-12 bg-gray-600 rounded-full shadow-md active:shadow-inner active:bg-gray-500 focus:outline-none text-2xl font-bold text-gray-200` }
218
225
key = { direction }
219
226
onClick = { async ( ) => {
220
- const condition =
221
- ( direction === "Up" &&
222
- position ?. vec ?. y !==
223
- undefined &&
224
- position . vec . y > 0 ) ||
225
- ( direction === "Left" &&
226
- position ?. vec ?. x !==
227
- undefined &&
228
- position . vec . x > 0 ) ||
229
- direction === "Right" ||
230
- direction === "Down" ;
231
-
232
- if ( ! condition ) {
233
- console . log (
234
- "Reached the borders of the world."
235
- ) ;
236
- } else {
237
- await client . actions . move ( {
238
- account : account . account ,
239
- direction : { type : direction } ,
240
- } ) ;
241
- }
227
+ await client . actions . move ( {
228
+ account : account . account ,
229
+ direction : { type : direction } ,
230
+ } ) ;
242
231
} }
243
232
>
244
233
{ label }
0 commit comments