feat: improve internals + debug mode reactivity

docs/api/2d/classes/FComponent2d.md

@@ -443,7 +443,7 @@ It is a dictionary where the key is the class name or object id and the value is
 
 #### Inherited from
 
-`FComponent.CALLBACKS_ONCOLLISION`
+`FComponent.__CALLBACKS_ON_COLLISION__`
 
 #### Defined in
 
@@ -462,7 +462,7 @@ It is generated automatically.
 
 #### Inherited from
 
-`FComponent.ID`
+`FComponent.__ID__`
 
 #### Defined in
 

docs/api/2d/classes/FScene2d.md

@@ -323,9 +323,9 @@ packages/core/dist/index.d.ts:123
 
 ***
 
-### rapierToComponent
+### __RAPIER_TO_COMPONENT__
 
-> **rapierToComponent**: `Map`\<`number`, [`FComponent2d`](FComponent2d.md)\>
+> **__RAPIER_TO_COMPONENT__**: `Map`\<`number`, [`FComponent2d`](FComponent2d.md)\>
 
 #### Defined in
 

docs/api/3d/classes/FCamera3d.md

@@ -2176,7 +2176,7 @@ It is a dictionary where the key is the class name or object id and the value is
 
 #### Implementation of
 
-`FCamera.CALLBACKS_ONCOLLISION`
+`FCamera.__CALLBACKS_ON_COLLISION__`
 
 #### Defined in
 
@@ -2195,7 +2195,7 @@ It is generated automatically.
 
 #### Implementation of
 
-`FCamera.ID`
+`FCamera.__ID__`
 
 #### Defined in
 

docs/api/3d/classes/FComponent3d.md

@@ -496,7 +496,7 @@ It is a dictionary where the key is the class name or object id and the value is
 
 #### Inherited from
 
-`FComponent.CALLBACKS_ONCOLLISION`
+`FComponent.__CALLBACKS_ON_COLLISION__`
 
 #### Defined in
 
@@ -515,7 +515,7 @@ It is generated automatically.
 
 #### Inherited from
 
-`FComponent.ID`
+`FComponent.__ID__`
 
 #### Defined in
 

docs/api/3d/classes/FScene3d.md

@@ -287,9 +287,9 @@ packages/core/dist/index.d.ts:123
 
 ***
 
-### rapierToComponent
+### __RAPIER_TO_COMPONENT__
 
-> **rapierToComponent**: `Map`\<`number`, [`FComponent3d`](FComponent3d.md)\>
+> **__RAPIER_TO_COMPONENT__**: `Map`\<`number`, [`FComponent3d`](FComponent3d.md)\>
 
 #### Defined in
 

packages/2d/src/FComponent2d.ts

@@ -109,6 +109,12 @@ export abstract class FComponent2d extends FComponent {
       this.container.position.set(this.position.x * 100, -this.position.y * 100)
       this.container.rotation = this.rotation
     }
+    // Update position and rotation properties of the component
+    this.position = {
+      x: this.container.position.x / 100,
+      y: -this.container.position.y / 100,
+    }
+    this.rotation = this.container.rotation
   }
 
   /**

packages/2d/src/FScene2d.ts

@@ -25,24 +25,24 @@ import { FSprite } from './sprite/FSprite'
  * ```
  */
 export class FScene2d extends FScene {
-  components: FComponent2d[]
+  // Components can be declared as it will be initialized by the parent class
+  declare components: FComponent2d[]
   // Pixi.js
   app: PIXI.Application
   viewport?: Viewport
   // Rapier
   gravity: { x: number, y: number, z: number } = { x: 0, y: -9.81, z: 0 }
   declare world?: World
   declare eventQueue: RAPIER.EventQueue
-  rapierToComponent: Map<number, FComponent2d> = new Map()
+  __RAPIER_TO_COMPONENT__: Map<number, FComponent2d> = new Map()
   // onReadyCallbacks
   public onReadyCallbacks: (() => void)[] = []
   // Debug
   DEBUG_LINES: PIXI.Graphics[] = []
-  DEBUG_MODE: boolean = false
+  __DEBUG_MODE__: boolean = false
 
   constructor(options: { debug?: boolean } = { debug: false }) {
     super()
-    this.components = []
 
     // Verify window and document are available
     if (typeof window === 'undefined' || typeof document === 'undefined')
@@ -52,7 +52,7 @@ export class FScene2d extends FScene {
     this.app = new PIXI.Application()
 
     // Store the debug mode
-    this.DEBUG_MODE = options.debug || false
+    this.__DEBUG_MODE__ = options.debug || false
   }
 
   /**
@@ -104,7 +104,7 @@ export class FScene2d extends FScene {
     this.viewport.setZoom(0.8, true)
 
     // Add help grid
-    if (this.DEBUG_MODE) {
+    if (this.__DEBUG_MODE__) {
       const helpGrid = new PIXI.Graphics()
       // Draw the grid
       for (let i = -1000; i <= 1000; i += 100) {
@@ -132,7 +132,7 @@ export class FScene2d extends FScene {
       })
 
       // Debug
-      if (this.DEBUG_MODE)
+      if (this.__DEBUG_MODE__)
         this.debug()
     })
 
@@ -175,8 +175,8 @@ export class FScene2d extends FScene {
    */
   handleCollision(handle1: RAPIER.ColliderHandle, handle2: RAPIER.ColliderHandle, start: boolean) {
     // Get the components from the handles
-    const collider1 = this.rapierToComponent.get(handle1)
-    const collider2 = this.rapierToComponent.get(handle2)
+    const collider1 = this.__RAPIER_TO_COMPONENT__.get(handle1)
+    const collider2 = this.__RAPIER_TO_COMPONENT__.get(handle2)
     // If both colliders are undefined, return
     if (collider1 === undefined && collider2 === undefined)
       return
@@ -200,7 +200,7 @@ export class FScene2d extends FScene {
   }
 
   addComponent(component: FComponent2d) {
-    this.components.push(component)
+    super.addComponent(component)
 
     // Detect if the FComponent2d is a FSprite instance
     if (component instanceof FSprite) {
@@ -216,9 +216,9 @@ export class FScene2d extends FScene {
           this.viewport?.addChild(component.container)
         }
 
-        // If a collider is defined, add it's handle to the rapierToComponent map
+        // If a collider is defined, add it's handle to the __RAPIER_TO_COMPONENT__ map
         if (component.collider?.handle !== undefined)
-          this.rapierToComponent.set(component.collider?.handle, component)
+          this.__RAPIER_TO_COMPONENT__.set(component.collider?.handle, component)
       })
     }
     else {
@@ -234,9 +234,9 @@ export class FScene2d extends FScene {
       }
     }
 
-    // If a collider is defined, add it's handle to the rapierToComponent map
+    // If a collider is defined, add it's handle to the __RAPIER_TO_COMPONENT__ map
     if (component.collider?.handle !== undefined)
-      this.rapierToComponent.set(component.collider?.handle, component)
+      this.__RAPIER_TO_COMPONENT__.set(component.collider?.handle, component)
   }
 
   onReady(callback: () => void) {

packages/2d/src/sprite/FSprite.ts

@@ -23,7 +23,7 @@ export class FSprite extends FComponent2d {
   /**
    * Callbacks for when the texture is loaded
    */
-  public CALLBACKS_ONLOADED: (() => void)[] = []
+  public __CALLBACKS_ON_LOADED__: (() => void)[] = []
 
   constructor(scene: FScene2d, texture: string, options?: {
     position?: PIXI.PointData
@@ -86,17 +86,17 @@ export class FSprite extends FComponent2d {
 
   /**
    * @description Add a callback to be called when the texture is loaded.
-   * @param fn The callback function.
+   * @param callback The callback function.
    */
-  onLoaded(fn: () => void) {
-    this.CALLBACKS_ONLOADED.push(fn)
+  onLoaded(callback: () => void) {
+    this.__CALLBACKS_ON_LOADED__.push(callback)
   }
 
   /**
    * @description Emit the onLoaded callbacks.
    */
   emitOnLoaded() {
-    this.CALLBACKS_ONLOADED.forEach((callback) => {
+    this.__CALLBACKS_ON_LOADED__.forEach((callback) => {
       callback()
     })
   }

packages/3d/src/FScene3d.ts

@@ -39,7 +39,8 @@ import { FFixedCamera } from './cameras/FFixedCamera'
  * ```
  */
 export class FScene3d extends FScene {
-  components: FComponent3d[]
+  // Components can be declared as it will be initialized by the parent class
+  declare components: FComponent3d[]
   // Three.js
   declare scene: THREE.Scene
   declare renderer: THREE.WebGLRenderer
@@ -50,15 +51,13 @@ export class FScene3d extends FScene {
   gravity: { x: number, y: number, z: number } = { x: 0, y: -9.81, z: 0 }
   declare world: RAPIER.World
   declare eventQueue: RAPIER.EventQueue
-  rapierToComponent: Map<number, FComponent3d> = new Map()
+  __RAPIER_TO_COMPONENT__: Map<number, FComponent3d> = new Map()
   // Debug
-  DEBUG_MODE: boolean
+  __DEBUG_MODE__: boolean
 
   constructor(options: { debug?: boolean } = { debug: false }) {
     super()
-    // Initialize components array
-    this.components = []
-    this.DEBUG_MODE = options.debug || false
+    this.__DEBUG_MODE__ = options.debug || false
 
     // Verify window and document are available
     if (typeof window === 'undefined' || typeof document === 'undefined')
@@ -80,7 +79,7 @@ export class FScene3d extends FScene {
     this.scene.add(light)
 
     // Debug mode
-    if (this.DEBUG_MODE) {
+    if (this.__DEBUG_MODE__) {
       // Grid helper
       const gridHelper = new THREE.GridHelper(10, 10)
       this.scene.add(gridHelper)
@@ -106,7 +105,7 @@ export class FScene3d extends FScene {
       this.components.forEach(component => component.onFrame(delta))
 
       // Debug mode
-      if (this.DEBUG_MODE) {
+      if (this.__DEBUG_MODE__) {
         // Update controls
         this.controls?.update()
 
@@ -134,7 +133,7 @@ export class FScene3d extends FScene {
     // onFrame loop
     this.onFrame((delta) => {
       // Debug mode
-      if (this.DEBUG_MODE) {
+      if (this.__DEBUG_MODE__) {
         // Remove previous debug lines
         const previousLines = this.scene.getObjectByName('DEBUG_LINES')
         if (previousLines)
@@ -169,8 +168,8 @@ export class FScene3d extends FScene {
    */
   handleCollision(handle1: RAPIER.ColliderHandle, handle2: RAPIER.ColliderHandle, start: boolean) {
     // Get the components from the handles
-    const collider1 = this.rapierToComponent.get(handle1)
-    const collider2 = this.rapierToComponent.get(handle2)
+    const collider1 = this.__RAPIER_TO_COMPONENT__.get(handle1)
+    const collider2 = this.__RAPIER_TO_COMPONENT__.get(handle2)
     // If both colliders are undefined, return
     if (collider1 === undefined && collider2 === undefined)
       return
@@ -194,7 +193,7 @@ export class FScene3d extends FScene {
   }
 
   addComponent(component: FComponent3d) {
-    this.components.push(component)
+    super.addComponent(component)
 
     // Detect if the FComponent3d is a FGLTF instance
     if (component instanceof FGLTF) {
@@ -209,9 +208,9 @@ export class FScene3d extends FScene {
         this.scene.add(component.mesh)
     }
 
-    // If a collider is defined, add it's handle to the rapierToComponent map
+    // If a collider is defined, add it's handle to the __RAPIER_TO_COMPONENT__ map
     if (component.collider?.handle !== undefined)
-      this.rapierToComponent.set(component.collider?.handle, component)
+      this.__RAPIER_TO_COMPONENT__.set(component.collider?.handle, component)
   }
 
   private addDebugPanel() {

packages/3d/src/cameras/FCamera3d.ts

@@ -6,8 +6,8 @@ import { FCamera } from '@fibbojs/core'
  * @category Camera
  */
 export abstract class FCamera3d extends THREE.PerspectiveCamera implements FCamera {
-  declare public ID: number
-  public CALLBACKS_ONCOLLISION: { [key: string]: (() => void)[] } = {}
+  declare public __ID__: number
+  public __CALLBACKS_ON_COLLISION__: { [key: string]: (() => void)[] } = {}
 
   constructor() {
     super(75, window.innerWidth / window.innerHeight, 0.1, 1000)

packages/3d/src/model/FGLTF.ts

@@ -35,7 +35,7 @@ export class FGLTF extends FComponent3d {
   /**
    * Callbacks for when the model is loaded
    */
-  public CALLBACKS_ONLOADED: (() => void)[] = []
+  public __CALLBACKS_ON_LOADED__: (() => void)[] = []
 
   /**
    * @param scene The 3D scene where the model will be added.
@@ -113,17 +113,17 @@ export class FGLTF extends FComponent3d {
 
   /**
    * @description Add a callback to be called when the model is loaded.
-   * @param fn The callback function.
+   * @param callback The callback function.
    */
-  onLoaded(fn: () => void) {
-    this.CALLBACKS_ONLOADED.push(fn)
+  onLoaded(callback: () => void) {
+    this.__CALLBACKS_ON_LOADED__.push(callback)
   }
 
   /**
    * @description Emit the onLoaded callbacks.
    */
   emitOnLoaded() {
-    this.CALLBACKS_ONLOADED.forEach((callback) => {
+    this.__CALLBACKS_ON_LOADED__.forEach((callback) => {
       callback()
     })
   }