@inglorious/engine 0.2.0 → 0.4.0

package/src/{engine/systems → systems}/sprite-animation.js

@@ -1,27 +1,27 @@
-import { Sprite } from "@inglorious/engine/animation/sprite.js"
-
-/**
- * Advances sprite animations for entities that have a sprite component
- * with an active animation state.
- *
- * @param {Object} state - The game state, containing all entities.
- * @param {Object<string, Object>} state.entities - A map of entity IDs to entity objects.
- * @param {number} dt - The delta time since the last update.
- * @param {Object} api - The game API.
- * @param {Function} api.notify - A function to notify about events.
- */
-export function spriteAnimationSystem() {
-  return {
-    update(state, dt, api) {
-      for (const id in state.entities) {
-        const entity = state.entities[id]
-
-        if (!entity.sprite || !entity.sprite.state) {
-          continue
-        }
-
-        Sprite.play(entity.sprite.state, { entity, dt, notify: api.notify })
-      }
-    },
-  }
-}
+import { Sprite } from "@inglorious/engine/animation/sprite.js"
+
+/**
+ * Advances sprite animations for entities that have a sprite component
+ * with an active animation state.
+ *
+ * @param {Object} state - The game state, containing all entities.
+ * @param {Object<string, Object>} state.entities - A map of entity IDs to entity objects.
+ * @param {number} dt - The delta time since the last update.
+ * @param {Object} api - The game API.
+ * @param {Function} api.notify - A function to notify about events.
+ */
+export function spriteAnimationSystem() {
+  return {
+    update(state, dt, api) {
+      for (const id in state.entities) {
+        const entity = state.entities[id]
+
+        if (!entity.sprite || !entity.sprite.state) {
+          continue
+        }
+
+        Sprite.play(entity.sprite.state, { entity, dt, notify: api.notify })
+      }
+    },
+  }
+}

package/src/engine/behaviors/debug/collision.js

@@ -1,35 +0,0 @@
-import { renderHitmask } from "@inglorious/renderers/canvas/image/hitmask.js"
-import { renderCircle } from "@inglorious/renderers/canvas/shapes/circle.js"
-import { renderRectangle } from "@inglorious/renderers/canvas/shapes/rectangle.js"
-import { extend } from "@inglorious/utils/data-structures/objects.js"
-
-const Shape = {
-  circle: renderCircle,
-  rectangle: renderRectangle,
-  platform: renderRectangle,
-  hitmask: renderHitmask,
-}
-
-export function collisionGizmos() {
-  return (type) =>
-    extend(type, {
-      render(entity, ctx, api) {
-        type.render(entity, ctx, api)
-
-        const game = api.getEntity("game")
-
-        if (!game.debug) {
-          return
-        }
-
-        ctx.save()
-
-        Object.values(entity.collisions).forEach((collision) => {
-          const render = Shape[collision.shape]
-          render({ ...entity, ...collision, color: "#00FF00" }, ctx, api)
-        })
-
-        ctx.restore()
-      },
-    })
-}

package/src/engine/core/api.js

@@ -1,34 +0,0 @@
-import { createSelector as _createSelector } from "./select.js"
-
-export function createApi(store) {
-  const createSelector = (inputSelectors, resultFunc) => {
-    const selector = _createSelector(inputSelectors, resultFunc)
-    return () => selector(store.getState())
-  }
-
-  const getTypes = () => store.getTypes()
-
-  const getEntities = () => store.getState().entities
-
-  const getEntity = (id) => getEntities()[id]
-
-  const notify = (type, payload) => {
-    store.notify(type, payload)
-  }
-
-  const dispatch = (action) => {
-    store.dispatch(action)
-  }
-
-  const getType = (id) => store.getOriginalTypes()?.[id]
-
-  return {
-    createSelector,
-    getTypes,
-    getEntities,
-    getEntity,
-    getType,
-    notify,
-    dispatch,
-  }
-}

package/src/engine/core/select.js

@@ -1,26 +0,0 @@
-/**
- * Creates a memoized selector function.
- * NB: this implementation does not support spreading the input selectors for clarity, please just put them in an array.
- * @param {Array<Function>} inputSelectors - An array of input selector functions.
- * @param {Function} resultFunc - A function that receives the results of the input selectors and returns a computed value.
- * @returns {Function} A memoized selector function that, when called, returns the selected state.
- */
-export function createSelector(inputSelectors, resultFunc) {
-  let lastInputs = []
-  let lastResult = null
-
-  return (state) => {
-    const nextInputs = inputSelectors.map((selector) => selector(state))
-    const inputsChanged =
-      lastInputs.length !== nextInputs.length ||
-      nextInputs.some((input, index) => input !== lastInputs[index])
-
-    if (!inputsChanged) {
-      return lastResult
-    }
-
-    lastInputs = nextInputs
-    lastResult = resultFunc(...nextInputs)
-    return lastResult
-  }
-}

package/src/engine/core/store.js

@@ -1,178 +0,0 @@
-import { map } from "@inglorious/utils/data-structures/object.js"
-import { extend } from "@inglorious/utils/data-structures/objects.js"
-import { pipe } from "@inglorious/utils/functions/functions.js"
-import { produce } from "immer"
-
-/**
- * Creates a store to manage state and events.
- * @param {Object} config - Configuration options for the store.
- * @param {Object} [config.types] - The initial types configuration.
- * @param {Object} [config.entities] - The initial entities configuration.
- * @returns {Object} The store with methods to interact with state and events.
- */
-export function createStore({
-  types: originalTypes,
-  entities: originalEntities,
-  systems = [],
-}) {
-  const listeners = new Set()
-  let incomingEvents = []
-
-  let types = augmentTypes(originalTypes)
-  let entities = augmentEntities(originalEntities)
-
-  const initialState = { entities }
-  let state = initialState
-
-  return {
-    subscribe,
-    update,
-    notify,
-    dispatch, // needed for compatibility with Redux
-    getTypes,
-    getOriginalTypes,
-    getState,
-    setState,
-    reset,
-  }
-
-  /**
-   * Subscribes a listener to state updates.
-   * @param {Function} listener - The listener function to call on updates.
-   * @returns {Function} A function to unsubscribe the listener.
-   */
-  function subscribe(listener) {
-    listeners.add(listener)
-
-    return function unsubscribe() {
-      listeners.delete(listener)
-    }
-  }
-
-  /**
-   * Updates the state based on elapsed time and processes events.
-   * @param {number} dt - The delta time since the last update in milliseconds.
-   * @param {Object} api - The engine's public API.
-   */
-  function update(dt, api) {
-    const processedEvents = []
-
-    state = produce(state, (state) => {
-      incomingEvents.push({ type: "update", payload: dt })
-
-      while (incomingEvents.length) {
-        const event = incomingEvents.shift()
-        processedEvents.push(event)
-
-        if (event.type === "morph") {
-          const { id, type } = event.payload
-          originalTypes[id] = type
-          types = augmentTypes(originalTypes)
-        }
-
-        if (event.type === "add") {
-          const { id, ...entity } = event.payload
-          state.entities[id] = augmentEntity(id, entity)
-        }
-
-        if (event.type === "remove") {
-          const id = event.payload
-          delete state.entities[id]
-        }
-
-        for (const id in state.entities) {
-          const entity = state.entities[id]
-          const type = types[entity.type]
-          const handle = type[event.type]
-          handle?.(entity, event.payload, api)
-        }
-
-        systems.forEach((system) => {
-          const handle = system[event.type]
-          handle?.(state, event.payload, api)
-        })
-      }
-    })
-
-    listeners.forEach((onUpdate) => onUpdate())
-
-    return processedEvents
-  }
-
-  /**
-   * Notifies the store of a new event.
-   * @param {string} type - The event object type to notify.
-   * @param {any} payload - The event object payload to notify.
-   */
-  function notify(type, payload) {
-    dispatch({ type, payload })
-  }
-
-  /**
-   * Dispatches an event to be processed in the next update cycle.
-   * @param {Object} event - The event object.
-   * @param {string} event.type - The type of the event.
-   * @param {any} [event.payload] - The payload of the event.
-   */
-  function dispatch(event) {
-    incomingEvents.push(event)
-  }
-
-  /**
-   * Retrieves the augmented types configuration.
-   * This includes composed behaviors and event handlers wrapped for immutability.
-   * @returns {Object} The augmented types configuration.
-   */
-  function getTypes() {
-    return types
-  }
-
-  /**
-   * Retrieves the original, un-augmented types configuration.
-   * @returns {Object} The original types configuration.
-   */
-  function getOriginalTypes() {
-    return originalTypes
-  }
-
-  /**
-   * Retrieves the current state.
-   * @returns {Object} The current state.
-   */
-  function getState() {
-    return state
-  }
-
-  function setState(newState) {
-    state = newState
-  }
-
-  function reset() {
-    state = initialState // Reset state to its originally computed value
-  }
-}
-
-function augmentTypes(types) {
-  return pipe(applyBehaviors)(types)
-}
-
-function applyBehaviors(types) {
-  return map(types, (_, type) => {
-    if (!Array.isArray(type)) {
-      return type
-    }
-
-    const behaviors = type.map((fn) =>
-      typeof fn !== "function" ? (type) => extend(type, fn) : fn,
-    )
-    return pipe(...behaviors)({})
-  })
-}
-
-function augmentEntities(entities) {
-  return map(entities, augmentEntity)
-}
-
-function augmentEntity(id, entity) {
-  return { ...entity, id }
-}

package/src/engine/core/store.test.js

@@ -1,110 +0,0 @@
-import { expect, test } from "vitest"
-
-import { createStore } from "./store.js"
-
-test("it should process events by mutating state inside handlers", () => {
-  const config = {
-    types: {
-      kitty: {
-        feed(entity) {
-          entity.isFed = true
-        },
-        update(entity) {
-          entity.isMeowing = true
-        },
-      },
-    },
-    entities: {
-      kitty1: { type: "kitty" },
-    },
-  }
-  const afterState = {
-    entities: {
-      kitty1: {
-        id: "kitty1",
-        type: "kitty",
-        isFed: true,
-        isMeowing: true,
-      },
-    },
-  }
-
-  const store = createStore(config)
-  store.notify("feed")
-  store.update(0, {})
-
-  const state = store.getState()
-  expect(state).toStrictEqual(afterState)
-})
-
-test("it should send an event from an entity and process it in the same update cycle", () => {
-  const config = {
-    types: {
-      doggo: {
-        update(entity, dt, api) {
-          api.notify("bark")
-        },
-      },
-      kitty: {
-        bark(entity) {
-          entity.position = "far"
-        },
-      },
-    },
-    entities: {
-      doggo1: { type: "doggo" },
-      kitty1: { type: "kitty", position: "near" },
-    },
-  }
-  const afterState = {
-    entities: {
-      doggo1: { id: "doggo1", type: "doggo" },
-      kitty1: { id: "kitty1", type: "kitty", position: "far" },
-    },
-  }
-
-  const store = createStore(config)
-  const api = { notify: store.notify }
-  store.update(0, api)
-
-  const state = store.getState()
-  expect(state).toStrictEqual(afterState)
-})
-
-test("it should add an entity via an 'add' event", () => {
-  const config = {
-    types: {
-      kitty: {},
-    },
-    entities: {},
-  }
-  const newEntity = { id: "kitty1", type: "kitty" }
-
-  const store = createStore(config)
-  store.notify("add", newEntity)
-  store.update(0, {})
-
-  const state = store.getState()
-  expect(state).toStrictEqual({
-    entities: {
-      kitty1: { id: "kitty1", type: "kitty" },
-    },
-  })
-})
-
-test("it should remove an entity via a 'remove' event", () => {
-  const config = {
-    types: {},
-    entities: {
-      kitty1: { type: "kitty" },
-    },
-  }
-  const store = createStore(config)
-
-  store.notify("remove", "kitty1")
-
-  store.update(0, {})
-
-  const state = store.getState()
-  expect(state.entities.kitty1).toBeUndefined()
-})

package/src/renderers/canvas/absolute-position.js

@@ -1,18 +0,0 @@
-import { snap, zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-
-export function absolutePosition(render) {
-  return (entity, ctx, { api }) => {
-    const { position = zero() } = entity
-    const [x, y, z] = snap(position)
-
-    const game = api.getEntity("game")
-    const [, , , screenHeight] = game.bounds
-
-    ctx.save()
-
-    ctx.translate(x, screenHeight - y - z)
-    render(entity, ctx, api)
-
-    ctx.restore()
-  }
-}

package/src/renderers/canvas/camera.js

@@ -1,13 +0,0 @@
-import { renderRectangle } from "./shapes/rectangle.js"
-
-export function renderCamera(entity, ctx, api) {
-  const { devMode } = api.getEntity("game")
-
-  if (devMode) {
-    // In dev mode, we want to see the camera's viewport.
-    // We can reuse the rectangle renderer.
-    renderRectangle(entity, ctx)
-  }
-  // In non-dev mode, the camera itself is not rendered;
-  // its properties are used by the main CanvasRenderer to transform the scene.
-}

package/src/renderers/canvas/canvas-renderer.js

@@ -1,68 +0,0 @@
-import { track } from "@inglorious/engine/behaviors/input/mouse.js"
-
-import { createRenderingSystem } from "./rendering-system.js"
-
-export class CanvasRenderer {
-  _onKeyPress = null
-  _onMouseMove = null
-  _onClick = null
-  _onWheel = null
-
-  constructor(canvas) {
-    this.canvas = canvas
-    this.ctx = canvas.getContext("2d")
-  }
-
-  getSystems() {
-    return [createRenderingSystem(this.ctx)]
-  }
-
-  init(engine) {
-    const game = engine._api.getEntity("game")
-    const [, , width, height] = game.bounds
-
-    this.canvas.style.width = `${width}px`
-    this.canvas.style.height = `${height}px`
-    const dpi = window.devicePixelRatio
-    this.canvas.width = width * dpi
-    this.canvas.height = height * dpi
-    this.ctx.scale(dpi, dpi)
-
-    if (game.pixelated) {
-      this.canvas.style.imageRendering = "pixelated"
-      this.ctx.textRendering = "geometricPrecision"
-      this.ctx.imageSmoothingEnabled = false
-    }
-
-    this._onKeyPress = (event) => {
-      if (event.key === "p") {
-        engine.isRunning ? engine.stop() : engine.start()
-      }
-    }
-    document.addEventListener("keypress", this._onKeyPress)
-
-    const { onMouseMove, onClick, onWheel } = track(this.canvas, engine._api)
-    this._onMouseMove = onMouseMove
-    this._onClick = onClick
-    this._onWheel = onWheel
-
-    this.canvas.addEventListener("mousemove", this._onMouseMove)
-    this.canvas.addEventListener("click", this._onClick)
-    this.canvas.addEventListener("wheel", this._onWheel)
-  }
-
-  destroy() {
-    if (this._onKeyPress) {
-      document.removeEventListener("keypress", this._onKeyPress)
-    }
-    if (this._onMouseMove) {
-      this.canvas.removeEventListener("mousemove", this._onMouseMove)
-    }
-    if (this._onClick) {
-      this.canvas.removeEventListener("click", this._onClick)
-    }
-    if (this._onWheel) {
-      this.canvas.removeEventListener("wheel", this._onWheel)
-    }
-  }
-}

package/src/renderers/canvas/character.js

@@ -1,38 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import { renderCircle } from "./shapes/circle.js"
-
-export function renderCharacter(entity, ctx) {
-  const { size = 24, orientation = 0 } = entity
-
-  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()
-
-  renderCircle(
-    {
-      ...entity,
-      radius,
-      position: undefined,
-      backgroundColor: "lightgrey",
-    },
-    ctx,
-  )
-
-  ctx.restore()
-}

package/src/renderers/canvas/form/button.js

@@ -1,25 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-export function renderButton(entity, ctx) {
-  const { size, color = "black", thickness = 1 } = entity
-  const [width = 100, height = 50] = size
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-
-  if (entity.state === "pressed") {
-    ctx.fillStyle = "white"
-  } else {
-    ctx.fillStyle = "black"
-  }
-
-  ctx.beginPath()
-  ctx.fillRect(-width / 2, -height / 2, width, height)
-  ctx.strokeRect(-width / 2, -height / 2, width, height)
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}

package/src/renderers/canvas/fps.js

@@ -1,18 +0,0 @@
-const DEFAULT_PADDING = 10
-const ONE_SECOND = 1
-
-export function renderFps(entity, ctx) {
-  const { accuracy, size, value } = entity.dt
-
-  ctx.save()
-
-  ctx.font = `${size}px sans serif`
-  ctx.fillStyle = "black"
-  ctx.fillText(
-    (ONE_SECOND / value).toFixed(accuracy),
-    DEFAULT_PADDING,
-    DEFAULT_PADDING + size,
-  )
-
-  ctx.restore()
-}

package/src/renderers/canvas/image/hitmask.js

@@ -1,51 +0,0 @@
-import { renderRectangle } from "@inglorious/renderers/canvas/shapes/rectangle.js"
-import { max } from "@inglorious/utils/data-structures/array.js"
-
-const HALF = 2
-const NO_Y = 0
-const MAX_HUE = 255
-
-export function renderHitmask(entity, ctx) {
-  const { tileSize, columns, heights } = entity
-
-  const [tileWidth, tileHeight] = tileSize
-  const halfTileWidth = tileWidth / HALF
-  const halfTileHeight = tileHeight / HALF
-
-  const dRows = Math.ceil(heights.length / columns)
-  const tilemapWidth = columns * tileWidth
-  const tilemapHeight = dRows * tileHeight
-
-  const offsetX = -tilemapWidth / HALF
-  const offsetY = tilemapHeight / HALF
-
-  const minH = 0
-  const maxH = max(heights)
-
-  ctx.save()
-
-  ctx.translate(offsetX, offsetY)
-
-  heights.forEach((h, index) => {
-    const dx = (index % columns) * tileWidth
-    const dy = Math.floor(index / columns) * tileHeight - tilemapHeight
-
-    const normalizedH = (h - minH) / (maxH - minH)
-    const hue = MAX_HUE - normalizedH * MAX_HUE
-
-    ctx.save()
-
-    const entity = {
-      offset: [dx + halfTileWidth, NO_Y, -dy - halfTileHeight],
-      size: [tileWidth, NO_Y, tileHeight],
-      color: "transparent",
-      backgroundColor: `hsla(${hue}, 100%, 50%, 0.2)`,
-    }
-
-    renderRectangle(entity, ctx)
-
-    ctx.restore()
-  })
-
-  ctx.restore()
-}