@inglorious/engine 0.1.1 → 0.3.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/character.js

@@ -1,35 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-/* 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

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

@@ -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/image/image.js

@@ -1,37 +0,0 @@
-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()
-}

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

@@ -1,49 +0,0 @@
-import imageDraw from "./image.js"
-
-const DEFAULT_SCALE = 1
-
-const FLIP = -1
-const NO_FLIP = 1
-
-const CENTER_WIDTH = 2
-const CENTER_HEIGHT = 2
-
-const FLIPPED_HORIZONTALLY_FLAG = 0x80000000
-const FLIPPED_VERTICALLY_FLAG = 0x40000000
-// const FLIPPED_DIAGONALLY_FLAG = 0x20000000
-// const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
-
-export default function draw(ctx, instance, options) {
-  const { image, frames, state, value } = instance.sprite
-  const { imageSize, tileSize, scale = DEFAULT_SCALE } = image
-
-  const [imageWidth] = imageSize
-  const [tileWidth, tileHeight] = tileSize
-  const cols = imageWidth / tileWidth
-
-  const flaggedTile = frames[state][value]
-
-  const isFlippedHorizontally = !!(flaggedTile & FLIPPED_HORIZONTALLY_FLAG)
-  const isFlippedVertically = !!(flaggedTile & FLIPPED_VERTICALLY_FLAG)
-
-  let tile = flaggedTile
-  tile &= ~FLIPPED_HORIZONTALLY_FLAG
-  tile &= ~FLIPPED_VERTICALLY_FLAG
-
-  const sx = tile % cols
-  const sy = Math.floor(tile / cols)
-
-  ctx.save()
-
-  ctx.scale(scale, scale)
-
-  ctx.scale(
-    isFlippedHorizontally ? FLIP : NO_FLIP,
-    isFlippedVertically ? FLIP : NO_FLIP,
-  )
-  ctx.translate(-tileWidth / CENTER_WIDTH, -tileHeight / CENTER_HEIGHT)
-
-  imageDraw(ctx, { image, sx, sy }, options)
-
-  ctx.restore()
-}

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

@@ -1,64 +0,0 @@
-import imageDraw from "./image.js"
-
-const DEFAULT_SCALE = 1
-
-const FLIP = -1
-const NO_FLIP = 1
-
-const CENTER_WIDTH = 2
-const CENTER_HEIGHT = 2
-
-const FLIPPED_HORIZONTALLY_FLAG = 0x80000000
-const FLIPPED_VERTICALLY_FLAG = 0x40000000
-// const FLIPPED_DIAGONALLY_FLAG = 0x20000000
-// const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
-
-export default function draw(ctx, instance, options) {
-  const { tilemap } = instance
-  const { image, layers } = tilemap
-  const { imageSize, tileSize, columns, scale = DEFAULT_SCALE } = image
-
-  const [imageWidth] = imageSize
-  const [tileWidth, tileHeight] = tileSize
-  const sCols = imageWidth / tileWidth
-
-  ctx.save()
-
-  layers.forEach(({ tiles }) => {
-    const dRows = Math.ceil(tiles.length / columns)
-    const height = dRows * tileHeight
-
-    tiles.forEach((flaggedTile, index) => {
-      const isFlippedHorizontally = !!(flaggedTile & FLIPPED_HORIZONTALLY_FLAG)
-      const isFlippedVertically = !!(flaggedTile & FLIPPED_VERTICALLY_FLAG)
-
-      let tile = flaggedTile
-      tile &= ~FLIPPED_HORIZONTALLY_FLAG
-      tile &= ~FLIPPED_VERTICALLY_FLAG
-
-      const sx = tile % sCols
-      const sy = Math.floor(tile / sCols)
-
-      const dx = (index % columns) * tileWidth
-      const dy = Math.floor(index / columns) * tileHeight - height
-
-      ctx.save()
-
-      ctx.scale(scale, scale)
-      ctx.translate(dx, dy)
-
-      ctx.translate(tileWidth / CENTER_WIDTH, tileHeight / CENTER_HEIGHT)
-      ctx.scale(
-        isFlippedHorizontally ? FLIP : NO_FLIP,
-        isFlippedVertically ? FLIP : NO_FLIP,
-      )
-      ctx.translate(-tileWidth / CENTER_WIDTH, -tileHeight / CENTER_HEIGHT)
-
-      imageDraw(ctx, { image, sx, sy }, options)
-
-      ctx.restore()
-    })
-  })
-
-  ctx.restore()
-}

package/src/ui/canvas/mouse.js

@@ -1,37 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-export default function draw(ctx, instance) {
-  const { color = "black", thickness = 1, orientation = 0 } = instance
-
-  ctx.save()
-
-  ctx.strokeStyle = color
-  ctx.fillStyle = color
-  ctx.lineWidth = thickness
-
-  ctx.rotate(-orientation)
-
-  ctx.beginPath()
-  ctx.moveTo(-6, 0)
-  ctx.lineTo(-3, 0)
-  ctx.stroke()
-
-  ctx.moveTo(4, 0)
-  ctx.lineTo(7, 0)
-  ctx.stroke()
-
-  ctx.moveTo(0, -6)
-  ctx.lineTo(0, -3)
-  ctx.stroke()
-
-  ctx.moveTo(0, 4)
-  ctx.lineTo(0, 7)
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.beginPath()
-  ctx.fillRect(0, 0, 1, 1)
-  ctx.closePath()
-
-  ctx.restore()
-}

package/src/ui/canvas/shapes/circle.js

@@ -1,31 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-import { pi } from "@inglorious/utils/math/trigonometry.js"
-
-export default function draw(ctx, instance) {
-  const {
-    position = zero(),
-    radius = 24,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = instance
-  const [x, , z] = position
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.translate(x, z)
-
-  ctx.beginPath()
-  ctx.arc(0, 0, radius, 0, 2 * pi())
-  ctx.fill()
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}

package/src/ui/canvas/shapes/rectangle.js

@@ -1,31 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-
-export default function draw(ctx, instance) {
-  const {
-    offset = zero(),
-    size,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = instance
-  const [x, , z] = offset
-  const [width = 100, height = 50, depth = 0] = size
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.translate(x, z)
-
-  ctx.beginPath()
-  ctx.fillRect(0, 0, width, height + depth)
-  ctx.strokeRect(0, 0, width, height + depth)
-  ctx.stroke()
-  ctx.closePath()
-
-  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/character.module.scss

@@ -1,17 +0,0 @@
-.character {
-  width: var(--size);
-  height: var(--size);
-  box-sizing: border-box;
-  background-color: lightgrey;
-  border: 1px solid grey;
-  border-radius: 50%;
-  transform: translate(-50%, -50%) rotate(var(--angle));
-
-  &::after {
-    content: '🞁';
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translate(50%, -50%) rotate(90deg);
-  }
-}

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/ui/react/game/cursor/cursor.module.scss

@@ -1,47 +0,0 @@
-.cursor {
-  width: 1px;
-  height: 1px;
-  background-color: black;
-  transform: rotate(var(--angle));
-  pointer-events: none;
-
-  .top,
-  .bottom,
-  .left,
-  .right {
-    background-color: black;
-    position: absolute;
-  }
-
-  .top,
-  .bottom {
-    width: 1px;
-    height: 4px;
-  }
-
-  .top {
-    bottom: 5px;
-    left: 0;
-  }
-
-  .bottom {
-    top: 5px;
-    left: 0;
-  }
-
-  .left,
-  .right {
-    width: 4px;
-    height: 1px;
-  }
-
-  .left {
-    top: 0;
-    right: 5px;
-  }
-
-  .right {
-    top: 0;
-    left: 5px;
-  }
-}