@inglorious/engine 0.1.0 → 0.2.0

package/src/docs/recipes/add-and-remove.js

@@ -1,71 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { filter } from "@inglorious/utils/data-structures/object.js"
-import { random } from "@inglorious/utils/math/rng.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    mouse: [
-      enableMouse(),
-      {
-        "scene:click"(instance, event, options) {
-          const { instances, notify } = options
-          const characters = filter(
-            instances,
-            (_, { type }) => type === "character",
-          )
-          const ids = Object.keys(characters)
-
-          const maxId = ids.length
-            ? Number(ids[ids.length - 1].replace("character", ""))
-            : 0
-
-          notify({
-            id: "instance:add",
-            payload: {
-              id: `character${maxId + 1}`,
-              type: "character",
-              position: event.payload,
-              orientation: random(0, 2 * pi(), 0.01),
-              collisions: {
-                hitbox: {
-                  shape: "circle",
-                  radius: 12,
-                },
-              },
-            },
-          })
-        },
-
-        // this event handler is needed for React
-        "instance:click"(instance, event, { notify }) {
-          notify({ id: "instance:remove", payload: event.payload })
-        },
-      },
-    ],
-
-    character: [
-      enableCharacter(),
-      {
-        // this event handler is needed in React
-        "instance:click"(instance, event, { notify }) {
-          notify({ id: "instance:remove", payload: event.payload })
-        },
-      },
-    ],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-      position: [400, 0, 300],
-      collisions: {
-        hitbox: {
-          shape: "circle",
-          radius: 1,
-        },
-      },
-    },
-  },
-}

package/src/docs/recipes/add-instance.js

@@ -1,42 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { filter } from "@inglorious/utils/data-structures/object.js"
-import { random } from "@inglorious/utils/math/rng.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    mouse: [
-      enableMouse(),
-      {
-        "mouse:click"(instance, event, options) {
-          const { instances, notify } = options
-          const characters = filter(
-            instances,
-            (_, { type }) => type === "character",
-          )
-          const ids = Object.keys(characters)
-
-          notify({
-            id: "instance:add",
-            payload: {
-              id: `character${ids.length + 1}`,
-              type: "character",
-              position: event.payload,
-              orientation: random(0, 2 * pi(), 0.01),
-            },
-          })
-        },
-      },
-    ],
-
-    character: [enableCharacter()],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/recipes/decision-tree.js

@@ -1,169 +0,0 @@
-import arrive from "@inglorious/engine/ai/movement/kinematic/arrive.js"
-import { enableFsm } from "@inglorious/game/decorators/fsm.js"
-import { enableSprite } from "@inglorious/game/decorators/image/sprite.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { Sprite } from "@inglorious/game/sprite.js"
-import { decide } from "@inglorious/utils/algorithms/decision-tree.js"
-import { merge } from "@inglorious/utils/data-structures/objects.js"
-import { length } from "@inglorious/utils/math/linear-algebra/vector.js"
-import { subtract } from "@inglorious/utils/math/linear-algebra/vectors.js"
-
-// A reusable decision tree node
-const wakeUp = () => ({
-  test: ({ instance, target }) => {
-    const distance = length(subtract(target.position, instance.position))
-    return distance >= 10
-  },
-  true: () => "aware",
-  false: ({ instance }) => instance.state,
-})
-
-// Our decision tree
-const nextState = {
-  test: ({ instance }) => instance.state,
-  idle: () => ({
-    test: ({ instance, target }) => {
-      const distance = length(subtract(target.position, instance.position))
-      return distance < 250
-    },
-    true: () => "aware",
-    false: ({ instance }) => instance.state,
-  }),
-  chasing: () => ({
-    test: ({ instance, target }) => {
-      const distance = length(subtract(target.position, instance.position))
-      return distance >= 250
-    },
-    true: () => "idle",
-    false: () => ({
-      test: ({ instance, target }) => {
-        const distance = length(subtract(target.position, instance.position))
-        return distance < 10
-      },
-      true: () => "sleepy",
-      false: ({ instance }) => instance.state,
-    }),
-  }),
-  sleepy: wakeUp,
-  sleeping: wakeUp,
-}
-
-export default {
-  types: {
-    mouse: [enableMouse()],
-
-    cat: [
-      enableSprite(),
-      enableFsm({
-        idle: {
-          "game:update"(instance, event, options) {
-            const { mouse } = options.instances
-
-            Sprite.play("idle", instance, options)
-
-            instance.state = decide(nextState, { instance, target: mouse })
-          },
-        },
-
-        aware: {
-          "game:update"(instance, event, options) {
-            Sprite.play("aware", instance, options)
-          },
-
-          "sprite:animationEnd"(instance, event) {
-            const { id, spriteState } = event.payload
-
-            // always check who originated the event and which sprite is running!
-            if (id === instance.id && spriteState === "aware") {
-              instance.state = "chasing"
-            }
-          },
-        },
-
-        chasing: {
-          "game:update"(instance, event, options) {
-            const { mouse } = options.instances
-
-            merge(instance, arrive(instance, mouse, options))
-
-            const spriteState = Sprite.move8(instance)
-            Sprite.play(spriteState, instance, options)
-
-            instance.state = decide(nextState, { instance, target: mouse })
-          },
-        },
-
-        sleepy: {
-          "game:update"(instance, event, options) {
-            const { mouse } = options.instances
-
-            Sprite.play("sleepy", instance, options)
-
-            instance.state = decide(nextState, { instance, target: mouse })
-          },
-
-          "sprite:animationEnd"(instance, event) {
-            const { id, spriteState } = event.payload
-
-            // always check who originated the event and which sprite is running!
-            if (id === instance.id && spriteState === "sleepy") {
-              instance.state = "sleeping"
-            }
-          },
-        },
-
-        sleeping: {
-          "game:update"(instance, event, options) {
-            const { mouse } = options.instances
-
-            Sprite.play("sleeping", instance, options)
-
-            instance.state = decide(nextState, { instance, target: mouse })
-          },
-        },
-      }),
-    ],
-  },
-
-  instances: {
-    game: {
-      pixelated: true,
-    },
-
-    mouse: {
-      type: "mouse",
-      position: [0, 0, 0],
-    },
-
-    neko: {
-      type: "cat",
-      state: "idle",
-      maxSpeed: 250,
-      position: [400, 0, 300],
-      sprite: {
-        image: {
-          id: "neko",
-          src: "/sprites/neko.png",
-          imageSize: [192, 192],
-          tileSize: [32, 32],
-          scale: 2,
-        },
-        speed: 0.2,
-        frames: {
-          idle: [4],
-          aware: [0, 4],
-          leftUp: [0x80000000 + 23, 0x80000000 + 29],
-          up: [28, 30, 28, 31],
-          rightUp: [23, 29],
-          right: [16, 22],
-          rightDown: [13, 14],
-          down: [1, 2, 1, 7],
-          leftDown: [0x80000000 + 13, 0x80000000 + 14],
-          left: [0x80000000 + 16, 0x80000000 + 22],
-          sleepy: [4, 10, 10, 3, 9, 15, 9, 15, 15],
-          sleeping: [26, 26, 27, 27],
-        },
-      },
-    },
-  },
-}

package/src/docs/recipes/random-instances.js

@@ -1,25 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { random } from "@inglorious/utils/math/rng.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    character: [enableCharacter()],
-  },
-
-  instances: {
-    ...Object.fromEntries(
-      Array(100)
-        .fill(null)
-        .map((_, index) => [
-          `character${index + 1}`,
-          {
-            id: `character${index + 1}`,
-            type: "character",
-            position: [random(0, 800), 0, random(0, 600)],
-            orientation: random(0, 2 * pi(), 0.01),
-          },
-        ]),
-    ),
-  },
-}

package/src/docs/recipes/recipes.mdx

@@ -1,81 +0,0 @@
-import { Canvas, Meta, Source } from '@storybook/blocks'
-import * as Recipes from './recipes.stories'
-
-import addAndRemove from './add-and-remove?raw'
-import addInstance from './add-instance?raw'
-import decisionTree from './decision-tree?raw'
-import randomInstances from './random-instances?raw'
-import removeInstance from './remove-instance?raw'
-import states from './states?raw'
-
-<Meta of={Recipes} />
-
-# Recipes
-
-Some common patterns that can be used in your game. Check the source code of each recipe and take inspiration!
-
-## Spawning Random Instances
-
-The game configuration is pure JavaScript, so there's not much difference between defining the instances one by one or writing some code that generates them automatically!
-
-Here we are using a couple of utility functions from the [rng](/?path=/docs/utils-math-rng--docs) and [trigonometry](/?path=/docs/utils-math-trigonometry--docs) packages.
-
-<Source dark code={randomInstances} />
-
-<Canvas of={Recipes.RandomInstances} />
-
-## Adding An Instance
-
-Programmatically adding a new instance to the scene is as easy as sending an event to the game engine asking nicely.
-
-Try clicking anywhere on the scene to create a new instance with random orientation.
-
-Here, apart from some math functions, we are also using a predefined mouse [input](/?path=/docs/games-input--docs) package that allows us to position a cursor and handle its events.
-
-<Source dark code={addInstance} />
-
-<Canvas of={Recipes.AddInstance} />
-
-## Removing An Instance
-
-Removing an instance is pretty much the same: we notify the engine of our intention and we enjoy the result.
-
-Try clicking on any instance do remove it from the scene.
-
-<Source dark code={removeInstance} />
-
-<Canvas of={Recipes.RemoveInstance} />
-
-## Add And Remove
-
-Clicking on a character will prevent the event from bubbling on the scene, so it's safe to add and remove characters by using the same strategy: click as if there's no tomorrow!
-
-The most complex part of this code is generating new incremental ids, which is not even mandatory. You know best what's good for your game!
-
-<Source dark code={addAndRemove} />
-
-<Canvas of={Recipes.AddAndRemove} />
-
-## States
-
-Adding a states to our character is very easy, in fact every game so far was secretely using states already!
-
-We just need to wrap our event handlers into a `states` object, set an initial `state` on our instance, and transition from one state to another inside our event handlers.
-
-Try moving the cursor near the character to make it hunt you, and then moving it away to see the character wander around aimlessly.
-
-This code may seem a lot, but it's just a merge of the *Arrive* and *Wander* [Kinematic AI Movement](/?path=/docs/games-ai-movement-kinematic--docs) examples so feel free to take a look at them before approaching this one.
-
-<Source dark code={states} />
-
-<Canvas of={Recipes.States} />
-
-## Decision Trees
-
-Decision trees are another sweet feature built-in inside of Inglorious Engine. The following example doesn't really need one, but why not?
-
-This game also showcases sprites!
-
-<Source dark code={decisionTree} />
-
-<Canvas of={Recipes.DecisionTree} />

package/src/docs/recipes/recipes.stories.js

@@ -1,37 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-import addAndRemove from "./add-and-remove.js"
-import addInstance from "./add-instance.js"
-import decisionTree from "./decision-tree.js"
-import randomInstances from "./random-instances.js"
-import removeInstance from "./remove-instance.js"
-import states from "./states.js"
-
-export default {
-  title: "Engine/Recipes",
-  component: UiChooser,
-}
-
-export const RandomInstances = {
-  args: { config: randomInstances },
-}
-
-export const AddInstance = {
-  args: { config: addInstance },
-}
-
-export const RemoveInstance = {
-  args: { config: removeInstance },
-}
-
-export const AddAndRemove = {
-  args: { config: addAndRemove },
-}
-
-export const States = {
-  args: { config: states },
-}
-
-export const DecisionTree = {
-  args: { config: decisionTree },
-}

package/src/docs/recipes/remove-instance.js

@@ -1,52 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { random } from "@inglorious/utils/math/rng.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    mouse: [enableMouse()],
-
-    character: [
-      enableCharacter(),
-      {
-        // this event handler is needed in React
-        "instance:click"(instance, event, { notify }) {
-          notify({ id: "instance:remove", payload: event.payload })
-        },
-      },
-    ],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-      position: [400, 0, 300],
-      collisions: {
-        hitbox: {
-          shape: "circle",
-          radius: 1,
-        },
-      },
-    },
-
-    ...Object.fromEntries(
-      Array(5)
-        .fill(null)
-        .map((_, index) => [
-          `character${index + 1}`,
-          {
-            type: "character",
-            position: [random(0, 800), 0, random(0, 600)],
-            orientation: random(0, 2 * pi(), 0.01),
-            collisions: {
-              hitbox: {
-                shape: "circle",
-                radius: 12,
-              },
-            },
-          },
-        ]),
-    ),
-  },
-}

package/src/docs/recipes/states.js

@@ -1,64 +0,0 @@
-import arrive from "@inglorious/engine/ai/movement/kinematic/arrive.js"
-import wander from "@inglorious/engine/ai/movement/kinematic/wander.js"
-import { clampToBounds, flip } from "@inglorious/game/bounds.js"
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableFsm } from "@inglorious/game/decorators/fsm.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { merge } from "@inglorious/utils/data-structures/objects.js"
-import { length } from "@inglorious/utils/math/linear-algebra/vector.js"
-import { subtract } from "@inglorious/utils/math/linear-algebra/vectors.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    mouse: [enableMouse()],
-
-    character: [
-      enableCharacter(),
-      enableFsm({
-        meandering: {
-          "game:update"(instance, event, options) {
-            const { instances } = options
-            const target = instances.mouse
-
-            merge(instance, wander(instance, options))
-            flip(instance, instances.game.bounds)
-
-            if (length(subtract(instance.position, target.position)) < 200) {
-              instance.state = "hunting"
-            }
-          },
-        },
-
-        hunting: {
-          "game:update"(instance, event, options) {
-            const { instances } = options
-            const target = instances.mouse
-
-            merge(instance, arrive(instance, target, options))
-            clampToBounds(instance, instances.game.bounds)
-
-            if (length(subtract(instance.position, target.position)) >= 200) {
-              instance.state = "meandering"
-            }
-          },
-        },
-      }),
-    ],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-      position: [0, 0, 0],
-    },
-
-    character: {
-      type: "character",
-      state: "meandering",
-      maxSpeed: 250,
-      maxAngularSpeed: pi() / 4,
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/ui/button.js

@@ -1,28 +0,0 @@
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { enableButton } from "@inglorious/game/decorators/ui/button.js"
-
-export default {
-  types: {
-    mouse: [enableMouse()],
-
-    button: [
-      enableButton(),
-      {
-        size: [100, 50, 0],
-        color: "black",
-        backgroundColor: "darkgrey",
-      },
-    ],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-    },
-
-    rect1: {
-      type: "button",
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/ui/form.stories.js

@@ -1,55 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-export default {
-  title: "UI/Form",
-  component: UiChooser,
-  args: { ui: "react" },
-}
-
-export const Default = {
-  args: {
-    config: {
-      types: {
-        form: {},
-      },
-
-      instances: {
-        login: {
-          type: "form",
-          position: [150, 0, 600 - 160],
-          fields: {
-            username: {
-              label: "Username",
-            },
-            password: {
-              label: "Password",
-              inputType: "password",
-            },
-          },
-          groups: {
-            extraInfo: {
-              title: "Extra Info",
-              fields: {
-                kids: {
-                  label: "How many kids do you have?",
-                  inputType: "number",
-                  defaultValue: 0,
-                },
-                dogs: {
-                  label: "Do you like dogs?",
-                  inputType: "checkbox",
-                  defaultValue: true,
-                },
-                cats: {
-                  label: "Do you like cats?",
-                  inputType: "checkbox",
-                  defaultValue: true,
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

package/src/docs/ui-chooser.jsx

@@ -1,6 +0,0 @@
-import CanvasGame from "@inglorious/docs/game.jsx"
-import ReactGame from "@inglorious/ui/react/game/index.jsx"
-
-export default function UiChooser({ ui = "canvas", ...props }) {
-  return ui === "canvas" ? <CanvasGame {...props} /> : <ReactGame {...props} />
-}

package/src/docs/utils/data-structures/object.mdx

@@ -1,47 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-import { filter, find, map, toString } from '@inglorious/utils/data-structures/object'
-
-<Meta title="Utils/Data Structures/Object" />
-
-# Object
-
-Functions that deal with a single object.
-
-## Filter
-
-Behaves similar to `Array.prototype.filter`, returning an object that contains only properties that satisfy the given predicate.
-
-<code>const predicate = (key) =&gt; ['key2', 'key3'].includes(key)</code>&nbsp;
-
-<code>const obj =  \{ key1: 'value1', key2: 'value2', key3: 'value3' \}</code>&nbsp;
-
-<code>filter(obj, predicate) == {toString(filter({ key1: 'value1', key2: 'value2', key3: 'value3' }, (key) => ['key2', 'key3'].includes(key)))}</code>&nbsp;
-
-## Find
-
-Behaves similar to `Array.prototype.find`, returning an object that contains only the first property that satisfies the given predicate.
-
-<code>const predicate = (key) =&gt; ['key2', 'key3'].includes(key)</code>&nbsp;
-
-<code>const obj = \{ key1: 'value1', key2: 'value2', key3: 'value3' \}</code>&nbsp;
-
-<code>find(obj, predicate) == {toString(find({ key1: 'value1', key2: 'value2', key3: 'value3' }, (key) => ['key2', 'key3'].includes(key)))}</code>&nbsp;
-
-## Map
-
-Behaves similar to `Array.prototype.map`, returning an object that has values transformed according to the given callback.
-
-<code>const callback = (key, value) =&gt; value.toUpperCase()</code>&nbsp;
-
-<code>const obj = \{ key1: 'value1', key2: 'value2', key3: 'value3' \}</code>&nbsp;
-
-<code>map(obj, callback) == {toString(map({ key1: 'value1', key2: 'value2', key3: 'value3' }, (key, value) => value.toUpperCase()))}</code>&nbsp;
-
-## To String
-
-Returns a string representation of a given object.
-
-<code>const obj = \{ key1: 'value1', key2: 'value2', key3: 'value3' \}</code>&nbsp;
-
-<code>toString(obj) == "{toString({ key1: 'value1', key2: 'value2', key3: 'value3' })}"</code>&nbsp;