client work

dojoengine · Nov 10, 2023 · ea4b8f1 · ea4b8f1
1 parent ab22e26
commit ea4b8f1
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 68 deletions.
diff --git a/examples/react-phaser-example/src/dojo/createNetworkLayer.ts b/examples/react-phaser-example/src/dojo/createNetworkLayer.ts
@@ -20,6 +20,14 @@ export const createNetworkLayer = async () => {
                 model: network.contractComponents.RPSType,
                 keys: [i.toString()],
             });
+            models.push({
+                model: network.contractComponents.PlayerID,
+                keys: [i.toString()],
+            });
+            models.push({
+                model: network.contractComponents.Energy,
+                keys: [i.toString()],
+            });
         }
 
         return models;

diff --git a/examples/react-phaser-example/src/dojo/setupNetwork.ts b/examples/react-phaser-example/src/dojo/setupNetwork.ts
@@ -5,7 +5,6 @@ import { Account, num } from "starknet";
 import manifest from "../../../emojiman/target/dev/manifest.json";
 import * as torii from "@dojoengine/torii-client";
 import { createBurner } from "./createBurner";
-import { createSyncManager } from "@dojoengine/react";
 
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 

diff --git a/examples/react-phaser-example/src/phaser/index.ts b/examples/react-phaser-example/src/phaser/index.ts
@@ -20,8 +20,8 @@ export const createPhaserLayer = async (
 
     const { camera } = scenes.Main;
 
-    camera.phaserCamera.setBounds(0, 0, 5000, 5000, true);
-    // camera.phaserCamera.centerOn(1500, 1500);
+    camera.phaserCamera.setBounds(0, 0, 5000, 5000);
+    camera.phaserCamera.centerOn(1500, 1500);
 
     const components = {};
 

diff --git a/examples/react-phaser-example/src/phaser/systems/camera.ts b/examples/react-phaser-example/src/phaser/systems/camera.ts
@@ -0,0 +1,13 @@
+import { PhaserLayer } from "..";
+
+export const camera = (layer: PhaserLayer) => {
+    const {
+        scenes: {
+            Main: {
+                camera: { phaserCamera },
+            },
+        },
+    } = layer;
+
+    phaserCamera.centerOn(0, 0);
+};
diff --git a/examples/react-phaser-example/src/phaser/systems/move.ts b/examples/react-phaser-example/src/phaser/systems/move.ts
@@ -22,47 +22,23 @@ export const move = (layer: PhaserLayer) => {
             Main: { objectPool, camera },
         },
         networkLayer: {
-            components: { Position, RPSType },
+            components: { Position, RPSType, PlayerID },
         },
     } = layer;
 
-    // defineEnterSystem(world, [Has(Position)], ({ entity }: any) => {
-    //     const playerObj = objectPool.get(entity.toString(), "Sprite");
-
-    //     const type = getComponentValue(RPSType, entity.toString() as Entity);
-
-    //     console.log("defineEnterSystem", type?.rps);
-
-    //     let animation = Animations.RockIdle;
-
-    //     switch (type?.rps) {
-    //         case RPSSprites.Rock:
-    //             animation = Animations.RockIdle;
-    //             break;
-    //         case RPSSprites.Paper:
-    //             animation = Animations.PaperIdle;
-    //             break;
-    //         case RPSSprites.Scissors:
-    //             animation = Animations.ScissorsIdle;
-    //             break;
-    //     }
-
-    //     playerObj.setComponent({
-    //         id: "animation",
-    //         once: (sprite: any) => {
-    //             sprite.play(animation);
-    //         },
-    //     });
-    // });
-
-    defineSystem(world, [Has(Position)], ({ entity }: any) => {
-        const playerObj = objectPool.get(entity.toString(), "Sprite");
+    defineEnterSystem(
+        world,
+        [Has(Position), Has(RPSType)],
+        ({ entity }: any) => {
+            const playerObj = objectPool.get(entity.toString(), "Sprite");
 
-        const type = getComponentValue(RPSType, entity.toString() as Entity);
+            const type = getComponentValue(
+                RPSType,
+                entity.toString() as Entity
+            );
 
-        console.log("defineSystem", type);
+            console.log("defineEnterSystem", type);
 
-        if (type?.rps) {
             let animation = Animations.RockIdle;
 
             switch (type?.rps) {
@@ -84,7 +60,7 @@ export const move = (layer: PhaserLayer) => {
                 },
             });
         }
-    });
+    );
 
     defineSystem(world, [Has(Position)], ({ entity }: any) => {
         const position = getComponentValueStrict(

diff --git a/examples/react-phaser-example/src/phaser/systems/registerSystems.ts b/examples/react-phaser-example/src/phaser/systems/registerSystems.ts
@@ -2,9 +2,11 @@ import { PhaserLayer } from "..";
 import { move } from "./move";
 import { controls } from "./controls";
 import { mapSystem } from "./mapSystem";
+import { camera } from "./camera";
 
 export const registerSystems = (layer: PhaserLayer) => {
     move(layer);
     controls(layer);
     mapSystem(layer);
+    camera(layer);
 };
diff --git a/examples/react-phaser-example/src/ui/Spawn.tsx b/examples/react-phaser-example/src/ui/Spawn.tsx
@@ -3,15 +3,39 @@ import { RPSSprites } from "../phaser/config/constants";
 import { ClickWrapper } from "./ClickWrapper";
 import { Button } from "../components/ui/button";
 import { useUIStore } from "../store/store";
+import { useEffect } from "react";
 
 export const Spawn = () => {
     const setLoggedIn = useUIStore((state: any) => state.setLoggedIn);
     const {
-        account: { account, create, isDeploying, select, list, clear },
+        account: { account },
         systemCalls: { spawn },
-        networkLayer: { sync },
     } = useDojo();
 
+    // useEffect(() => {
+    //     if (isDeploying) {
+    //         return;
+    //     }
+
+    //     if (account) {
+    //         return;
+    //     }
+
+    //     (async () => {
+    //         const accounts = await list();
+
+    //         if (accounts.length === 0) {
+    //             await create();
+    //         } else {
+    //             await select(accounts[0].address);
+    //         }
+    //     })();
+    // }, [account]);
+
+    if (!account) {
+        return <div>Deploying...</div>;
+    }
+
     return (
         <ClickWrapper>
             <div className="flex space-x-3 justify-between p-2 flex-wrap">
@@ -24,7 +48,9 @@ export const Spawn = () => {
                                 onClick={async () => {
                                     await spawn({
                                         signer: account,
-                                        rps: RPSSprites[key],
+                                        rps: RPSSprites[
+                                            key as keyof typeof RPSSprites
+                                        ],
                                     });
 
                                     setLoggedIn();

diff --git a/examples/react-phaser-example/src/ui/WalletConnect.tsx b/examples/react-phaser-example/src/ui/WalletConnect.tsx
@@ -1,36 +1,10 @@
-import { shortenHex } from "@dojoengine/utils";
-import { useDojo } from "../hooks/useDojo";
 import { ClickWrapper } from "./ClickWrapper";
-import { Button } from "../components/ui/button";
 import { Spawn } from "./Spawn";
 
 export const WalletConnect = () => {
-    const {
-        account: { create, isDeploying, select, list, clear },
-    } = useDojo();
-
     return (
         <ClickWrapper>
             <div className="flex space-x-3 justify-between p-2 flex-wrap">
-                <div className="flex w-full">
-                    {/* <Button onClick={create}>
-                        {isDeploying ? "deploying burner" : "create burner"}
-                    </Button> */}
-                    {/* <Button onClick={clear}>clear burners</Button> */}
-                </div>
-
-                {/* <div className=" text-black w-full flex space-x-3">
-                    <div className="text-white">signer: </div>
-                    <select onChange={(e) => select(e.target.value)}>
-                        {list().map((account, index) => {
-                            return (
-                                <option value={account.address} key={index}>
-                                    {shortenHex(account.address)}
-                                </option>
-                            );
-                        })}
-                    </select>
-                </div> */}
                 <div>
                     <Spawn />
                 </div>