@inglorious/engine 2.1.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.1.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/input/mouse.js

@@ -1,10 +1,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"
-import { v } from "@inglorious/utils/v.js"
-
-const NO_Y = 0
-const HALF = 2
 
 export function mouse() {
   return {
@@ -35,10 +31,15 @@ export function mouse() {
   }
 }
 
-export function trackMouse(parent, api) {
-  const handleMouseMove = createHandler("mouseMove", parent, api)
-  const handleClick = createHandler("mouseClick", parent, api)
-  const handleWheel = createHandler("mouseWheel", parent, api)
+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,
@@ -56,7 +57,7 @@ export function createMouse(overrides = {}) {
   }
 }
 
-function createHandler(type, parent, api) {
+function createHandler(type, parent, api, toGamePosition) {
   return (event) => {
     event.preventDefault()
     event.stopPropagation()
@@ -70,38 +71,7 @@ function createHandler(type, parent, api) {
       return
     }
 
-    const payload = calculatePosition(event, parent, api)
-    api.notify(type, payload)
+    const position = toGamePosition(event.clientX, event.clientY)
+    api.notify(type, position)
   }
 }
-
-function calculatePosition(event, parent, api) {
-  const { clientX, clientY } = event
-  const {
-    left,
-    bottom,
-    width: canvasWidth,
-    height: canvasHeight,
-  } = parent.getBoundingClientRect()
-
-  const x = clientX - left
-  const y = bottom - clientY
-
-  const game = api.getEntity("game")
-  const [gameWidth, gameHeight] = game.size
-
-  const scaleX = canvasWidth / gameWidth
-  const scaleY = canvasHeight / gameHeight
-  const scale = Math.min(scaleX, scaleY)
-
-  const scaledGameWidth = gameWidth * scale
-  const scaledGameHeight = gameHeight * scale
-
-  const offsetX = (canvasWidth - scaledGameWidth) / HALF
-  const offsetY = (canvasHeight - scaledGameHeight) / HALF
-
-  const gameX = (x - offsetX) / scale
-  const gameY = (y - offsetY) / scale
-
-  return v(gameX, NO_Y, gameY)
-}

package/src/behaviors/input/touch.js

@@ -1,81 +1,105 @@
 import { findCollision } from "@inglorious/engine/collision/detection.js"
 import { clampToBounds } from "@inglorious/engine/physics/bounds.js"
-import { magnitude, zero } from "@inglorious/utils/math/vector.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 NO_Y = 0
 const MOVEMENT_THRESHOLD = 5
-const HALF = 2
 
 export function touch() {
   return {
-    create(entity, entityId) {
-      if (entityId !== entity.id) return
-
-      entity.collisions ??= {}
-      entity.collisions.bounds ??= { shape: "point" }
-    },
-
-    touchStart(entity, position) {
+    touchStart(entity, { index, position }, api) {
       entity.isSwiping = false
-      entity.position = position
-    },
+      entity.positions[index] = position
 
-    touchMove(entity, position, api) {
-      const game = api.getEntity("game")
+      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]))
+      }
+    },
 
-      const delta = subtract(position, entity.position)
+    touchMove(entity, { index, position }, api) {
+      const delta = subtract(position, entity.positions[index])
 
       if (magnitude(delta) > MOVEMENT_THRESHOLD) {
         entity.isSwiping = true
       }
 
-      entity.position = position
+      entity.positions[index] = position
+      const game = api.getEntity("game")
+      clampToBounds({ ...entity, position: entity.positions[index] }, game.size)
 
-      clampToBounds(entity, game.size)
+      if (entity.targetIds[index]) {
+        api.notify("entityTouchMove", {
+          targetId: entity.targetIds[index],
+          position: v(...entity.positions[index]),
+        })
+      }
     },
 
-    touchEnd(entity, _, api) {
+    touchEnd(entity, { index }, api) {
       if (entity.isSwiping) {
-        api.notify("swipe", v(...entity.position))
         entity.isSwiping = false
-        return
       }
 
-      const entities = api.getEntities()
-      const clickedEntity = findCollision(entity, entities)
-      if (clickedEntity) {
-        api.notify("entityTouch", clickedEntity.id)
+      if (entity.targetIds[index]) {
+        api.notify("entityTouchEnd", {
+          targetId: entity.targetIds[index],
+          position: v(...entity.positions[index]),
+        })
+        entity.targetIds[index] = undefined
       } else {
-        api.notify("sceneTouch", v(...entity.position))
+        api.notify("sceneTouchEnd", v(...entity.positions[index]))
       }
     },
   }
 }
 
-export function trackTouch(parent, api) {
-  const handleTouchStart = createHandler("touchStart", parent, api)
-  const handleTouchMove = createHandler("touchMove", parent, api)
-  const handleTouchEnd = createHandler("touchEnd", parent, api)
+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(overrides = {}) {
+export function createTouch() {
   return {
     type: "touch",
     layer: 999, // A high layer value to ensure it's always rendered on top
-    position: zero(),
-    ...overrides,
+    positions: [],
+    collisions: {
+      bounds: { shape: "point" },
+      touch: { shape: "circle", radius: 44 },
+    },
+    targetIds: [],
   }
 }
 
-function createHandler(type, parent, api) {
+function createHandler(type, parent, api, toGamePosition) {
   return (event) => {
     event.preventDefault()
     event.stopPropagation()
@@ -84,44 +108,14 @@ function createHandler(type, parent, api) {
       return
     }
 
-    if (type === "touchEnd") {
-      api.notify(type)
-      return
-    }
-
-    const payload = calculatePosition(event, parent, api)
-    api.notify(type, payload)
-  }
-}
-
-function calculatePosition(event, parent, api) {
-  const [touch] = event.touches
-  const { clientX, clientY } = touch
-  const {
-    left,
-    bottom,
-    width: canvasWidth,
-    height: canvasHeight,
-  } = parent.getBoundingClientRect()
+    // touchend doesn't have touches anymore, but it has changedTouches
+    const touches = event.touches.length ? event.touches : event.changedTouches
 
-  const x = clientX - left
-  const y = bottom - clientY
+    Array.from(touches).forEach((touch, index) => {
+      const { clientX, clientY } = touch
 
-  const game = api.getEntity("game")
-  const [gameWidth, gameHeight] = game.size
-
-  const scaleX = canvasWidth / gameWidth
-  const scaleY = canvasHeight / gameHeight
-  const scale = Math.min(scaleX, scaleY)
-
-  const scaledGameWidth = gameWidth * scale
-  const scaledGameHeight = gameHeight * scale
-
-  const offsetX = (canvasWidth - scaledGameWidth) / HALF
-  const offsetY = (canvasHeight - scaledGameHeight) / HALF
-
-  const gameX = (x - offsetX) / scale
-  const gameY = (y - offsetY) / scale
-
-  return v(gameX, NO_Y, gameY)
+      const position = toGamePosition(clientX, clientY)
+      api.notify(type, { index, position })
+    })
+  }
 }