@inglorious/engine 0.1.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+.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/ui/react/game/cursor/index.jsx

@@ -0,0 +1,20 @@
+import classes from "./cursor.module.scss"
+
+export default function Cursor({ instance, className, style }) {
+  const { orientation } = instance
+
+  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/ui/react/game/form/fields/field/field.module.scss

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

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react"
+import { useDispatch } from "react-redux"
+
+import classes from "./field.module.scss"
+
+export default function Field({ id, instance }) {
+  const { label, inputType, defaultValue = "", ...rest } = instance
+
+  const [value, setValue] = useState(defaultValue)
+  useEffect(() => {
+    setValue(defaultValue)
+  }, [defaultValue, inputType])
+
+  const notify = useDispatch()
+
+  const handleChange = (event) => {
+    const newValue = parse(event.target, inputType)
+    setValue(newValue)
+    notify({ id: "field:change", payload: { id, value: newValue } })
+  }
+
+  const handleClick = () => {
+    const newValue = defaultValue
+    setValue(newValue)
+    notify({ id: "field:change", 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/ui/react/game/form/fields/fields.module.scss

@@ -0,0 +1,48 @@
+$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/ui/react/game/form/fields/index.jsx

@@ -0,0 +1,12 @@
+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} instance={field} />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+$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/ui/react/game/form/index.jsx

@@ -0,0 +1,22 @@
+import { Fragment } from "react"
+
+import Fields from "./fields/index.jsx"
+import classes from "./form.module.scss"
+
+export default function Form({ instance, className, style }) {
+  const { fields, groups } = instance
+
+  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/ui/react/game/fps/index.jsx

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

package/src/ui/react/game/game.jsx

@@ -0,0 +1,71 @@
+import { withAbsolutePosition } from "@inglorious/ui/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.instances here: need to subscribe to animate scene!
+  const instances = useSelector((state) => state.instances)
+
+  const types = engine._store.getTypes()
+  const { mouse, ...rest } = instances
+  const options = { types, instances }
+
+  const draw = createDraw(options)
+
+  return (
+    <Scene instances={instances}>
+      {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(draw)}
+      {mouse && draw(mouse)}
+    </Scene>
+  )
+}
+
+function createDraw(options) {
+  return function Draw(instance) {
+    const { types, instances } = options
+    const type = types[instance.type]
+
+    const Component = instance.sprite
+      ? Components.sprite
+      : Components[instance.type]
+
+    return (
+      <Component
+        key={instance.id}
+        id={instance.id}
+        type={type}
+        instance={instance}
+        instances={instances}
+      />
+    )
+  }
+}