skill-tree-portfolio/src/lib/pixi/nodes.ts

// Tree node rendering: the origin profile node and regular icon nodes.
// Nodes start non-interactive (eventMode 'none') until the entrance animation
// enables them; see animation.ts.
import { Graphics, Container, Assets, Sprite, type Texture } from 'pixi.js';
import { gsap } from 'gsap';
import { treeNodes, type TreeNode } from '$lib/data';
import { categoryColors } from '$lib/theme';
import { getNodeRadius } from '$lib/utils/tree';
import type { NodeObject } from './types';
import type { SkillTreeController } from './controller';
import type { Lifecycle } from './lifecycle';

interface NodeOpts {
	isMobile: boolean;
	isTouchDevice: boolean;
	controller: SkillTreeController;
	life: Lifecycle;
	onOpen: (node: TreeNode) => void;
	onHover: (node: TreeNode | null) => void;
}

/** Shared pointer wiring for both the origin and regular nodes. */
function attachNodeInteraction(
	target: Container,
	glowGraphics: Graphics,
	node: TreeNode,
	opts: NodeOpts
) {
	target.on('pointerdown', () => {
		opts.controller.hasMoved = false;
	});

	target.on('pointerup', () => {
		if (!opts.controller.hasMoved) {
			opts.onOpen(node);
		}
	});

	// Hover tweens are created per-event, long after setup, so each creation has
	// to re-enter the GSAP context to stay killable. `overwrite: 'auto'` stops
	// rapid in/out sweeps from stacking conflicting tweens on the same property.
	target.on('pointerover', () => {
		opts.life.animate(() => {
			gsap.to(target.scale, { x: 1.2, y: 1.2, duration: 0.2, overwrite: 'auto' });
			gsap.to(glowGraphics, { alpha: 1.5, duration: 0.2, overwrite: 'auto' });
		});
		if (!opts.isTouchDevice) opts.onHover(node);
	});

	target.on('pointerout', () => {
		opts.life.animate(() => {
			gsap.to(target.scale, { x: 1, y: 1, duration: 0.2, overwrite: 'auto' });
			gsap.to(glowGraphics, { alpha: 1, duration: 0.2, overwrite: 'auto' });
		});
		if (!opts.isTouchDevice) opts.onHover(null);
	});
}

export async function createNodes(treeContainer: Container, opts: NodeOpts): Promise<NodeObject[]> {
	const { isMobile } = opts;
	const nodeObjects: NodeObject[] = [];

	// Load every texture in ONE parallel batch. Previously each icon was awaited
	// inside the loop below, which serialised ~56 round-trips before the tree
	// could render or accept input.
	const iconUrls = [...new Set(treeNodes.map((n) => n.icon).filter((s): s is string => !!s))];

	const [profileTexture, iconTextures] = await Promise.all([
		Assets.load<Texture>('/headshot.jpg'),
		// Array form resolves to a url -> Texture map and fetches concurrently.
		iconUrls.length
			? Assets.load<Texture>(iconUrls)
			: Promise.resolve({} as Record<string, Texture>)
	]);

	for (const node of treeNodes) {
		const radius = getNodeRadius(node.size, isMobile);
		const color = categoryColors[node.category];

		const glowGraphics = new Graphics();
		glowGraphics.circle(0, 0, radius + 8).fill({ color, alpha: 0.1 });
		glowGraphics.circle(0, 0, radius + 4).fill({ color, alpha: 0.15 });
		glowGraphics.x = node.x;
		glowGraphics.y = node.y;
		glowGraphics.alpha = 0;
		treeContainer.addChild(glowGraphics);

		if (node.id === 'origin') {
			const profileContainer = new Container();
			profileContainer.x = node.x;
			profileContainer.y = node.y;

			const maskGraphics = new Graphics();
			maskGraphics.circle(0, 0, radius).fill({ color: 0xffffff });
			profileContainer.addChild(maskGraphics);

			const profileSprite = new Sprite(profileTexture);
			const scale = (radius * 2) / Math.min(profileTexture.width, profileTexture.height);
			profileSprite.scale.set(scale);
			profileSprite.anchor.set(0.5);
			profileSprite.mask = maskGraphics;
			profileContainer.addChild(profileSprite);

			const borderGraphics = new Graphics();
			borderGraphics.circle(0, 0, radius + 2).stroke({ width: 3, color });
			borderGraphics.circle(0, 0, radius + 6).stroke({ width: 2, color, alpha: 0.5 });
			profileContainer.addChild(borderGraphics);

			profileContainer.alpha = 0;
			profileContainer.scale.set(0.5);

			// Disable interactivity until animation completes
			profileContainer.eventMode = 'none';
			profileContainer.cursor = 'pointer';

			attachNodeInteraction(profileContainer, glowGraphics, node, opts);

			treeContainer.addChild(profileContainer);
			nodeObjects.push({ graphics: profileContainer, node, glowGraphics });
		} else {
			const nodeContainer = new Container();
			nodeContainer.x = node.x;
			nodeContainer.y = node.y;

			const nodeGraphics = new Graphics();
			nodeGraphics.circle(0, 0, radius).fill({ color: 0x12121a }).stroke({ width: 2, color });
			nodeGraphics.circle(0, 0, radius * 0.75).stroke({ width: 1, color, alpha: 0.2 });
			nodeContainer.addChild(nodeGraphics);

			const iconTexture = node.icon ? iconTextures[node.icon] : undefined;
			if (node.icon && !iconTexture) {
				console.warn(`Could not load icon for ${node.id}:`, node.icon);
			}
			if (iconTexture) {
				const iconSprite = new Sprite(iconTexture);

				const iconSize = radius * 1.4;
				const scale = iconSize / Math.max(iconTexture.width, iconTexture.height);
				iconSprite.scale.set(scale);
				iconSprite.anchor.set(0.5);
				iconSprite.tint = color;

				nodeContainer.addChild(iconSprite);
			}

			nodeContainer.alpha = 0;
			nodeContainer.scale.set(0.5);

			// Disable interactivity until animation completes
			nodeContainer.eventMode = 'none';
			nodeContainer.cursor = 'pointer';

			attachNodeInteraction(nodeContainer, glowGraphics, node, opts);

			treeContainer.addChild(nodeContainer);
			nodeObjects.push({ graphics: nodeContainer, node, glowGraphics });
		}
	}

	return nodeObjects;
}