{
+ const {
+ scenes: {
+ Main: {
+ camera: { phaserCamera },
+ },
+ },
+ } = layer;
+
+ phaserCamera.centerOn(0, 0);
+};
diff --git a/examples/react-phaser-example/src/phaser/systems/controls.ts b/examples/react-phaser-example/src/phaser/systems/controls.ts
index 7f0cf57b..d9d6d0e4 100644
--- a/examples/react-phaser-example/src/phaser/systems/controls.ts
+++ b/examples/react-phaser-example/src/phaser/systems/controls.ts
@@ -1,5 +1,5 @@
import { PhaserLayer } from "..";
-import { Direction } from "../../utils";
+import { Direction } from "../../dojo/utils";
export const controls = (layer: PhaserLayer) => {
const {
@@ -8,35 +8,63 @@ export const controls = (layer: PhaserLayer) => {
},
networkLayer: {
systemCalls: { move },
- account,
+ account: signer,
},
} = layer;
input.onKeyPress(
(keys) => keys.has("W"),
() => {
- move({ signer: account, direction: Direction.Up });
+ move({ signer, direction: Direction.Up });
}
);
input.onKeyPress(
(keys) => keys.has("A"),
() => {
- move({ signer: account, direction: Direction.Left });
+ move({ signer, direction: Direction.Left });
}
);
input.onKeyPress(
(keys) => keys.has("S"),
() => {
- move({ signer: account, direction: Direction.Down });
+ move({ signer, direction: Direction.Down });
}
);
input.onKeyPress(
(keys) => keys.has("D"),
() => {
- move({ signer: account, direction: Direction.Right });
+ move({ signer, direction: Direction.Right });
+ }
+ );
+
+ input.onKeyPress(
+ (keys) => keys.has("UP"),
+ () => {
+ move({ signer, direction: Direction.Up });
+ }
+ );
+
+ input.onKeyPress(
+ (keys) => keys.has("LEFT"),
+ () => {
+ move({ signer, direction: Direction.Left });
+ }
+ );
+
+ input.onKeyPress(
+ (keys) => keys.has("DOWN"),
+ () => {
+ move({ signer, direction: Direction.Down });
+ }
+ );
+
+ input.onKeyPress(
+ (keys) => keys.has("RIGHT"),
+ () => {
+ move({ signer, 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
index 551f0a1c..b09ad553 100644
--- a/examples/react-phaser-example/src/phaser/systems/mapSystem.ts
+++ b/examples/react-phaser-example/src/phaser/systems/mapSystem.ts
@@ -1,6 +1,7 @@
-import { Tileset } from "../../artTypes/world";
+import { Tileset } from "../../assets/world";
import { PhaserLayer } from "..";
-import { createNoise2D } from "simplex-noise";
+import { snoise } from "@dojoengine/utils";
+import { MAP_AMPLITUDE } from "../config/constants";
export function mapSystem(layer: PhaserLayer) {
const {
@@ -13,19 +14,24 @@ export function mapSystem(layer: PhaserLayer) {
},
} = layer;
- const noise = createNoise2D();
-
- for (let x = -500; x < 500; x++) {
- for (let y = -500; y < 500; y++) {
+ for (let x = 0; x < 50; x++) {
+ for (let y = 0; y < 50; y++) {
const coord = { x, y };
- const seed = noise(x, y);
-
- putTileAt(coord, Tileset.Grass, "Background");
+ // Get a noise value between 0 and 100
+ const seed = Math.floor(((snoise([x / MAP_AMPLITUDE, 0, y / MAP_AMPLITUDE]) + 1) / 2) * 100);
- if (seed >= 0.45) {
- putTileAt(coord, Tileset.Mountains, "Foreground");
- } else if (seed < -0.45) {
+ if (seed > 70) {
+ // This would be the highest 'elevation'
+ putTileAt(coord, Tileset.Sea, "Foreground");
+ } else if (seed > 60) {
+ // Even lower, could be fields or plains
+ putTileAt(coord, Tileset.Desert, "Foreground");
+ } else if (seed > 53) {
+ // Close to water level, might be beach
putTileAt(coord, Tileset.Forest, "Foreground");
+ } else {
+ // Below a certain threshold, it is sea
+ putTileAt(coord, Tileset.Land, "Foreground");
}
}
}
diff --git a/examples/react-phaser-example/src/phaser/systems/move.ts b/examples/react-phaser-example/src/phaser/systems/move.ts
index 377c1194..b645f609 100644
--- a/examples/react-phaser-example/src/phaser/systems/move.ts
+++ b/examples/react-phaser-example/src/phaser/systems/move.ts
@@ -1,13 +1,17 @@
import {
Entity,
Has,
- defineEnterSystem,
defineSystem,
getComponentValueStrict,
} from "@dojoengine/recs";
import { PhaserLayer } from "..";
import { tileCoordToPixelCoord } from "@latticexyz/phaserx";
-import { Animations, TILE_HEIGHT, TILE_WIDTH } from "../constants";
+import {
+ Animations,
+ ORIGIN_OFFSET,
+ TILE_HEIGHT,
+ TILE_WIDTH,
+} from "../config/constants";
export const move = (layer: PhaserLayer) => {
const {
@@ -20,29 +24,34 @@ export const move = (layer: PhaserLayer) => {
},
} = layer;
- defineEnterSystem(world, [Has(Position)], ({ entity }: any) => {
- const playerObj = objectPool.get(entity.toString(), "Sprite");
-
- console.log(playerObj);
-
- playerObj.setComponent({
- id: "animation",
- once: (sprite: any) => {
- console.log(sprite);
- sprite.play(Animations.SwordsmanIdle);
- },
- });
- });
-
defineSystem(world, [Has(Position)], ({ entity }: any) => {
- console.log(entity);
-
const position = getComponentValueStrict(
Position,
entity.toString() as Entity
);
- const offsetPosition = { x: position?.vec.x, y: position?.vec.y };
+ const entity_uniform = (+entity).toString();
+
+ console.log(
+ entity,
+ entity_uniform,
+ "\n------- pos/type triggered -------\n",
+ position
+ );
+
+ const player = objectPool.get(entity_uniform, "Sprite");
+
+ player.setComponent({
+ id: "animation",
+ once: (sprite) => {
+ sprite.play(Animations.RockIdle);
+ },
+ });
+
+ const offsetPosition = {
+ x: position?.vec.x - ORIGIN_OFFSET || 0,
+ y: position?.vec.y - ORIGIN_OFFSET || 0,
+ };
const pixelPosition = tileCoordToPixelCoord(
offsetPosition,
@@ -50,12 +59,11 @@ export const move = (layer: PhaserLayer) => {
TILE_HEIGHT
);
- const player = objectPool.get(entity, "Sprite");
-
player.setComponent({
id: "position",
- once: (sprite: any) => {
+ once: (sprite) => {
sprite.setPosition(pixelPosition?.x, pixelPosition?.y);
+
camera.centerOn(pixelPosition?.x, pixelPosition?.y);
},
});
diff --git a/examples/react-phaser-example/src/phaser/systems/registerSystems.ts b/examples/react-phaser-example/src/phaser/systems/registerSystems.ts
index 9796736f..95df0c48 100644
--- a/examples/react-phaser-example/src/phaser/systems/registerSystems.ts
+++ b/examples/react-phaser-example/src/phaser/systems/registerSystems.ts
@@ -1,12 +1,12 @@
import { PhaserLayer } from "..";
import { move } from "./move";
-import { spawn } from "./spawn";
import { controls } from "./controls";
import { mapSystem } from "./mapSystem";
+import { camera } from "./camera";
export const registerSystems = (layer: PhaserLayer) => {
move(layer);
- spawn(layer);
controls(layer);
mapSystem(layer);
+ camera(layer);
};
diff --git a/examples/react-phaser-example/src/phaser/systems/spawn.ts b/examples/react-phaser-example/src/phaser/systems/spawn.ts
deleted file mode 100644
index 88f77fa3..00000000
--- a/examples/react-phaser-example/src/phaser/systems/spawn.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PhaserLayer } from "..";
-
-export const spawn = (layer: PhaserLayer) => {
- const {
- scenes: {
- Main: { input },
- },
- networkLayer: {
- systemCalls: { spawn },
- account,
- },
- } = layer;
-
- input.onKeyPress(
- (keys) => keys.has("SPACE"),
- () => {
- spawn({ signer: account });
- }
- );
-};
diff --git a/examples/react-phaser-example/src/store/store.ts b/examples/react-phaser-example/src/store.ts
similarity index 50%
rename from examples/react-phaser-example/src/store/store.ts
rename to examples/react-phaser-example/src/store.ts
index 11510912..5a148834 100644
--- a/examples/react-phaser-example/src/store/store.ts
+++ b/examples/react-phaser-example/src/store.ts
@@ -1,6 +1,6 @@
import { create } from "zustand";
-import { NetworkLayer } from "../dojo/createNetworkLayer";
-import { PhaserLayer } from "../phaser";
+import { NetworkLayer } from "./dojo/createNetworkLayer";
+import { PhaserLayer } from "./phaser";
export type Store = {
networkLayer: NetworkLayer | null;
@@ -11,3 +11,8 @@ export const store = create
(() => ({
networkLayer: null,
phaserLayer: null,
}));
+
+export const useUIStore = create((set) => ({
+ loggedIn: false,
+ setLoggedIn: () => set(() => ({ loggedIn: true })),
+}));
diff --git a/examples/react-phaser-example/src/ui/CreateAccount.tsx b/examples/react-phaser-example/src/ui/CreateAccount.tsx
new file mode 100644
index 00000000..bddf82f3
--- /dev/null
+++ b/examples/react-phaser-example/src/ui/CreateAccount.tsx
@@ -0,0 +1,26 @@
+import { useUIStore } from "../store";
+import { ClickWrapper } from "./ClickWrapper";
+import { Spawn } from "./Spawn";
+
+export const CreateAccount = () => {
+ const loggedIn = useUIStore((state: any) => state.loggedIn);
+ return (
+
+
+
RPS
+
Eat to survive
+
+
+
Deploying...
;
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/examples/react-phaser-example/src/ui/button.tsx b/examples/react-phaser-example/src/ui/button.tsx
new file mode 100644
index 00000000..ffcc068b
--- /dev/null
+++ b/examples/react-phaser-example/src/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/examples/react-phaser-example/src/ui/hooks/useDojo.tsx b/examples/react-phaser-example/src/ui/hooks/useDojo.tsx
new file mode 100644
index 00000000..73360d09
--- /dev/null
+++ b/examples/react-phaser-example/src/ui/hooks/useDojo.tsx
@@ -0,0 +1,38 @@
+import { Account } from "starknet";
+import { store } from "../../store";
+import { useBurnerManager } from "@dojoengine/create-burner";
+
+export const useDojo = () => {
+ const layers = store((state) => {
+ return {
+ networkLayer: state.networkLayer,
+ phaserLayer: state.phaserLayer,
+ };
+ });
+
+ if (!layers.phaserLayer || !layers.networkLayer) {
+ throw new Error("Store not initialized");
+ }
+
+ const { networkLayer, phaserLayer } = layers;
+
+ const { get, create, select, list, isDeploying, clear } = useBurnerManager({
+ burnerManager: layers.networkLayer.burnerManager,
+ });
+
+ return {
+ networkLayer,
+ phaserLayer,
+ account: {
+ account: networkLayer.burnerManager.account as Account,
+ get,
+ create,
+ select,
+ list,
+ clear,
+ isDeploying,
+ },
+ systemCalls: networkLayer.systemCalls,
+ contractComponents: networkLayer.network.contractComponents,
+ };
+};
diff --git a/examples/react-phaser-example/src/hooks/useNetworkLayer.tsx b/examples/react-phaser-example/src/ui/hooks/useNetworkLayer.tsx
similarity index 87%
rename from examples/react-phaser-example/src/hooks/useNetworkLayer.tsx
rename to examples/react-phaser-example/src/ui/hooks/useNetworkLayer.tsx
index 78728f68..fa4a7219 100644
--- a/examples/react-phaser-example/src/hooks/useNetworkLayer.tsx
+++ b/examples/react-phaser-example/src/ui/hooks/useNetworkLayer.tsx
@@ -1,5 +1,5 @@
import { useEffect, useMemo } from "react";
-import { createNetworkLayer } from "../dojo/createNetworkLayer";
+import { createNetworkLayer } from "../../dojo/createNetworkLayer";
import { usePromiseValue } from "./usePromiseValue";
export const useNetworkLayer = () => {
diff --git a/examples/react-phaser-example/src/hooks/usePhaserLayer.tsx b/examples/react-phaser-example/src/ui/hooks/usePhaserLayer.tsx
similarity index 86%
rename from examples/react-phaser-example/src/hooks/usePhaserLayer.tsx
rename to examples/react-phaser-example/src/ui/hooks/usePhaserLayer.tsx
index 0a1bbf3d..98bd2123 100644
--- a/examples/react-phaser-example/src/hooks/usePhaserLayer.tsx
+++ b/examples/react-phaser-example/src/ui/hooks/usePhaserLayer.tsx
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPhaserLayer } from "../phaser";
-import { NetworkLayer } from "../dojo/createNetworkLayer";
-import { phaserConfig } from "../phaser/configurePhaser";
+import { createPhaserLayer } from "../../phaser";
+import { NetworkLayer } from "../../dojo/createNetworkLayer";
+import { phaserConfig } from "../../phaser/config/configurePhaser";
import { usePromiseValue } from "./usePromiseValue";
type Props = {
@@ -19,7 +19,7 @@ const createContainer = () => {
export const usePhaserLayer = ({ networkLayer }: Props) => {
const parentRef = useRef(null);
- const [{ width, height }, setSize] = useState({ width: 0, height: 0 });
+ const [{ width, height }] = useState({ width: 0, height: 0 });
const { phaserLayerPromise, container } = useMemo(() => {
if (!networkLayer) return { container: null, phaserLayerPromise: null };
@@ -42,8 +42,6 @@ export const usePhaserLayer = ({ networkLayer }: Props) => {
},
}),
};
-
- // We don't want width/height to recreate phaser layer, so we ignore linter
}, [networkLayer]);
useEffect(() => {
diff --git a/examples/react-phaser-example/src/hooks/usePromiseValue.ts b/examples/react-phaser-example/src/ui/hooks/usePromiseValue.ts
similarity index 100%
rename from examples/react-phaser-example/src/hooks/usePromiseValue.ts
rename to examples/react-phaser-example/src/ui/hooks/usePromiseValue.ts
diff --git a/examples/react-phaser-example/src/ui/index.tsx b/examples/react-phaser-example/src/ui/index.tsx
index 438b6022..872b2562 100644
--- a/examples/react-phaser-example/src/ui/index.tsx
+++ b/examples/react-phaser-example/src/ui/index.tsx
@@ -1,7 +1,5 @@
-import styled from "styled-components";
-import { store } from "../store/store";
-import { Wrapper } from "./wrapper";
-import { SpawnBtn } from "./spawnbtn";
+import { store } from "../store";
+import { CreateAccount } from "./CreateAccount";
export const UI = () => {
const layers = store((state) => {
@@ -14,10 +12,8 @@ export const UI = () => {
if (!layers.networkLayer || !layers.phaserLayer) return <>;
return (
-
-
-
-
-
+
+
+
);
};
diff --git a/examples/react-phaser-example/src/ui/lib/utils.ts b/examples/react-phaser-example/src/ui/lib/utils.ts
new file mode 100644
index 00000000..e6447944
--- /dev/null
+++ b/examples/react-phaser-example/src/ui/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/examples/react-phaser-example/src/ui/spawnbtn.tsx b/examples/react-phaser-example/src/ui/spawnbtn.tsx
deleted file mode 100644
index 9befcaf9..00000000
--- a/examples/react-phaser-example/src/ui/spawnbtn.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useDojo } from "../hooks/useDojo";
-import { ClickWrapper } from "./clickWrapper";
-
-export const SpawnBtn = () => {
- const {
- account: { account, create, isDeploying, select, list, clear },
- systemCalls: { spawn },
- } = useDojo();
-
- return (
-
-
-
-
-
-
-
-
-
signer:
-
-
-
-
-
-
-