@inglorious/engine 0.1.0 → 0.2.0

package/src/{ui → renderers}/react/game/form/fields/field/index.jsx

@@ -1,56 +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
-  }
-}
+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/{ui → renderers}/react/game/form/fields/index.jsx

@@ -1,12 +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>
-  )
-}
+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/{ui → renderers}/react/game/form/index.jsx

@@ -1,22 +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>
-  )
-}
+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/{ui → renderers}/react/game/fps/index.jsx

@@ -1,16 +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>
-  )
-}
+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/{ui → renderers}/react/game/game.jsx

@@ -1,71 +1,72 @@
-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}
-      />
-    )
-  }
-}
+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/{ui → renderers}/react/game/index.jsx

@@ -1,29 +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>
-  )
-}
+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/{ui → renderers}/react/game/platform/index.jsx

@@ -1,30 +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}
-    />
-  )
-}
+/* 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/{ui → renderers}/react/game/scene/index.jsx

@@ -1,25 +1,27 @@
-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>
-  )
-}
+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/{ui → renderers}/react/game/sprite/index.jsx

@@ -1,58 +1,60 @@
-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} />
-}
+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} />
+}