docs: more to aviator demo but positioning as well as attraction logic need revisit

Author: nartc

apps/kitchen-sink/public/dragon_chestplate.glb

@@ -1,4 +1,4 @@
-import { Component, computed, inject } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs';

apps/kitchen-sink/public/helvetiker_regular.typeface.json

@@ -1,19 +1,28 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
-import { CollectiblesStore } from './collectible/collectibles.store';
+import { CollectiblesStore, POWER_UP_TYPES } from './collectible/collectibles.store';
 import { Experience } from './experience';
 import { GameStore } from './game.store';
+import { CoinOverlay } from './overlays/coin-overlay';
+import { HealthOverlay } from './overlays/health-overlay';
+import { PowerUpsOverlay } from './overlays/power-ups-overlay';
 
 @Component({
 	standalone: true,
 	template: `
 		<ngt-canvas [sceneGraph]="sceneGraph" [camera]="{ fov: 50, near: 0.1, far: 10000 }" [shadows]="true" />
-		<span class="absolute top-4 right-4 font-mono text-lg text-[#ffd700] font-bold">
-			Coins: {{ gameStore.coins() }}
-		</span>
+		<div class="absolute top-4 right-1/2 translate-x-1/2 flex gap-4 items-center">
+			<app-health-overlay />
+			<div class="w-0.5 h-4 bg-white"></div>
+			<app-coin-overlay />
+			<div class="w-0.5 h-4 bg-white"></div>
+			<app-power-ups-overlay />
+			<!--			<button (click)="onTestPowerUp()" class="text-white font-mono">Test powerup</button>-->
+			<!--			<button (click)="onTestHealth()" class="text-white font-mono">Test health</button>-->
+		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtCanvas],
+	imports: [NgtCanvas, CoinOverlay, HealthOverlay, PowerUpsOverlay],
 	providers: [GameStore, CollectiblesStore],
 	styles: `
 		:host {
@@ -27,4 +36,13 @@ import { GameStore } from './game.store';
 export default class Aviator {
 	protected sceneGraph = Experience;
 	protected gameStore = inject(GameStore);
+
+	onTestPowerUp() {
+		const random = POWER_UP_TYPES[Math.floor(Math.random() * 3)];
+		this.gameStore.acquirePowerUp(random);
+	}
+
+	onTestHealth() {
+		this.gameStore.health.update((prev) => prev - 1);
+	}
 }

apps/kitchen-sink/public/magnet.glb

@@ -10,7 +10,12 @@ import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { CylinderGeometry, Mesh, MeshPhongMaterial } from 'three';
 import { COIN_DISTANCE_TOLERANCE, COLOR_COINS } from '../constants';
 import { GameStore } from '../game.store';
-import { Spawnable, SPAWNABLE_DISTANCE_TOLERANCE, SPAWNABLE_PARTICLE_COLOR } from '../spawnable/spawnables.store';
+import {
+	Spawnable,
+	SPAWNABLE_ATTRACTABLE,
+	SPAWNABLE_DISTANCE_TOLERANCE,
+	SPAWNABLE_PARTICLE_COLOR,
+} from '../spawnable/spawnables.store';
 import { Collectible } from './collectibles.store';
 
 const coinGeometry = new CylinderGeometry(4, 4, 1, 10);
@@ -22,7 +27,7 @@ const coinMaterial = new MeshPhongMaterial({
 });
 
 @Component({
-	selector: 'app-coin',
+	selector: 'app-collectible-coin',
 	standalone: true,
 	template: `
 		<ngt-mesh
@@ -40,9 +45,10 @@ const coinMaterial = new MeshPhongMaterial({
 	providers: [
 		{ provide: SPAWNABLE_DISTANCE_TOLERANCE, useValue: COIN_DISTANCE_TOLERANCE },
 		{ provide: SPAWNABLE_PARTICLE_COLOR, useValue: COLOR_COINS },
+		{ provide: SPAWNABLE_ATTRACTABLE, useValue: true },
 	],
 })
-export class Coin {
+export class CollectibleCoin {
 	protected coinGeometry = coinGeometry;
 	protected coinMaterial = coinMaterial;
 
@@ -52,7 +58,7 @@ export class Coin {
 	protected spawnable = inject(Spawnable, { host: true });
 
 	constructor() {
-		this.spawnable.spawnable = this.coinRef;
+		this.spawnable.assignSpawnable(this.coinRef);
 		this.spawnable.onCollide(() => this.gameStore.incrementCoin());
 
 		injectBeforeRender(() => {

apps/kitchen-sink/src/app/app.component.ts

@@ -0,0 +1,104 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
+	inject,
+	input,
+	viewChild,
+} from '@angular/core';
+import { injectBeforeRender, NgtArgs } from 'angular-three';
+import { NgtsText3D } from 'angular-three-soba/abstractions';
+import { injectGLTF } from 'angular-three-soba/loaders';
+import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
+import { Color, Mesh, SphereGeometry } from 'three';
+import { COLOR_POWER_UPS, POWER_UP_DISTANCE_TOLERANCE } from '../constants';
+import { GameStore } from '../game.store';
+import { Spawnable, SPAWNABLE_DISTANCE_TOLERANCE, SPAWNABLE_PARTICLE_COLOR } from '../spawnable/spawnables.store';
+import { Collectible, PowerUpType } from './collectibles.store';
+
+injectGLTF.preload(() => ['./dragon_chestplate.glb', './magnet.glb']);
+
+const powerUpGeometry = new SphereGeometry(1, 32, 32);
+const background = new Color('white');
+
+@Component({
+	selector: 'app-collectible-power-up',
+	standalone: true,
+	template: `
+		<ngt-mesh
+			#power
+			[geometry]="powerUpGeometry"
+			[castShadow]="true"
+			[scale]="6"
+			[position]="[spawnable.positionX(), spawnable.positionY(), 0]"
+		>
+			<ngts-mesh-transmission-material [options]="{ thickness: 0.5, transmission: 1, roughness: 0, background }" />
+
+			@switch (powerUp()) {
+				@case ('armor') {
+					<ngt-primitive *args="[armor()]" [parameters]="{ position: [0, -1.25, 0] }" />
+				}
+				@case ('magnet') {
+					<ngt-primitive *args="[magnet()]" [parameters]="{ scale: 0.35 }" />
+				}
+				@case ('doubleCoin') {
+					<ngts-text-3d
+						text="x2"
+						font="helvetiker_regular.typeface.json"
+						[options]="{ position: [-0.5, -0.35, 0], size: 0.75, letterSpacing: -0.1 }"
+					>
+						<ngt-mesh-standard-material color="black" />
+					</ngts-text-3d>
+				}
+			}
+		</ngt-mesh>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsMeshTransmissionMaterial, NgtArgs, NgtsText3D],
+	hostDirectives: [{ directive: Collectible, inputs: ['state'], outputs: ['stateChange'] }],
+	providers: [
+		{ provide: SPAWNABLE_DISTANCE_TOLERANCE, useValue: POWER_UP_DISTANCE_TOLERANCE },
+		{ provide: SPAWNABLE_PARTICLE_COLOR, useValue: COLOR_POWER_UPS },
+	],
+})
+export class CollectiblePowerUp {
+	powerUp = input.required<PowerUpType>();
+
+	protected powerUpGeometry = powerUpGeometry;
+	protected background = background;
+
+	// https://sketchfab.com/tonicarre35
+	private armorGLTF = injectGLTF(() => './dragon_chestplate.glb');
+	protected armor = computed(() => {
+		const gltf = this.armorGLTF();
+		if (!gltf) return null;
+		return gltf.scene.clone();
+	});
+
+	// https://sketchfab.com/AlienDev
+	private magnetGLTF = injectGLTF(() => './magnet.glb');
+	protected magnet = computed(() => {
+		const gltf = this.magnetGLTF();
+		if (!gltf) return null;
+		return gltf.scene.clone();
+	});
+
+	private powerRef = viewChild.required<ElementRef<Mesh>>('power');
+	private gameStore = inject(GameStore);
+	protected spawnable = inject(Spawnable, { host: true });
+
+	constructor() {
+		this.spawnable.assignSpawnable(this.powerRef);
+		// this.spawnable.onCollide(() => {
+		// 	this.gameStore.acquirePowerUp(this.powerUp());
+		// });
+
+		injectBeforeRender(() => {
+			const power = this.powerRef().nativeElement;
+			power.rotation.y += 0.05;
+		});
+	}
+}

apps/kitchen-sink/src/app/misc/aviator/aviator.ts

@@ -1,9 +1,28 @@
-import { DestroyRef, Directive, inject, model, signal, untracked, WritableSignal } from '@angular/core';
+import { Directive, inject, Injectable, model, signal, untracked, WritableSignal } from '@angular/core';
 import { PLANE_AMP_HEIGHT, PLANE_DEFAULT_HEIGHT, SEA_RADIUS } from '../constants';
 import { GameStore } from '../game.store';
 import { Spawnable } from '../spawnable/spawnables.store';
 
+export const POWER_UP_TYPES = ['armor', 'magnet', 'doubleCoin'] as const;
+export type PowerUpType = (typeof POWER_UP_TYPES)[number];
+
 export type CollectibleState = 'spawned' | 'collected' | 'skipped';
+export interface CollectibleItem {
+	state: WritableSignal<CollectibleState>;
+	angle: number;
+	distance: number;
+	positionY: number;
+	positionX: number;
+}
+
+export interface CollectibleCoin extends CollectibleItem {
+	key: number;
+}
+
+export interface CollectiblePowerUp extends CollectibleItem {
+	type: PowerUpType;
+	key: string;
+}
 
 @Directive({
 	standalone: true,
@@ -12,36 +31,24 @@ export type CollectibleState = 'spawned' | 'collected' | 'skipped';
 export class Collectible {
 	state = model.required<CollectibleState>();
 
-	private destroyRef = inject(DestroyRef);
-	private collectiblesStore = inject(CollectiblesStore);
 	private spawnable = inject(Spawnable, { host: true });
 
 	constructor() {
 		this.spawnable.onCollide(() => this.state.set('collected'));
 		this.spawnable.onSkip(() => this.state.set('skipped'));
-
-		this.collectiblesStore.collectibles.add(this);
-		this.destroyRef.onDestroy(() => {
-			this.collectiblesStore.collectibles.delete(this);
-		});
 	}
 }
 
+@Injectable()
 export class CollectiblesStore {
-	collectibles = new Set<Collectible>();
-
 	private gameStore = inject(GameStore);
 
-	coins = signal<
-		Array<{
-			key: number;
-			state: WritableSignal<CollectibleState>;
-			angle: number;
-			distance: number;
-			positionY: number;
-			positionX: number;
-		}>
-	>([]);
+	coins = signal<Array<CollectibleCoin>>([]);
+	powerUps = signal<Array<CollectiblePowerUp>>([]);
+
+	state = {
+		lastPowerUpSpawnedAt: 0,
+	};
 
 	spawnCoins() {
 		const nCoins = 1 + Math.floor(Math.random() * 10);
@@ -68,6 +75,25 @@ export class CollectiblesStore {
 		this.gameStore.statistics.coinsSpawned += nCoins;
 	}
 
+	spawnPowerUps() {
+		const type = POWER_UP_TYPES[Math.floor(Math.random() * 3)];
+
+		this.powerUps.update((prev) => [
+			...prev.filter((powerUp) => untracked(powerUp.state) === 'spawned'),
+			{
+				key: this.gameStore.statistics.powerUpsSpawned + type,
+				type,
+				state: signal<CollectibleState>('spawned'),
+				angle: 0,
+				distance: 1,
+				positionY: -SEA_RADIUS,
+				positionX: SEA_RADIUS + PLANE_DEFAULT_HEIGHT,
+			},
+		]);
+		this.gameStore.statistics.powerUpsSpawned += 1;
+		this.state.lastPowerUpSpawnedAt = this.gameStore.statistics.coinsCollected;
+	}
+
 	private randomFromRange(min: number, max: number) {
 		return min + Math.random() * (max - min);
 	}

apps/kitchen-sink/src/app/misc/aviator/collectible/coin.ts renamed to apps/kitchen-sink/src/app/misc/aviator/collectible/collectible-coin.component.ts

@@ -33,6 +33,7 @@ export const WAVES_MAX_SPEED = 0.003;
 export const CAMERA_SENSITIVITY = 0.002;
 
 export const COIN_DISTANCE_TOLERANCE = 15;
+export const POWER_UP_DISTANCE_TOLERANCE = 15;
 export const COINS_SPEED = 0.5;
 export const DISTANCE_FOR_COINS_SPAWN = 50;
 
@@ -45,6 +46,8 @@ export const ENEMY_DISTANCE_TOLERANCE = 10;
 export const ENEMIES_SPEED = 0.6;
 export const DISTANCE_FOR_ENEMIES_SPAWN = 50;
 
+export const ATTRACTION_FACTOR = 0.75;
+
 export const COLORS = {
 	red: 0xf25346,
 	orange: 0xffa500,
@@ -66,4 +69,5 @@ export const COLOR_SEA_LEVEL = [
 ];
 
 export const COLOR_COINS = 0xffd700; // 0x009999
+export const COLOR_POWER_UPS = 0x8f9992;
 export const COLOR_COLLECTIBLE_BUBBLE = COLOR_COINS;