updates burners, updates phaser example

dojoengine · Nov 8, 2023 · 7853b8a · 7853b8a
1 parent c932062
commit 7853b8a
Show file tree

Hide file tree

Showing 24 changed files with 542 additions and 174 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/examples/react-phaser-example/package.json b/examples/react-phaser-example/package.json
@@ -1,57 +1,60 @@
 {
-    "name": "react-phaser-example",
-    "private": true,
-    "version": "0.1.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-        "preview": "vite preview",
-        "codegen": "graphql-codegen",
-        "components": "npx @dojoengine/core ../dojo-starter/target/dev/manifest.json src/dojo/contractComponents.ts http://localhost:5050 0x534692277764b04cfc469858891b825c799d1da550d2509fdd5be2f32abdaa0"
-    },
-    "dependencies": {
-        "@dojoengine/core": "link:dojo-packages/packages/core",
-        "@dojoengine/create-burner": "link:dojo-packages/packages/create-burner",
-        "@dojoengine/torii-client": "link:dojo-packages/packages/torii-client",
-        "@dojoengine/utils": "link:dojo-packages/packages/utils",
-        "@dojoengine/react": "link:dojo-packages/packages/react",
-        "@dojoengine/recs": "0.1.35",
-        "@latticexyz/utils": "^2.0.0-next.11",
-        "@latticexyz/phaserx": "^2.0.0-next.11",
-        "ethers": "^5.7.2",
-        "events": "^3.3.0",
-        "graphql": "^16.7.1",
-        "graphql-request": "^6.1.0",
-        "mobx": "^6.9.0",
-        "phaser": "3.60.0-beta.14",
-        "proxy-deep": "^3.1.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "rxjs": "^7.8.1",
-        "simplex-noise": "^4.0.1",
-        "starknet": "^5.19.5",
-        "styled-components": "^6.0.7",
-        "zustand": "^4.4.1",
-        "vite-plugin-top-level-await": "^1.3.1",
-        "vite-plugin-wasm": "^3.2.2"
-    },
-    "devDependencies": {
-        "@graphql-codegen/cli": "^5.0.0",
-        "@graphql-codegen/typescript": "^4.0.1",
-        "@graphql-codegen/typescript-graphql-request": "^5.0.0",
-        "@graphql-codegen/typescript-operations": "^4.0.1",
-        "@types/node": "^20.4.8",
-        "@types/react": "^18.0.37",
-        "@types/react-dom": "^18.0.11",
-        "@typescript-eslint/eslint-plugin": "^5.59.0",
-        "@typescript-eslint/parser": "^5.59.0",
-        "@vitejs/plugin-react": "^4.0.0",
-        "eslint": "^8.38.0",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.3.4",
-        "typescript": "^5.0.2",
-        "vite": "^4.3.9"
-    }
+  "name": "react-phaser-example",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "codegen": "graphql-codegen",
+    "components": "npx @dojoengine/core ../dojo-starter/target/dev/manifest.json src/dojo/contractComponents.ts http://localhost:5050 0x534692277764b04cfc469858891b825c799d1da550d2509fdd5be2f32abdaa0"
+  },
+  "dependencies": {
+    "@dojoengine/core": "link:dojo-packages/packages/core",
+    "@dojoengine/create-burner": "link:dojo-packages/packages/create-burner",
+    "@dojoengine/torii-client": "link:dojo-packages/packages/torii-client",
+    "@dojoengine/utils": "link:dojo-packages/packages/utils",
+    "@dojoengine/react": "link:dojo-packages/packages/react",
+    "@dojoengine/recs": "0.1.35",
+    "@latticexyz/utils": "^2.0.0-next.11",
+    "@latticexyz/phaserx": "^2.0.0-next.11",
+    "ethers": "^5.7.2",
+    "events": "^3.3.0",
+    "graphql": "^16.7.1",
+    "graphql-request": "^6.1.0",
+    "mobx": "^6.9.0",
+    "phaser": "3.60.0-beta.14",
+    "proxy-deep": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.8.1",
+    "simplex-noise": "^4.0.1",
+    "starknet": "^5.19.5",
+    "styled-components": "^6.0.7",
+    "zustand": "^4.4.1",
+    "vite-plugin-top-level-await": "^1.3.1",
+    "vite-plugin-wasm": "^3.2.2"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-graphql-request": "^5.0.0",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@types/node": "^20.4.8",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
 }
diff --git a/examples/react-phaser-example/postcss.config.js b/examples/react-phaser-example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/react-phaser-example/src/dojo/createNetworkLayer.ts b/examples/react-phaser-example/src/dojo/createNetworkLayer.ts
@@ -12,9 +12,6 @@ export const createNetworkLayer = async () => {
         nodeUrl: import.meta.env.VITE_PUBLIC_NODE_URL!,
     });
 
-    const accountClassHash = import.meta.env.VITE_PUBLIC_ACCOUNT_CLASS_HASH!;
-
-    // TODO: Make Burner System
     const masterAccount = new Account(
         rpcProvider,
         import.meta.env.VITE_PUBLIC_MASTER_ADDRESS!,
@@ -23,7 +20,7 @@ export const createNetworkLayer = async () => {
 
     const burnerManager = new BurnerManager({
         masterAccount,
-        accountClassHash,
+        accountClassHash: import.meta.env.VITE_PUBLIC_ACCOUNT_CLASS_HASH!,
         rpcProvider,
     });
 

diff --git a/examples/react-phaser-example/src/dojo/createSystemCalls.ts b/examples/react-phaser-example/src/dojo/createSystemCalls.ts
@@ -1,5 +1,5 @@
 import { SetupNetworkResult } from "./setupNetwork";
-import { Account } from "starknet";
+import { Account, AccountInterface } from "starknet";
 import { Entity, getComponentValue } from "@dojoengine/recs";
 import { uuid } from "@latticexyz/utils";
 import { ClientComponents } from "./createClientComponents";
@@ -8,11 +8,20 @@ import { getEvents, setComponentsFromEvents } from "@dojoengine/utils";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
+export interface SystemSigner {
+    signer: Account;
+}
+
+export interface MoveSystemProps extends SystemSigner {
+    direction: Direction;
+}
+
 export function createSystemCalls(
     { execute, contractComponents }: SetupNetworkResult,
     { Position, Moves }: ClientComponents
 ) {
-    const spawn = async (signer: Account) => {
+    const spawn = async (props: SystemSigner) => {
+        const signer = props.signer;
         const entityId = signer.address.toString() as Entity;
 
         const positionId = uuid();
@@ -57,7 +66,9 @@ export function createSystemCalls(
         }
     };
 
-    const move = async (signer: Account, direction: Direction) => {
+    const move = async (props: MoveSystemProps) => {
+        const { signer, direction } = props;
+
         const entityId = signer.address.toString() as Entity;
 
         const positionId = uuid();

diff --git a/examples/react-phaser-example/src/hooks/useDojo.tsx b/examples/react-phaser-example/src/hooks/useDojo.tsx
@@ -0,0 +1,34 @@
+import { NetworkLayer } from "../dojo/createNetworkLayer";
+import { PhaserLayer } from "../phaser";
+import { store } from "../store/store";
+import { useBurnerManager } from "@dojoengine/create-burner";
+
+export type UIStore = ReturnType<typeof useDojo>;
+
+export const useDojo = () => {
+    const { networkLayer, phaserLayer } = store();
+
+    if (phaserLayer === null || networkLayer === null) {
+        throw new Error("Store not initialized");
+    }
+
+    const { account, get, create, select, list, isDeploying, clear } =
+        useBurnerManager({
+            burnerManager: networkLayer.account,
+        });
+
+    return {
+        networkLayer: networkLayer as NetworkLayer,
+        phaserLayer: phaserLayer as PhaserLayer,
+        account: {
+            account: account ? account : networkLayer.account.masterAccount,
+            get,
+            create,
+            select,
+            list,
+            clear,
+            isDeploying,
+        },
+        systemCalls: networkLayer.systemCalls,
+    };
+};
diff --git a/examples/react-phaser-example/src/index.css b/examples/react-phaser-example/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/react-phaser-example/src/main.tsx b/examples/react-phaser-example/src/main.tsx
@@ -1,8 +1,9 @@
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("React root not found");
 const root = ReactDOM.createRoot(rootElement);
 
-root.render(<App />);
+root.render(<App />);
diff --git a/examples/react-phaser-example/src/phaser/configurePhaser.ts b/examples/react-phaser-example/src/phaser/configurePhaser.ts
@@ -7,7 +7,15 @@ import {
 } from "@latticexyz/phaserx";
 import worldTileset from "../assets/tilesets/world.png";
 import { TileAnimations, Tileset } from "../artTypes/world";
-import { Sprites, Assets, Maps, Scenes, TILE_HEIGHT, TILE_WIDTH, Animations } from "./constants";
+import {
+    Sprites,
+    Assets,
+    Maps,
+    Scenes,
+    TILE_HEIGHT,
+    TILE_WIDTH,
+    Animations,
+} from "./constants";
 
 const ANIMATION_INTERVAL = 200;
 
@@ -30,7 +38,6 @@ const mainMap = defineMapConfig({
 export const phaserConfig = {
     sceneConfig: {
         [Scenes.Main]: defineSceneConfig({
-
             assets: {
                 [Assets.Tileset]: {
                     type: AssetType.Image,
@@ -89,4 +96,4 @@ export const phaserConfig = {
         minZoom: 1,
     }),
     cullingChunkSize: TILE_HEIGHT * 16,
-};
+};
diff --git a/examples/react-phaser-example/src/phaser/constants.ts b/examples/react-phaser-example/src/phaser/constants.ts
@@ -23,11 +23,11 @@ export enum Direction {
     Up,
     Down,
     Left,
-    Right
+    Right,
 }
 
 export const TILE_HEIGHT = 32;
 export const TILE_WIDTH = 32;
 
 // contract offset so we don't overflow
-export const POSITION_OFFSET = 1000;
+export const POSITION_OFFSET = 1000;
diff --git a/examples/react-phaser-example/src/phaser/systems/controls.ts b/examples/react-phaser-example/src/phaser/systems/controls.ts
@@ -8,35 +8,35 @@ export const controls = (layer: PhaserLayer) => {
         },
         networkLayer: {
             systemCalls: { move },
-            account,
+            account: { account },
         },
     } = layer;
 
     input.onKeyPress(
         (keys) => keys.has("W"),
         () => {
-            move(account.getActiveAccount()!, Direction.Up);
+            move({ signer: account, direction: Direction.Up });
         }
     );
 
     input.onKeyPress(
         (keys) => keys.has("A"),
         () => {
-            move(account.getActiveAccount()!, Direction.Left);
+            move({ signer: account, direction: Direction.Left });
         }
     );
 
     input.onKeyPress(
         (keys) => keys.has("S"),
         () => {
-            move(account.getActiveAccount()!, Direction.Down);
+            move({ signer: account, direction: Direction.Down });
         }
     );
 
     input.onKeyPress(
         (keys) => keys.has("D"),
         () => {
-            move(account.getActiveAccount()!, Direction.Right);
+            move({ signer: account, direction: Direction.Right });
         }
     );
 };
diff --git a/examples/react-phaser-example/src/phaser/systems/mapSystem.ts b/examples/react-phaser-example/src/phaser/systems/mapSystem.ts
@@ -29,4 +29,4 @@ export function mapSystem(layer: PhaserLayer) {
             }
         }
     }
-}
+}
diff --git a/examples/react-phaser-example/src/phaser/systems/spawn.ts b/examples/react-phaser-example/src/phaser/systems/spawn.ts
@@ -7,16 +7,14 @@ export const spawn = (layer: PhaserLayer) => {
         },
         networkLayer: {
             systemCalls: { spawn },
-            account,
+            account: { account },
         },
     } = layer;
 
-    console.log(account);
-
     input.onKeyPress(
         (keys) => keys.has("SPACE"),
         () => {
-            spawn(account.getActiveAccount()!);
+            spawn({ signer: account });
         }
     );
 };
diff --git a/examples/react-phaser-example/src/ui/index.tsx b/examples/react-phaser-example/src/ui/index.tsx
@@ -15,21 +15,9 @@ export const UI = () => {
 
     return (
         <Wrapper>
-            <HeaderContainer>
+            <div className="fixed top-0 w-full bg-black text-white p-8">
                 <SpawnBtn />
-
-            </HeaderContainer>
+            </div>
         </Wrapper>
     );
 };
-
-const HeaderContainer = styled.div`
-    position: absolute;
-    top: 5%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    display: flex;
-    flex-direaction: row;
-    gap: 20px;
-`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,4 +29,4 @@ export function mapSystem(layer: PhaserLayer) { @@
                 }
             }
         }
-    }
+    }