Merge pull request #45 from dojoengine/phaser-example

Phaser example

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"
+  }
 }

examples/react-phaser-example/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/react-phaser-example/readme.md

@@ -1,21 +1 @@
-## Dojo create-phaser-app
-
-The pattern here is inherited from mud.dev and is a simple example of how to use the dojo engine with create-phaser-app.
-
-### Steps to Execute the Example
-
-Firstly, clone the [dojo-starter](https://github.com/dojoengine/dojo-starter) project and follow the given instructions to ensure it's functioning correctly. This step is crucial as this client displays data obtained from the project.
-
-Subsequently, clone this project and execute the following commands in the terminal:
-
-```console
-yarn
-
-yarn generate
-
-yarn dev
-```
-
-### Notes
-
-This is just a simple example of how to setup a project, but in by no means is the only way.
+## Integrate Phaser with Dojo: A Quick Start Guide

examples/react-phaser-example/src/App.tsx

@@ -1,4 +1,3 @@
-import "./App.css";
 import { useEffect } from "react";
 import { useNetworkLayer } from "./hooks/useNetworkLayer";
 import { PhaserLayer } from "./phaser/phaserLayer";

examples/react-phaser-example/src/dojo/createNetworkLayer.ts

@@ -1,28 +1,53 @@
 import { world } from "./world";
 import { setup } from "./setup";
 import { Account, RpcProvider } from "starknet";
+import { BurnerManager } from "@dojoengine/create-burner";
+import { SyncManager } from "@dojoengine/react";
 
 export type NetworkLayer = Awaited<ReturnType<typeof createNetworkLayer>>;
 
 export const createNetworkLayer = async () => {
     const { components, systemCalls, network } = await setup();
 
-    const provider = new RpcProvider({
+    const rpcProvider = new RpcProvider({
         nodeUrl: import.meta.env.VITE_PUBLIC_NODE_URL!,
     });
 
-    // TODO: Make Burner System
-    const account = new Account(
-        provider,
+    const masterAccount = new Account(
+        rpcProvider,
         import.meta.env.VITE_PUBLIC_MASTER_ADDRESS!,
         import.meta.env.VITE_PUBLIC_MASTER_PRIVATE_KEY!
     );
 
+    const burnerManager = new BurnerManager({
+        masterAccount,
+        accountClassHash: import.meta.env.VITE_PUBLIC_ACCOUNT_CLASS_HASH!,
+        rpcProvider,
+    });
+
+    // TODO: Currently if you change wallets in the UI, phaser will not update.
+    burnerManager.init();
+
+    if (burnerManager.account) {
+        // sync manager to active address
+        new SyncManager(network.torii_client, [
+            {
+                model: network.contractComponents.Position,
+                keys: [burnerManager.account?.address],
+            },
+            {
+                model: network.contractComponents.Moves as any,
+                keys: [burnerManager.account?.address],
+            },
+        ]);
+    }
+
     return {
         world,
         components,
         systemCalls,
         network,
-        account,
+        account: burnerManager.account as Account,
+        burnerManager,
     };
 };

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,22 @@ 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;
+
+        console.log("spawn", signer.address);
         const entityId = signer.address.toString() as Entity;
 
         const positionId = uuid();
@@ -26,7 +37,7 @@ export function createSystemCalls(
             entity: entityId,
             value: {
                 player: BigInt(entityId),
-                remaining: 10,
+                remaining: 100,
                 last_direction: 0,
             },
         });
@@ -57,7 +68,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();

examples/react-phaser-example/src/dojo/setup.ts

@@ -13,4 +13,4 @@ export async function setup() {
         components,
         systemCalls,
     };
-}
+}

examples/react-phaser-example/src/dojo/setupNetwork.ts

@@ -2,8 +2,6 @@ import { defineContractComponents } from "./contractComponents";
 import { world } from "./world";
 import { RPCProvider } from "@dojoengine/core";
 import { Account, num } from "starknet";
-import { GraphQLClient } from "graphql-request";
-import { getSdk } from "../generated/graphql";
 import manifest from "../../../dojo-starter/target/dev/manifest.json";
 import * as torii from "@dojoengine/torii-client";
 
@@ -24,9 +22,6 @@ export async function setupNetwork() {
         VITE_PUBLIC_NODE_URL
     );
 
-    const createGraphSdk = () =>
-        getSdk(new GraphQLClient(VITE_PUBLIC_TORII + "/graphql"));
-
     const torii_client = await torii.createClient([], {
         rpcUrl: VITE_PUBLIC_NODE_URL,
         toriiUrl: VITE_PUBLIC_TORII + "/grpc",
@@ -42,9 +37,6 @@ export async function setupNetwork() {
         // Define contract components for the world.
         contractComponents: defineContractComponents(world),
 
-        // Define the graph SDK instance.
-        graphSdk: createGraphSdk,
-
         // Execute function.
         execute: async (
             signer: Account,

examples/react-phaser-example/src/dojo/world.ts

@@ -1,3 +1,3 @@
 import { createWorld } from "@dojoengine/recs";
 
-export const world = createWorld(); 
+export const world = createWorld();