@inglorious/engine 2.0.0 → 2.1.1

package/README.md

@@ -80,7 +80,7 @@ Here is a complete example showing how to set up and run a game using the engine
     <script type="importmap">
       {
         "imports": {
-          "immer": "https://unpkg.com/immer@latest/dist/immer.mjs",
+          "mutative": "https://unpkg.com/mutative@latest/dist/mutative.esm.mjs",
           "@inglorious/utils/": "https://unpkg.com/@inglorious%2Futils@latest/src/",
           "@inglorious/store/": "https://unpkg.com/@inglorious%2Fstore@latest/src/",
           "@inglorious/engine/": "https://unpkg.com/@inglorious%2Fengine@latest/src/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/engine",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "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": "4.0.0",
-    "@inglorious/utils": "3.5.0"
+    "@inglorious/store": "4.0.3",
+    "@inglorious/utils": "3.5.1"
   },
   "peerDependencies": {
-    "@inglorious/store": "4.0.0",
-    "@inglorious/utils": "3.5.0"
+    "@inglorious/store": "4.0.3",
+    "@inglorious/utils": "3.5.1"
   },
   "devDependencies": {
     "prettier": "^3.5.3",

package/src/behaviors/camera.js

@@ -57,7 +57,7 @@ export function camera(params) {
       }
     },
 
-    mouseWheel(entity, { deltaY }) {
+    mouseWheel(entity, deltaY) {
       const delta = Math.sign(deltaY)
       // Scrolling down (positive deltaY) should zoom out (decrease zoom value)
       entity.targetZoom -= delta * entity.zoomSpeed * entity.zoomSensitivity

package/src/behaviors/input/mouse.js

@@ -2,8 +2,6 @@ import { findCollision } from "@inglorious/engine/collision/detection.js"
 import { clampToBounds } from "@inglorious/engine/physics/bounds.js"
 import { zero } from "@inglorious/utils/math/vector.js"
 
-const NO_Y = 0
-
 export function mouse() {
   return {
     create(entity, entityId) {
@@ -33,10 +31,15 @@ export function mouse() {
   }
 }
 
-export function track(parent, options) {
-  const handleMouseMove = createHandler("mouseMove", parent, options)
-  const handleClick = createHandler("mouseClick", parent, options)
-  const handleWheel = createHandler("mouseWheel", parent, options)
+export function trackMouse(parent, api, toGamePosition) {
+  const handleMouseMove = createHandler(
+    "mouseMove",
+    parent,
+    api,
+    toGamePosition,
+  )
+  const handleClick = createHandler("mouseClick", parent, api, toGamePosition)
+  const handleWheel = createHandler("mouseWheel", parent, api, toGamePosition)
 
   return {
     onMouseMove: handleMouseMove,
@@ -54,32 +57,21 @@ export function createMouse(overrides = {}) {
   }
 }
 
-function createHandler(type, parent, api) {
+function createHandler(type, parent, api, toGamePosition) {
   return (event) => {
+    event.preventDefault()
     event.stopPropagation()
 
     if (parent == null) {
       return
     }
 
-    // For wheel events, the payload is different from other mouse events.
     if (type === "mouseWheel") {
-      api.notify(type, { deltaY: event.deltaY })
+      api.notify(type, event.deltaY)
       return
     }
 
-    // For move and click events, the payload is the calculated position.
-    const payload = calculatePosition(event, parent)
-    api.notify(type, payload)
+    const position = toGamePosition(event.clientX, event.clientY)
+    api.notify(type, position)
   }
 }
-
-function calculatePosition(event, parent) {
-  const { clientX, clientY } = event
-  const { left, bottom } = parent.getBoundingClientRect()
-
-  const x = clientX - left
-  const z = bottom - clientY
-
-  return [x, NO_Y, z]
-}

package/src/behaviors/input/touch.js

@@ -0,0 +1,121 @@
+import { findCollision } from "@inglorious/engine/collision/detection.js"
+import { clampToBounds } from "@inglorious/engine/physics/bounds.js"
+import { magnitude } from "@inglorious/utils/math/vector.js"
+import { subtract } from "@inglorious/utils/math/vectors.js"
+import { v } from "@inglorious/utils/v.js"
+
+const MOVEMENT_THRESHOLD = 5
+
+export function touch() {
+  return {
+    touchStart(entity, { index, position }, api) {
+      entity.isSwiping = false
+      entity.positions[index] = position
+
+      const entities = api.getEntities()
+      const touchedEntity = findCollision(
+        { ...entity, position: entity.positions[index] },
+        entities,
+        "touch",
+      )
+      if (touchedEntity) {
+        entity.targetIds[index] = touchedEntity.id
+        api.notify("entityTouchStart", entity.targetIds[index])
+      } else {
+        api.notify("sceneTouchStart", v(...entity.positions[index]))
+      }
+    },
+
+    touchMove(entity, { index, position }, api) {
+      const delta = subtract(position, entity.positions[index])
+
+      if (magnitude(delta) > MOVEMENT_THRESHOLD) {
+        entity.isSwiping = true
+      }
+
+      entity.positions[index] = position
+      const game = api.getEntity("game")
+      clampToBounds({ ...entity, position: entity.positions[index] }, game.size)
+
+      if (entity.targetIds[index]) {
+        api.notify("entityTouchMove", {
+          targetId: entity.targetIds[index],
+          position: v(...entity.positions[index]),
+        })
+      }
+    },
+
+    touchEnd(entity, { index }, api) {
+      if (entity.isSwiping) {
+        entity.isSwiping = false
+      }
+
+      if (entity.targetIds[index]) {
+        api.notify("entityTouchEnd", {
+          targetId: entity.targetIds[index],
+          position: v(...entity.positions[index]),
+        })
+        entity.targetIds[index] = undefined
+      } else {
+        api.notify("sceneTouchEnd", v(...entity.positions[index]))
+      }
+    },
+  }
+}
+
+export function trackTouch(parent, api, toGamePosition) {
+  const handleTouchStart = createHandler(
+    "touchStart",
+    parent,
+    api,
+    toGamePosition,
+  )
+  const handleTouchMove = createHandler(
+    "touchMove",
+    parent,
+    api,
+    toGamePosition,
+  )
+  const handleTouchEnd = createHandler("touchEnd", parent, api, toGamePosition)
+
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchCancel: handleTouchEnd,
+    onTouchEnd: handleTouchEnd,
+  }
+}
+
+export function createTouch() {
+  return {
+    type: "touch",
+    layer: 999, // A high layer value to ensure it's always rendered on top
+    positions: [],
+    collisions: {
+      bounds: { shape: "point" },
+      touch: { shape: "circle", radius: 44 },
+    },
+    targetIds: [],
+  }
+}
+
+function createHandler(type, parent, api, toGamePosition) {
+  return (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (parent == null) {
+      return
+    }
+
+    // touchend doesn't have touches anymore, but it has changedTouches
+    const touches = event.touches.length ? event.touches : event.changedTouches
+
+    Array.from(touches).forEach((touch, index) => {
+      const { clientX, clientY } = touch
+
+      const position = toGamePosition(clientX, clientY)
+      api.notify(type, { index, position })
+    })
+  }
+}

package/src/core/core-events.js

@@ -12,5 +12,8 @@ export const coreEvents = [
   "inputRelease",
   "mouseMove",
   "mouseClick",
+  "touchStart",
+  "touchMove",
+  "touchEnd",
   "spriteAnimationEnd",
 ]