@inglorious/engine 0.2.0 → 0.4.0

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

package/src/renderers/react/game/form/fields/field/index.jsx

@@ -1,56 +0,0 @@
-import { useEffect, useState } from "react"
-import { useDispatch } from "react-redux"
-
-import classes from "./field.module.scss"
-
-export default function Field({ id, entity }) {
-  const { label, inputType, defaultValue = "", ...rest } = entity
-
-  const [value, setValue] = useState(defaultValue)
-  useEffect(() => {
-    setValue(defaultValue)
-  }, [defaultValue, inputType])
-
-  const dispatch = useDispatch()
-
-  const handleChange = (event) => {
-    const newValue = parse(event.target, inputType)
-    setValue(newValue)
-    dispatch({ type: "fieldChange", payload: { id, value: newValue } })
-  }
-
-  const handleClick = () => {
-    const newValue = defaultValue
-    setValue(newValue)
-    dispatch({ type: "fieldChange", payload: { id, value: newValue } })
-  }
-
-  return (
-    <div className={classes.field}>
-      <label htmlFor={id}>{label}</label>
-      <input
-        {...rest}
-        id={id}
-        type={inputType}
-        value={value}
-        checked={value}
-        onChange={handleChange}
-      />
-      <button onClick={handleClick}>&#8634;</button>
-    </div>
-  )
-}
-
-function parse(target, inputType) {
-  switch (inputType) {
-    case "checkbox":
-    case "radio":
-      return target.checked
-
-    case "number":
-      return Number(target.value)
-
-    default:
-      return target.value
-  }
-}

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

@@ -1,48 +0,0 @@
-$black: #282c34;
-$dark-grey: #32363e;
-$middle-grey: #5c6370;
-$light-grey: #abb2bf;
-$highlight: #c678dd;
-
-.fields {
-  padding: 1rem;
-  display: grid;
-  row-gap: 0.5rem;
-  border-bottom: 1px solid $black;
-
-  label,
-  input,
-  button {
-    color: $light-grey;
-  }
-
-  input {
-    background-color: $dark-grey;
-    border-top: 1px solid $black;
-    border-left: 1px solid $black;
-    border-bottom: 1px solid $light-grey;
-    border-right: 1px solid $light-grey;
-    outline: none;
-
-    &[type='checkbox'],
-    &[type='radio'] {
-      accent-color: $dark-grey;
-    }
-
-    &[type='number'] {
-      text-align: right;
-    }
-
-    &:focus {
-      outline: 1px solid $highlight;
-    }
-  }
-
-  button {
-    background-color: $dark-grey;
-    border-top: 1px solid $light-grey;
-    border-left: 1px solid $light-grey;
-    border-bottom: 1px solid $black;
-    border-right: 1px solid $black;
-  }
-}

package/src/renderers/react/game/form/fields/index.jsx

@@ -1,12 +0,0 @@
-import Field from "./field/index.jsx"
-import classes from "./fields.module.scss"
-
-export default function Fields({ fields }) {
-  return (
-    <div className={classes.fields}>
-      {Object.entries(fields).map(([id, field]) => (
-        <Field key={id} id={id} entity={field} />
-      ))}
-    </div>
-  )
-}

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

@@ -1,18 +0,0 @@
-$black: #282c34;
-$dark-grey: #32363e;
-$middle-grey: #5c6370;
-$light-grey: #abb2bf;
-$highlight: #c678dd;
-
-.form {
-  font-family: system-ui;
-  background-color: $dark-grey;
-  cursor: initial;
-
-  > .group {
-    color: $light-grey;
-    background-color: $middle-grey;
-    padding: 0.5rem;
-    border-top: 1px solid $light-grey;
-  }
-}

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

@@ -1,22 +0,0 @@
-import { Fragment } from "react"
-
-import Fields from "./fields/index.jsx"
-import classes from "./form.module.scss"
-
-export default function Form({ entity, className, style }) {
-  const { fields, groups } = entity
-
-  return (
-    <div className={`${classes.form} ${className}`} style={style}>
-      {fields && <Fields fields={fields} />}
-
-      {groups &&
-        Object.entries(groups).map(([id, { title, fields }]) => (
-          <Fragment key={id}>
-            <div className={classes.group}>{title}</div>
-            {fields && <Fields fields={fields} />}
-          </Fragment>
-        ))}
-    </div>
-  )
-}

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

@@ -1,16 +0,0 @@
-export const DEFAULT_ACCURACY = 0
-
-const ONE_SECOND = 1
-
-export default function Fps({ type, entity, className, style }) {
-  const { accuracy = DEFAULT_ACCURACY } = type
-  const { value } = entity.dt
-
-  const fps = ONE_SECOND / value
-
-  return (
-    <div className={className} style={style}>
-      FPS: {fps.toFixed(accuracy)}
-    </div>
-  )
-}

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

@@ -1,72 +0,0 @@
-import { withAbsolutePosition } from "@inglorious/renderers/react/hocs/with-absolute-position"
-import { useSelector } from "react-redux"
-
-import Character from "./character/index.jsx"
-import Cursor from "./cursor/index.jsx"
-import Form from "./form/index.jsx"
-import Fps from "./fps/index.jsx"
-import Platform from "./platform/index.jsx"
-import Scene from "./scene/index.jsx"
-import Sprite from "./sprite/index.jsx"
-import Stats from "./stats/index.jsx"
-
-const Components = {
-  character: withAbsolutePosition(Character),
-  mouse: withAbsolutePosition(Cursor),
-  form: withAbsolutePosition(Form),
-  fps: withAbsolutePosition(Fps),
-  platform: withAbsolutePosition(Platform),
-  sprite: withAbsolutePosition(Sprite),
-  stats: withAbsolutePosition(Stats),
-}
-
-const Y = 1
-const Z = 2
-
-export default function Game({ engine }) {
-  // NOTE: don't use simply engine.entities here: need to subscribe to animate scene!
-  const entities = useSelector((state) => state.entities)
-  // const entities = engine._store.getState().entities
-
-  const types = engine._store.getTypes()
-  const { mouse, ...rest } = entities
-  const options = { types, entities }
-
-  const render = createDraw(options)
-
-  return (
-    <Scene entities={entities}>
-      {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],
-        )
-        .map(render)}
-      {mouse && render(mouse)}
-    </Scene>
-  )
-}
-
-function createDraw(options) {
-  return function Draw(entity) {
-    const { types, entities } = options
-    const type = types[entity.type]
-
-    const Component = entity.sprite
-      ? Components.sprite
-      : Components[entity.type]
-
-    return (
-      <Component
-        key={entity.id}
-        id={entity.id}
-        type={type}
-        entity={entity}
-        entities={entities}
-      />
-    )
-  }
-}