@inglorious/engine 0.1.0

package/src/game/decorators/image/tilemap.js

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,119 @@
+/* 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/main.js

@@ -0,0 +1,5 @@
+import { start } from "@inglorious/ui/canvas.js"
+import game from "game"
+
+const canvas = document.getElementById("canvas")
+window.addEventListener("load", () => start(game, canvas))

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

@@ -0,0 +1,17 @@
+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/character.js

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

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

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

package/src/ui/canvas/fps.js

@@ -0,0 +1,18 @@
+const DEFAULT_PADDING = 10
+const ONE_SECOND = 1
+
+export default function draw(ctx, instance) {
+  const { accuracy, size, value } = instance.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/ui/canvas/image/hitmask.js

@@ -0,0 +1,37 @@
+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/image/image.js

@@ -0,0 +1,37 @@
+const DEFAULT_POSITION = 0
+
+export default function draw(ctx, instance) {
+  const { image, sx = DEFAULT_POSITION, sy = DEFAULT_POSITION } = instance
+  const { id, src, imageSize, tileSize = imageSize } = image
+
+  const [tileWidth, tileHeight] = tileSize
+
+  const imgParams = [
+    sx * tileWidth,
+    sy * tileHeight,
+    tileWidth,
+    tileHeight,
+    DEFAULT_POSITION,
+    DEFAULT_POSITION,
+    tileWidth,
+    tileHeight,
+  ]
+
+  ctx.save()
+
+  const img = document.getElementById(id)
+  if (img) {
+    ctx.drawImage(img, ...imgParams)
+  } else {
+    const img = new Image()
+    img.id = id
+    img.style.display = "none"
+    img.onload = () => {
+      ctx.drawImage(img, ...imgParams)
+    }
+    img.src = src
+    document.body.appendChild(img)
+  }
+
+  ctx.restore()
+}