docs: add credits to all examples

Author: nartc

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

@@ -1,6 +1,6 @@
 import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, ActivationEnd, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs';
 
 @Component({
@@ -37,13 +37,22 @@ import { filter } from 'rxjs';
 				</a>
 			</div>
 		</div>
+
+		@if (currentActivatedRouteCredits(); as credits) {
+			<div class="absolute top-2 right-2 font-mono" [class]="credits.class">
+				Credits:
+				<a class="underline" [href]="credits.link" target="_blank" rel="noreferrer">{{ credits.title }}</a>
+			</div>
+		}
 	`,
 	imports: [RouterOutlet],
 })
 export class AppComponent {
 	private router = inject(Router);
 
 	private navigationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)));
+	private activationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof ActivationEnd)));
+	private route = inject(ActivatedRoute);
 
 	currentRoute = computed(() => {
 		const navigationEnd = this.navigationEnd();
@@ -59,6 +68,20 @@ export class AppComponent {
 		return `https://github.com/angular-threejs/angular-three/tree/main/apps/kitchen-sink/src/app/${paths.join('/')}`;
 	});
 
+	currentActivatedRouteCredits = computed(() => {
+		const activationEnd = this.activationEnd();
+		if (!activationEnd) return null;
+
+		let deepestChild = activationEnd.snapshot;
+		while (deepestChild && deepestChild.firstChild) {
+			deepestChild = deepestChild.firstChild;
+		}
+
+		if (!deepestChild) return null;
+
+		return deepestChild.data['credits'] as { title: string; link: string; class: string };
+	});
+
 	onChange(event: Event) {
 		const target = event.target as HTMLSelectElement;
 		void this.router.navigate([target.value]);

apps/kitchen-sink/src/app/cannon/cannon.routes.ts

@@ -8,26 +8,64 @@ const routes: Routes = [
 	{
 		path: 'kinematic-cube',
 		loadComponent: () => import('./kinematic-cube/kinematic-cube'),
+		data: {
+			credits: {
+				title: 'Kinematic Cube',
+				link: 'https://cannon.pmnd.rs/#/demo/KinematicCube',
+			},
+		},
 	},
 	{
 		path: 'compound',
 		loadComponent: () => import('./compound/compound'),
+		data: {
+			credits: {
+				title: 'Compound Body',
+				link: 'https://cannon.pmnd.rs/#/demo/CompoundBody',
+			},
+		},
 	},
 	{
 		path: 'chain',
 		loadComponent: () => import('./chain/chain'),
+		data: {
+			credits: {
+				title: 'Chain',
+				link: 'https://cannon.pmnd.rs/#/demo/Chain',
+				class: 'text-white',
+			},
+		},
 	},
 	{
 		path: 'cube-heap',
 		loadComponent: () => import('./cube-heap/cube-heap'),
+		data: {
+			credits: {
+				title: 'Cube Heap',
+				link: 'https://cannon.pmnd.rs/#/demo/CubeHeap',
+			},
+		},
 	},
 	{
 		path: 'convexpolyhedron',
 		loadComponent: () => import('./convexpolyhedron/convexpolyhedron'),
+		data: {
+			credits: {
+				title: 'Convex Polyhedron',
+				link: 'https://cannon.pmnd.rs/#/demo/ConvexPolyhedron',
+			},
+		},
 	},
 	{
 		path: 'monday-morning',
 		loadComponent: () => import('./monday-morning/monday-morning'),
+		data: {
+			credits: {
+				title: 'Monday Morning',
+				link: 'https://cannon.pmnd.rs/#/demo/MondayMorning',
+				class: 'text-white',
+			},
+		},
 	},
 	{
 		path: '',

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

@@ -4,10 +4,24 @@ const routes: Routes = [
 	{
 		path: 'svg-renderer',
 		loadComponent: () => import('./svg-renderer/svg-renderer'),
+		data: {
+			credits: {
+				title: 'SVG Renderer w/ Lines',
+				link: 'https://threejs.org/examples/#svg_lines',
+				class: 'text-white',
+			},
+		},
 	},
 	{
 		path: 'aviator',
 		loadComponent: () => import('./aviator/aviator'),
+		data: {
+			credits: {
+				title: 'The Aviator',
+				link: 'https://github.com/yakudoo/TheAviator',
+				class: 'text-white',
+			},
+		},
 	},
 	{
 		path: '',

apps/kitchen-sink/src/app/rapier/rapier.routes.ts

@@ -4,6 +4,13 @@ const routes: Routes = [
 	{
 		path: ':scene',
 		loadComponent: () => import('./wrapper'),
+		data: {
+			credits: {
+				title: 'React Three Rapier',
+				link: 'https://react-three-rapier.pmnd.rs',
+				class: 'left-2',
+			},
+		},
 	},
 	{
 		path: '',

apps/kitchen-sink/src/app/soba/bruno-simons-20k/bruno-simons-20k.ts

@@ -14,16 +14,8 @@ import { debug, Experience } from './experience';
 			[camera]="{ position: [-30, 35, -15], near: 30, far: 55, fov: 12 }"
 		/>
 
-		<div class="absolute top-2 right-2 flex flex-col gap-2">
-			<code>
-				Credits:
-				<a class="underline" href="https://pmndrs.github.io/examples/demos/bruno-simons-20k-challenge" target="_blank">
-					Bruno Simons 20K Challenge with R3F
-				</a>
-			</code>
-			<div class="flex gap-2 items-center">
-				<button [(toggleButton)]="debug">Toggle debug</button>
-			</div>
+		<div class="absolute top-10 right-2">
+			<button [(toggleButton)]="debug">Toggle debug</button>
 		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/inverted-stencil-buffer.ts

@@ -19,14 +19,6 @@ import { Experience, invert, logo } from './experience';
 				<option value="nx-cloud">Nx Cloud</option>
 			</select>
 		</div>
-
-		<a
-			class="absolute top-2 left-2 font-mono underline"
-			href="https://pmndrs.github.io/examples/demos/inverted-stencil-buffer"
-			target="_blank"
-		>
-			credit: R3F Inverted Stencil Buffer
-		</a>
 	`,
 	host: { class: 'inverted-stencil-buffer-soba' },
 	changeDetection: ChangeDetectionStrategy.OnPush,

apps/kitchen-sink/src/app/soba/portal-shapes/letter.ts

@@ -24,7 +24,6 @@ import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular
 import { Group } from 'three';
 
 import { NgTemplateOutlet } from '@angular/common';
-import CameraControls from 'camera-controls';
 import boldFont from './bold.blob';
 
 @Component({
@@ -36,7 +35,6 @@ import boldFont from './bold.blob';
 			[options]="{ restitution: 0.1, colliders: 'cuboid' }"
 			[position]="position()"
 			[rotation]="rotation()"
-			(pointermissed)="onPointerMissed($any($event))"
 		>
 			<ngts-center>
 				<ngts-text-3d
@@ -56,6 +54,7 @@ import boldFont from './bold.blob';
 						bevelOffset: 0,
 					}"
 					(dblclick)="onDblClick($any($event))"
+					(pointermissed)="onPointerMissed($any($event))"
 				>
 					<ngts-mesh-transmission-material
 						[options]="$any({ clearcoat: 1, samples: 3, thickness: 40, chromaticAberration: 0.25, anisotropy: 0.4 })"
@@ -120,20 +119,20 @@ export class Letter {
 	}
 
 	onDblClick(event: NgtThreeEvent<MouseEvent>) {
-		event.stopPropagation();
-		const controls = this.controls() as CameraControls;
-		if (!controls) return;
-
-		// TODO: not sure why this is not working as expected.
-		//  This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
-		void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
+		// event.stopPropagation();
+		// const controls = this.controls() as CameraControls;
+		// if (!controls) return;
+		//
+		// // TODO: not sure why this is not working as expected.
+		// //  This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
+		// void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
 	}
 
 	onPointerMissed(event: NgtThreeEvent<MouseEvent>) {
-		event.stopPropagation();
-		const controls = this.controls() as CameraControls;
-		if (!controls) return;
-
-		void controls.reset(true);
+		// event.stopPropagation();
+		// const controls = this.controls() as CameraControls;
+		// if (!controls) return;
+		//
+		// void controls.reset(true);
 	}
 }

apps/kitchen-sink/src/app/soba/simple-sound-analyser/overlay.ts

@@ -26,27 +26,19 @@ import { tracks, zoomIndex, zoomTrack } from './tracks';
 			}
 		</div>
 		<div
-			class="absolute top-2 left-0 flex w-full items-center justify-between px-2 opacity-0"
+			class="absolute top-2 left-0 flex w-full px-2 opacity-0 flex-col gap-2 text-black"
 			[class.opacity-100]="audioStore.clicked()"
 		>
-			<div class="flex flex-col gap-2 text-black">
-				<code>
-					Camera currently reacts to:
-					<button
-						class="rounded border border-b-4 border-transparent border-b-gray-400 bg-white px-4 py-1 text-black"
-						(click)="onChangeZoomTrack()"
-					>
-						{{ zoomTrack() }}
-					</button>
-				</code>
-				<code>
-					credits:
-					<a class="underline" href="https://pmndrs.github.io/examples/demos/simple-audio-analyser" target="_blank">
-						R3F Simple Sound Analyser
-					</a>
-				</code>
-			</div>
-			<code class="text-black">Triplet After Triplet · SEGA · Hidenori Shoji</code>
+			<code>
+				Camera currently reacts to:
+				<button
+					class="rounded border border-b-4 border-transparent border-b-gray-400 bg-white px-4 py-1"
+					(click)="onChangeZoomTrack()"
+				>
+					{{ zoomTrack() }}
+				</button>
+			</code>
+			<code>Triplet After Triplet · SEGA · Hidenori Shoji</code>
 		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,