std-isometric-canvas
Level: Atom | Entity: IsometricCanvas | Persistence: singleton
2 states, 6 events, 10 transitions
Live Preview
schema.orb
{
"name": "IsometricCanvasOrbital",
"orbitals": [
{
"name": "IsometricCanvasOrbital",
"entity": {
"name": "IsometricCanvas",
"persistence": "singleton",
"fields": [
{
"name": "id",
"type": "string"
},
{
"name": "name",
"type": "string"
},
{
"name": "description",
"type": "string"
},
{
"name": "status",
"type": "string",
"default": "active",
"values": [
"active",
"inactive",
"pending"
]
},
{
"name": "createdAt",
"type": "string"
},
{
"name": "tiles",
"type": "array"
},
{
"name": "units",
"type": "array"
},
{
"name": "features",
"type": "array"
}
],
"instances": [
{
"id": "board",
"tiles": [
{
"x": 0,
"y": 0,
"terrain": "grass"
},
{
"x": 1,
"y": 0,
"terrain": "dirt"
},
{
"x": 2,
"y": 0,
"terrain": "stone"
},
{
"x": 3,
"y": 0,
"terrain": "water"
},
{
"x": 4,
"y": 0,
"terrain": "sand"
},
{
"x": 5,
"y": 0,
"terrain": "grass"
},
{
"x": 6,
"y": 0,
"terrain": "dirt"
},
{
"x": 7,
"y": 0,
"terrain": "stone"
},
{
"x": 0,
"y": 1,
"terrain": "dirt"
},
{
"x": 1,
"y": 1,
"terrain": "stone"
},
{
"x": 2,
"y": 1,
"terrain": "water"
},
{
"x": 3,
"y": 1,
"terrain": "sand"
},
{
"x": 4,
"y": 1,
"terrain": "grass"
},
{
"x": 5,
"y": 1,
"terrain": "dirt"
},
{
"x": 6,
"y": 1,
"terrain": "stone"
},
{
"x": 7,
"y": 1,
"terrain": "water"
},
{
"x": 0,
"y": 2,
"terrain": "stone"
},
{
"x": 1,
"y": 2,
"terrain": "water"
},
{
"x": 2,
"y": 2,
"terrain": "sand"
},
{
"x": 3,
"y": 2,
"terrain": "grass"
},
{
"x": 4,
"y": 2,
"terrain": "dirt"
},
{
"x": 5,
"y": 2,
"terrain": "stone"
},
{
"x": 6,
"y": 2,
"terrain": "water"
},
{
"x": 7,
"y": 2,
"terrain": "sand"
},
{
"x": 0,
"y": 3,
"terrain": "water"
},
{
"x": 1,
"y": 3,
"terrain": "sand"
},
{
"x": 2,
"y": 3,
"terrain": "grass"
},
{
"x": 3,
"y": 3,
"terrain": "dirt"
},
{
"x": 4,
"y": 3,
"terrain": "stone"
},
{
"x": 5,
"y": 3,
"terrain": "water"
},
{
"x": 6,
"y": 3,
"terrain": "sand"
},
{
"x": 7,
"y": 3,
"terrain": "grass"
},
{
"x": 0,
"y": 4,
"terrain": "sand"
},
{
"x": 1,
"y": 4,
"terrain": "grass"
},
{
"x": 2,
"y": 4,
"terrain": "dirt"
},
{
"x": 3,
"y": 4,
"terrain": "stone"
},
{
"x": 4,
"y": 4,
"terrain": "water"
},
{
"x": 5,
"y": 4,
"terrain": "sand"
},
{
"x": 6,
"y": 4,
"terrain": "grass"
},
{
"x": 7,
"y": 4,
"terrain": "dirt"
},
{
"x": 0,
"y": 5,
"terrain": "grass"
},
{
"x": 1,
"y": 5,
"terrain": "dirt"
},
{
"x": 2,
"y": 5,
"terrain": "stone"
},
{
"x": 3,
"y": 5,
"terrain": "water"
},
{
"x": 4,
"y": 5,
"terrain": "sand"
},
{
"x": 5,
"y": 5,
"terrain": "grass"
},
{
"x": 6,
"y": 5,
"terrain": "dirt"
},
{
"x": 7,
"y": 5,
"terrain": "stone"
},
{
"x": 0,
"y": 6,
"terrain": "dirt"
},
{
"x": 1,
"y": 6,
"terrain": "stone"
},
{
"x": 2,
"y": 6,
"terrain": "water"
},
{
"x": 3,
"y": 6,
"terrain": "sand"
},
{
"x": 4,
"y": 6,
"terrain": "grass"
},
{
"x": 5,
"y": 6,
"terrain": "dirt"
},
{
"x": 6,
"y": 6,
"terrain": "stone"
},
{
"x": 7,
"y": 6,
"terrain": "water"
},
{
"x": 0,
"y": 7,
"terrain": "stone"
},
{
"x": 1,
"y": 7,
"terrain": "water"
},
{
"x": 2,
"y": 7,
"terrain": "sand"
},
{
"x": 3,
"y": 7,
"terrain": "grass"
},
{
"x": 4,
"y": 7,
"terrain": "dirt"
},
{
"x": 5,
"y": 7,
"terrain": "stone"
},
{
"x": 6,
"y": 7,
"terrain": "water"
},
{
"x": 7,
"y": 7,
"terrain": "sand"
}
],
"units": [],
"features": []
}
]
},
"traits": [
{
"name": "IsometricCanvasIsometricCanvas",
"linkedEntity": "IsometricCanvas",
"category": "interaction",
"stateMachine": {
"states": [
{
"name": "idle",
"isInitial": true
},
{
"name": "active"
}
],
"events": [
{
"key": "INIT",
"name": "Initialize"
},
{
"key": "TILE_CLICK",
"name": "Tile Click",
"payload": [
{
"name": "tileId",
"type": "string",
"required": true
}
]
},
{
"key": "UNIT_CLICK",
"name": "Unit Click",
"payload": [
{
"name": "unitId",
"type": "string",
"required": true
}
]
},
{
"key": "TILE_HOVER",
"name": "Tile Hover"
},
{
"key": "TILE_LEAVE",
"name": "Tile Leave"
},
{
"key": "DESELECT",
"name": "Deselect"
}
],
"transitions": [
{
"from": "idle",
"to": "idle",
"event": "INIT",
"effects": [
[
"fetch",
"IsometricCanvas"
],
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
},
{
"from": "idle",
"to": "active",
"event": "TILE_CLICK",
"effects": [
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
},
{
"from": "idle",
"to": "active",
"event": "UNIT_CLICK",
"effects": [
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
},
{
"from": "active",
"to": "active",
"event": "TILE_CLICK",
"effects": [
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
},
{
"from": "active",
"to": "active",
"event": "UNIT_CLICK",
"effects": [
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
},
{
"from": "active",
"to": "active",
"event": "TILE_HOVER",
"effects": []
},
{
"from": "idle",
"to": "idle",
"event": "TILE_HOVER",
"effects": []
},
{
"from": "active",
"to": "active",
"event": "TILE_LEAVE",
"effects": []
},
{
"from": "idle",
"to": "idle",
"event": "TILE_LEAVE",
"effects": []
},
{
"from": "active",
"to": "idle",
"event": "DESELECT",
"effects": [
[
"render-ui",
"main",
{
"type": "isometric-canvas",
"tiles": "@entity.tiles",
"boardWidth": 8,
"boardHeight": 8,
"scale": 1,
"unitScale": 2,
"debug": false,
"showMinimap": false,
"enableCamera": true,
"tileClickEvent": "TILE_CLICK",
"unitClickEvent": "UNIT_CLICK",
"tileHoverEvent": "TILE_HOVER",
"tileLeaveEvent": "TILE_LEAVE"
}
]
]
}
]
}
}
],
"pages": [
{
"name": "IsometricCanvasCanvasPage",
"path": "/isometriccanvass",
"traits": [
{
"ref": "IsometricCanvasIsometricCanvas"
}
]
}
]
}
],
"description": "Isometric game renderer atom using the `isometric-canvas` pattern. Renders tiles, units, and features on an isometric grid. Handles tile clicks, unit clicks, and hover events."
}
Loading preview...
Orbital Visualization
Loading visualization...
Entity Fields
| Field | Type | Default |
|---|---|---|
| id | string | - |
| name | string | - |
| description | string | - |
| status | string | "active" |
| createdAt | string | - |
| tiles | array | - |
| units | array | - |
| features | array | - |
States
| State | Type |
|---|---|
| idle | Initial |
| active | - |
Events
| Event | Payload |
|---|---|
| INIT | - |
| TILE_CLICK | tileId: string |
| UNIT_CLICK | unitId: string |
| TILE_HOVER | - |
| TILE_LEAVE | - |
| DESELECT | - |
Transitions
| From | Event | To | Effects |
|---|---|---|---|
| idle | INIT | idle | 2 effects |
| idle | TILE_CLICK | active | 1 effect |
| idle | UNIT_CLICK | active | 1 effect |
| active | TILE_CLICK | active | 1 effect |
| active | UNIT_CLICK | active | 1 effect |
| active | TILE_HOVER | active | - |
| idle | TILE_HOVER | idle | - |
| active | TILE_LEAVE | active | - |
| idle | TILE_LEAVE | idle | - |
| active | DESELECT | idle | 1 effect |