@inglorious/engine 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/engine",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A JavaScript game engine written with global state, immutability, and pure functions in mind. Have fun(ctional programming) with it!",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -30,12 +30,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/store": "5.0.0",
-    "@inglorious/utils": "3.6.0"
+    "@inglorious/utils": "3.6.0",
+    "@inglorious/store": "5.1.0"
   },
   "peerDependencies": {
-    "@inglorious/store": "5.0.0",
-    "@inglorious/utils": "3.6.0"
+    "@inglorious/utils": "3.6.0",
+    "@inglorious/store": "5.1.0"
   },
   "devDependencies": {
     "prettier": "^3.5.3",

package/src/core/engine.js

@@ -1,6 +1,12 @@
 import { audio } from "@inglorious/engine/behaviors/audio.js"
 import { game } from "@inglorious/engine/behaviors/game.js"
 import { images } from "@inglorious/engine/behaviors/images.js"
+import {
+  connectDevTools,
+  disconnectDevTools,
+  sendAction,
+} from "@inglorious/store/client/dev-tools.js"
+import { multiplayerMiddleware } from "@inglorious/store/client/multiplayer-middleware.js"
 import { createStore } from "@inglorious/store/store.js"
 import { augmentType } from "@inglorious/store/types.js"
 import { isArray } from "@inglorious/utils/data-structures/array.js"
@@ -9,10 +15,8 @@ import { isVector } from "@inglorious/utils/math/vector.js"
 import { v } from "@inglorious/utils/v.js"
 
 import { coreEvents } from "./core-events.js"
-import { disconnectDevTools, initDevTools, sendAction } from "./dev-tools.js"
 import { Loop } from "./loops/index.js"
 import { entityPoolMiddleware } from "./middlewares/entity-pool/entity-pool-middleware.js"
-import { multiplayerMiddleware } from "./middlewares/multiplayer-middleware.js"
 
 // Default game configuration
 // loop.type specifies the type of loop to use (defaults to "animationFrame").
@@ -59,7 +63,9 @@ export class Engine {
     // Add multiplayer middleware if needed
     const multiplayer = this._config.entities.game?.multiplayer
     if (multiplayer) {
-      middlewares.push(multiplayerMiddleware(multiplayer))
+      middlewares.push(
+        multiplayerMiddleware({ ...multiplayer, skippedEvents: coreEvents }),
+      )
     }
 
     this._store = createStore({ ...this._config, middlewares })
@@ -67,7 +73,7 @@ export class Engine {
     this._loop = new Loop[this._config.loop.type]()
 
     if (this._devMode) {
-      initDevTools(this._store)
+      connectDevTools(this._store, { skippedEvents: coreEvents })
     }
   }
 
@@ -111,7 +117,7 @@ export class Engine {
     const newDevMode = state.entities.game?.devMode
     if (newDevMode !== this._devMode) {
       if (newDevMode) {
-        initDevTools(this._store)
+        connectDevTools(this._store, { skippedEvents: coreEvents })
       } else {
         disconnectDevTools()
       }

package/src/core/dev-tools.js

@@ -1,122 +0,0 @@
-import { coreEvents } from "./core-events.js"
-
-const LAST_STATE = 1
-
-let devToolsInstance = null
-let unsubscribe = null
-
-export function initDevTools(store) {
-  // Prevent multiple connections
-  if (devToolsInstance) {
-    return
-  }
-
-  if (typeof window === "undefined" || !window.__REDUX_DEVTOOLS_EXTENSION__) {
-    return
-  }
-
-  devToolsInstance = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: "Inglorious Engine",
-    predicate: (state, action) => !coreEvents.includes(action.type),
-    actionCreators: {
-      jump: () => ({ type: "jump", payload: { inputId: "input0" } }),
-    },
-    // @see https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#features
-    features: {
-      pause: true, // start/pause recording of dispatched actions
-      lock: true, // lock/unlock dispatching actions and side effects
-      persist: true, // persist states on page reloading
-      export: true, // export history of actions in a file
-      import: "custom", // import history of actions from a file
-      jump: false, // jump back and forth (time travelling)
-      skip: false, // skip (cancel) actions
-      reorder: false, // drag and drop actions in the history list
-      dispatch: true, // dispatch custom actions or action creators
-      test: false, // generate tests for the selected actions
-    },
-  })
-
-  unsubscribe = devToolsInstance.subscribe((message) => {
-    switch (message.type) {
-      case "DISPATCH":
-        handleDispatch(message, store)
-        break
-
-      case "ACTION":
-        handleAction(message, store)
-        break
-    }
-  })
-
-  devToolsInstance.init(store.getState())
-}
-
-export function disconnectDevTools() {
-  // The `disconnect` method on the devToolsInstance is not available in all
-  // environments or versions of the extension.
-  // The safest way to "disconnect" is to unsubscribe from any listeners
-  // and release our reference to the instance, which prevents any further
-  // actions from being sent.
-  if (unsubscribe) {
-    unsubscribe()
-    unsubscribe = null
-    devToolsInstance = null
-  }
-}
-
-export function sendAction(action, state) {
-  if (devToolsInstance) {
-    devToolsInstance.send(action, state)
-  }
-}
-
-function handleDispatch(message, store) {
-  switch (message.payload.type) {
-    // reset button
-    case "RESET": {
-      store.reset()
-      devToolsInstance.init(store.getState())
-      break
-    }
-
-    // revert button
-    case "ROLLBACK": {
-      const newState = JSON.parse(message.state)
-      store.setState(newState)
-      break
-    }
-
-    // commit button
-    case "COMMIT": {
-      devToolsInstance.init(store.getState())
-      break
-    }
-
-    // import from file button
-    case "IMPORT_STATE": {
-      const { computedStates, actionsById } = message.payload.nextLiftedState
-
-      const [firstComputedState] = computedStates
-      const lastComputedState =
-        computedStates[computedStates.length - LAST_STATE]
-      if (lastComputedState) {
-        store.setState(lastComputedState.state)
-      }
-
-      const flattenedActions = Object.values(actionsById)
-        .flatMap(({ action }) => action.payload ?? action)
-        .map((action, index) => [index, action])
-
-      devToolsInstance.init(
-        firstComputedState.state,
-        Object.fromEntries(flattenedActions),
-      )
-      break
-    }
-  }
-}
-
-function handleAction(message, store) {
-  const action = JSON.parse(message.payload)
-  store.dispatch(action)
-}

package/src/core/middlewares/multiplayer-middleware.js

@@ -1,95 +0,0 @@
-import {
-  deserialize,
-  serialize,
-} from "@inglorious/utils/data-structures/object.js"
-import { extend } from "@inglorious/utils/data-structures/objects.js"
-
-import { coreEvents } from "../core-events.js"
-
-// A constant for the server's WebSocket URL.
-const DEFAULT_SERVER_URL = `ws://${window.location.hostname}:3000`
-const DEFAULT_RECONNECTION_DELAY = 1000
-
-/**
- * Creates and returns the multiplayer middleware.
- * @returns {Function} The middleware function.
- */
-export function multiplayerMiddleware(config = {}) {
-  const serverUrl = config.serverUrl ?? DEFAULT_SERVER_URL
-  const reconnectionDelay =
-    config.reconnectionDelay ?? DEFAULT_RECONNECTION_DELAY
-
-  let ws = null
-  const localQueue = []
-
-  // The middleware function that will be applied to the store.
-  return (store) => (next) => (event) => {
-    if (coreEvents.includes(event.type)) {
-      return next(event)
-    }
-
-    // Establish the connection on the first event.
-    if (!ws) {
-      establishConnection(store)
-    }
-
-    // Only send the event to the server if it didn't come from the server.
-    if (!event.fromServer) {
-      if (ws?.readyState === WebSocket.OPEN) {
-        // If the connection is open, send the event immediately.
-        ws.send(serialize(event))
-      } else {
-        // If the connection is not open, queue the event for later.
-        localQueue.push(event)
-      }
-    }
-
-    // Pass the event to the next middleware in the chain,
-    // which is eventually the store's original dispatch function.
-    return next(event)
-  }
-
-  /**
-   * Attempts to establish a WebSocket connection to the server.
-   */
-  function establishConnection(store) {
-    // If a connection already exists, close it first.
-    if (ws) {
-      ws.close()
-    }
-    ws = new WebSocket(serverUrl)
-
-    // =====================================================================
-    // WebSocket Event Handlers
-    // =====================================================================
-
-    ws.onopen = () => {
-      // Send any queued events to the server.
-      while (localQueue.length) {
-        ws.send(serialize(localQueue.shift()))
-      }
-    }
-
-    ws.onmessage = (event) => {
-      const serverEvent = deserialize(event.data)
-
-      if (serverEvent.type === "initialState") {
-        // Merge the server's initial state with the client's local state.
-        const nextState = extend(store.getState(), serverEvent.payload)
-        store.setState(nextState)
-      } else {
-        // Dispatch the event to the local store to update the client's state.
-        store.dispatch({ ...serverEvent, fromServer: true })
-      }
-    }
-
-    ws.onclose = () => {
-      // Attempt to reconnect after a short delay.
-      setTimeout(() => establishConnection(store), reconnectionDelay)
-    }
-
-    ws.onerror = () => {
-      ws.close() // The 'onclose' handler will trigger the reconnect.
-    }
-  }
-}