docs: use router to drive routed rock

Author: nartc

apps/kitchen-sink/src/app/routed-rocks/colored-rock.ts

@@ -12,14 +12,14 @@ import { RockStore } from './store';
 					[castShadow]="true"
 					[receiveShadow]="true"
 					[rotation]="[0, Math.PI / 4, 0]"
-					[position]="[0, 2, 0]"
+					[position]="[0, 7, 0]"
 					[scale]="0.5"
 				>
 					<ngt-box-geometry *args="[0.7, 0.7, 0.7]" />
 					<ngt-mesh-phong-material [color]="rock.color" [side]="FrontSide" />
 				</ngt-mesh>
 
-				<ngt-group>
+				<ngt-group [position]="[0, 5, 0]">
 					@for (text of texts; track $index) {
 						<ngts-text
 							font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
@@ -30,6 +30,7 @@ import { RockStore } from './store';
 								fontSize: 0.5,
 								position: text.position,
 								rotation: text.rotation,
+								castShadow: true,
 							}"
 						/>
 					}

apps/kitchen-sink/src/app/routed-rocks/constants.ts

@@ -31,7 +31,6 @@ export const menus = colors.map((color, index) => ({
 	label: color.label,
 	name: `rock-${color.slug}`,
 	path: `/routed-rocks/rocks/${color.slug}`,
-	contentId: index + 1,
 	color: color.color,
 	angle: ((360 / colors.length) * index * Math.PI) / 180,
 }));

apps/kitchen-sink/src/app/routed-rocks/rocks.ts

@@ -40,12 +40,11 @@ interface RockGLTF extends GLTF {
 					<ngt-group [rotation]="[Math.PI / 2, 0, 0]">
 						<ngt-mesh
 							cursor
-							name="theRock"
 							[castShadow]="true"
 							[receiveShadow]="true"
 							[geometry]="gltf.nodes.defaultMaterial.geometry"
 							[material]="gltf.materials['08___Default']"
-							(click)="onRockClicked()"
+							(click)="router.navigate(['/routed-rocks/rocks'])"
 						/>
 					</ngt-group>
 				</ngt-group>
@@ -58,15 +57,14 @@ interface RockGLTF extends GLTF {
 
 		<ngt-icosahedron-geometry #geometry attach="none" />
 		@for (menu of menus; track menu.id) {
-			<ngt-group [position]="[15 * Math.cos(menu.angle), 0, 15 * Math.sin(menu.angle)]" [name]="'group-' + menu.id">
+			<ngt-group [name]="menu.name" [position]="[15 * Math.cos(menu.angle), 0, 15 * Math.sin(menu.angle)]">
 				<ngt-mesh
 					cursor
-					[name]="menu.name"
 					[position]="[0, 5, 0]"
 					[castShadow]="true"
 					[receiveShadow]="true"
 					[geometry]="geometry"
-					(click)="onColoredRockClicked(menu)"
+					(click)="router.navigate([menu.path])"
 				>
 					<ngt-mesh-phong-material [color]="menu.color" [side]="FrontSide" />
 				</ngt-mesh>
@@ -87,7 +85,7 @@ export default class Rocks {
 
 	protected readonly menus = menus;
 
-	private router = inject(Router);
+	protected router = inject(Router);
 	private rockStore = inject(RockStore);
 	private store = injectStore();
 
@@ -109,20 +107,8 @@ export default class Rocks {
 
 			const obj = rock ? scene.getObjectByName(rock.name) : gltf.scene;
 			if (obj) {
-				void controls.fitToBox(obj, true, {
-					paddingTop: 5,
-				});
+				void controls.fitToBox(obj, true, { paddingTop: 5 });
 			}
 		});
 	}
-
-	onColoredRockClicked(menu: (typeof menus)[number]) {
-		this.rockStore.selectedRock.set(menu);
-		this.router.navigate([menu.path]);
-	}
-
-	onRockClicked() {
-		this.rockStore.selectedRock.set(null);
-		this.router.navigate(['/routed-rocks/rocks']);
-	}
 }

apps/kitchen-sink/src/app/routed-rocks/store.ts

@@ -1,4 +1,4 @@
-import { inject, Injectable, linkedSignal } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, map, startWith } from 'rxjs';
@@ -8,7 +8,7 @@ import { menus } from './constants';
 export class RockStore {
 	private router = inject(Router);
 
-	private initialRock = toSignal(
+	selectedRock = toSignal(
 		this.router.events.pipe(
 			filter((ev): ev is NavigationEnd => ev instanceof NavigationEnd),
 			map((ev) => ev.urlAfterRedirects),
@@ -17,6 +17,4 @@ export class RockStore {
 		),
 		{ initialValue: null },
 	);
-
-	selectedRock = linkedSignal(this.initialRock);
 }