@inglorious/engine 0.1.0

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

@@ -0,0 +1,29 @@
+import Engine from "@inglorious/engine"
+import { useEffect, useMemo, useState } from "react"
+import { Provider } from "react-redux"
+
+import GameComponent from "./game.jsx"
+
+export default function Game({ config }) {
+  const [isReady, setReady] = useState(false)
+
+  const engine = useMemo(() => new Engine(config), [config])
+
+  useEffect(() => {
+    engine.start()
+    setReady(true)
+    window.engine = engine
+
+    return () => engine.stop()
+  }, [engine, config])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <Provider store={engine._store}>
+      <GameComponent engine={engine} />
+    </Provider>
+  )
+}

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

@@ -0,0 +1,30 @@
+/* eslint-disable no-magic-numbers */
+
+import { useDispatch } from "react-redux"
+
+import classes from "./platform.module.scss"
+
+const DEFAULT_SIZE = [80, 20]
+
+export default function Platform({ id, instance, className, style }) {
+  const notify = useDispatch()
+
+  const [width, height] = instance.size ?? DEFAULT_SIZE
+
+  const handleClick = (event) => {
+    event.stopPropagation()
+    notify({ id: "instance:click", payload: id })
+  }
+
+  return (
+    <div
+      className={`${classes.platform} ${className}`}
+      style={{
+        ...style,
+        "--width": `${width}px`,
+        "--height": `${height}px`,
+      }}
+      onClick={handleClick}
+    />
+  )
+}

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

@@ -0,0 +1,7 @@
+.platform {
+  width: var(--width);
+  height: var(--height);
+  box-sizing: border-box;
+  background-color: lightgrey;
+  border: 1px solid grey;
+}

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

@@ -0,0 +1,25 @@
+import { track } from "@inglorious/game/decorators/input/mouse.js"
+import { useRef } from "react"
+import { useDispatch } from "react-redux"
+
+import classes from "./scene.module.scss"
+
+export default function Scene({ instances, children }) {
+  const notify = useDispatch()
+
+  const [, , width, height] = instances.game.bounds
+
+  const ref = useRef()
+  const mouseHandlers = track(ref.current, { notify })
+
+  return (
+    <div
+      className={classes.scene}
+      style={{ "--width": `${width}px`, "--height": `${height}px` }}
+      ref={ref}
+      {...mouseHandlers}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+.scene {
+  background-color: lightgrey;
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  overflow: hidden;
+  cursor: none;
+  user-select: none;
+}

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

@@ -0,0 +1,58 @@
+import "./sprite.module.css"
+
+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 Sprite({ instance, className, style: customStyle }) {
+  const { image, frames, state, value } = instance.sprite
+  const { src, 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)
+
+  let transform = ""
+  transform += `translate(
+    ${-tileWidth / CENTER_WIDTH}px,
+    ${-tileHeight / CENTER_HEIGHT}px
+  )`
+  transform += `scale(
+    ${isFlippedHorizontally ? FLIP : NO_FLIP},
+    ${isFlippedVertically ? FLIP : NO_FLIP}
+    )`
+  transform += `scale(${scale})`
+
+  const style = {
+    ...customStyle,
+    width: `${tileWidth}px`,
+    height: `${tileHeight}px`,
+    backgroundImage: `url(${src})`,
+    backgroundRepeat: `no-repeat`,
+    backgroundPosition: `-${sx * tileWidth}px -${sy * tileHeight}px`,
+    transform,
+  }
+
+  return <div className={className} style={style} />
+}

package/src/ui/react/game/sprite/sprite.module.css

@@ -0,0 +1,3 @@
+* {
+  image-rendering: pixelated;
+}

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

@@ -0,0 +1,22 @@
+import { toString } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+const DECIMALS = 1
+
+export default function Stats({ instance, instances, className, style }) {
+  const { acceleration, velocity, position, orientation, ay, vy } =
+    instances[instance.target]
+
+  return (
+    <div className={className} style={style}>
+      {acceleration && <div>Acceleration: {toString(acceleration)}</div>}
+      {velocity && <div>Velocity: {toString(velocity)}</div>}
+      {position && <div>Position: {toString(position)}</div>}
+      {orientation != null && (
+        <div>Orientation: {orientation.toFixed(DECIMALS)}</div>
+      )}
+
+      {ay != null && <div>ay: {ay.toFixed(DECIMALS)}</div>}
+      {vy != null && <div>vy: {vy.toFixed(DECIMALS)}</div>}
+    </div>
+  )
+}

package/src/ui/react/hocs/with-absolute-position/index.jsx

@@ -0,0 +1,20 @@
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+import classes from "./with-absolute-position.module.scss"
+
+export function withAbsolutePosition(Component) {
+  return function AbsolutePosition(props) {
+    const [, , , screenHeight] = props.instances.game.bounds
+    const { position = zero() } = props.instance
+
+    const [x, y, z] = position
+
+    return (
+      <Component
+        {...props}
+        className={classes.withAbsolutePosition}
+        style={{ "--x": `${x}px`, "--y": `${screenHeight - y - z}px` }}
+      />
+    )
+  }
+}

package/src/ui/react/hocs/with-absolute-position/with-absolute-position.module.scss

@@ -0,0 +1,5 @@
+.withAbsolutePosition {
+  position: absolute;
+  top: var(--y);
+  left: var(--x);
+}

package/src/ui/react/index.jsx

@@ -0,0 +1,9 @@
+import ReactDOM from "react-dom/client"
+
+import Game from "./game/index.jsx"
+
+export function start(game) {
+  ReactDOM.createRoot(document.getElementById("root")).render(
+    <Game config={game} />,
+  )
+}

package/src/utils/algorithms/decision-tree.js

@@ -0,0 +1,24 @@
+/**
+ * @typedef {import("./types").Conditions} Conditions
+ * @typedef {import("./types").Outcome} Outcome
+ * @typedef {import("./types").DecisionTree} DecisionTree
+ */
+
+/**
+ * Traverses a decision tree recursively based on the provided conditions and returns the resulting node.
+ *
+ * @param {DecisionTree} tree - The decision tree to traverse. Each node contains:
+ *   - `test` {Function}: A function that evaluates the conditions and determines the next branch.
+ *   - Branches keyed by the possible outcomes of the `test` function.
+ * @param {Conditions} conditions - The conditions object passed to the `test` function at each node.
+ * @returns {Outcome | DecisionTree} - The resulting outcome or decision tree itself after traversing the decision tree.
+ */
+export function decide(tree, conditions) {
+  if (!tree.test) {
+    return tree
+  }
+
+  const value = tree.test(conditions)
+
+  return tree[value] && decide(tree[value](conditions), conditions)
+}

package/src/utils/algorithms/decision-tree.test.js

@@ -0,0 +1,102 @@
+import { length } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { subtract } from "@inglorious/utils/math/linear-algebra/vectors.js"
+import { expect, test } from "vitest"
+
+import { decide } from "./decision-tree.js"
+
+test("it should make a decision based on a binary decision tree", () => {
+  const instance = { state: "sleeping", position: [0, 0, 0] }
+  const target = { position: [10, 0, 0] }
+  const tree = {
+    test: ({ instance }) => instance.state === "idle",
+    true: () => ({
+      test: ({ instance, mouse }) => {
+        const distance = length(subtract(mouse.position, instance.position))
+        return distance < 250
+      },
+      true: () => "aware",
+    }),
+    false: () => ({
+      test: ({ instance }) => instance.state === "chasing",
+      true: () => ({
+        test: ({ instance, mouse }) => {
+          const distance = length(subtract(mouse.position, instance.position))
+          return distance >= 250
+        },
+        true: () => "idle",
+        false: () => ({
+          test: ({ instance, mouse }) => {
+            const distance = length(subtract(mouse.position, instance.position))
+            return distance < 10
+          },
+          true: () => "sleepy",
+        }),
+      }),
+      false: () => ({
+        test: ({ instance }) => ["sleepy", "sleeping"].includes(instance.state),
+        true: () => ({
+          test: ({ instance, mouse }) => {
+            const distance = length(subtract(mouse.position, instance.position))
+            return distance >= 10
+          },
+          true: () => "aware",
+        }),
+      }),
+    }),
+  }
+
+  const state = decide(tree, { instance, mouse: target })
+
+  expect(state).toBe("aware")
+})
+
+test("it should make a decision on a multi-child tree", () => {
+  const instance = { state: "sleeping", position: [0, 0, 0] }
+  const target = { position: [10, 0, 0] }
+  const tree = {
+    test: ({ instance }) => instance.state,
+    idle: () => ({
+      test: ({ instance, target }) => {
+        const distance = length(subtract(target.position, instance.position))
+        return distance < 250
+      },
+      true: () => "aware",
+      false: ({ instance }) => instance.state,
+    }),
+    chasing: () => ({
+      test: ({ instance, target }) => {
+        const distance = length(subtract(target.position, instance.position))
+        return distance >= 250
+      },
+      true: () => "idle",
+      false: () => ({
+        test: ({ instance, target }) => {
+          const distance = length(subtract(target.position, instance.position))
+          return distance < 10
+        },
+        true: () => "sleepy",
+        false: ({ instance }) => instance.state,
+      }),
+    }),
+    sleepy: () => ({
+      test: ({ instance, target }) => {
+        const distance = length(subtract(target.position, instance.position))
+        return distance >= 10
+      },
+      true: () => "aware",
+      false: ({ instance }) => instance.state,
+    }),
+    sleeping: () => ({
+      test: ({ instance, target }) => {
+        const distance = length(subtract(target.position, instance.position))
+        return distance >= 10
+      },
+      true: () => "aware",
+      false: ({ instance }) => instance.state,
+    }),
+  }
+
+  const state = decide(tree, { instance, target })
+
+  expect(state).toBe("aware")
+})

package/src/utils/algorithms/path-finding.js

@@ -0,0 +1,155 @@
+/**
+ * @typedef {import("./types").Node} Node
+ * @typedef {import("./types").Graph} Graph
+ */
+
+import {
+  contains,
+  push,
+  remove,
+  root,
+} from "@inglorious/utils/data-structures/heap.js"
+import { abs, magnitude } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { subtract } from "@inglorious/utils/math/linear-algebra/vectors.js"
+
+const NO_COST = 0
+
+/**
+ * Calculates the cost of a path using Dijkstra's algorithm.
+ * In this simplified form the cost is simply 0.
+ *
+ * @returns {number} - The cost of the path (which is 0).
+ */
+export const dijkstra = () => NO_COST
+
+/**
+ * Calculates the Euclidean distance between two nodes.
+ *
+ * @param {Node} a - The first node.
+ * @param {Node} b - The second node.
+ * @returns {number} - The Euclidean distance between the two nodes.
+ */
+export const eucledianDistance = (a, b) =>
+  magnitude(subtract(a.position, b.position))
+
+/**
+ * Calculates the Manhattan distance between two nodes.
+ *
+ * @param {Node} a - The first node.
+ * @param {Node} b - The second node.
+ * @returns {number} - The Manhattan distance between the two nodes.
+ */
+export const manhattanDistance = (a, b) => abs(subtract(a.position, b.position))
+
+/**
+ * Compares the cost of two nodes.
+ *
+ * @param {Node} a - The first node.
+ * @param {Node} b - The second node.
+ * @returns {number} - The difference in cost between the two nodes.
+ */
+const compareCost = (a, b) => b.cost - a.cost
+
+/**
+ * Compares the total cost of two nodes.
+ *
+ * @param {Node} a - The first node.
+ * @param {Node} b - The second node.
+ * @returns {number} - The difference in total cost between the two nodes.
+ */
+const compareTotalCost = (a, b) => b.totalCost - a.totalCost
+
+/**
+ * Finds the shortest path in a graph from a start node to an end node using a heuristic.
+ *
+ * @param {Graph} graph - The graph containing nodes and arcs.
+ * @param {string} start - The ID of the start node.
+ * @param {string} end - The ID of the end node.
+ * @param {(a: Node, b: Node) => number} [heuristic=eucledianDistance] - The heuristic function to estimate the cost.
+ * @returns {string[]} - An array of node IDs representing the shortest path.
+ */
+export function findPath(graph, start, end, heuristic = eucledianDistance) {
+  const { nodes, arcs } = adaptGraph(graph)
+  const findNode = createFindNode(nodes)
+
+  const startNode = findNode(start)
+  const endNode = findNode(end)
+  let discoveredNodes = [startNode]
+  let evaluatedNodes = []
+  let path = []
+
+  while (discoveredNodes.length) {
+    let current = root(discoveredNodes, compareTotalCost)
+
+    if (current.id === end) {
+      while (current != null) {
+        path = [current.id, ...path]
+        current = current.previous
+      }
+
+      return path
+    }
+
+    discoveredNodes = remove(discoveredNodes, current)
+    evaluatedNodes = push(evaluatedNodes, current)
+
+    const outgoingArcs = arcs.filter(({ from }) => from === current.id)
+    const destinations = outgoingArcs.map(({ to }) => findNode(to))
+
+    for (const destination of destinations) {
+      const totalCost =
+        current.cost +
+        destination.cost +
+        heuristic(current, destination) +
+        outgoingArcs.find(({ to }) => to === destination.id)?.cost
+
+      let isNewPathFound = false
+      if (contains(discoveredNodes, destination)) {
+        if (totalCost < destination.cost) {
+          destination.cost = totalCost
+          isNewPathFound = true
+        }
+      } else {
+        destination.cost = totalCost
+        isNewPathFound = true
+        discoveredNodes = push(discoveredNodes, destination, compareCost)
+      }
+
+      if (isNewPathFound) {
+        destination.totalCost =
+          destination.cost + heuristic(destination, endNode)
+        destination.previous = current
+      }
+    }
+  }
+}
+
+/**
+ * Adapts a graph to ensure all nodes and arcs have a cost property.
+ *
+ * @param {Graph} graph - The graph to adapt.
+ * @returns {Graph} - The adapted graph with cost properties added.
+ */
+function adaptGraph(graph) {
+  return {
+    ...graph,
+    nodes: Array.isArray(graph.nodes)
+      ? graph.nodes.map((node) => ({ ...node, cost: node.cost ?? NO_COST }))
+      : Object.entries(graph.nodes).map(([key, value]) => ({
+          id: key,
+          position: value,
+          cost: 0,
+        })),
+    arcs: graph.arcs.map((arc) => ({ ...arc, cost: arc.cost ?? NO_COST })),
+  }
+}
+
+/**
+ * Creates a function that finds a node by its ID.
+ *
+ * @param {Node[]} nodes - The array of nodes.
+ * @returns {(id: string) => Node} - A function that finds a node by its ID.
+ */
+function createFindNode(nodes) {
+  return (id) => nodes.find((node) => node.id === id)
+}

package/src/utils/algorithms/path-finding.test.js

@@ -0,0 +1,151 @@
+import {
+  createBoard,
+  down,
+  downRight,
+  right,
+} from "@inglorious/utils/data-structures/board.js"
+import { expect, test } from "vitest"
+
+import { findPath } from "./path-finding.js"
+
+test("it should find the shortest path in a trivial example", () => {
+  const graph = {
+    nodes: {
+      A: [0, 0],
+      B: [2, 0],
+    },
+    arcs: [{ from: "A", to: "B", cost: 2 }],
+  }
+  const start = "A"
+  const end = "B"
+  const expectedResult = ["A", "B"]
+
+  expect(findPath(graph, start, end)).toStrictEqual(expectedResult)
+})
+
+test("it should find the shortest path between two nodes with default heuristic", () => {
+  const graph = {
+    nodes: {
+      A: [0, 0],
+      B: [2, 0],
+      C: [3, 2],
+      D: [4, 4],
+      E: [1, 1],
+      F: [2, 3],
+      G: [0, 4],
+    },
+    arcs: [
+      { from: "A", to: "B" },
+      { from: "B", to: "C" },
+      { from: "C", to: "D" },
+      { from: "A", to: "E" },
+      { from: "E", to: "F" },
+      { from: "F", to: "G" },
+      { from: "G", to: "D" },
+    ],
+  }
+  const start = "A"
+  const end = "D"
+  const expectedResult = ["A", "B", "C", "D"]
+
+  expect(findPath(graph, start, end)).toStrictEqual(expectedResult)
+})
+
+test("it should find the shortest path between two nodes with node costs", () => {
+  const graph = {
+    nodes: [
+      { id: "A", position: [0, 0], cost: 0 },
+      { id: "B", position: [2, 0], cost: 7 },
+      { id: "C", position: [3, 2], cost: 3 },
+      { id: "D", position: [4, 4], cost: 2 },
+      { id: "E", position: [1, 1], cost: 1.5 },
+      { id: "F", position: [2, 3], cost: 2 },
+      { id: "G", position: [0, 4], cost: 3 },
+    ],
+    arcs: [
+      { from: "A", to: "B" },
+      { from: "B", to: "C" },
+      { from: "C", to: "D" },
+      { from: "A", to: "E" },
+      { from: "E", to: "F" },
+      { from: "F", to: "G" },
+      { from: "G", to: "D" },
+    ],
+  }
+  const start = "A"
+  const end = "D"
+  const expectedResult = ["A", "E", "F", "G", "D"]
+
+  expect(findPath(graph, start, end)).toStrictEqual(expectedResult)
+})
+
+test("it should find the shortest path between two nodes with arc costs", () => {
+  const graph = {
+    nodes: {
+      A: [0, 0],
+      B: [2, 0],
+      C: [3, 2],
+      D: [4, 4],
+      E: [1, 1],
+      F: [2, 3],
+      G: [0, 4],
+    },
+    arcs: [
+      { from: "A", to: "B", cost: 7 },
+      { from: "B", to: "C", cost: 3 },
+      { from: "C", to: "D", cost: 2 },
+      { from: "A", to: "E", cost: 1.5 },
+      { from: "E", to: "F", cost: 2 },
+      { from: "F", to: "G", cost: 3 },
+      { from: "G", to: "D", cost: 4 },
+    ],
+  }
+  const start = "A"
+  const end = "D"
+  const expectedResult = ["A", "E", "F", "G", "D"]
+
+  expect(findPath(graph, start, end)).toStrictEqual(expectedResult)
+})
+
+test("it should find the best path in a board graph", () => {
+  const rows = 5
+  const columns = 5
+  const size = [rows, columns]
+  const filler = (i, j) => ({ id: `${i}${j}`, position: [i, j] })
+  const board = createBoard(size, filler)
+
+  const graph = {
+    nodes: board,
+    arcs: [],
+  }
+
+  for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < columns; j++) {
+      const current = `${i}${j}`
+      if (i + 1 < rows) {
+        graph.arcs.push({
+          from: current,
+          to: down([i, j], size).join(""),
+        })
+      }
+      if (j + 1 < columns) {
+        graph.arcs.push({
+          from: current,
+          to: right([i, j], size).join(""),
+        })
+      }
+      if (i + 1 < rows && j + 1 < columns) {
+        graph.arcs.push({
+          from: current,
+          to: downRight([i, j], size).join(""),
+        })
+      }
+    }
+  }
+
+  const start = "00"
+  const end = "44"
+  const expectedResult = ["00", "11", "22", "33", "44"]
+
+  expect(findPath(graph, start, end)).toStrictEqual(expectedResult)
+})

package/src/utils/algorithms/types.d.ts

@@ -0,0 +1,28 @@
+export type Conditions = unknown
+export type Outcome = string | boolean
+
+export interface DecisionTree {
+  test: (conditions: Conditions) => Outcome
+  [outcome: Outcome]: () => Outcome | DecisionTree
+}
+
+interface NodeMap {
+  [id: string]: [number, number] // [x, y]
+}
+
+interface Node {
+  id: string
+  position: [number, number] // [x, y]
+  cost?: number
+}
+
+interface Arc {
+  from: string
+  to: string
+  cost?: number
+}
+
+export interface Graph {
+  nodes: NodeMap | Node[]
+  arcs: Arc[]
+}