Skip to content

Commit

Permalink
docs: update primary docs example with effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@3mcd
3mcd committed Mar 1, 2021
1 parent 8448d09 commit 114fe7a
Show file tree
Hide file tree
Showing 19 changed files with 258 additions and 188 deletions.
2 changes: 1 addition & 1 deletion docs-src/content/ecs/change-detection.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
+++
title = "Change Detection"
weight = 8
weight = 9
+++

Javelin implements a very basic change detection algorithm using [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that can observe deeply nested changes made to components.
Expand Down
2 changes: 1 addition & 1 deletion docs-src/content/ecs/effects.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
+++
title = "Effects"
weight = 8
weight = 6
+++

## Interacting with dependencies
Expand Down
6 changes: 3 additions & 3 deletions docs-src/content/ecs/entities.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ An entity is a pointer to a unique collection of components that represent highe
Entities are created using `world.spawn`. This method accepts 0..n components and returns the newly created entity.

```typescript
const player = { type: 1, name: "elrond" }
const health = { type: 2, value: 100 }
const player = { _tid: 1, name: "elrond" }
const health = { _tid: 2, value: 100 }
const entity = world.spawn(player, health)
```

Expand All @@ -28,7 +28,7 @@ const entity = world.spawn(player, health)
The vector of components associated with an entity defines its **archetype**. The above example would create an entity of archetype `(Player, Health)`. Components can be assigned to existing entities using `world.attach`, and removed from entities using `world.detach`. The following example modifies an entity of archetype `(Player, Health)` to `(Player, Health, Input)`, and then back to `(Player, Health)`:

```typescript
const input = { type: 3, space: true }
const input = { _tid: 3, space: true }

world.attach(entity, input)
world.tick()
Expand Down
127 changes: 81 additions & 46 deletions docs-src/content/introduction/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,88 @@ const Wormhole = Javelin.createComponentType({
},
});

const effects = {
interval: Javelin.createEffect(() => {
let state = 0
return (world, t) => {
if (state === 1) {
return false
}
state = 1
setTimeout(() => (state = 0), t)
return true
}
}),
click: Javelin.createEffect(() => {
const state = { clicked: false, coords: null }
document.addEventListener("click", event => {
state.clicked = true
state.coords = relMouseCoords(canvas, event)
})

return () => {
if (state.clicked) {
const result = {...state}
state.clicked = false
return result
}
return state
}
}),
ref: Javelin.createEffect(() => {
let initial = true
const state = {}
return (world, initialValue) => {
if (initial) {
state.value = initialValue
}
initial = false
return state
}
})
}

const wormholes = Javelin.query(Transform, Wormhole, Velocity);
const junk = Javelin.query(Transform, Velocity, Junk);

const sys_spawn = world => {
const { clicked, coords } = effects.click()
const hasClickedOnce = effects.ref(false)
const shouldSpawnJunk = effects.ref(true)
const shouldSpawnWormhole = effects.interval(3500)

if (shouldSpawnJunk.value) {
for (let i = 0; i < 10000; i++) {
const x = Math.random() * (canvas.width * 1.5) - 0.25 * canvas.width
const y = Math.random() * (canvas.height * 1.5) - 0.25 * canvas.height
world.spawn(
world.component(Transform, x, y),
world.component(Velocity),
world.component(Junk)
);
}

shouldSpawnJunk.value = false;
}

if (clicked) {
hasClickedOnce.value = true
spawnWormhole(
coords.x,
coords.y,
30,
)
}

if (!hasClickedOnce.value && shouldSpawnWormhole) {
spawnWormhole(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 60
)
}
}

const sys_attract = (world) => {
for (let [we, wt, w, wv] of wormholes) {
wv.x *= 0.95;
Expand Down Expand Up @@ -175,26 +254,12 @@ const sys_physics = (world) => {

const world = Javelin.createWorld({
systems: [
sys_spawn,
sys_physics,
sys_attract,
sys_render,
],
});
const junkCount = 10000;

for (let i = 0; i < junkCount; i++) {
const x = Math.random() * (canvas.width * 1.5) - 0.25 * canvas.width
const y = Math.random() * (canvas.height * 1.5) - 0.25 * canvas.height
world.spawn(
world.component(Transform, x, y),
world.component(Velocity),
world.component(Junk)
);
}

let initialized = false;

canvas.addEventListener("mouseup", onMouseUp);

function spawnWormhole(x, y, r) {
world.spawn(
Expand All @@ -205,40 +270,10 @@ function spawnWormhole(x, y, r) {
);
}

function onMouseUp(event) {
const { x, y } = relMouseCoords(canvas, event);
const r = 30;

spawnWormhole(x, y, r);
clearInterval(interval);

if (!initialized) {
loop();
initialized = true;
}
}

function loop() {
world.tick();
requestAnimationFrame(loop);
}

let i = 0

const interval = setInterval(() => {
if (++i >= 10) {
clearInterval(interval)
}
spawnWormhole(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 60
);
if (!initialized) {
initialized = true;
loop();
}
}, 3500);

world.tick();
loop()
</script>
14 changes: 7 additions & 7 deletions docs/ecs/change-detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,13 @@
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Expand All @@ -127,13 +134,6 @@
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;performance&#x2F;">

Expand Down
12 changes: 6 additions & 6 deletions docs/ecs/components/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,23 +114,23 @@
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Topics
Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Change Detection
Topics
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">

Effects
Change Detection
</a>
</li>

Expand Down
14 changes: 7 additions & 7 deletions docs/ecs/effects/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,13 @@
</a>
</li>

<li class="active">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Expand All @@ -127,13 +134,6 @@
</a>
</li>

<li class="active">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;performance&#x2F;">

Expand Down
18 changes: 9 additions & 9 deletions docs/ecs/entities/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,23 +114,23 @@
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Topics
Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Change Detection
Topics
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">

Effects
Change Detection
</a>
</li>

Expand Down Expand Up @@ -196,8 +196,8 @@ <h3 id="creating-entities">Creating entities<a class="zola-anchor" href="#creati
>
</h3>
<p>Entities are created using <code>world.spawn</code>. This method accepts 0..n components and returns the newly created entity.</p>
<pre><code>const player = { type: 1, name: &quot;elrond&quot; }
const health = { type: 2, value: 100 }
<pre><code>const player = { _tid: 1, name: &quot;elrond&quot; }
const health = { _tid: 2, value: 100 }
const entity = world.spawn(player, health)
</code></pre>
<aside>
Expand All @@ -210,7 +210,7 @@ <h3 id="modifying-entities">Modifying entities<a class="zola-anchor" href="#modi
>
</h3>
<p>The vector of components associated with an entity defines its <strong>archetype</strong>. The above example would create an entity of archetype <code>(Player, Health)</code>. Components can be assigned to existing entities using <code>world.attach</code>, and removed from entities using <code>world.detach</code>. The following example modifies an entity of archetype <code>(Player, Health)</code> to <code>(Player, Health, Input)</code>, and then back to <code>(Player, Health)</code>:</p>
<pre><code>const input = { type: 3, space: true }
<pre><code>const input = { _tid: 3, space: true }

world.attach(entity, input)
world.tick()
Expand Down
12 changes: 6 additions & 6 deletions docs/ecs/filtering/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,23 +114,23 @@
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Topics
Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Change Detection
Topics
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">

Effects
Change Detection
</a>
</li>

Expand Down
12 changes: 6 additions & 6 deletions docs/ecs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,23 +114,23 @@
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">

Topics
Effects
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;topics&#x2F;">

Change Detection
Topics
</a>
</li>

<li >
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;effects&#x2F;">
<a href="https:&#x2F;&#x2F;javelin.games&#x2F;ecs&#x2F;change-detection&#x2F;">

Effects
Change Detection
</a>
</li>

Expand Down
Loading

0 comments on commit 114fe7a

Please sign in to comment.