@inglorious/engine 0.1.0 → 0.2.0

package/src/engine/behaviors/input/keyboard.js

@@ -0,0 +1,64 @@
+const DEFAULT_PARAMS = {
+  name: "keyboard0",
+}
+
+export function keyboard() {
+  let handleKeyDown, handleKeyUp
+  let currentDocument = null
+
+  return {
+    start(_, api) {
+      currentDocument = document.body.ownerDocument || document
+
+      handleKeyDown = createKeyboardHandler("keyboardKeyDown", api)
+      handleKeyUp = createKeyboardHandler("keyboardKeyUp", api)
+
+      currentDocument.addEventListener("keydown", handleKeyDown)
+      currentDocument.addEventListener("keyup", handleKeyUp)
+    },
+
+    stop() {
+      currentDocument.removeEventListener("keydown", handleKeyDown)
+      currentDocument.removeEventListener("keyup", handleKeyUp)
+    },
+
+    keyboardKeyDown(entity, keyCode, api) {
+      const action = entity.mapping[keyCode]
+      if (!action) {
+        return
+      }
+
+      if (!entity[action]) {
+        entity[action] = true
+        api.notify("inputPress", { controlId: entity.id, action })
+      }
+    },
+
+    keyboardKeyUp(entity, keyCode, api) {
+      const action = entity.mapping[keyCode]
+      if (!action) {
+        return
+      }
+
+      if (entity[action]) {
+        entity[action] = false
+        api.notify("inputRelease", { controlId: entity.id, action })
+      }
+    },
+  }
+}
+
+export function createKeyboard(
+  name = DEFAULT_PARAMS.name,
+  targetInput,
+  mapping = {},
+) {
+  return { id: name, type: "keyboard", targetInput, mapping }
+}
+
+function createKeyboardHandler(id, api) {
+  return (event) => {
+    event.stopPropagation()
+    api.notify(id, event.code)
+  }
+}

package/src/engine/behaviors/input/mouse.js

@@ -0,0 +1,91 @@
+import { findCollision } from "@inglorious/engine/collision/detection.js"
+import { clampToBounds } from "@inglorious/engine/physics/bounds.js"
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+const DEFAULT_PARAMS = {
+  name: "mouse",
+}
+
+const NO_Y = 0
+
+export function mouse() {
+  return {
+    start(entity) {
+      entity.collisions ??= {}
+      entity.collisions.bounds ??= { shape: "point" }
+    },
+
+    mouseMove(entity, position, api) {
+      const game = api.getEntity("game")
+
+      entity.position = position
+
+      clampToBounds(entity, game.bounds)
+    },
+
+    mouseClick(entity, position, api) {
+      const entities = api.getEntities()
+      const clickedEntity = findCollision(entity, entities)
+      if (clickedEntity) {
+        api.notify("entityClick", clickedEntity.id)
+      } else {
+        api.notify("sceneClick", position)
+      }
+    },
+  }
+}
+
+export function track(parent, options) {
+  const handleMouseMove = createHandler("mouseMove", parent, options)
+  const handleClick = createHandler("mouseClick", parent, options)
+  const handleWheel = createHandler("mouseWheel", parent, options)
+
+  return {
+    onMouseMove: handleMouseMove,
+    onClick: handleClick,
+    onWheel: handleWheel,
+  }
+}
+
+export function createMouse(name = DEFAULT_PARAMS.name, overrides = {}) {
+  return {
+    id: name,
+    type: "mouse",
+    layer: 999, // A high layer value to ensure it's always rendered on top
+    position: zero(),
+    ...overrides,
+  }
+}
+
+function createHandler(type, parent, api) {
+  return (event) => {
+    event.stopPropagation()
+
+    if (parent == null) {
+      return
+    }
+
+    // For wheel events, the payload is different from other mouse events.
+    if (type === "mouseWheel") {
+      api.notify(type, { deltaY: event.deltaY })
+      return
+    }
+
+    // For move and click events, the payload is the calculated position.
+    const payload = calculatePosition({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      parent,
+    })
+    api.notify(type, payload)
+  }
+}
+
+function calculatePosition({ clientX, clientY, parent }) {
+  const bounds = parent.getBoundingClientRect()
+
+  const x = clientX - bounds.left
+  const z = bounds.bottom - clientY
+
+  return [x, NO_Y, z]
+}

package/src/engine/behaviors/physics/bouncy.js

@@ -0,0 +1,25 @@
+import { defaults, extend } from "@inglorious/utils/data-structures/objects.js"
+import { jump } from "@inglorious/utils/physics/jump.js"
+
+const DEFAULT_PARAMS = {
+  bounciness: 1,
+}
+
+export function bouncy(params) {
+  params = extend(DEFAULT_PARAMS, params)
+
+  return (type) =>
+    extend(type, {
+      start(entity) {
+        type.start?.(entity)
+        defaults(entity, params)
+      },
+
+      landed(entity, { entityId }) {
+        if (entity.id === entityId) {
+          entity.vy = jump(entity) * entity.bounciness
+          entity.groundObject = undefined
+        }
+      },
+    })
+}

package/src/engine/behaviors/physics/clamped.js

@@ -0,0 +1,36 @@
+import { clampToBounds } from "@inglorious/engine/physics/bounds.js"
+import { extend, merge } from "@inglorious/utils/data-structures/objects.js"
+
+const DEFAULT_PARAMS = {
+  collisionGroup: "bounds",
+  depthAxis: "y",
+}
+
+export function clamped(params) {
+  params = extend(DEFAULT_PARAMS, params)
+
+  return (type) =>
+    extend(type, {
+      start(entity, api) {
+        type.start?.(entity, api)
+
+        entity.collisions ??= {}
+        entity.collisions[params.collisionGroup] ??= {}
+        entity.collisions[params.collisionGroup].shape ??= "rectangle"
+      },
+
+      update(entity, dt, api) {
+        type.update?.(entity, dt, api)
+
+        const game = api.getEntity("game")
+        merge(entity, {
+          position: clampToBounds(
+            entity,
+            game.bounds,
+            params.collisionGroup,
+            params.depthAxis,
+          ),
+        })
+      },
+    })
+}

package/src/{game/decorators/collisions.js → engine/behaviors/physics/collidable.js}

@@ -1,24 +1,20 @@
-import { extend } from "@inglorious/utils/data-structures/objects.js"
-
-const DEFAULT_PARAMS = {
-  onState: "default",
-}
-
-export function enableCollisions(params) {
-  params = extend(DEFAULT_PARAMS, params)
-
-  return (type) =>
-    extend(type, {
-      states: {
-        [params.onState]: {
-          "game:update"(instance, event, options) {
-            type.states?.[params.onState]["game:update"]?.(
-              instance,
-              event,
-              options,
-            )
-          },
-        },
-      },
-    })
-}
+import { extend } from "@inglorious/utils/data-structures/objects.js"
+
+const DEFAULT_PARAMS = {
+  onState: "default",
+}
+
+export function collidable(params) {
+  params = extend(DEFAULT_PARAMS, params)
+
+  return (type) =>
+    extend(type, {
+      states: {
+        [params.onState]: {
+          update(entity, dt, api) {
+            type.states?.[params.onState].update?.(entity, dt, api)
+          },
+        },
+      },
+    })
+}

package/src/engine/behaviors/physics/jumpable.js

@@ -0,0 +1,145 @@
+import { findCollision } from "@inglorious/engine/collision/detection.js"
+import { defaults, extend } from "@inglorious/utils/data-structures/objects.js"
+import {
+  angle,
+  magnitude,
+  zero,
+} from "@inglorious/utils/math/linear-algebra/vector.js"
+import { applyGravity } from "@inglorious/utils/physics/gravity.js"
+import { jump } from "@inglorious/utils/physics/jump.js"
+
+const DEFAULT_PARAMS = {
+  maxSpeed: 250,
+  maxJump: 100,
+  maxLeap: 100,
+  maxJumps: 1,
+}
+
+const DOUBLE = 2
+const HALF = 2
+const X = 0
+const Y = 1
+const NO_VELOCITY = 0
+const NO_PENETRAION = 0
+
+export function jumpable(params) {
+  params = extend(DEFAULT_PARAMS, params)
+
+  return (type) =>
+    extend(type, {
+      start(entity, api) {
+        type.start?.(entity, api)
+        defaults(entity, params)
+        entity.jumpsLeft ??= entity.maxJumps
+
+        entity.velocity ??= zero()
+        entity.vy ??= 0
+      },
+
+      jump(entity, { entityId }) {
+        if (entityId === entity.id && entity.jumpsLeft) {
+          entity.vy = jump(entity)
+          entity.groundObject = undefined
+          entity.jumpsLeft--
+        }
+      },
+
+      update(entity, dt, api) {
+        type.update?.(entity, dt, api)
+
+        const entities = api.getEntities()
+
+        entity.collisions ??= {}
+        entity.collisions.platform ??= {}
+        entity.collisions.platform.shape ??= "rectangle"
+
+        let width, height
+        if (entity.collisions.platform.shape === "circle") {
+          width = entity.collisions.platform.radius * DOUBLE
+          height = entity.collisions.platform.radius * DOUBLE
+        } else {
+          ;[width, height] = entity.size
+        }
+        const [prevX, prevY] = [...entity.position]
+
+        // 1. HORIZONTAL MOVEMENT & RESOLUTION
+        entity.position[X] += entity.velocity[X] * dt
+        const entityLeft = entity.position[X] - width / HALF
+        const entityRight = entity.position[X] + width / HALF
+
+        const collisionX = findCollision(entity, entities, "platform")
+        if (collisionX) {
+          const vx = entity.velocity[X]
+
+          // Check if moving right and crossing the platform's left edge
+          const prevRight = prevX + width / HALF
+          const platformLeft =
+            collisionX.position[X] - collisionX.size[X] / HALF
+          if (vx > NO_VELOCITY && prevRight <= platformLeft) {
+            const penetration = entityRight - platformLeft
+            if (penetration > NO_PENETRAION) entity.position[X] -= penetration
+            entity.velocity[X] = 0
+          }
+
+          // Check if moving left and crossing the platform's right edge
+          const prevLeft = prevX - width / HALF
+          const platformRight =
+            collisionX.position[X] + collisionX.size[X] / HALF
+          if (vx < NO_VELOCITY && prevLeft >= platformRight) {
+            const penetration = platformRight - entityLeft
+            if (penetration > NO_PENETRAION) entity.position[X] += penetration
+            entity.velocity[X] = 0
+          }
+        }
+
+        // 2. VERTICAL MOVEMENT & RESOLUTION
+        const wasOnGround = entity.groundObject
+        entity.groundObject = undefined
+
+        const { vy, position: nextGravityPosition } = applyGravity(entity, dt)
+        entity.vy = vy
+        entity.position[Y] = nextGravityPosition[Y]
+
+        const collisionY = findCollision(entity, entities, "platform")
+        if (collisionY) {
+          const prevBottom = prevY - height / HALF
+          const platformTop = collisionY.position[Y] + collisionY.size[Y] / HALF
+
+          // Landing on top of a platform (one-way platform logic)
+          if (entity.vy <= NO_VELOCITY && prevBottom >= platformTop) {
+            const entityBottom = entity.position[Y] - height / HALF
+            const penetration = platformTop - entityBottom
+            if (penetration > NO_PENETRAION) entity.position[Y] += penetration
+            entity.vy = 0
+            entity.groundObject = collisionY
+            entity.jumpsLeft = entity.maxJumps
+
+            // Only notify on the frame we actually land, not every frame we're on the ground.
+            if (!wasOnGround) {
+              api.notify("landed", {
+                entityId: entity.id,
+                targetId: collisionY.id,
+              })
+            }
+          }
+
+          // Hitting head on bottom of a platform
+          // else if (entity.vy > 0) {
+          //   const prevTop = prevY + height / HALF
+          //   const platformBottom =
+          //     collisionY.position[Y] - collisionY.size[Y] / HALF
+          //   if (prevTop <= platformBottom) {
+          //     const entityTop = entity.position[Y] + height / HALF
+          //     const penetration = entityTop - platformBottom
+          //     if (penetration > 0) entity.position[Y] -= penetration
+          //     entity.vy = 0
+          //   }
+          // }
+        }
+
+        entity.orientation = magnitude(entity.velocity)
+          ? angle(entity.velocity)
+          : entity.orientation
+      },
+    })
+}

package/src/engine/behaviors/ui/button.js

@@ -0,0 +1,17 @@
+export function button() {
+  return {
+    states: {
+      default: {
+        entityClick(entity) {
+          entity.state = "pressed"
+        },
+      },
+
+      pressed: {
+        entityRelease(entity) {
+          entity.state = "default"
+        },
+      },
+    },
+  }
+}

package/src/engine/collision/detection.js

@@ -1,115 +1,110 @@
-import { filter } from "@inglorious/utils/data-structures/object.js"
-import * as circle from "@inglorious/utils/math/geometry/circle.js"
-import * as hitmask from "@inglorious/utils/math/geometry/hitmask.js"
-import * as line from "@inglorious/utils/math/geometry/line.js"
-import * as platform from "@inglorious/utils/math/geometry/platform.js"
-import * as point from "@inglorious/utils/math/geometry/point.js"
-import * as rectangle from "@inglorious/utils/math/geometry/rectangle.js"
-import * as segment from "@inglorious/utils/math/geometry/segment.js"
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-import { add } from "@inglorious/utils/math/linear-algebra/vectors.js"
-
-const Z = 2 // Z-axis index.
-
-const Shape = {
-  circle,
-  line,
-  platform,
-  point,
-  rectangle,
-  segment,
-  hitmask,
-}
-
-/**
- * Finds the first collision between a point and a list of instances.
- *
- * @param {Point} instance - The point to check for collisions.
- * @param {Options} options - Options for collision detection.
- * @returns {Instance | undefined} The first instance that collides with the point, or undefined if none are found.
- */
-export function findCollision(instance, options = {}) {
-  const { instances, collisionType = "hitbox" } = options
-
-  const otherInstances = filter(
-    instances,
-    (id, { collisions }) => id !== instance.id && collisions?.[collisionType],
-  )
-
-  return Object.values(otherInstances)
-    .toSorted((a, b) => a.position[Z] - b.position[Z])
-    .find((target) => collidesWith(instance, target, collisionType))
-}
-
-export function collidesWith(instance, target, collisionType = "hitbox") {
-  const instanceCollision = instance.collisions[collisionType]
-  const instanceShape = {
-    ...instanceCollision,
-    position: add(instance.position, instanceCollision.position ?? zero()),
-    size: instanceCollision.size ?? instance.size,
-    radius: instanceCollision.radius ?? instance.radius,
-  }
-
-  const targetCollision = target.collisions[collisionType]
-  const targetShape = {
-    ...targetCollision,
-    position: add(target.position, targetCollision.position ?? zero()),
-    size: targetCollision.size ?? target.size,
-    radius: targetCollision.radius ?? target.radius,
-  }
-
-  return shapeCollidesWith(instanceShape, targetShape)
-}
-
-function shapeCollidesWith(instance, target) {
-  const shapeFns = Shape[instance.shape]
-
-  switch (target.shape) {
-    case "circle":
-      return shapeFns.intersectsCircle(instance, target)
-
-    case "line":
-      return shapeFns.intersectsLine(instance, target)
-
-    case "platform":
-      return shapeFns.intersectsPlatform(instance, target)
-
-    case "point":
-      return shapeFns.intersectsPoint(instance, target)
-
-    case "rectangle":
-      return shapeFns.intersectsRectangle(instance, target)
-
-    case "segment":
-      return shapeFns.intersectsSegment(instance, target)
-  }
-}
-
-export function findCollisions(instance, target, collisionType = "hitbox") {
-  const instanceCollision = instance.collisions[collisionType]
-  const shapeFns = Shape[instanceCollision.shape]
-  const instanceShape = {
-    ...instanceCollision,
-    position: add(instance.position, instanceCollision.offset ?? zero()),
-    heights: flipUpsideDown(
-      instanceCollision.heights,
-      instanceCollision.columns,
-    ),
-  }
-
-  const targetCollision = target.collisions[collisionType]
-  const targetShape = {
-    ...targetCollision,
-    position: add(target.position, targetCollision.offset ?? zero()),
-  }
-
-  return shapeFns.findCollisions(instanceShape, targetShape)
-}
-
-export function flipUpsideDown(grid, columns) {
-  const rows = []
-  for (let i = 0; i < grid.length; i += columns) {
-    rows.push(grid.slice(i, i + columns))
-  }
-  return rows.reverse().flat()
-}
+import { filter } from "@inglorious/utils/data-structures/object.js"
+import * as circle from "@inglorious/utils/math/geometry/circle.js"
+import * as hitmask from "@inglorious/utils/math/geometry/hitmask.js"
+import * as line from "@inglorious/utils/math/geometry/line.js"
+import * as point from "@inglorious/utils/math/geometry/point.js"
+import * as rectangle from "@inglorious/utils/math/geometry/rectangle.js"
+import * as segment from "@inglorious/utils/math/geometry/segment.js"
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { add } from "@inglorious/utils/math/linear-algebra/vectors.js"
+
+const Z = 2 // Z-axis index.
+
+const Shape = {
+  circle,
+  line,
+  point,
+  rectangle,
+  segment,
+  hitmask,
+}
+
+/**
+ * Finds the first collision between a point and a list of entities.
+ *
+ * @param {Point} entity - The point to check for collisions.
+ * @param {Options} options - Options for collision detection.
+ * @returns {Entity | undefined} The first entity that collides with the point, or undefined if none are found.
+ */
+export function findCollision(entity, entities, collisionGroup = "hitbox") {
+  const otherEntities = filter(
+    entities,
+    (id, { collisions }) => id !== entity.id && collisions?.[collisionGroup],
+  )
+
+  return Object.values(otherEntities)
+    .toSorted((a, b) => a.position[Z] - b.position[Z])
+    .find((target) => collidesWith(entity, target, collisionGroup))
+}
+
+export function collidesWith(entity, target, collisionGroup = "hitbox") {
+  const entityShape = getCollisionShape(entity, collisionGroup)
+  const targetShape = getCollisionShape(target, collisionGroup)
+
+  if (!entityShape || !targetShape) {
+    return false
+  }
+
+  return shapeCollidesWith(entityShape, targetShape)
+}
+
+function shapeCollidesWith(entity, target) {
+  const shapeFns = Shape[entity.shape]
+
+  switch (target.shape) {
+    case "circle":
+      return shapeFns.intersectsCircle(entity, target)
+
+    case "line":
+      return shapeFns.intersectsLine(entity, target)
+
+    case "point":
+      return shapeFns.intersectsPoint(entity, target)
+
+    case "rectangle":
+      return shapeFns.intersectsRectangle(entity, target)
+
+    case "segment":
+      return shapeFns.intersectsSegment(entity, target)
+  }
+}
+
+export function findCollisions(entity, target, collisionGroup = "hitbox") {
+  const entityShape = getCollisionShape(entity, collisionGroup)
+  const targetShape = getCollisionShape(target, collisionGroup)
+
+  if (!entityShape || !targetShape) {
+    return false
+  }
+
+  const shapeFns = Shape[entityShape.shape]
+  if (!shapeFns || !shapeFns.findCollisions) {
+    return false
+  }
+
+  return shapeFns.findCollisions(entityShape, targetShape)
+}
+
+/**
+ * Correctly calculates the absolute position and size of an entity's
+ * collision shape, including any offsets.
+ */
+function getCollisionShape(entity, collisionGroup = "hitbox") {
+  const collision = entity.collisions[collisionGroup]
+  if (!collision) {
+    return null
+  }
+
+  const position = add(
+    entity.position,
+    collision.offset ?? zero(),
+    entity.offset ?? zero(),
+  )
+
+  return {
+    ...collision,
+    position,
+    size: collision.size ?? entity.size,
+    radius: collision.radius ?? entity.radius,
+  }
+}