@inglorious/engine 0.1.0 → 0.1.1

package/src/docs/player/kinematic/shooter-controls.js

@@ -1,48 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableClampToBounds } from "@inglorious/game/decorators/clamp-to-bounds.js"
-import { enableShooterControls } from "@inglorious/game/decorators/controls/kinematic/shooter.js"
-import {
-  createControls,
-  enableControls,
-} from "@inglorious/game/decorators/input/controls.js"
-import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default {
-  types: {
-    mouse: [enableMouse()],
-
-    ...enableControls(),
-
-    character: [
-      enableCharacter(),
-      enableShooterControls(),
-      enableClampToBounds(),
-    ],
-  },
-
-  instances: {
-    mouse: {
-      type: "mouse",
-      position: [400, 0, 300],
-    },
-
-    ...createControls("input0", {
-      ArrowLeft: "left",
-      ArrowRight: "right",
-      ArrowDown: "down",
-      ArrowUp: "up",
-      KeyA: "left",
-      KeyD: "right",
-      KeyS: "down",
-      KeyW: "up",
-    }),
-
-    character: {
-      type: "character",
-      maxAngularSpeed: 2 * pi(),
-      maxSpeed: 250,
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/player/kinematic/tank-controls.js

@@ -1,42 +0,0 @@
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import { enableClampToBounds } from "@inglorious/game/decorators/clamp-to-bounds"
-import { enableTankControls } from "@inglorious/game/decorators/controls/kinematic/tank.js"
-import {
-  createControls,
-  enableControls,
-} from "@inglorious/game/decorators/input/controls.js"
-
-export default {
-  types: {
-    ...enableControls(),
-
-    character: [enableCharacter(), enableTankControls(), enableClampToBounds()],
-  },
-
-  instances: {
-    ...createControls("input0", {
-      ArrowUp: "up",
-      ArrowDown: "down",
-      ArrowLeft: "left",
-      ArrowRight: "right",
-      KeyW: "up",
-      KeyS: "down",
-      KeyA: "left",
-      KeyD: "right",
-      Btn12: "up",
-      Btn13: "down",
-      Btn14: "left",
-      Btn15: "right",
-      Axis0: "strafe",
-      Axis1: "upDown",
-      Axis2: "leftRight",
-    }),
-
-    character: {
-      type: "character",
-      maxAngularSpeed: 10,
-      maxSpeed: 250,
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/quick-start/first-game.js

@@ -1,49 +0,0 @@
-export default {
-  types: {
-    character: {
-      draw(ctx, instance) {
-        const {
-          size = 24,
-          orientation = 0,
-          stroke = "black",
-          fill = "transparent",
-        } = instance
-
-        const radius = size * 0.5
-
-        ctx.save()
-        ctx.rotate(-orientation)
-        ctx.translate(radius - 1, 0)
-
-        ctx.fillStyle = "black"
-
-        ctx.beginPath()
-        ctx.moveTo(0, 6)
-        ctx.lineTo(0, -6)
-        ctx.lineTo(6, 0)
-        ctx.fill()
-        ctx.closePath()
-        ctx.restore()
-
-        ctx.save()
-        ctx.lineWidth = 1
-        ctx.strokeStyle = stroke
-        ctx.fillStyle = fill
-
-        ctx.beginPath()
-        ctx.arc(0, 0, radius, 0, 2 * 3.14)
-        ctx.fill()
-        ctx.stroke()
-        ctx.closePath()
-        ctx.restore()
-      },
-    },
-  },
-
-  instances: {
-    character: {
-      type: "character",
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/quick-start/hello-world.js

@@ -1 +0,0 @@
-export default {}

package/src/docs/quick-start.mdx

@@ -1,127 +0,0 @@
-import { Canvas, Meta, Source } from '@storybook/blocks'
-import * as QuickStart from './quick-start.stories'
-
-import helloWorld from './quick-start/hello-world?raw'
-import firstGame from './quick-start/first-game?raw'
-
-<Meta of={QuickStart} />
-
-# Quick Start Guide
-
-Welcome to Inglorious Engine! This guide will get you up and running in minutes.
-
-## What is Inglorious Engine?
-
-Inglorious Engine is a **functional programming** game engine for JavaScript. Instead of object-oriented programming, it uses:
-- **Global state** - One source of truth for your entire game
-- **Immutability** - State changes create new state, never modify existing
-- **Pure functions** - Predictable, testable, and reusable functions
-- **Function composition** - Combine behaviors like building blocks
-
-## Your First Game
-
-### Step 1: Basic Setup
-
-Create an HTML file with this structure:
-
-```html
-<!doctype html>
-<html lang="en">
-  <body>
-    <canvas id="canvas"></canvas>
-    
-    <script type="importmap">
-      {
-        "imports": {
-          "immer": "https://unpkg.com/immer@10.1.1/dist/immer.mjs",
-          "@inglorious/": "/src/",
-          "game": "./my-game.js"
-        }
-      }
-    </script>
-    
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
-```
-
-### Step 2: Hello World
-
-Create `my-game.js` with the simplest possible game:
-
-<Source dark code={helloWorld} />
-
-<Canvas of={QuickStart.HelloWorld} />
-
-This creates an 800x600 canvas with a light grey background. Not exciting yet, but it's working!
-
-### Step 3: Add a Character
-
-Let's add something to the scene:
-
-<Source dark code={firstGame} />
-
-<Canvas of={QuickStart.FirstGame} />
-
-## Key Concepts
-
-### 1. Game Configuration Structure
-
-Every game has this structure:
-```javascript
-export default {
-  // Static definitions - never change
-  types: {
-    // Define what kinds of objects exist
-  },
-  
-  // Dynamic state - changes during gameplay
-  instances: {
-    // Actual objects in the scene
-  }
-}
-```
-
-### 2. Types vs Instances
-
-- **Types**: Define what something *is* (like a blueprint)
-- **Instances**: Define specific *examples* of that type (like actual objects)
-
-### 3. Event Handlers
-
-To make things move and interact, use event handlers:
-
-```javascript
-types: {
-  character: {
-    // Drawing logic here
-    draw(ctx, instance) { /* ... */ },
-    
-    // Event handlers here
-    events: {
-      'game:update': (instance, event, { dt, config, instances }) => {
-        // This runs every frame
-        // Update position, velocity, etc.
-      }
-    }
-  }
-}
-```
-
-## Next Steps
-
-Now that you have a basic understanding of the engine, you're ready to dive deeper.
-
-Continue to the **[Core Concepts](/docs/engine--docs)** page to learn about event handlers, code reuse, and other essential features.
-
-## Why Functional Programming?
-
-Traditional game engines use objects with methods that modify internal state. Inglorious Engine is different:
-
-✅ **Predictable**: Same input always produces same output  
-✅ **Testable**: Pure functions are easy to test  
-✅ **Composable**: Combine behaviors like LEGO blocks  
-✅ **Debuggable**: State changes are explicit and traceable  
-✅ **Performant**: Immutability enables efficient rendering  
-
-Ready to build your first game? Let's go!

package/src/docs/quick-start.stories.js

@@ -1,17 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-import firstGame from "./quick-start/first-game.js"
-import helloWorld from "./quick-start/hello-world.js"
-
-export default {
-  title: "Quick Start",
-  component: UiChooser,
-}
-
-export const HelloWorld = {
-  args: { config: helloWorld },
-}
-
-export const FirstGame = {
-  args: { config: firstGame },
-}

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} />