@inglorious/engine 0.1.1 → 0.2.0

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
-}

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

@@ -1,133 +0,0 @@
-import { expect, test } from "vitest"
-
-import { intersectsCircle, intersectsRectangle } from "./platform"
-
-test("it should prove that a circle right above a platform intersects with it", () => {
-  const platform = {
-    position: [-1, 0, 0],
-    size: [2, 1, 0],
-  }
-  const circle = {
-    position: [1, 1, 0],
-    radius: 1,
-  }
-
-  expect(intersectsCircle(platform, circle)).toBe(true)
-})
-
-test("it should prove that a circle way above a platform intersects with it", () => {
-  const platform = {
-    position: [0, 0, -2],
-    size: [2, 1, 0],
-  }
-  const circle = {
-    position: [1, 1, 0],
-    radius: 1,
-  }
-
-  expect(intersectsCircle(platform, circle)).toBe(false)
-})
-
-test("it should prove that a circle crossing a platform does not intersect with it", () => {
-  const platform = {
-    position: [-1, -1, 0],
-    size: [2, 2, 0],
-  }
-  const circle = {
-    position: [1, 1, 0],
-    radius: 1,
-  }
-
-  expect(intersectsCircle(platform, circle)).toBe(false)
-})
-
-test("it should prove that a circle below a platform does not intersect with it", () => {
-  const platform = {
-    position: [0, 2, 0],
-    size: [2, 1, 0],
-  }
-  const circle = {
-    position: [1, 1, 0],
-    radius: 1,
-  }
-
-  expect(intersectsCircle(platform, circle)).toBe(false)
-})
-
-test("it should prove that a circle not crossing a platform horizontally does not intersect with it", () => {
-  const platform = {
-    position: [-3, -1, 0],
-    size: [2, 1, 0],
-  }
-  const circle = {
-    position: [1, 1, 0],
-    radius: 1,
-  }
-
-  expect(intersectsCircle(platform, circle)).toBe(false)
-})
-
-test("it should prove that a rectangle crossing a platform from above intersects with it", () => {
-  const platform = {
-    position: [0, -1, 0],
-    size: [2, 2, 0],
-  }
-  const rectangle = {
-    position: [0, 0, 0],
-    size: [2, 2, 0],
-  }
-
-  expect(intersectsRectangle(platform, rectangle)).toBe(true)
-})
-
-test("it should prove that a rectangle right on top of a platform intersects with it", () => {
-  const platform = {
-    position: [0, -2, 0],
-    size: [2, 2, 0],
-  }
-  const rectangle = {
-    position: [0, 0, 0],
-    size: [2, 2, 0],
-  }
-
-  expect(intersectsRectangle(platform, rectangle)).toBe(true)
-})
-
-test("it should prove that a rectangle crossing a platform from below does not intersect with it", () => {
-  const platform = {
-    position: [0, 1, 0],
-    size: [2, 2, 0],
-  }
-  const rectangle = {
-    position: [0, 0, 0],
-    size: [2, 2, 0],
-  }
-
-  expect(intersectsRectangle(platform, rectangle)).toBe(false)
-})
-
-test("it should prove that a rectangle below a platform does not intersect with it", () => {
-  const platform = {
-    position: [0, -3, 0],
-    size: [2, 2, 0],
-  }
-  const rectangle = {
-    position: [0, 0, 0],
-    size: [2, 2, 0],
-  }
-
-  expect(intersectsRectangle(platform, rectangle)).toBe(false)
-})
-
-test("it should prove that a rectangle not crossing a platform horizontally does not intersect with it", () => {
-  const platform = {
-    position: [-3, 0, 0],
-    size: [2, 2, 0],
-  }
-  const rectangle = {
-    position: [0, 0, 0],
-    size: [2, 2, 0],
-  }
-
-  expect(intersectsRectangle(platform, rectangle)).toBe(false)
-})