Lattice Workshop - Step 3.1

Add more essential components

Next step

Now that we're familiar with the basics of entities, components and systems, let's add some more essential components for the game.

To support the game functionality, we'll need the following components:

We'll add the component definitions to the contract, the lattice.config.ts deployment config, the client and the client mappings to sync component states. In the next step we'll add the first contract system to use these components.

Files changed (3) hide show
  1. client/src/Game.ts +27 -0
  2. contracts/lattice.config.ts +7 -0
  3. contracts/src/Game.sol +10 -0
client/src/Game.ts CHANGED
@@ -2,11 +2,17 @@ import { createWorld } from "@latticexyz/mobx-ecs";
2
2
  import { createMapping, loadEvents, setupContracts, setupMappings } from "../packages/lattice-eth-middleware";
3
3
  import { setupPhaser } from "@latticexyz/phaser-middleware";
4
4
  import {
5
+ createAddressComponent,
6
+ createBoolComponent,
5
7
  createCoordComponent,
6
8
  createStringComponent,
9
+ createTupleComponent,
7
10
  createUintComponent,
11
+ decodeAddressComponent,
12
+ decodeBoolComponent,
8
13
  decodeCoordComponent,
9
14
  decodeStringComponent,
15
+ decodeTupleComponent,
10
16
  decodeUintComponent,
11
17
  } from "./components";
12
18
  import { createPositionSystem } from "./systems/PositionSystem";
@@ -35,11 +41,25 @@ export async function createGame(contractAddress: string, privateKey: string, ch
35
41
  const Position = createCoordComponent(world, "Position");
36
42
  const Texture = createStringComponent(world, "Texture");
37
43
  const Appearance = createUintComponent(world, "Appearance");
44
+ const OwnedBy = createAddressComponent(world, "OwnedBy");
45
+ const Movable = createBoolComponent(world, "Movable");
46
+ const Miner = createBoolComponent(world, "Miner");
47
+ const Mined = createBoolComponent(world, "Mined");
48
+ const Heart = createBoolComponent(world, "Heart");
49
+ const Attack = createUintComponent(world, "Attack");
50
+ const Life = createTupleComponent(world, "Life");
38
51
 
39
52
  const components = {
40
53
  Position,
41
54
  Texture,
42
55
  Appearance,
56
+ OwnedBy,
57
+ Movable,
58
+ Miner,
59
+ Mined,
60
+ Heart,
61
+ Attack,
62
+ Life,
43
63
  };
44
64
 
45
65
  /*****************************************
@@ -49,6 +69,13 @@ export async function createGame(contractAddress: string, privateKey: string, ch
49
69
  ...createMapping(componentAddresses.position, Position, decodeCoordComponent),
50
70
  ...createMapping(componentAddresses.texture, Texture, decodeStringComponent),
51
71
  ...createMapping(componentAddresses.appearance, Appearance, decodeUintComponent),
72
+ ...createMapping(componentAddresses.ownedBy, OwnedBy, decodeAddressComponent),
73
+ ...createMapping(componentAddresses.movable, Movable, decodeBoolComponent),
74
+ ...createMapping(componentAddresses.miner, Miner, decodeBoolComponent),
75
+ ...createMapping(componentAddresses.mined, Mined, decodeBoolComponent),
76
+ ...createMapping(componentAddresses.heart, Heart, decodeBoolComponent),
77
+ ...createMapping(componentAddresses.attack, Attack, decodeUintComponent),
78
+ ...createMapping(componentAddresses.life, Life, decodeTupleComponent),
52
79
  });
53
80
  await loadEvents(provider, contracts.World);
54
81
 
contracts/lattice.config.ts CHANGED
@@ -2,4 +2,11 @@ export const componentConfig = {
2
2
  position: 'CoordComponent',
3
3
  texture: 'StringComponent',
4
4
  appearance: 'UintComponent',
5
+ ownedBy: 'AddressComponent',
6
+ movable: 'BoolComponent',
7
+ miner: 'BoolComponent',
8
+ mined: 'BoolComponent',
9
+ heart: 'BoolComponent',
10
+ attack: 'UintComponent',
11
+ life: 'TupleComponent',
5
12
  };
contracts/src/Game.sol CHANGED
@@ -7,11 +7,21 @@ import { Component } from 'lattice-ecs/Component.sol';
7
7
  import { CoordComponent, Coord } from './components/CoordComponent.sol';
8
8
  import { UintComponent } from './components/UintComponent.sol';
9
9
  import { StringComponent } from './components/StringComponent.sol';
10
+ import { AddressComponent } from './components/AddressComponent.sol';
11
+ import { BoolComponent } from './components/BoolComponent.sol';
12
+ import { TupleComponent } from './components/TupleComponent.sol';
10
13
 
11
14
  struct Components {
12
15
  CoordComponent position;
13
16
  StringComponent texture;
14
17
  UintComponent appearance;
18
+ AddressComponent ownedBy;
19
+ BoolComponent movable;
20
+ BoolComponent miner;
21
+ BoolComponent mined;
22
+ BoolComponent heart;
23
+ UintComponent attack;
24
+ TupleComponent life;
15
25
  }
16
26
  enum Texture {
17
27
  Imp