feat: create @fibbojs/event package and FKeyboard helper class

apps/playground-2d/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@fibbojs/2d": "^0.0.1",
     "@fibbojs/core": "^0.0.1",
+    "@fibbojs/event": "^0.0.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-top-level-await": "^1.4.1",

apps/playground-2d/src/main.ts

@@ -1,5 +1,6 @@
 import './style.css'
 import { F2dShapes, FCircle, FScene2d, FSprite, FSquare } from '@fibbojs/2d'
+import { FKeyboard } from '@fibbojs/event'
 import MySquare from './classes/MySquare'
 
 (async () => {
@@ -71,25 +72,19 @@ import MySquare from './classes/MySquare'
   scene.addComponent(sprite)
 
   // Detect inputs to move the cube
-  document.addEventListener('keydown', (event) => {
-    const impulse = { x: 0, y: 0, z: 0 }
-    switch (event.key) {
-      case 'ArrowUp':
-        impulse.y = 1
-        break
-      case 'ArrowDown':
-        impulse.y = -1
-        break
-      case 'ArrowLeft':
-        impulse.x = -1
-        break
-      case 'ArrowRight':
-        impulse.x = 1
-        break
-      case ' ':
-        sprite.rigidBody?.applyImpulse({ x: 0, y: 2 }, true)
-        break
-    }
-    sprite.rigidBody?.applyImpulse(impulse, true)
+  FKeyboard.on('ArrowUp', () => {
+    sprite.rigidBody?.applyImpulse({ x: 0, y: 1 }, true)
+  })
+  FKeyboard.on('ArrowDown', () => {
+    sprite.rigidBody?.applyImpulse({ x: 0, y: -1 }, true)
+  })
+  FKeyboard.on('ArrowLeft', () => {
+    sprite.rigidBody?.applyImpulse({ x: -1, y: 0 }, true)
+  })
+  FKeyboard.on('ArrowRight', () => {
+    sprite.rigidBody?.applyImpulse({ x: 1, y: 0 }, true)
+  })
+  FKeyboard.on(' ', () => {
+    sprite.rigidBody?.applyImpulse({ x: 0, y: 2 }, true)
   })
 })()

apps/playground-3d/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@fibbojs/3d": "^0.0.1",
     "@fibbojs/core": "^0.0.1",
+    "@fibbojs/event": "^0.0.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-top-level-await": "^1.4.1",

apps/playground-3d/src/main.ts

@@ -1,4 +1,5 @@
 import { F3dShapes, FCube, FGameCamera, FScene3d, FSphere } from '@fibbojs/3d'
+import { FKeyboard } from '@fibbojs/event'
 import Duck from './classes/Duck'
 import GltfCube from './classes/GltfCube'
 import './style.css'
@@ -18,7 +19,7 @@ import './style.css'
   ground.setColor(0x1F1F1F)
   scene.addComponent(ground)
 
-  // Create a cube
+  // Create a cube that will be controlled by the player
   const cube = new FCube(scene, {
     position: { x: -5, y: 5, z: 5 },
   })
@@ -28,6 +29,9 @@ import './style.css'
   })
   scene.addComponent(cube)
 
+  /**
+   * Create other objects
+   */
   const sphere = new FSphere(scene, {
     position: { x: 2, y: 4, z: -2 },
   })
@@ -44,20 +48,6 @@ import './style.css'
   gltfCube2.setPosition(2, 5, 2)
   scene.addComponent(gltfCube2)
 
-  cube.onCollisionWith(GltfCube, () => {
-    console.log('Cube collided with a GltfCube !')
-  })
-  cube.onCollisionWith(sphere, () => {
-    console.log('Cube collided with the sphere!')
-  })
-
-  // After 3 seconds, add a third gltfCube
-  setTimeout(() => {
-    const gltfCube3 = new GltfCube(scene)
-    gltfCube3.setPosition(-2, 5, -2)
-    scene.addComponent(gltfCube3)
-  }, 3000)
-
   // Create 8 cubes dynamically in circle from 0 to 2PI
   for (let i = 0; i < 8; i++) {
     const angle = i * Math.PI / 4
@@ -71,31 +61,40 @@ import './style.css'
     scene.addComponent(cube)
   }
 
-  scene.camera = new FGameCamera(gltfCube, scene)
+  /**
+   * Add collision events
+   */
+  cube.onCollisionWith(GltfCube, () => {
+    console.log('Cube collided with a GltfCube !')
+  })
+  cube.onCollisionWith(sphere, () => {
+    console.log('Cube collided with the sphere!')
+  })
 
   // Detect inputs to move the cube
-  document.addEventListener('keydown', (event) => {
-    const impulse = { x: 0, y: 0, z: 0 }
-    switch (event.key) {
-      case 'ArrowUp':
-        impulse.z = -1
-        break
-      case 'ArrowDown':
-        impulse.z = 1
-        break
-      case 'ArrowLeft':
-        impulse.x = -1
-        break
-      case 'ArrowRight':
-        impulse.x = 1
-        break
-      case ' ':
-        cube.rigidBody?.applyImpulse({ x: 0, y: 5, z: 0 }, true)
-        break
-    }
-    cube.rigidBody?.applyImpulse(impulse, true)
+  FKeyboard.on('ArrowUp', () => {
+    cube.rigidBody?.applyImpulse({ x: 0, y: 0, z: -1 }, true)
+  })
+  FKeyboard.on('ArrowDown', () => {
+    cube.rigidBody?.applyImpulse({ x: 0, y: 0, z: 1 }, true)
+  })
+  FKeyboard.on('ArrowLeft', () => {
+    cube.rigidBody?.applyImpulse({ x: -1, y: 0, z: 0 }, true)
+  })
+  FKeyboard.on('ArrowRight', () => {
+    cube.rigidBody?.applyImpulse({ x: 1, y: 0, z: 0 }, true)
+  })
+  FKeyboard.on(' ', () => {
+    cube.rigidBody?.applyImpulse({ x: 0, y: 5, z: 0 }, true)
   })
 
   // Attach a camera to the cube
   scene.camera = new FGameCamera(cube, scene)
+
+  // After 3 seconds, add a third gltfCube
+  setTimeout(() => {
+    const gltfCube3 = new GltfCube(scene)
+    gltfCube3.setPosition(-2, 5, -2)
+    scene.addComponent(gltfCube3)
+  }, 3000)
 })()

packages/event/build.config.ts

@@ -0,0 +1,12 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/index',
+  ],
+  declaration: true,
+  clean: true,
+  rollup: {
+    emitCJS: true,
+  },
+})

packages/event/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@fibbojs/event",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Event package for Fibbo",
+  "author": "Augustin Mercier <mercier.augustin@outlook.fr>",
+  "license": "Apache-2.0",
+  "homepage": "https://fibbojs.github.io/fibbo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fibbojs/fibbo.git"
+  },
+  "bugs": "https://github.com/fibbojs/fibbo/issues",
+  "keywords": [],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

packages/event/src/FKeyboard.ts

@@ -0,0 +1,45 @@
+/**
+ * @description A helper class to manage keyboard events.
+ */
+export class FKeyboard {
+  constructor() {}
+
+  /**
+   * @description Add a listener a given key event
+   * @param key The key to listen to
+   * @param callback The callback to call when the key is pressed
+   * @returns The callback function
+   * @example Basic usage
+   * ```ts
+   * const keyboard = new FKeyboard()
+   * keyboard.on('ArrowUp', () => {
+   *  console.log('ArrowUp key pressed!')
+   * })
+   * ```
+   * @example Removing a listener
+   * ```ts
+   * const keyboard = new FKeyboard()
+   * // Get the remove listener function from the on method
+   * const removeListener = keyboard.on('ArrowUp', () => {
+   *  console.log('ArrowUp key pressed!')
+   * })
+   * // Remove the listener
+   * removeListener()
+   * ```
+   */
+  static on(key: string, callback: () => void): () => void {
+    // Create a listener for the keydown event
+    const listener = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        callback()
+      }
+    }
+    // Attach the listener to the document
+    document.addEventListener('keydown', listener)
+
+    // Return a function to remove the listener if needed
+    return () => {
+      document.removeEventListener('keydown', listener)
+    }
+  }
+}

packages/event/src/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Export Event classes
+ */
+export { FKeyboard } from './FKeyboard'

packages/event/test/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('should', () => {
+  it('exported', () => {
+    expect(1).toEqual(1)
+  })
+})

packages/event/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}