@inglorious/engine 0.2.0 → 0.3.0

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}
-      />
-    )
-  }
-}

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

@@ -1,29 +0,0 @@
-import { Engine } from "@inglorious/engine/core/engine.js"
-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/renderers/react/game/platform/index.jsx

@@ -1,30 +0,0 @@
-/* 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, entity, className, style }) {
-  const dispatch = useDispatch()
-
-  const [width, height] = entity.size ?? DEFAULT_SIZE
-
-  const handleClick = (event) => {
-    event.stopPropagation()
-    dispatch({ id: "entityClick", payload: id })
-  }
-
-  return (
-    <div
-      className={`${classes.platform} ${className}`}
-      style={{
-        ...style,
-        "--width": `${width}px`,
-        "--height": `${height}px`,
-      }}
-      onClick={handleClick}
-    />
-  )
-}

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

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

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

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

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

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

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

@@ -1,60 +0,0 @@
-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
-// eslint-disable-next-line no-unused-vars
-const FLIPPED_DIAGONALLY_FLAG = 0x20000000
-// eslint-disable-next-line no-unused-vars
-const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
-
-export default function Sprite({ entity, className, style: customStyle }) {
-  const { image, frames, state, value } = entity.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/renderers/react/game/sprite/sprite.module.css

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

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

@@ -1,22 +0,0 @@
-import { toString } from "@inglorious/utils/math/linear-algebra/vector.js"
-
-const DECIMALS = 1
-
-export default function Stats({ entity, entities, className, style }) {
-  const { acceleration, velocity, position, orientation, ay, vy } =
-    entities[entity.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/renderers/react/hocs/with-absolute-position/index.jsx

@@ -1,20 +0,0 @@
-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.entities.game.bounds
-    const { position = zero() } = props.entity
-
-    const [x, y, z] = position
-
-    return (
-      <Component
-        {...props}
-        className={classes.withAbsolutePosition}
-        style={{ "--x": `${x}px`, "--y": `${screenHeight - y - z}px` }}
-      />
-    )
-  }
-}

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

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

package/src/renderers/react/index.jsx

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

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

@@ -1,153 +0,0 @@
-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 entity = { state: "sleeping", position: [0, 0, 0] }
-  const target = { position: [10, 0, 0] }
-  const tree = {
-    test({ entity }) {
-      return entity.state === "idle"
-    },
-    true() {
-      return {
-        test({ entity, target }) {
-          const distance = length(subtract(target.position, entity.position))
-          return distance < 250
-        },
-        true() {
-          return "aware"
-        },
-      }
-    },
-    false() {
-      return {
-        test({ entity }) {
-          return entity.state === "chasing"
-        },
-        true() {
-          return {
-            test({ entity, target }) {
-              const distance = length(
-                subtract(target.position, entity.position),
-              )
-              return distance >= 250
-            },
-            true() {
-              return "idle"
-            },
-            false() {
-              return {
-                test({ entity, target }) {
-                  const distance = length(
-                    subtract(target.position, entity.position),
-                  )
-                  return distance < 10
-                },
-                true() {
-                  return "sleepy"
-                },
-              }
-            },
-          }
-        },
-        false() {
-          return {
-            test({ entity }) {
-              return ["sleepy", "sleeping"].includes(entity.state)
-            },
-            true() {
-              return {
-                test({ entity, target }) {
-                  const distance = length(
-                    subtract(target.position, entity.position),
-                  )
-                  return distance >= 10
-                },
-                true() {
-                  return "aware"
-                },
-              }
-            },
-          }
-        },
-      }
-    },
-  }
-
-  const state = decide(tree, { entity, target })
-
-  expect(state).toBe("aware")
-})
-
-test("it should make a decision on a multi-child tree", () => {
-  const entity = { state: "sleeping", position: [0, 0, 0] }
-  const target = { position: [10, 0, 0] }
-  const wakeUp = () => ({
-    test({ entity, target }) {
-      const distance = length(subtract(target.position, entity.position))
-      return distance >= 10
-    },
-    true() {
-      return "aware"
-    },
-    false({ entity }) {
-      return entity.state
-    },
-  })
-
-  const tree = {
-    test({ entity }) {
-      return entity.state
-    },
-    idle() {
-      return {
-        test({ entity, target }) {
-          const distance = length(subtract(target.position, entity.position))
-          return distance < 250
-        },
-        true() {
-          return "aware"
-        },
-        false({ entity }) {
-          return entity.state
-        },
-      }
-    },
-    chasing() {
-      return {
-        test({ entity, target }) {
-          const distance = length(subtract(target.position, entity.position))
-          return distance >= 250
-        },
-        true() {
-          return "idle"
-        },
-        false() {
-          return {
-            test({ entity, target }) {
-              const distance = length(
-                subtract(target.position, entity.position),
-              )
-              return distance < 10
-            },
-            true() {
-              return "sleepy"
-            },
-            false({ entity }) {
-              return entity.state
-            },
-          }
-        },
-      }
-    },
-    sleepy: wakeUp,
-    sleeping: wakeUp,
-  }
-
-  const state = decide(tree, { entity, target })
-
-  expect(state).toBe("aware")
-})