feat: sdk example

Author: ponderingdemocritus

examples/clients/react/react-sdk/src/App.tsx

@@ -1,47 +1,8 @@
 import { useEffect, useState } from "react";
 import "./App.css";
-import { init } from "@dojoengine/sdk";
-
+import { ParsedEntity, init } from "@dojoengine/sdk";
 import { dojoConfig } from "../dojoConfig.ts";
-import { Subscription } from "@dojoengine/torii-wasm";
-
-interface Moves {
-    player: string;
-    remaining: number;
-    last_direction: Direction;
-    can_move: boolean;
-}
-
-interface DirectionsAvailable {
-    player: string;
-    directions: Direction[];
-}
-
-interface Position {
-    player: string;
-    vec: Vec2;
-}
-
-enum Direction {
-    None,
-    Left,
-    Right,
-    Up,
-    Down,
-}
-
-interface Vec2 {
-    x: number;
-    y: number;
-}
-
-type Schema = {
-    dojo_starter: {
-        Moves: Moves;
-        DirectionsAvailable: DirectionsAvailable;
-        Position: Position;
-    };
-};
+import { Schema } from "./bindings.ts";
 
 const db = await init<Schema>({
     rpcUrl: dojoConfig.rpcUrl,
@@ -52,13 +13,16 @@ const db = await init<Schema>({
 });
 
 function App() {
+    const [entities, setEntities] = useState<ParsedEntity<Schema>[]>([]);
+
     useEffect(() => {
         let unsubscribe: (() => void) | undefined;
 
         const subscribe = async () => {
             const subscription = await db.subscribeEntityQuery(
                 {
                     dojo_starter: {
+                        Position: true,
                         Moves: true,
                     },
                 },
@@ -68,8 +32,18 @@ function App() {
                             "Error setting up entity sync:",
                             response.error
                         );
-                    } else {
-                        console.log(response);
+                    } else if (
+                        response.data &&
+                        response.data[0].entityId !== "0x0"
+                    ) {
+                        setEntities((prevEntities) => {
+                            return prevEntities.map((entity) => {
+                                const newEntity = response.data?.find(
+                                    (e) => e.entityId === entity.entityId
+                                );
+                                return newEntity ? newEntity : entity;
+                            });
+                        });
                     }
                 }
             );
@@ -82,21 +56,18 @@ function App() {
         return () => {
             if (unsubscribe) {
                 unsubscribe();
-                console.log("Sync unsubscribed");
             }
         };
     }, []);
 
     useEffect(() => {
         const fetchEntities = async () => {
             try {
-                const entities = await db.getEntities(
+                await db.getEntities(
                     {
                         dojo_starter: {
-                            Moves: {
-                                $: {
-                                    where: { last_direction: { $eq: "Left" } },
-                                },
+                            Position: {
+                                $: {},
                             },
                         },
                     },
@@ -109,21 +80,67 @@ function App() {
                             return;
                         }
                         if (resp.data) {
+                            setEntities((prevEntities) => {
+                                const updatedEntities = [...prevEntities];
+                                resp.data?.forEach((newEntity) => {
+                                    const index = updatedEntities.findIndex(
+                                        (entity) =>
+                                            entity.entityId ===
+                                            newEntity.entityId
+                                    );
+                                    if (index !== -1) {
+                                        updatedEntities[index] = newEntity;
+                                    } else {
+                                        updatedEntities.push(newEntity);
+                                    }
+                                });
+                                return updatedEntities;
+                            });
                         }
                     }
                 );
-                // console.log("Queried entities:", entities);
             } catch (error) {
                 console.error("Error querying entities:", error);
             }
         };
 
         fetchEntities();
     }, []);
+
     return (
-        <>
-            <button onClick={() => console.log("s")}></button>
-        </>
+        <div>
+            <h1>Game State</h1>
+            {entities.map((entity) => (
+                <div key={entity.entityId}>
+                    <h2>Entity {entity.entityId}</h2>
+                    <h3>Position</h3>
+                    <p>
+                        Player:{" "}
+                        {entity.models.dojo_starter.Position?.player ?? "N/A"}
+                        <br />
+                        X: {entity.models.dojo_starter.Position?.vec.x ?? "N/A"}
+                        <br />
+                        Y: {entity.models.dojo_starter.Position?.vec.y ?? "N/A"}
+                    </p>
+                    <h3>Moves</h3>
+                    <p>
+                        Player:{" "}
+                        {entity.models.dojo_starter.Moves?.player ?? "N/A"}
+                        <br />
+                        Can Move:{" "}
+                        {entity.models.dojo_starter.Moves?.can_move?.toString() ??
+                            "N/A"}
+                        <br />
+                        Last Direction:{" "}
+                        {entity.models.dojo_starter.Moves?.last_direction ??
+                            "N/A"}
+                        <br />
+                        Remaining:{" "}
+                        {entity.models.dojo_starter.Moves?.remaining ?? "N/A"}
+                    </p>
+                </div>
+            ))}
+        </div>
     );
 }
 

examples/clients/react/react-sdk/src/bindings.ts

@@ -0,0 +1,39 @@
+interface Moves {
+    player: string;
+    remaining: number;
+    last_direction: Direction;
+    can_move: boolean;
+}
+
+interface DirectionsAvailable {
+    player: string;
+    directions: Direction[];
+}
+
+interface Position {
+    player: string;
+    vec: Vec2;
+}
+
+enum Direction {
+    None,
+    Left,
+    Right,
+    Up,
+    Down,
+}
+
+interface Vec2 {
+    x: number;
+    y: number;
+}
+
+type Schema = {
+    dojo_starter: {
+        Moves: Moves;
+        DirectionsAvailable: DirectionsAvailable;
+        Position: Position;
+    };
+};
+export type { Schema, Moves, DirectionsAvailable, Position, Vec2 };
+export { Direction };

packages/sdk/src/index.ts

@@ -7,12 +7,8 @@ import {
 } from "./types";
 import { subscribeEntityQuery } from "./subscribeEntityQuery";
 import { getEntities } from "./getEntities";
-// import { AccountInterface } from "starknet";
-// import {
-//     createWorldProxy,
-//     WorldContracts,
-//     ContractDefinition,
-// } from "./execute";
+
+export * from "./types";
 
 import { subscribeEventQuery } from "./subscribeEventQuery";
 

packages/sdk/src/parseEntities.ts

@@ -1,9 +1,4 @@
-import {
-    SchemaType,
-    QueryType,
-    StandardizedQueryResult,
-    ParsedEntity,
-} from "./types";
+import { SchemaType, StandardizedQueryResult, ParsedEntity } from "./types";
 import * as torii from "@dojoengine/torii-client";
 
 function parseValue(value: torii.Ty): any {
@@ -37,7 +32,6 @@ function parseStruct(
 
 export function parseEntities<T extends SchemaType>(
     entities: torii.Entities,
-    // query?: QueryType<T>,
     options?: { logging?: boolean }
 ): StandardizedQueryResult<T> {
     const result: StandardizedQueryResult<T> = [];