@inglorious/engine 0.2.0 → 0.3.0

package/src/renderers/canvas/canvas-renderer.js

@@ -1,68 +0,0 @@
-import { track } from "@inglorious/engine/behaviors/input/mouse.js"
-
-import { createRenderingSystem } from "./rendering-system.js"
-
-export class CanvasRenderer {
-  _onKeyPress = null
-  _onMouseMove = null
-  _onClick = null
-  _onWheel = null
-
-  constructor(canvas) {
-    this.canvas = canvas
-    this.ctx = canvas.getContext("2d")
-  }
-
-  getSystems() {
-    return [createRenderingSystem(this.ctx)]
-  }
-
-  init(engine) {
-    const game = engine._api.getEntity("game")
-    const [, , width, height] = game.bounds
-
-    this.canvas.style.width = `${width}px`
-    this.canvas.style.height = `${height}px`
-    const dpi = window.devicePixelRatio
-    this.canvas.width = width * dpi
-    this.canvas.height = height * dpi
-    this.ctx.scale(dpi, dpi)
-
-    if (game.pixelated) {
-      this.canvas.style.imageRendering = "pixelated"
-      this.ctx.textRendering = "geometricPrecision"
-      this.ctx.imageSmoothingEnabled = false
-    }
-
-    this._onKeyPress = (event) => {
-      if (event.key === "p") {
-        engine.isRunning ? engine.stop() : engine.start()
-      }
-    }
-    document.addEventListener("keypress", this._onKeyPress)
-
-    const { onMouseMove, onClick, onWheel } = track(this.canvas, engine._api)
-    this._onMouseMove = onMouseMove
-    this._onClick = onClick
-    this._onWheel = onWheel
-
-    this.canvas.addEventListener("mousemove", this._onMouseMove)
-    this.canvas.addEventListener("click", this._onClick)
-    this.canvas.addEventListener("wheel", this._onWheel)
-  }
-
-  destroy() {
-    if (this._onKeyPress) {
-      document.removeEventListener("keypress", this._onKeyPress)
-    }
-    if (this._onMouseMove) {
-      this.canvas.removeEventListener("mousemove", this._onMouseMove)
-    }
-    if (this._onClick) {
-      this.canvas.removeEventListener("click", this._onClick)
-    }
-    if (this._onWheel) {
-      this.canvas.removeEventListener("wheel", this._onWheel)
-    }
-  }
-}

package/src/renderers/canvas/character.js

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

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

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

package/src/renderers/canvas/fps.js

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

@@ -1,51 +0,0 @@
-import { renderRectangle } from "@inglorious/renderers/canvas/shapes/rectangle.js"
-import { max } from "@inglorious/utils/data-structures/array.js"
-
-const HALF = 2
-const NO_Y = 0
-const MAX_HUE = 255
-
-export function renderHitmask(entity, ctx) {
-  const { tileSize, columns, heights } = entity
-
-  const [tileWidth, tileHeight] = tileSize
-  const halfTileWidth = tileWidth / HALF
-  const halfTileHeight = tileHeight / HALF
-
-  const dRows = Math.ceil(heights.length / columns)
-  const tilemapWidth = columns * tileWidth
-  const tilemapHeight = dRows * tileHeight
-
-  const offsetX = -tilemapWidth / HALF
-  const offsetY = tilemapHeight / HALF
-
-  const minH = 0
-  const maxH = max(heights)
-
-  ctx.save()
-
-  ctx.translate(offsetX, offsetY)
-
-  heights.forEach((h, index) => {
-    const dx = (index % columns) * tileWidth
-    const dy = Math.floor(index / columns) * tileHeight - tilemapHeight
-
-    const normalizedH = (h - minH) / (maxH - minH)
-    const hue = MAX_HUE - normalizedH * MAX_HUE
-
-    ctx.save()
-
-    const entity = {
-      offset: [dx + halfTileWidth, NO_Y, -dy - halfTileHeight],
-      size: [tileWidth, NO_Y, tileHeight],
-      color: "transparent",
-      backgroundColor: `hsla(${hue}, 100%, 50%, 0.2)`,
-    }
-
-    renderRectangle(entity, ctx)
-
-    ctx.restore()
-  })
-
-  ctx.restore()
-}

package/src/renderers/canvas/image/image.js

@@ -1,34 +0,0 @@
-const DEFAULT_POSITION = 0
-
-export function renderImage(entity, ctx) {
-  const { image, sx = DEFAULT_POSITION, sy = DEFAULT_POSITION } = entity
-  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 newImg = new Image()
-    newImg.id = id
-    newImg.style.display = "none"
-    newImg.src = src
-    document.body.appendChild(newImg)
-  }
-
-  ctx.restore()
-}

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

@@ -1,49 +0,0 @@
-import { renderImage } 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 function renderSprite(entity, ctx) {
-  const { image, frames, state, value, scale = DEFAULT_SCALE } = entity.sprite
-  const { imageSize, tileSize } = 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)
-
-  renderImage({ image, sx, sy }, ctx)
-
-  ctx.restore()
-}

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

@@ -1,66 +0,0 @@
-import { renderImage } from "./image.js"
-
-const HALF = 2
-const DEFAULT_SCALE = 1
-
-const FLIP = -1
-const NO_FLIP = 1
-
-const FLIPPED_HORIZONTALLY_FLAG = 0x80000000
-const FLIPPED_VERTICALLY_FLAG = 0x40000000
-// const FLIPPED_DIAGONALLY_FLAG = 0x20000000
-// const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
-
-export function renderTilemap(entity, ctx) {
-  const { image, columns, scale = DEFAULT_SCALE, layers } = entity.tilemap
-  const { imageSize, tileSize } = image
-
-  const [imageWidth] = imageSize
-  const [tileWidth, tileHeight] = tileSize
-  const sCols = imageWidth / tileWidth
-
-  const [firstLayer] = layers
-  const dRows = Math.ceil(firstLayer.tiles.length / columns)
-  const tilemapWidth = columns * tileWidth
-  const tilemapHeight = dRows * tileHeight
-
-  const offsetX = -tilemapWidth / HALF
-  const offsetY = tilemapHeight / HALF
-
-  ctx.save()
-
-  ctx.scale(scale, scale)
-  ctx.translate(offsetX, offsetY)
-
-  layers.forEach(({ tiles }) => {
-    tiles.forEach((flaggedTile, index) => {
-      const dx = (index % columns) * tileWidth
-      const dy = Math.floor(index / columns) * tileHeight - tilemapHeight
-
-      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)
-
-      ctx.save()
-
-      ctx.translate(dx, dy)
-
-      ctx.scale(
-        isFlippedHorizontally ? FLIP : NO_FLIP,
-        isFlippedVertically ? FLIP : NO_FLIP,
-      )
-
-      renderImage({ image, sx, sy }, ctx)
-
-      ctx.restore()
-    })
-  })
-
-  ctx.restore()
-}

package/src/renderers/canvas/mouse.js

@@ -1,37 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-export function renderMouse(entity, ctx) {
-  const { color = "black", thickness = 1, orientation = 0 } = entity
-
-  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/renderers/canvas/rendering-system.js

@@ -1,79 +0,0 @@
-import { to2D } from "@inglorious/utils/math/linear-algebra/2d.js"
-
-import { absolutePosition } from "./absolute-position.js"
-
-const ORIGIN = 0
-const DEFAULT_ZOOM = 1
-const HALF = 2
-
-const DEFAULT_LAYER = 0
-const Y = 1
-const Z = 2
-
-function getRenderFunction(types, entity) {
-  const typeInfo = types[entity.type]
-  if (!typeInfo) {
-    return null
-  }
-
-  // A type can be a single object or an array of behaviors
-  const behaviorWithRender = Array.isArray(typeInfo)
-    ? typeInfo.find((b) => b.render)
-    : typeInfo
-
-  return behaviorWithRender?.render
-}
-
-export function createRenderingSystem(ctx) {
-  return {
-    update(state, dt, api) {
-      const types = api.getTypes()
-      const { game, ...worldEntities } = state.entities
-
-      // 1. Clear canvas
-      const [, , width, height] = game.bounds
-      ctx.fillStyle = game.backgroundColor || "lightgrey"
-      ctx.fillRect(ORIGIN, ORIGIN, width, height)
-
-      // 2. Find active camera
-      const camera = Object.values(state.entities).find(
-        (entity) => entity.type === "camera" && entity.isActive,
-      )
-
-      // 3. Render world entities with camera transform
-      ctx.save()
-
-      if (camera && !game.devMode) {
-        const [cameraX, cameraZ] = to2D(camera.position)
-        const zoom = camera.zoom ?? DEFAULT_ZOOM
-
-        // Center the view on the camera and apply zoom.
-        // The order of operations is crucial here.
-        ctx.translate(width / HALF, height / HALF)
-        ctx.scale(zoom, zoom)
-        // This vertical translation compensates for the coordinate system flip
-        // that happens inside the absolutePosition decorator.
-        ctx.translate(ORIGIN, -height)
-        // This translation moves the world relative to the camera.
-        ctx.translate(-cameraX, cameraZ)
-      }
-
-      Object.values(worldEntities)
-        .filter(({ position }) => position)
-        .toSorted(
-          (a, b) =>
-            (a.layer ?? DEFAULT_LAYER) - (b.layer ?? DEFAULT_LAYER) ||
-            a.position[Y] - b.position[Y] ||
-            b.position[Z] - a.position[Z],
-        )
-        .forEach((entity) => {
-          const render = getRenderFunction(types, entity)
-          if (render) {
-            absolutePosition(render)(entity, ctx, { api })
-          }
-        })
-
-      ctx.restore()
-    },
-  }
-}

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

@@ -1,29 +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 function renderCircle(entity, ctx) {
-  const {
-    offset = zero(),
-    radius = 24,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = entity
-  const [x, y, z] = offset
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.beginPath()
-  ctx.arc(x, -y - z, radius, 0, 2 * pi())
-  ctx.fill()
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}

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

@@ -1,27 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-
-export function renderRectangle(entity, ctx) {
-  const {
-    offset = zero(),
-    size,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = entity
-  const [x, y, z] = offset
-  const [width = 100, height = 50, depth = 0] = size
-  const rectHeight = height + depth
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.fillRect(x - width / 2, -y - z - rectHeight / 2, width, rectHeight)
-  ctx.strokeRect(x - width / 2, -y - z - rectHeight / 2, width, rectHeight)
-
-  ctx.restore()
-}

package/src/renderers/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/renderers/react/game/character/index.jsx

@@ -1,20 +0,0 @@
-import classes from "./character.module.scss"
-
-const DEFAULT_SIZE = 24
-const DEFAULT_ORIENTATION = 0
-
-export default function Character({ type, entity, className, style }) {
-  const size = type.size ?? DEFAULT_SIZE
-  const { orientation = DEFAULT_ORIENTATION } = entity
-
-  return (
-    <div
-      className={`${classes.character} ${className}`}
-      style={{
-        ...style,
-        "--size": `${size}px`,
-        "--angle": `${-orientation}rad`,
-      }}
-    />
-  )
-}

package/src/renderers/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;
-  }
-}

package/src/renderers/react/game/cursor/index.jsx

@@ -1,20 +0,0 @@
-import classes from "./cursor.module.scss"
-
-export default function Cursor({ entity, className, style }) {
-  const { orientation } = entity
-
-  return (
-    <div
-      className={`${classes.cursor} ${className}`}
-      style={{
-        ...style,
-        "--angle": `${-orientation}rad`,
-      }}
-    >
-      <div className={classes.top} />
-      <div className={classes.bottom} />
-      <div className={classes.left} />
-      <div className={classes.right} />
-    </div>
-  )
-}

package/src/renderers/react/game/form/fields/field/field.module.scss

@@ -1,5 +0,0 @@
-.field {
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  column-gap: 0.5rem;
-}