feat: add camera top when device is mobile

Author: Murillo

src/Game.ts

@@ -6,7 +6,8 @@ import { SpaceShuttleComponent } from './components/models/SpaceShuttleComponent
 import { StarsComponent } from './components/models/StarsComponent';
 import { TextComponent } from './components/models/TextComponent';
 import { ShootComponent } from './components/models/ShootComponent';
-import { CameraComponent } from './components/models/CameraComponent';
+import { CameraComponent, CameraMode } from './components/models/CameraComponent';
+import { Device } from './util/Device';
 
 export class Game {
 
@@ -46,7 +47,8 @@ export class Game {
         this.renderer.setClearColor("#191644");
         this.renderer.shadowMap.enabled = true;
         this.container.appendChild(this.renderer.domElement);
-        await this.cameraComponent.load(this.scene);
+        const initialCameraMode: CameraMode = Device.isMobileDevice() ? CameraMode.Top : CameraMode.Default;
+        await this.cameraComponent.load(this.scene, initialCameraMode);
 
         /* ********* Models ***********  */
         await this.spaceCraft.load(this.scene);

src/components/models/CameraComponent.ts

@@ -1,8 +1,10 @@
 import * as THREE from 'three';
 import { GameComponentBase } from '../GameComponentBase';
 
-type CameraMode = 'default' | 'top';
-
+export enum CameraMode {
+    Default = 'default',
+    Top = 'top'
+}
 enum CameraScene {
     Default = '1',
     Top = '2',
@@ -13,7 +15,7 @@ export class CameraComponent extends GameComponentBase {
     private readonly defaultPosition: THREE.Vector3 = new THREE.Vector3(5, 2, 30);
     private readonly topViewOffset: THREE.Vector3 = new THREE.Vector3(0, 35, 20);
     private readonly topViewLookOffset: THREE.Vector3 = new THREE.Vector3(0, 0, -15);
-    private mode: CameraMode = 'default';
+    private mode: CameraMode = CameraMode.Default;
     private targetProvider: () => THREE.Vector3;
 
     constructor(targetProvider: () => THREE.Vector3) {
@@ -26,8 +28,13 @@ export class CameraComponent extends GameComponentBase {
         return this.camera;
     }
 
-    public async load(scene: THREE.Scene): Promise<void> {
-        this.camera.position.copy(this.defaultPosition);
+    public async load(scene: THREE.Scene, initialMode: CameraMode = CameraMode.Default): Promise<void> {
+        this.mode = initialMode;
+        if (this.mode === CameraMode.Top) {
+            this.updateCameraTracking(true);
+        } else {
+            this.camera.position.copy(this.defaultPosition);
+        }
         scene.add(this.camera);
         window.addEventListener('keydown', this.handleCameraChange);
     }
@@ -38,22 +45,22 @@ export class CameraComponent extends GameComponentBase {
 
     private handleCameraChange = (event: KeyboardEvent): void => {
         if (event.key === CameraScene.Top) {
-            this.mode = 'top';
+            this.mode = CameraMode.Top;
             this.updateCameraTracking(true);
         }
         if (event.key === CameraScene.Default) {
-            this.mode = 'default';
+            this.mode = CameraMode.Default;
             this.camera.position.copy(this.defaultPosition);
             this.camera.lookAt(new THREE.Vector3(0, 0, 0));
         }
     }
 
     private updateCameraTracking(force: boolean = false): void {
-        if (this.mode !== 'top' && !force) {
+        if (this.mode !== CameraMode.Top && !force) {
             return;
         }
 
-        if (this.mode === 'top') {
+        if (this.mode === CameraMode.Top) {
             const targetPosition = this.targetProvider();
             this.camera.position.set(
                 targetPosition.x + this.topViewOffset.x,

src/util/Device.ts

@@ -0,0 +1,6 @@
+export class Device {
+    public static isMobileDevice(): boolean {
+        const mobileRegex = /Mobi|Android|iPhone|iPad|iPod|Tablet/i;
+        return mobileRegex.test(navigator.userAgent) || window.innerWidth <= 900;
+    }
+}