docs: more on aviator

Author: nartc

.prettierrc

@@ -3,5 +3,6 @@
 	"useTabs": true,
 	"tabWidth": 4,
 	"printWidth": 120,
-	"plugins": ["prettier-plugin-organize-imports"]
+	"plugins": ["prettier-plugin-organize-imports"],
+	"htmlWhitespaceSensitivity": "ignore"
 }

apps/sandbox/src/app/aviator/canvas.component.html

@@ -1,2 +1,14 @@
 <ngt-canvas [sceneGraph]="scene" [camera]="{ fov: 50, near: 0.1, far: 10000 }" [shadows]="true" />
-<span style="position: absolute; top: 0; right: 1rem; font-size: xxx-large; color: #ffd700">{{ game.coins }}</span>
+<span
+	style="
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		font-size: x-large;
+		font-family: 'Exo 2';
+		font-weight: bold;
+		color: #ffd700;
+	"
+>
+	Coins: {{ game.coins }}
+</span>

apps/sandbox/src/app/aviator/canvas.component.ts

@@ -13,6 +13,5 @@ import { WorldService } from './services/world.service';
 })
 export class AviatorCanvas {
 	scene = AviatorScene;
-
 	game = inject(GameService);
 }

apps/sandbox/src/app/aviator/components/airplane/propeller/propeller.component.html

@@ -19,7 +19,7 @@
 		[geometry]="bladeGeometryRef.nativeElement"
 	/>
 
-	<!-- blade 1 -->
+	<!-- blade 2 -->
 	<ngt-mesh
 		[position]="[8, 0, 0]"
 		[rotation]="[Math.PI / 2, 0, 0]"

apps/sandbox/src/app/aviator/components/sky/cloud/cloud.component.html

@@ -1,10 +1,11 @@
 <ngt-object3D (afterAttach)="afterAttach.emit($event.node)" (beforeRender)="onCloudBeforeRender($event)">
-	<ngt-box-geometry *args="[20, 20, 20]" [ref]="cloudGeometryRef" />
-	<ngt-mesh-phong-material [color]="Colors.white" />
+	<ngt-box-geometry *args="[20, 20, 20]" [ref]="cloudGeometryRef" attach="none" />
+	<ngt-mesh-phong-material #material [color]="Colors.white" attach="none" />
 
 	<ngt-mesh
 		*ngFor="let i; repeat: count"
 		[geometry]="cloudGeometryRef.nativeElement"
+		[material]="material"
 		[castShadow]="true"
 		[receiveShadow]="true"
 		(afterAttach)="onAfterMeshAttach($event, i)"

apps/sandbox/src/app/aviator/services/game.service.ts

@@ -1,10 +1,10 @@
-import { ChangeDetectorRef, Injectable, inject } from '@angular/core';
+import { Injectable, NgZone, inject } from '@angular/core';
 import { WorldService } from './world.service';
 
 @Injectable()
 export class GameService {
-	private cdr = inject(ChangeDetectorRef);
-	world = inject(WorldService);
+	private zone = inject(NgZone);
+	private world = inject(WorldService);
 
 	status = 'playing';
 
@@ -50,8 +50,9 @@ export class GameService {
 	};
 
 	addCoin() {
-		this.coins += 1;
-		this.statistics.coinsCollected += 1;
-		this.cdr.detectChanges();
+		this.zone.run(() => {
+			this.coins += 1;
+			this.statistics.coinsCollected += 1;
+		});
 	}
 }

apps/sandbox/src/app/aviator/utils/collectibles.ts

@@ -47,22 +47,11 @@ export class Coin extends THREE.Mesh implements Collectible {
 			if (collide(this.refs.airplane, this, this.world.coinDistanceTolerance)) {
 				spawnParticles(this.position.clone(), 5, COLOR_COINS, 0.8, this.scene);
 				this.game.addCoin();
+				// 	audioManager.play('coin', { volume: 0.5 });
 				this.collectibles.remove(this);
 			} else if (this.angle > Math.PI) {
 				this.collectibles.remove(this);
 			}
 		}
-
-		// collision?
-		// if (collide(airplane.mesh, this.mesh, this.world.coinDistanceTolerance)) {
-		// 	spawnParticles(this.mesh.position.clone(), 5, COLOR_COINS, 0.8);
-		// 	addCoin();
-		// 	audioManager.play('coin', { volume: 0.5 });
-		// 	sceneManager.remove(this);
-		// }
-		// // passed-by?
-		// else if (this.angle > Math.PI) {
-		// 	sceneManager.remove(this);
-		// }
 	}
 }

apps/sandbox/src/styles.css

@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700&display=swap');
 
 * {
 	box-sizing: border-box;