@inglorious/engine 0.1.1 → 0.3.0

package/src/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/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/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 → behaviors/physics/collidable.js}

@@ -4,19 +4,15 @@ const DEFAULT_PARAMS = {
   onState: "default",
 }
 
-export function enableCollisions(params) {
+export function collidable(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,
-            )
+          update(entity, dt, api) {
+            type.states?.[params.onState].update?.(entity, dt, api)
           },
         },
       },

package/src/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/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/collision/detection.js

@@ -0,0 +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 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,
+  }
+}

package/src/core/api.js

@@ -0,0 +1,34 @@
+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/core/dev-tools.js

@@ -0,0 +1,135 @@
+export const ACTION_BLACKLIST = [
+  "update",
+  "gamepadAxis",
+  "gamepadPress",
+  "gamepadRelease",
+  "keyboardKeyDown",
+  "keyboardKeyUp",
+  "inputAxis",
+  "inputPress",
+  "inputRelease",
+  "mouseMove",
+  "mouseClick",
+  "spriteAnimationEnd",
+]
+
+const LAST_STATE = 1
+
+let devToolsInstance = null
+let unsubscribe = null
+
+export function initDevTools(store) {
+  // Prevent multiple connections
+  if (devToolsInstance) {
+    return
+  }
+
+  if (typeof window === "undefined" || !window.__REDUX_DEVTOOLS_EXTENSION__) {
+    return
+  }
+
+  devToolsInstance = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
+    name: "Inglorious Engine",
+    predicate: (state, action) => !ACTION_BLACKLIST.includes(action.type),
+    actionCreators: {
+      jump: () => ({ type: "jump", payload: { inputId: "input0" } }),
+    },
+    // @see https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#features
+    features: {
+      pause: true, // start/pause recording of dispatched actions
+      lock: true, // lock/unlock dispatching actions and side effects
+      persist: true, // persist states on page reloading
+      export: true, // export history of actions in a file
+      import: "custom", // import history of actions from a file
+      jump: false, // jump back and forth (time travelling)
+      skip: false, // skip (cancel) actions
+      reorder: false, // drag and drop actions in the history list
+      dispatch: true, // dispatch custom actions or action creators
+      test: false, // generate tests for the selected actions
+    },
+  })
+
+  unsubscribe = devToolsInstance.subscribe((message) => {
+    switch (message.type) {
+      case "DISPATCH":
+        handleDispatch(message, store)
+        break
+
+      case "ACTION":
+        handleAction(message, store)
+        break
+    }
+  })
+
+  devToolsInstance.init(store.getState())
+}
+
+export function disconnectDevTools() {
+  // The `disconnect` method on the devToolsInstance is not available in all
+  // environments or versions of the extension.
+  // The safest way to "disconnect" is to unsubscribe from any listeners
+  // and release our reference to the instance, which prevents any further
+  // actions from being sent.
+  if (unsubscribe) {
+    unsubscribe()
+    unsubscribe = null
+    devToolsInstance = null
+  }
+}
+
+export function sendAction(action, state) {
+  if (devToolsInstance) {
+    devToolsInstance.send(action, state)
+  }
+}
+
+function handleDispatch(message, store) {
+  switch (message.payload.type) {
+    // reset button
+    case "RESET": {
+      store.reset()
+      devToolsInstance.init(store.getState())
+      break
+    }
+
+    // revert button
+    case "ROLLBACK": {
+      const newState = JSON.parse(message.state)
+      store.setState(newState)
+      break
+    }
+
+    // commit button
+    case "COMMIT": {
+      devToolsInstance.init(store.getState())
+      break
+    }
+
+    // import from file button
+    case "IMPORT_STATE": {
+      const { computedStates, actionsById } = message.payload.nextLiftedState
+
+      const [firstComputedState] = computedStates
+      const lastComputedState =
+        computedStates[computedStates.length - LAST_STATE]
+      if (lastComputedState) {
+        store.setState(lastComputedState.state)
+      }
+
+      const flattenedActions = Object.values(actionsById)
+        .flatMap(({ action }) => action.payload ?? action)
+        .map((action, index) => [index, action])
+
+      devToolsInstance.init(
+        firstComputedState.state,
+        Object.fromEntries(flattenedActions),
+      )
+      break
+    }
+  }
+}
+
+function handleAction(message, store) {
+  const action = JSON.parse(message.payload)
+  store.dispatch(action)
+}