@inglorious/engine 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/engine",
-  "version": "2.0.0",
+  "version": "2.1.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",

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

@@ -1,8 +1,10 @@
 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 {
@@ -33,10 +35,10 @@ 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) {
+  const handleMouseMove = createHandler("mouseMove", parent, api)
+  const handleClick = createHandler("mouseClick", parent, api)
+  const handleWheel = createHandler("mouseWheel", parent, api)
 
   return {
     onMouseMove: handleMouseMove,
@@ -56,30 +58,50 @@ export function createMouse(overrides = {}) {
 
 function createHandler(type, parent, api) {
   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)
+    const payload = calculatePosition(event, parent, api)
     api.notify(type, payload)
   }
 }
 
-function calculatePosition(event, parent) {
+function calculatePosition(event, parent, api) {
   const { clientX, clientY } = event
-  const { left, bottom } = parent.getBoundingClientRect()
+  const {
+    left,
+    bottom,
+    width: canvasWidth,
+    height: canvasHeight,
+  } = parent.getBoundingClientRect()
 
   const x = clientX - left
-  const z = bottom - clientY
+  const y = bottom - clientY
 
-  return [x, NO_Y, z]
+  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

@@ -0,0 +1,127 @@
+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 { 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) {
+      entity.isSwiping = false
+      entity.position = position
+    },
+
+    touchMove(entity, position, api) {
+      const game = api.getEntity("game")
+
+      const delta = subtract(position, entity.position)
+
+      if (magnitude(delta) > MOVEMENT_THRESHOLD) {
+        entity.isSwiping = true
+      }
+
+      entity.position = position
+
+      clampToBounds(entity, game.size)
+    },
+
+    touchEnd(entity, _, 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)
+      } else {
+        api.notify("sceneTouch", v(...entity.position))
+      }
+    },
+  }
+}
+
+export function trackTouch(parent, api) {
+  const handleTouchStart = createHandler("touchStart", parent, api)
+  const handleTouchMove = createHandler("touchMove", parent, api)
+  const handleTouchEnd = createHandler("touchEnd", parent, api)
+
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+  }
+}
+
+export function createTouch(overrides = {}) {
+  return {
+    type: "touch",
+    layer: 999, // A high layer value to ensure it's always rendered on top
+    position: zero(),
+    ...overrides,
+  }
+}
+
+function createHandler(type, parent, api) {
+  return (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (parent == null) {
+      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()
+
+  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/core/core-events.js

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