|
1 | 1 | <script lang="ts">
|
2 | 2 | import type { Entity } from "@dojoengine/recs";
|
3 |
| - import { componentValueStore, type ComponentStore } from "./dojo/componentValueStore"; |
| 3 | + import { |
| 4 | + componentValueStore, |
| 5 | + type ComponentStore, |
| 6 | + } from "./dojo/componentValueStore"; |
4 | 7 | import { dojoStore, accountStore, burnerStore } from "./stores";
|
5 | 8 | import { Account } from "starknet";
|
6 | 9 | import { type Burner } from "@dojoengine/create-burner";
|
7 |
| - import { handleBurnerChange, handleNewBurner, handleClearBurners } from "./handlers"; |
| 10 | + import { |
| 11 | + handleBurnerChange, |
| 12 | + handleNewBurner, |
| 13 | + handleClearBurners, |
| 14 | + } from "./handlers"; |
8 | 15 |
|
9 | 16 | let entityId: Entity;
|
10 | 17 | let account: Account;
|
11 | 18 | let position: ComponentStore;
|
12 | 19 | let moves: ComponentStore;
|
13 |
| - let burners: Burner[] |
14 |
| - |
15 |
| - $: ({ clientComponents, torii, burnerManager, client } = $dojoStore); |
16 |
| - $: if ($accountStore) account = $accountStore; |
| 20 | + let burners: Burner[]; |
17 | 21 |
|
18 |
| - $: if (torii && account) entityId = torii.poseidonHash([account.address]) |
| 22 | + $: ({ clientComponents, torii, burnerManager, client } = $dojoStore); |
| 23 | + $: if ($accountStore) account = $accountStore; |
19 | 24 |
|
20 |
| - $: if (dojoStore) position = componentValueStore(clientComponents.Position, entityId); |
21 |
| - $: if (dojoStore) moves = componentValueStore(clientComponents.Moves, entityId); |
22 |
| - $: if ($burnerStore) burners = $burnerStore |
| 25 | + $: if (torii && account) |
| 26 | + entityId = torii.poseidonHash([account.address]) as Entity; |
23 | 27 |
|
| 28 | + $: if (dojoStore) |
| 29 | + position = componentValueStore(clientComponents.Position, entityId); |
| 30 | + $: if (dojoStore) |
| 31 | + moves = componentValueStore(clientComponents.Moves, entityId); |
| 32 | + $: if ($burnerStore) burners = $burnerStore; |
24 | 33 | </script>
|
25 | 34 |
|
26 | 35 | <main>
|
|
40 | 49 | select signer:{" "}
|
41 | 50 | <select on:change={handleBurnerChange}>
|
42 | 51 | {#each burners as burner}
|
43 |
| - <option value={burner.address}> |
44 |
| - {burner.address} |
45 |
| - </option> |
| 52 | + <option value={burner.address}> |
| 53 | + {burner.address} |
| 54 | + </option> |
46 | 55 | {/each}
|
47 | 56 | </select>
|
48 | 57 | </div>
|
49 | 58 | <div>
|
50 |
| - <button on:click={handleClearBurners}> |
51 |
| - Clear burners |
52 |
| - </button> |
| 59 | + <button on:click={handleClearBurners}> Clear burners </button> |
53 | 60 | </div>
|
54 | 61 | </div>
|
55 | 62 |
|
56 | 63 | <div class="card">
|
57 |
| - <button on:click={() => client.actions.spawn({account})}>Spawn</button> |
| 64 | + <button on:click={() => client.actions.spawn({ account })}>Spawn</button |
| 65 | + > |
58 | 66 | <div>
|
59 | 67 | Moves Left: {moves ? `${$moves?.remaining}` : "Need to Spawn"}
|
60 | 68 | </div>
|
|
66 | 74 | </div>
|
67 | 75 |
|
68 | 76 | <div>{$moves && $moves.last_direction}</div>
|
69 |
| - |
70 | 77 | </div>
|
71 | 78 |
|
72 | 79 | <div class="card">
|
73 | 80 | <div>
|
74 | 81 | <button
|
75 | 82 | on:click={() =>
|
76 | 83 | position && $position.vec.y > 0
|
77 |
| - ? client.actions.move({account, direction:{ type: "Up" }}) |
78 |
| - : console.log("Reach the borders of the world.") |
79 |
| - } |
| 84 | + ? client.actions.move({ |
| 85 | + account, |
| 86 | + direction: { type: "Up" }, |
| 87 | + }) |
| 88 | + : console.log("Reach the borders of the world.")} |
80 | 89 | >
|
81 | 90 | Move Up
|
82 | 91 | </button>
|
|
85 | 94 | <button
|
86 | 95 | on:click={() =>
|
87 | 96 | position && $position.vec.x > 0
|
88 |
| - ? client.actions.move({account, direction: { type: "Left" }}) |
89 |
| - : console.log("Reach the borders of the world.") |
90 |
| - } |
| 97 | + ? client.actions.move({ |
| 98 | + account, |
| 99 | + direction: { type: "Left" }, |
| 100 | + }) |
| 101 | + : console.log("Reach the borders of the world.")} |
91 | 102 | >
|
92 | 103 | Move Left
|
93 | 104 | </button>
|
94 | 105 | <button
|
95 |
| - on:click={() => client.actions.move({account, direction: { type: "Right" }})} |
| 106 | + on:click={() => |
| 107 | + client.actions.move({ |
| 108 | + account, |
| 109 | + direction: { type: "Right" }, |
| 110 | + })} |
96 | 111 | >
|
97 | 112 | Move Right
|
98 | 113 | </button>
|
99 | 114 | </div>
|
100 | 115 | <div>
|
101 | 116 | <button
|
102 |
| - on:click={() => client.actions.move({account, direction: { type: "Down" }})} |
| 117 | + on:click={() => |
| 118 | + client.actions.move({ |
| 119 | + account, |
| 120 | + direction: { type: "Down" }, |
| 121 | + })} |
103 | 122 | >
|
104 | 123 | Move Down
|
105 | 124 | </button>
|
|
0 commit comments