@inglorious/engine 0.1.0 → 0.2.0

package/src/game/decorators/input/controls.js

@@ -1,27 +0,0 @@
-import { extend } from "@inglorious/utils/data-structures/objects.js"
-
-import { createGamepad, enableGamepad } from "./gamepad.js"
-import { createInput, enableInput } from "./input.js"
-import { createKeyboard, enableKeyboard } from "./keyboard.js"
-
-const DEFAULT_PARAMS = {
-  name: "input0",
-}
-
-export function enableControls(params) {
-  params = extend(DEFAULT_PARAMS, params)
-
-  return {
-    keyboard: [enableKeyboard(params)],
-    gamepad: [enableGamepad(params)],
-    input: [enableInput(params)],
-  }
-}
-
-export function createControls(name = DEFAULT_PARAMS.name, mapping = {}) {
-  return {
-    [`keyboard_${name}`]: createKeyboard(`keyboard_${name}`, mapping),
-    [`gamepad_${name}`]: createGamepad(`gamepad_${name}`, mapping),
-    [name]: createInput(name, mapping),
-  }
-}

package/src/game/decorators/input/gamepad.js

@@ -1,74 +0,0 @@
-const DEFAULT_PARAMS = {
-  name: "gamepad0",
-}
-
-export function enableGamepad() {
-  return {
-    "game:update"(instance, event, { notify }) {
-      navigator.getGamepads().forEach((gamepad) => {
-        if (gamepad == null) {
-          return
-        }
-
-        gamepad.axes.forEach((axis, index) => {
-          notify({
-            id: "gamepad:axis",
-            payload: { id: gamepad.index, axis: `Axis${index}`, value: axis },
-          })
-        })
-
-        gamepad.buttons.forEach((button, index) => {
-          const id = button.pressed ? "gamepad:press" : "gamepad:release"
-          notify({
-            id,
-            payload: { id: gamepad.index, button: `Btn${index}` },
-          })
-        })
-      })
-    },
-
-    "gamepad:axis"(instance, event, { notify }) {
-      const { id, axis, value } = event.payload
-
-      if (instance.id !== `gamepad${id}`) {
-        return
-      }
-
-      const action = instance.mapping[axis]
-      instance[action] = value
-      notify({ id: "input:axis", payload: { id, action, value } })
-    },
-
-    "gamepad:press"(instance, event, { notify }) {
-      const { id, button } = event.payload
-
-      if (instance.id !== `gamepad${id}`) {
-        return
-      }
-
-      const action = instance.mapping[button]
-      if (!instance[action]) {
-        instance[action] = true
-        notify({ id: "input:press", payload: { id, action } })
-      }
-    },
-
-    "gamepad:release"(instance, event, { notify }) {
-      const { id, button } = event.payload
-
-      if (instance.id !== `gamepad${id}`) {
-        return
-      }
-
-      const action = instance.mapping[button]
-      if (instance[action]) {
-        instance[action] = false
-        notify({ id: "input:release", payload: { id, action } })
-      }
-    },
-  }
-}
-
-export function createGamepad(name = DEFAULT_PARAMS.name, mapping = {}) {
-  return { id: name, type: "gamepad", mapping }
-}

package/src/game/decorators/input/input.js

@@ -1,41 +0,0 @@
-const DEFAULT_PARAMS = {
-  name: "input0",
-}
-
-export function enableInput() {
-  return {
-    "input:axis"(instance, event) {
-      const { id, action, value } = event.payload
-
-      if (!id.endsWith(instance.id)) {
-        return
-      }
-
-      instance[action] = value
-    },
-
-    "input:press"(instance, event) {
-      const { id, action } = event.payload
-
-      if (!id.endsWith(instance.id)) {
-        return
-      }
-
-      instance[action] = true
-    },
-
-    "input:release"(instance, event) {
-      const { id, action } = event.payload
-
-      if (!id.endsWith(instance.id)) {
-        return
-      }
-
-      instance[action] = false
-    },
-  }
-}
-
-export function createInput(name = DEFAULT_PARAMS.name, mapping = {}) {
-  return { id: name, type: "input", mapping }
-}

package/src/game/decorators/input/keyboard.js

@@ -1,49 +0,0 @@
-const DEFAULT_PARAMS = {
-  name: "keyboard0",
-}
-
-export function enableKeyboard() {
-  let handleKeyDown, handleKeyUp
-
-  return {
-    "game:start"(instance, event, options) {
-      handleKeyDown = createKeyboardHandler("keyboard:keyDown", options)
-      handleKeyUp = createKeyboardHandler("keyboard:keyUp", options)
-
-      document.addEventListener("keydown", handleKeyDown)
-      document.addEventListener("keyup", handleKeyUp)
-    },
-
-    "game:stop"() {
-      document.removeEventListener("keydown", handleKeyDown)
-      document.removeEventListener("keyup", handleKeyUp)
-    },
-
-    "keyboard:keyDown"(instance, event, { notify }) {
-      const action = instance.mapping[event.payload]
-      if (!instance[action]) {
-        instance[action] = true
-        notify({ id: "input:press", payload: { id: instance.id, action } })
-      }
-    },
-
-    "keyboard:keyUp"(instance, event, { notify }) {
-      const action = instance.mapping[event.payload]
-      if (instance[action]) {
-        instance[action] = false
-        notify({ id: "input:release", payload: { id: instance.id, action } })
-      }
-    },
-  }
-}
-
-export function createKeyboard(name = DEFAULT_PARAMS.name, mapping = {}) {
-  return { id: name, type: "keyboard", mapping }
-}
-
-function createKeyboardHandler(id, { notify }) {
-  return (event) => {
-    event.stopPropagation()
-    notify({ id, payload: event.code })
-  }
-}

package/src/game/decorators/input/mouse.js

@@ -1,65 +0,0 @@
-import { findCollision } from "@inglorious/engine/collision/detection.js"
-import { clampToBounds } from "@inglorious/game/bounds.js"
-import draw from "@inglorious/ui/canvas/mouse.js"
-
-const NO_Y = 0
-
-export function enableMouse() {
-  return {
-    draw,
-
-    "mouse:move"(instance, event, { instances }) {
-      instance.position = event.payload
-
-      clampToBounds(instance, instances.game.bounds)
-    },
-
-    "mouse:click"(instance, event, options) {
-      const { notify } = options
-
-      const clickedInstance = findCollision(instance, options)
-      if (clickedInstance) {
-        notify({ id: "instance:click", payload: clickedInstance.id })
-      } else {
-        notify({ id: "scene:click", payload: event.payload })
-      }
-    },
-  }
-}
-
-export function track(parent, options) {
-  const handleMouseMove = createHandler("mouse:move", parent, options)
-  const handleClick = createHandler("mouse:click", parent, options)
-
-  return { onMouseMove: handleMouseMove, onClick: handleClick }
-}
-
-function createHandler(id, parent, { notify }) {
-  return (event) => {
-    event.stopPropagation()
-
-    if (parent == null) {
-      return
-    }
-
-    const payload = calculatePosition({
-      clientX: event.clientX,
-      clientY: event.clientY,
-      parent,
-    })
-
-    notify({ id, payload })
-  }
-}
-
-function calculatePosition({ clientX, clientY, parent }) {
-  const bounds = parent.getBoundingClientRect()
-
-  const scaleX = (parent.width || parent.clientWidth) / bounds.width
-  const scaleY = (parent.height || parent.clientHeight) / bounds.height
-
-  const x = (clientX - bounds.left) * scaleX
-  const z = (bounds.bottom - clientY) * scaleY
-
-  return [x, NO_Y, z]
-}

package/src/game/decorators/jump.js

@@ -1,72 +0,0 @@
-import { collidesWith } from "@inglorious/engine/collision/detection.js"
-import { extend, merge } from "@inglorious/utils/data-structures/objects.js"
-import { applyGravity } from "@inglorious/utils/physics/gravity.js"
-import { jump } from "@inglorious/utils/physics/jump.js"
-
-import { enableFsm } from "./fsm.js"
-
-const DEFAULT_PARAMS = {
-  onState: "default",
-  onInput: "input0",
-  maxSpeed: 250,
-  maxJump: 100,
-  maxLeap: 100,
-}
-const FALLING = 0
-
-export function enableJump(params) {
-  params = extend(DEFAULT_PARAMS, params)
-
-  const freeFall = createFreeFall(params)
-
-  return enableFsm({
-    [params.onState]: {
-      "game:update"(instance, event, options) {
-        freeFall(instance, event, options)
-      },
-
-      "input:press"(instance, event, options) {
-        instance.onInput = instance.onInput ?? params.onInput
-        instance.maxJump = instance.maxJump ?? params.maxJump
-        instance.maxLeap = instance.maxLeap ?? params.maxLeap
-        instance.maxSpeed = instance.maxSpeed ?? params.maxSpeed
-
-        const { id, action } = event.payload
-        if (id.endsWith(instance.onInput) && action === "jump") {
-          instance.state = "jumping"
-          merge(instance, jump(instance, options))
-        }
-      },
-    },
-
-    jumping: {
-      "game:update"(instance, event, options) {
-        freeFall(instance, event, options)
-      },
-    },
-  })
-}
-
-function createFreeFall(params) {
-  return (instance, event, options) => {
-    instance.maxLeap = instance.maxLeap ?? params.maxLeap
-
-    merge(instance, applyGravity(instance, options))
-
-    const targets = Object.values(options.instances).filter(
-      ({ type }) => type === "platform",
-    )
-
-    targets.forEach((target) => {
-      if (instance.vy < FALLING && collidesWith(instance, target, "platform")) {
-        instance.vy = 0
-        const [x, , z] = instance.position
-        const { radius } = instance.collisions.platform
-        const [, targetY] = target.position
-        const py = targetY + radius
-        instance.position = [x, py, z]
-        instance.state = params.onState
-      }
-    })
-  }
-}

package/src/game/decorators/platform.js

@@ -1,5 +0,0 @@
-import draw from "@inglorious/ui/canvas/shapes/rectangle.js"
-
-export function enablePlatform() {
-  return { draw }
-}

package/src/game/decorators/ui/button.js

@@ -1,21 +0,0 @@
-import draw from "@inglorious/ui/canvas/form/button.js"
-
-export function enableButton() {
-  return {
-    draw,
-
-    states: {
-      default: {
-        "instance:click"(instance) {
-          instance.state = "pressed"
-        },
-      },
-
-      pressed: {
-        "instance:release"(instance) {
-          instance.state = "default"
-        },
-      },
-    },
-  }
-}

package/src/game/sprite.js

@@ -1,119 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import { Animation } from "@inglorious/game/animation.js"
-import { mod } from "@inglorious/utils/math/numbers.js"
-import { pi, toRange } from "@inglorious/utils/math/trigonometry.js"
-
-const BEFORE = -1
-const AFTER = 1
-
-export const Sprite = {
-  move2,
-  move4,
-  move6,
-  move8,
-  play,
-}
-
-function move2(instance) {
-  const directions = 2
-  const multiple = pi() / directions
-  const theta = toRange(instance.orientation) / multiple
-
-  if (theta > 0 + BEFORE && theta < 0 + AFTER) {
-    return "right"
-  } else if (theta < 0 + BEFORE || theta > 0 + AFTER) {
-    return "left"
-  }
-
-  return instance.sprite.state ?? "right"
-}
-
-function move4(instance) {
-  const directions = 4
-  const multiple = pi() / directions
-  const theta = toRange(instance.orientation) / multiple
-
-  if (theta >= -2 + BEFORE && theta < -2 + AFTER) {
-    return "down"
-  } else if (theta >= 0 + BEFORE && theta < 0 + AFTER) {
-    return "right"
-  } else if (theta >= 2 + BEFORE && theta < 2 + AFTER) {
-    return "up"
-  } else if (theta < 0 + BEFORE || theta > 0 + AFTER) {
-    return "left"
-  }
-
-  return instance.sprite.state ?? "down"
-}
-
-function move6(instance) {
-  const directions = 6
-  const multiple = pi() / directions
-  const theta = toRange(instance.orientation) / multiple
-
-  if (theta >= -6 + BEFORE && theta < -6 + AFTER) {
-    return "leftDown"
-  } else if (theta >= -4 + BEFORE && theta < -4 + AFTER) {
-    return "down"
-  } else if (theta >= -2 + BEFORE && theta < -2 + AFTER) {
-    return "rightDown"
-  } else if (theta >= 0 + BEFORE && theta < 0 + AFTER) {
-    return "right"
-  } else if (theta >= 2 + BEFORE && theta < 2 + AFTER) {
-    return "rightUp"
-  } else if (theta >= 4 + BEFORE && theta < 4 + AFTER) {
-    return "up"
-  } else if (theta >= 6 + BEFORE && theta < 6 + AFTER) {
-    return "leftUp"
-  } else if (theta < 0 + BEFORE || theta > 0 + AFTER) {
-    return "left"
-  }
-
-  return instance.sprite.state ?? "down"
-}
-
-function move8(instance) {
-  const directions = 8
-  const multiple = pi() / directions
-  const theta = toRange(instance.orientation) / multiple
-
-  if (theta >= -6 + BEFORE && theta < -6 + AFTER) {
-    return "leftDown"
-  } else if (theta >= -4 + BEFORE && theta < -4 + AFTER) {
-    return "down"
-  } else if (theta >= -2 + BEFORE && theta < -2 + AFTER) {
-    return "rightDown"
-  } else if (theta >= 0 + BEFORE && theta < 0 + AFTER) {
-    return "right"
-  } else if (theta >= 2 + BEFORE && theta < 2 + AFTER) {
-    return "rightUp"
-  } else if (theta >= 4 + BEFORE && theta < 4 + AFTER) {
-    return "up"
-  } else if (theta >= 6 + BEFORE && theta < 6 + AFTER) {
-    return "leftUp"
-  } else if (theta < 0 + BEFORE || theta > 0 + AFTER) {
-    return "left"
-  }
-
-  return instance.sprite.state ?? "down"
-}
-
-function play(spriteState, instance, options) {
-  Animation.play("sprite", spriteState, instance, { ...options, onTick })
-}
-
-function onTick(instance, options) {
-  const { notify } = options
-
-  const { frames, state } = instance.sprite
-
-  const framesLength = frames[state].length
-
-  instance.sprite.value = mod(instance.sprite.value + 1, framesLength)
-  if (instance.sprite.value === framesLength - 1) {
-    notify({
-      id: `sprite:animationEnd`,
-      payload: { id: instance.id, spriteState: state },
-    })
-  }
-}

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

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

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

@@ -1,37 +0,0 @@
-import drawRectangle from "@inglorious/ui/canvas/shapes/rectangle.js"
-import { max } from "@inglorious/utils/data-structures/array.js"
-
-const NO_Y = 0
-const MAX_HUE = 255
-
-export default function draw(ctx, instance, options) {
-  const { tileSize, columns, heights } = instance
-
-  const [tileWidth, tileHeight] = tileSize
-  const rows = Math.ceil(heights.length / columns)
-  const height = rows * tileHeight
-
-  const minH = 0
-  const maxH = max(heights)
-
-  heights.forEach((h, index) => {
-    const x = (index % columns) * tileWidth
-    const z = Math.floor(index / columns) * tileHeight - height
-
-    ctx.save()
-
-    const normalizedH = (h - minH) / (maxH - minH)
-    const hue = MAX_HUE - normalizedH * MAX_HUE
-
-    const instance = {
-      offset: [x, NO_Y, z],
-      size: [tileWidth, NO_Y, tileHeight],
-      color: "transparent",
-      backgroundColor: `hsla(${hue}, 100%, 50%, 0.2)`,
-    }
-
-    drawRectangle(ctx, instance, options)
-
-    ctx.restore()
-  })
-}

package/src/ui/canvas.js

@@ -1,81 +0,0 @@
-import Engine from "@inglorious/engine.js"
-import { track } from "@inglorious/game/decorators/input/mouse.js"
-
-import { absolutePosition } from "./canvas/absolute-position.js"
-
-const Y = 1
-const Z = 2
-
-export function start(config, canvas) {
-  const ctx = canvas.getContext("2d")
-  const engine = new Engine(config, { render: render(ctx) })
-
-  const { game } = engine._store.getState().instances
-  const [, , width, height] = game.bounds
-
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
-  const dpi = window.devicePixelRatio
-  canvas.width = Math.floor(width * dpi)
-  canvas.height = Math.floor(height * dpi)
-  ctx.scale(dpi, dpi)
-
-  if (game.pixelated) {
-    canvas.style.imageRendering = "pixelated"
-    ctx.textRendering = "geometricPrecision"
-  }
-
-  document.addEventListener("keypress", (event) => {
-    if (event.key === "p") {
-      engine.isRunning ? engine.stop() : engine.start()
-    }
-  })
-
-  const { onMouseMove, onClick } = track(canvas, {
-    notify: engine.notify,
-  })
-
-  canvas.addEventListener("mousemove", onMouseMove)
-  canvas.addEventListener("click", onClick)
-
-  engine.start()
-}
-
-function render(ctx) {
-  return (options) => {
-    const { types, instances } = options
-
-    const { game, mouse, ...rest } = instances
-
-    const [x, y, width, height] = game.bounds
-    ctx.fillStyle = "lightgrey"
-    ctx.fillRect(x, y, width, height)
-    if (game.pixelated) {
-      ctx.imageSmoothingEnabled = false
-    }
-
-    Object.values(rest)
-      .filter(({ position }) => position)
-      .toSorted(
-        (a, b) =>
-          a.layer - b.layer ||
-          a.position[Y] - b.position[Y] ||
-          b.position[Z] - a.position[Z],
-      )
-      .forEach((instance) =>
-        draw(ctx, instance, { ...options, type: types[instance.type] }),
-      )
-
-    if (mouse) {
-      draw(ctx, mouse, { ...options, type: types[mouse.type] })
-    }
-  }
-}
-
-function draw(ctx, instance, options) {
-  const draw = options.type.draw
-
-  if (draw) {
-    absolutePosition(draw)(ctx, instance, options)
-  }
-}

package/src/ui/react/game/character/index.jsx

@@ -1,30 +0,0 @@
-import { useDispatch } from "react-redux"
-
-import classes from "./character.module.scss"
-
-const DEFAULT_SIZE = 24
-const DEFAULT_ORIENTATION = 0
-
-export default function Character({ id, type, instance, className, style }) {
-  const notify = useDispatch()
-
-  const size = type.size ?? DEFAULT_SIZE
-  const { orientation = DEFAULT_ORIENTATION } = instance
-
-  const handleClick = (event) => {
-    event.stopPropagation()
-    notify({ id: "instance:click", payload: id })
-  }
-
-  return (
-    <div
-      className={`${classes.character} ${className}`}
-      style={{
-        ...style,
-        "--size": `${size}px`,
-        "--angle": `${-orientation}rad`,
-      }}
-      onClick={handleClick}
-    />
-  )
-}

package/src/utils/math/geometry/platform.js

@@ -1,42 +0,0 @@
-/**
- * Checks if a platform intersects with a circle in 3D space.
- * @param {Platform} platform - The platform to check.
- * @param {Circle} circle - The circle to check.
- * @returns {boolean} True if the platform intersects the circle, false otherwise.
- */
-export function intersectsCircle(platform, circle) {
-  const [left, top, front] = platform.position
-  const [extension, elevation, thickness] = platform.size
-
-  const [x, y, z] = circle.position
-
-  const lowestPoint = y - circle.radius
-  const isAbove = lowestPoint <= top && lowestPoint >= top - elevation
-
-  const isOverlappingX = x >= left && x <= left + extension
-  const isOverlappingZ = z >= front && z <= front + thickness
-
-  return isAbove && isOverlappingX && isOverlappingZ
-}
-
-/**
- * Determines whether platform intersects with a rectangle in 3D space.
- *
- * @param {Platform} platform - The platform defined by its position (top-left-front corner) and size (extension, elevation, thickness).
- * @param {Rectangle} rectangle - The rectangle defined by its position (top-left-front corner) and size (width, height, depth).
- * @returns {boolean} True if the platform intersects the rectangle, false otherwise.
- */
-export function intersectsRectangle(platform, rectangle) {
-  const [left, top, front] = platform.position
-  const [extension, elevation, thickness] = platform.size
-
-  const [x, y, z] = rectangle.position
-  const [width, , depth] = rectangle.size
-
-  const isAbove = y >= top && y <= top + elevation
-
-  const isOverlappingX = x + width >= left && x <= left + extension
-  const isOverlappingZ = z + depth >= front && z <= front + thickness
-
-  return isAbove && isOverlappingX && isOverlappingZ
-}