refactor: restructure app config logic

src/experiences/blueprints/Scene.blueprint.ts

@@ -7,6 +7,7 @@ import HomeExperience from "@/experiences/pages/Home";
 
 // INTERFACES
 import { type ExperienceBase } from "@interfaces/experienceBase";
+import { LOADED } from "../common/Event.model";
 
 // TODO: Link with the names of assets in the `app.loader` assets names
 export interface ModelChildrenTextures {
@@ -42,7 +43,7 @@ export abstract class SceneBlueprint
 		this.cameraPath = _.cameraPath;
 		this._modelChildrenTextures = _.modelChildrenTextures;
 
-		this._experience.loader?.on("load", () => {
+		this._experience.loader?.on(LOADED, () => {
 			const _MODEL = this._experience.app.resources.items[_.modelName] as
 				| GLTF
 				| undefined;

src/experiences/common/Event.model.ts

@@ -0,0 +1,6 @@
+export const CONSTRUCTED = Symbol("0");
+export const DESTRUCTED = Symbol("1");
+export const UPDATED = Symbol("2");
+export const STARTED = Symbol("3");
+export const PROGRESSED = Symbol("4");
+export const LOADED = Symbol("5");

src/experiences/config/Common.config.ts

@@ -0,0 +1,7 @@
+export abstract class CommonConfig {
+	static readonly ASSET_DIR = "/";
+	static readonly GSAP_ANIMATION_DURATION = 3;
+	static readonly GSAP_ANIMATION_EASE =
+		"M0,0 C0.001,0.001 0.002,0.003 0.003,0.004 0.142,0.482 0.284,0.75 0.338,0.836 0.388,0.924 0.504,1 1,1 ";
+	static readonly HOME_DOM_REF = "home-three-app";
+}

src/experiences/config/Config.ts

@@ -0,0 +1,3 @@
+import { CommonConfig } from "./Common.config";
+
+export class Config extends CommonConfig {}

src/experiences/errors/Error.factory.ts

@@ -0,0 +1,9 @@
+import { UnknownError } from "./Unknown.error";
+
+export class ErrorFactory {
+	constructor(_: any) {
+		if (_ instanceof Error) throw new UnknownError(_);
+
+		throw new Error("🚧 Something went wrong", _);
+	}
+}

src/experiences/errors/Unknown.error.ts

@@ -0,0 +1,7 @@
+export class UnknownError extends Error {
+	constructor(_: Error) {
+		super();
+
+		console.log("🚧 Unknown error caught ==>", _.name, _.cause, _.message);
+	}
+}

src/experiences/pages/Home/Camera.ts

@@ -5,18 +5,25 @@ import GSAP from "gsap";
 import HomeExperience from ".";
 import Debug from "./Debug";
 
-// INTERFACES
-import { type ExperienceBase } from "@/interfaces/experienceBase";
-
-export class Camera implements ExperienceBase {
-	private readonly _experience = new HomeExperience();
-	private readonly _appCamera = this._experience.app.camera;
-	private readonly _appDebug = this._experience.app.debug;
+// BLUEPRINTS
+import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
+import {
+	CONSTRUCTED,
+	DESTRUCTED,
+	UPDATED,
+} from "@/experiences/common/Event.model";
+
+export class Camera extends ExperienceBasedBlueprint {
+	protected readonly _experience = new HomeExperience();
+	protected readonly _appCamera = this._experience.app.camera;
+	protected readonly _appDebug = this._experience.app.debug;
+
+	public readonly initialCameraFov = 35;
 	public lookAtPosition = new Vector3();
 
-	initialCameraFov = 35;
-
-	constructor() {}
+	constructor() {
+		super();
+	}
 
 	construct() {
 		if (!Debug.enable && this._appDebug?.cameraHelper) {
@@ -38,11 +45,17 @@ export class Camera implements ExperienceBase {
 					new Vector3();
 			}
 		});
+
+		this.emit(CONSTRUCTED);
 	}
 
-	destruct() {}
+	destruct() {
+		this.emit(DESTRUCTED);
+	}
 
-	update() {}
+	update() {
+		this.emit(UPDATED);
+	}
 
 	cameraZoomIn() {
 		if (this._experience.app?.camera.instance instanceof PerspectiveCamera)

src/experiences/pages/Home/Debug.ts

@@ -14,10 +14,11 @@ import GUI from "three/examples/jsm/libs/lil-gui.module.min.js";
 // EXPERIENCE
 import Experience from ".";
 
-// INTERFACES
-import { type ExperienceBase } from "@/interfaces/experienceBase";
+// BLUEPRINTS
+import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
+import { DESTRUCTED } from "@/experiences/common/Event.model";
 
-export default class Debug implements ExperienceBase {
+export default class Debug extends ExperienceBasedBlueprint {
 	protected readonly _experience = new Experience();
 	protected readonly _appDebug = this._experience.app.debug;
 	protected readonly _appCamera = this._experience.app.camera;
@@ -38,8 +39,6 @@ export default class Debug implements ExperienceBase {
 
 	protected _cameraCurvePathLine?: Line;
 
-	constructor() {}
-
 	construct() {
 		if (!Debug.enable) {
 			this._appDebug?.ui?.destroy();
@@ -158,6 +157,7 @@ export default class Debug implements ExperienceBase {
 		// 		"construct_experience"
 		// 	);
 		// }
+		this.emit(DESTRUCTED);
 	}
 
 	update() {

src/experiences/pages/Home/Loader.ts

@@ -1,14 +1,22 @@
 import { MeshBasicMaterial, Texture, SRGBColorSpace } from "three";
-import EventEmitter from "events";
 
-// ---
-import Experience from ".";
+// EXPERIENCE
+import HomeExperience from ".";
 
-// INTERFACES
-import { type ExperienceBase } from "@/interfaces/experienceBase";
+// MODELS
+import {
+	CONSTRUCTED,
+	DESTRUCTED,
+	LOADED,
+	PROGRESSED,
+	STARTED,
+} from "@/experiences/common/Event.model";
 
-export default class Loader extends EventEmitter implements ExperienceBase {
-	protected readonly _experience = new Experience();
+// BLUEPRINTS
+import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
+
+export default class Loader extends ExperienceBasedBlueprint {
+	protected readonly _experience = new HomeExperience();
 	protected readonly _appResources = this._experience.app.resources;
 
 	texturesMeshBasicMaterials: {
@@ -52,7 +60,7 @@ export default class Loader extends EventEmitter implements ExperienceBase {
 
 	construct() {
 		~(this._appResources.loadingManager.onStart = () => {
-			this.emit("start", (this.progress = 0));
+			this.emit(STARTED, (this.progress = 0));
 		});
 
 		~(this._appResources.loadingManager.onProgress = (
@@ -61,7 +69,7 @@ export default class Loader extends EventEmitter implements ExperienceBase {
 			itemsToLoad
 		) => {
 			this.emit(
-				"progress",
+				PROGRESSED,
 				(this.progress = (itemsLoaded / itemsToLoad) * 100),
 				itemUrl
 			);
@@ -71,9 +79,10 @@ export default class Loader extends EventEmitter implements ExperienceBase {
 			this.correctTextures();
 			this._initMeshTextures();
 
-			this.emit("load", this.progress);
+			this.emit(LOADED, this.progress);
 		});
 
+		this.emit(CONSTRUCTED, this.progress);
 		this._appResources.startLoading();
 	}
 
@@ -87,6 +96,8 @@ export default class Loader extends EventEmitter implements ExperienceBase {
 			/onStart|onError|onProgress|onLoad/
 		);
 		this._appResources.setSources([]);
+
+		this.emit(DESTRUCTED);
 	}
 
 	/** Correct resources texture color and flip faces. */

src/experiences/pages/Home/Renderer.ts

@@ -15,6 +15,7 @@ import HomeExperience from ".";
 
 // INTERFACES
 import { type ExperienceBase } from "@/interfaces/experienceBase";
+import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
 
 export interface PortalAssets {
 	mesh: THREE.Mesh;
@@ -30,7 +31,7 @@ export interface PortalMeshCorners {
 }
 
 /** Renderer */
-export default class Renderer implements ExperienceBase {
+export default class Renderer extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();
 	protected readonly _appRenderer = this._experience.app.renderer;
 	protected readonly _appRendererInstance =
@@ -50,8 +51,6 @@ export default class Renderer implements ExperienceBase {
 	protected _portalTopLeftCorner = new Vector3();
 	protected _portalReflectedPosition = new Vector3();
 
-	constructor() {}
-
 	public construct() {
 		// Configure renderer behaviors
 		~(() => {

src/experiences/pages/Home/UI.ts

@@ -4,17 +4,17 @@ import { EventEmitter } from "events";
 // EXPERIENCE
 import HomeExperience from ".";
 
-// INTERFACES
-import { type ExperienceBase } from "@/interfaces/experienceBase";
+// CONFIG
+import { Config } from "@/experiences/config/Config";
 
-// CONSTANTS
-import { GSAP_DEFAULT_INTRO_PROPS } from "@/constants/ANIMATION";
+// MODELS
+import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
 
 /**
  * Class in charge of all DOM HTML interactions (HTML user interface)
  */
-export default class UI extends EventEmitter implements ExperienceBase {
-	private readonly experience = new HomeExperience();
+export default class UI extends ExperienceBasedBlueprint {
+	protected readonly _experience = new HomeExperience();
 
 	loadedResourcesProgressLineElements?: HTMLElement | null;
 	loadedResourcesProgressElements?: HTMLElement | null;
@@ -47,15 +47,15 @@ export default class UI extends EventEmitter implements ExperienceBase {
 
 	construct() {
 		// EVENTS
-		this.experience.loader?.on("start", () => {
+		this._experience.loader?.on("start", () => {
 			this.lastLoadedResourceElement?.classList.remove("animate-pulse");
 			if (this.loadedResourcesProgressLineElements)
 				this.loadedResourcesProgressLineElements.style.width = "0%";
 			if (this.loadedResourcesProgressElements)
 				this.loadedResourcesProgressElements.innerHTML = "0%";
 		});
 
-		this.experience.loader?.on("progress", (progress: number, url: string) => {
+		this._experience.loader?.on("progress", (progress: number, url: string) => {
 			if (this.loadedResourcesProgressLineElements)
 				this.loadedResourcesProgressLineElements.style.width = progress + "%";
 			if (this.loadedResourcesProgressElements)
@@ -65,7 +65,7 @@ export default class UI extends EventEmitter implements ExperienceBase {
 				this.lastLoadedResourceElement.innerHTML = url.replace(/^.*\//, "");
 		});
 
-		this.experience.loader?.on("load", () => {
+		this._experience.loader?.on("load", () => {
 			if (this.loadedResourcesProgressElements)
 				this.loadedResourcesProgressElements.innerHTML = "100%";
 			if (this.loadedResourcesProgressLineElements)
@@ -81,7 +81,7 @@ export default class UI extends EventEmitter implements ExperienceBase {
 			}, 1000);
 		});
 
-		this.experience.app.resources.startLoading();
+		this._experience.app.resources.startLoading();
 	}
 
 	destruct() {
@@ -93,7 +93,8 @@ export default class UI extends EventEmitter implements ExperienceBase {
 	intro() {
 		const _TIMELINE = GSAP.timeline();
 		_TIMELINE.to("#landing-view-wrapper", {
-			...GSAP_DEFAULT_INTRO_PROPS,
+			duration: Config.GSAP_ANIMATION_DURATION,
+			ease: Config.GSAP_ANIMATION_EASE,
 			opacity: 0,
 			delay: 2,
 			onComplete: () => {

src/experiences/pages/Home/World/SceneBackground.ts

@@ -4,8 +4,8 @@ import GSAP from "gsap";
 // EXPERIENCES
 import { SceneBlueprint } from "@/experiences/blueprints/Scene.blueprint";
 
-// CONSTANTS
-import { GSAP_DEFAULT_INTRO_PROPS } from "@/constants/ANIMATION";
+// CONFIGS
+import { Config } from "@/experiences/config/Config";
 
 export default class SceneBackground extends SceneBlueprint {
 	constructor() {
@@ -55,11 +55,12 @@ export default class SceneBackground extends SceneBlueprint {
 
 		GSAP.to(this._appCamera.instance.position, {
 			...this._experience.world?.controls?.getGsapDefaultProps(),
-			...GSAP_DEFAULT_INTRO_PROPS,
+			duration: Config.GSAP_ANIMATION_DURATION,
+			ease: Config.GSAP_ANIMATION_EASE,
 			x,
 			y,
 			z,
-			delay: GSAP_DEFAULT_INTRO_PROPS.duration * 0.8,
+			delay: Config.GSAP_ANIMATION_DURATION * 0.8,
 			onUpdate: () => {
 				WORLD_CONTROLS?.setCameraLookAt(WORLD_CONTROLS.initialLookAtPosition);
 			},

src/experiences/pages/Home/World/Scene_1.ts

@@ -1,7 +1,6 @@
 import {
 	CatmullRomCurve3,
 	Color,
-	Group,
 	Material,
 	Mesh,
 	MeshBasicMaterial,
@@ -14,16 +13,18 @@ import {
 } from "three";
 import GSAP from "gsap";
 
-// EXPERIENCES
+// BLUEPRINTS
 import { SceneBlueprint } from "@/experiences/blueprints/Scene.blueprint";
 
-// CONSTANTS
-import { GSAP_DEFAULT_INTRO_PROPS } from "@/constants/ANIMATION";
+// CONFIG
 
 // SHADERS
 import fragment from "./shaders/scene1/fragment.frag";
 import vertex from "./shaders/scene1/vertex.vert";
 
+// CONFIGS
+import { Config } from "@/experiences/config/Config";
+
 export default class Scene_1 extends SceneBlueprint {
 	protected _renderer = this._experience.renderer;
 
@@ -99,7 +100,8 @@ export default class Scene_1 extends SceneBlueprint {
 		if (!this.modelScene) return;
 
 		GSAP.to((this.modelScene.children[0] as Mesh).material as Material, {
-			...GSAP_DEFAULT_INTRO_PROPS,
+			duration: Config.GSAP_ANIMATION_DURATION,
+			ease: Config.GSAP_ANIMATION_EASE,
 			opacity: 0,
 			onUpdate: () => {},
 			onComplete: () => {
@@ -123,11 +125,12 @@ export default class Scene_1 extends SceneBlueprint {
 
 		GSAP.to(this._appCamera.instance.position, {
 			...this._experience.world?.controls?.getGsapDefaultProps(),
-			...GSAP_DEFAULT_INTRO_PROPS,
+			duration: Config.GSAP_ANIMATION_DURATION,
+			ease: Config.GSAP_ANIMATION_EASE,
 			x,
 			y,
 			z,
-			delay: GSAP_DEFAULT_INTRO_PROPS.duration * 0.8,
+			delay: Config.GSAP_ANIMATION_DURATION * 0.8,
 			onUpdate: () => {
 				WORLD_CONTROLS?.setCameraLookAt(WORLD_CONTROLS.initialLookAtPosition);
 			},