Skip to content

Commit

Permalink
feat: client init
Browse files Browse the repository at this point in the history
  • Loading branch information
@okhaimie-dev
okhaimie-dev committed Apr 10, 2024
1 parent 35b0c44 commit e5d393d
Show file tree
Hide file tree
Showing 10 changed files with 5,692 additions and 196 deletions.
1 change: 1 addition & 0 deletions client/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ node_modules
dist
dist-ssr
*.local
package-lock.json

# Editor directories and files
.vscode/*
Expand Down
4 changes: 2 additions & 2 deletions client/dojoConfig.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import manifest from "../contract/manifests/dev/manifest.json";
import manifest from "../contracts/manifests/dev/manifest.json";
import { createDojoConfig } from "@dojoengine/core";

export const dojoConfig = createDojoConfig({
manifest,
manifest,
});
14 changes: 7 additions & 7 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"codegen": "graphql-codegen",
"create-components": "npx @dojoengine/core ../../dojo-starter/target/dev/manifest.json src/dojo/generated/contractComponents.ts http://localhost:5050 0x28f5999ae62fec17c09c52a800e244961dba05251f5aaf923afabd9c9804d1a"
"create-components": "npx @dojoengine/core ../contracts/manifests/dev/manifest.json src/dojo/generated/contractComponents.ts http://localhost:5050 0x1ee592601cde2eb4147136aadf1f2f07d4519d510e0cd013a4339dd09a1e192"
},
"dependencies": {
"@dojoengine/core": "0.6.122",
"@dojoengine/create-burner": "0.6.122",
"@dojoengine/torii-client": "0.6.122",
"@dojoengine/utils": "0.6.122",
"@dojoengine/react": "0.6.122",
"@dojoengine/state": "0.6.122",
"@dojoengine/recs": "0.1.35",
"@latticexyz/react": "^2.0.0-next.11",
"@latticexyz/utils": "^2.0.0-next.11",
"@dojoengine/state": "0.6.122",
"@dojoengine/torii-client": "0.6.122",
"@dojoengine/utils": "0.6.122",
"@latticexyz/react": "^2.0.4",
"@latticexyz/utils": "^2.0.4",
"ethers": "^5.7.2",
"graphql": "^16.7.1",
"graphql-request": "^6.1.0",
Expand Down Expand Up @@ -50,4 +50,4 @@
"typescript": "^5.0.3",
"vite": "^4.3.9"
}
}
}
226 changes: 85 additions & 141 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,160 +2,104 @@ import { useComponentValue } from "@dojoengine/react";
import { Entity } from "@dojoengine/recs";
import { useEffect, useState } from "react";
import "./App.css";
import { Direction } from "./utils";
import { getEntityIdFromKeys } from "@dojoengine/utils";
import { useDojo } from "./dojo/useDojo";

function App() {
const {
setup: {
systemCalls: { spawn, move },
clientComponents: { Position, Moves },
},
account,
} = useDojo();
const {
setup: {
systemCalls: { spawn, move },
clientComponents: { Moves },
},
account,
} = useDojo();

const [clipboardStatus, setClipboardStatus] = useState({
message: "",
isError: false,
});

// entity id we are syncing
const entityId = getEntityIdFromKeys([
BigInt(account?.account.address),
]) as Entity;

// get current component values
const position = useComponentValue(Position, entityId);
const moves = useComponentValue(Moves, entityId);
const [clipboardStatus, setClipboardStatus] = useState({
message: "",
isError: false,
});

console.log(moves);
// entity id we are syncing
const entityId = getEntityIdFromKeys([
BigInt(account?.account.address),
]) as Entity;

const handleRestoreBurners = async () => {
try {
await account?.applyFromClipboard();
setClipboardStatus({
message: "Burners restored successfully!",
isError: false,
});
} catch (error) {
setClipboardStatus({
message: `Failed to restore burners from clipboard`,
isError: true,
});
}
};
// get current component values
const moves = useComponentValue(Moves, entityId);

useEffect(() => {
if (clipboardStatus.message) {
const timer = setTimeout(() => {
setClipboardStatus({ message: "", isError: false });
}, 3000);
console.log(moves);

return () => clearTimeout(timer);
}
}, [clipboardStatus.message]);

return (
<>
<button onClick={account?.create}>
{account?.isDeploying ? "deploying burner" : "create burner"}
</button>
{account && account?.list().length > 0 && (
<button onClick={async () => await account?.copyToClipboard()}>
Save Burners to Clipboard
</button>
)}
<button onClick={handleRestoreBurners}>
Restore Burners from Clipboard
</button>
{clipboardStatus.message && (
<div className={clipboardStatus.isError ? "error" : "success"}>
{clipboardStatus.message}
</div>
)}
const handleRestoreBurners = async () => {
try {
await account?.applyFromClipboard();
setClipboardStatus({
message: "Burners restored successfully!",
isError: false,
});
} catch (error) {
setClipboardStatus({
message: `Failed to restore burners from clipboard`,
isError: true,
});
}
};

<div className="card">
<div>{`burners deployed: ${account.count}`}</div>
<div>
select signer:{" "}
<select
value={account ? account.account.address : ""}
onChange={(e) => account.select(e.target.value)}
>
{account?.list().map((account, index) => {
return (
<option value={account.address} key={index}>
{account.address}
</option>
);
})}
</select>
</div>
<div>
<button onClick={() => account.clear()}>
Clear burners
</button>
<p>
You will need to Authorise the contracts before you can
use a burner. See readme.
</p>
</div>
</div>
useEffect(() => {
if (clipboardStatus.message) {
const timer = setTimeout(() => {
setClipboardStatus({ message: "", isError: false });
}, 3000);

<div className="card">
<button onClick={() => spawn(account.account)}>Spawn</button>
<div>
Moves Left: {moves ? `${moves.remaining}` : "Need to Spawn"}
</div>
<div>
Position:{" "}
{position
? `${position.vec.x}, ${position.vec.y}`
: "Need to Spawn"}
</div>
return () => clearTimeout(timer);
}
}, [clipboardStatus.message]);

<div>{moves && moves.last_direction}</div>
</div>
return (
<>
<button onClick={account?.create}>
{account?.isDeploying ? "deploying burner" : "create burner"}
</button>
{account && account?.list().length > 0 && (
<button onClick={async () => await account?.copyToClipboard()}>
Save Burners to Clipboard
</button>
)}
<button onClick={handleRestoreBurners}>
Restore Burners from Clipboard
</button>
{clipboardStatus.message && (
<div className={clipboardStatus.isError ? "error" : "success"}>
{clipboardStatus.message}
</div>
)}

<div className="card">
<div>
<button
onClick={() =>
position && position.vec.y > 0
? move(account.account, Direction.Up)
: console.log("Reach the borders of the world.")
}
>
Move Up
</button>
</div>
<div>
<button
onClick={() =>
position && position.vec.x > 0
? move(account.account, Direction.Left)
: console.log("Reach the borders of the world.")
}
>
Move Left
</button>
<button
onClick={() => move(account.account, Direction.Right)}
>
Move Right
</button>
</div>
<div>
<button
onClick={() => move(account.account, Direction.Down)}
>
Move Down
</button>
</div>
</div>
</>
);
<div className="card">
<div>{`burners deployed: ${account.count}`}</div>
<div>
select signer:{" "}
<select
value={account ? account.account.address : ""}
onChange={(e) => account.select(e.target.value)}
>
{account?.list().map((account, index) => {
return (
<option value={account.address} key={index}>
{account.address}
</option>
);
})}
</select>
</div>
<div>
<button onClick={() => account.clear()}>Clear burners</button>
<p>
You will need to Authorise the contracts before you can use a
burner. See readme.
</p>
</div>
</div>
</>
);
}

export default App;
13 changes: 6 additions & 7 deletions client/src/dojo/createClientComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import { ContractComponents } from "./generated/contractComponents";
export type ClientComponents = ReturnType<typeof createClientComponents>;

export function createClientComponents({
contractComponents,
contractComponents,
}: {
contractComponents: ContractComponents;
contractComponents: ContractComponents;
}) {
return {
...contractComponents,
Position: overridableComponent(contractComponents.Position),
Moves: overridableComponent(contractComponents.Moves),
};
return {
...contractComponents,
Moves: overridableComponent(contractComponents.Moves),
};
}
Loading

0 comments on commit e5d393d

Please sign in to comment.