fix: audit phase 2 — teardown, failure paths, service worker, tooltip, resize
Correctness phase of the frontend audit. Nothing here is visible on a happy
path; it is what the app does when something goes wrong, when the window
changes, or when the component goes away.
Teardown (new src/lib/pixi/lifecycle.ts):
- Nothing was ever released: no app.destroy(), no ticker.remove(), no
killTweensOf, no onDestroy. ~480 GSAP tweens (most repeat:-1), a ticker
callback, and a dozen DOM listeners lived forever.
- 112 of those tweens are created inside an onComplete, so they don't exist
when a call-site sweep would run. gsap.context() handles exactly this:
GSAP records each animation's context on creation and restores it while
invoking that animation's callbacks (see _callback in gsap-core), so
late-created pulses land in the same context. One ctx.kill() gets all of
them. kill(), not revert(), so GSAP doesn't write properties back onto
objects about to be destroyed.
- All DOM listeners now go through life.listen(), which registers removal at
the same time. Previously 6 canvas listeners were never removed, each
closing over the whole ~713-object scene graph.
- The unmount race: cleanup used to be registered on the LAST line of an
async onMount, after the asset waterfall, so unmounting mid-load cleaned up
nothing. The lifecycle is now created before any await, with life.disposed
guards after each one.
- Hover tweens re-enter the context per event and use overwrite:'auto' so
rapid sweeps don't stack conflicting tweens.
Failure paths:
- onMount had no try/catch and no WebGL detection. Any init or asset failure
left the spinner up forever, the stats toggle at opacity:0, and Escape dead
(attachKeyboard never ran). Now caught, and it hands off to +page.svelte to
reveal the text version.
- There was no <noscript> anywhere, and SeoContent is clipped to 1x1px with
html/body overflow:hidden — so JS-disabled visitors got a pure black page.
A <noscript><style> block now un-hides it with no JS involved.
Service worker (moved static/ -> src/, so SvelteKit builds it):
- It can now use $service-worker, so precache comes from the real build
manifest instead of a hand-maintained 5-entry list that omitted all JS/CSS,
and the cache name embeds `version` so old caches actually get pruned.
- cache.addAll was atomic: one 404 failed the whole install silently. Now
per-asset with a warning on partial failure.
- The catch returned undefined for non-image assets, which makes
respondWith throw a TypeError — a soft offline failure became a hard one.
Every path now resolves to a Response.
- Unhashed assets (icons, headshot, resume PDF) were cache-first with no
expiry, so replacing the resume at the same URL never reached a returning
visitor. Those are network-first now; only hashed build output is
cache-first.
- Navigation responses were cached without a status check, so a 404/500 body
could become the offline fallback.
- Dropped skipWaiting() from install and added a real update prompt +
controllerchange reload. The SKIP_WAITING handler was previously dead code
and the "check for updates periodically" comment described an interval that
did not exist.
Tooltip:
- Wrote Svelte state on every canvas mousemove even with nothing hovered.
Now gated on hover and coalesced to one write per frame; raw coords are
still tracked cheaply so the first hover isn't positioned from stale data.
- Animated left/top (layout + paint per frame on an element with two
color-mix shadows); now translate3d.
- Listener moved to window, so coordinates no longer freeze when a drag
leaves the canvas.
- Flip logic measured a hardcoded 280x120; now measures the real element
(actual height is 113, so tall tooltips mis-flipped near the bottom edge).
- Dropped role="tooltip" + aria-live="polite", which announced the full
label and description on every hover. Nothing referenced it via
aria-describedby, so the role was inert. Now aria-hidden.
Resize:
- Star positions, gradient radius, vignette size and dust wrap bounds were
all baked at first paint, so enlarging the window left an unlit band. The
background is now rebuilt on a rAF-coalesced resize, under its own
sub-lifecycle. The view is shifted by half the delta rather than re-centred,
so the user's current view stays anchored.
- isTouchDevice used 'ontouchstart', true on touch-capable laptops and thus
permanently killing mouse hover. Now matchMedia('(hover: hover)').
Known gap: node radii still don't change when the 768px breakpoint is
crossed mid-session; re-creating all 57 nodes would reset interaction state.
Verified in the production build: resize 1278x1220 -> 1734x821 rebuilds with
zero errors, tooltip positions via transform and stays on screen, fallback
renders as a readable resume page. svelte-check clean, lint clean, 14/14.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
TehRiehlDealandClaude Opus 5 committed
1 parent
8874b35998
commit
746d81b151
14 files changed
+1127
-692
No files matched your search
@@ -14,6 +14,10 @@
|
||||
} from '$lib/data';
|
||||
import { aggregateSkills, BRANCH_IDS } from '$lib/utils/stats';
|
||||
|
||||
// Set when the canvas can't render, so this becomes the visible page rather
|
||||
// than a screen-reader-only mirror of it.
|
||||
const { revealed = false }: { revealed?: boolean } = $props();
|
||||
|
||||
const origin = treeNodes.find((n): n is OriginNode => n.category === 'origin');
|
||||
|
||||
// Leaf nodes only — container/branch nodes lack these category fields.
|
||||
@@ -34,7 +38,7 @@
|
||||
</script>
|
||||
|
||||
{#if origin}
|
||||
<section class="sr-only" aria-label="Portfolio (text version)">
|
||||
<section class="sr-only" class:revealed aria-label="Portfolio (text version)">
|
||||
<h1>{origin.fullName} — {origin.jobTitle}</h1>
|
||||
{#if origin.aboutMe}<p>{origin.aboutMe}</p>{/if}
|
||||
{#if origin.location}<p>Location: {origin.location}</p>{/if}
|
||||
|
||||
@@ -21,8 +21,11 @@
|
||||
import { createController } from '$lib/pixi/controller';
|
||||
import { createLines } from '$lib/pixi/lines';
|
||||
import { createNodes } from '$lib/pixi/nodes';
|
||||
import { attachPanZoom, attachKeyboard } from '$lib/pixi/interaction';
|
||||
import { attachPanZoom, attachKeyboard, updateParallax } from '$lib/pixi/interaction';
|
||||
import { runEntranceAnimations } from '$lib/pixi/animation';
|
||||
import { createLifecycle } from '$lib/pixi/lifecycle';
|
||||
|
||||
const { onRenderFail }: { onRenderFail?: () => void } = $props();
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let selectedNode = $state<TreeNode | null>(null);
|
||||
@@ -48,7 +51,7 @@
|
||||
let statsPanelVisible = $state(false);
|
||||
// SvelteSet, not $state(new Set()) — Svelte 5 does not proxy a plain Set, so
|
||||
// .add()/.delete() would be untracked and the panel would never re-render.
|
||||
let expandedBranches = new SvelteSet<string>(BRANCH_IDS); // All expanded by default
|
||||
const expandedBranches = new SvelteSet<string>(BRANCH_IDS); // All expanded by default
|
||||
|
||||
function openModal(node: TreeNode) {
|
||||
selectedNode = node;
|
||||
@@ -100,118 +103,212 @@
|
||||
isMobile = windowWidth < MOBILE_BREAKPOINT;
|
||||
}
|
||||
|
||||
const cleanupFunctions: Array<() => void> = [];
|
||||
// One owner for every Pixi/GSAP/DOM resource this component allocates.
|
||||
// Registered with the component's teardown BEFORE any await, so unmounting
|
||||
// mid-load still releases everything (this used to be the last statement of
|
||||
// the async onMount, so an early unmount cleaned up nothing at all).
|
||||
const life = createLifecycle();
|
||||
|
||||
onMount(async () => {
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
life.listen(window, 'resize', handleResize);
|
||||
|
||||
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
// matchMedia('(hover: hover)') rather than 'ontouchstart': the latter is
|
||||
// true on touch-capable laptops, which permanently killed mouse hover.
|
||||
const isTouchDevice = !window.matchMedia('(hover: hover)').matches;
|
||||
|
||||
const app = new Application();
|
||||
await app.init({
|
||||
background: '#05050a',
|
||||
resizeTo: container,
|
||||
// The scene is soft glow circles — MSAA costs fill rate and buys almost
|
||||
// nothing here. Sharpness comes from rendering at device resolution instead.
|
||||
antialias: false,
|
||||
resolution: Math.min(window.devicePixelRatio || 1, 2),
|
||||
autoDensity: true,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
|
||||
// PixiJS owns this canvas, not Svelte — mounting it directly is intentional.
|
||||
// eslint-disable-next-line svelte/no-dom-manipulating
|
||||
container.appendChild(app.canvas);
|
||||
try {
|
||||
await app.init({
|
||||
background: '#05050a',
|
||||
resizeTo: container,
|
||||
// The scene is soft glow circles — MSAA costs fill rate and buys almost
|
||||
// nothing here. Sharpness comes from rendering at device resolution instead.
|
||||
antialias: false,
|
||||
resolution: Math.min(window.devicePixelRatio || 1, 2),
|
||||
autoDensity: true,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
|
||||
// Background layers (gradient → nebula → stars → dust → vignette)
|
||||
const bg = createBackground(app, isMobile);
|
||||
|
||||
// Tree container — pan/zoom transform is applied here
|
||||
const treeContainer = new Container();
|
||||
app.stage.addChild(treeContainer);
|
||||
treeContainer.x = app.screen.width / 2;
|
||||
treeContainer.y = app.screen.height / 2;
|
||||
|
||||
// Start zoomed in; the entrance animation zooms out to endScale.
|
||||
const startScale = isMobile ? 3 : 4;
|
||||
const endScale = isMobile ? 0.6 : 1;
|
||||
treeContainer.scale.set(startScale);
|
||||
treeContainer.alpha = 1;
|
||||
|
||||
const controller = createController(app, treeContainer, bg, endScale);
|
||||
|
||||
// Build the visualisation (connections first, then nodes on top)
|
||||
controller.lineObjects = createLines(treeContainer);
|
||||
controller.nodeObjects = await createNodes(treeContainer, {
|
||||
isMobile,
|
||||
isTouchDevice,
|
||||
controller,
|
||||
onOpen: openModal,
|
||||
onHover: (node) => {
|
||||
hoveredNode = node;
|
||||
// Unmounted while the renderer was initialising — release and stop.
|
||||
if (life.disposed) {
|
||||
app.destroy(true, { children: true, texture: true });
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Textures are loaded and the scene graph is built — only now is the canvas
|
||||
// genuinely ready. (This used to fire right after app.init(), so the spinner
|
||||
// resolved onto an empty screen.)
|
||||
isLoading = false;
|
||||
// Tearing down the renderer has to happen last, so register it first
|
||||
// (dispose runs newest-first).
|
||||
life.add(() => app.destroy(true, { children: true, texture: true }));
|
||||
|
||||
// Pan / zoom / parallax + keyboard navigation
|
||||
const detachPanZoom = attachPanZoom(controller, {
|
||||
onTooltipMove: (x, y) => {
|
||||
tooltipX = x;
|
||||
tooltipY = y;
|
||||
// PixiJS owns this canvas, not Svelte — mounting it directly is intentional.
|
||||
// eslint-disable-next-line svelte/no-dom-manipulating
|
||||
container.appendChild(app.canvas);
|
||||
|
||||
// Background layers (gradient → nebula → stars → dust → vignette).
|
||||
// Its own sub-lifecycle so a resize rebuild can kill just its ~315
|
||||
// ambient tweens and the dust ticker, without touching the tree's.
|
||||
let bgLife = createLifecycle();
|
||||
let bg = createBackground(app, isMobile, bgLife);
|
||||
life.add(() => bgLife.dispose());
|
||||
|
||||
// Tree container — pan/zoom transform is applied here
|
||||
const treeContainer = new Container();
|
||||
app.stage.addChild(treeContainer);
|
||||
treeContainer.x = app.screen.width / 2;
|
||||
treeContainer.y = app.screen.height / 2;
|
||||
|
||||
// Start zoomed in; the entrance animation zooms out to endScale.
|
||||
const startScale = isMobile ? 3 : 4;
|
||||
const endScale = isMobile ? 0.6 : 1;
|
||||
treeContainer.scale.set(startScale);
|
||||
treeContainer.alpha = 1;
|
||||
|
||||
const controller = createController(app, treeContainer, bg, endScale);
|
||||
|
||||
// Build the visualisation (connections first, then nodes on top)
|
||||
controller.lineObjects = createLines(treeContainer);
|
||||
controller.nodeObjects = await createNodes(treeContainer, {
|
||||
isMobile,
|
||||
isTouchDevice,
|
||||
controller,
|
||||
life,
|
||||
onOpen: openModal,
|
||||
onHover: (node) => {
|
||||
hoveredNode = node;
|
||||
// Seed the tooltip at the current pointer before it first paints.
|
||||
if (node) panZoom?.flushTooltip();
|
||||
}
|
||||
});
|
||||
|
||||
// Unmounted while textures were loading.
|
||||
if (life.disposed) return;
|
||||
|
||||
// Textures are loaded and the scene graph is built — only now is the canvas
|
||||
// genuinely ready. (This used to fire right after app.init(), so the spinner
|
||||
// resolved onto an empty screen.)
|
||||
isLoading = false;
|
||||
|
||||
// Pan / zoom / parallax + keyboard navigation
|
||||
const panZoom = attachPanZoom(
|
||||
controller,
|
||||
{
|
||||
onTooltipMove: (x, y) => {
|
||||
tooltipX = x;
|
||||
tooltipY = y;
|
||||
},
|
||||
hasHover: () => hoveredNode !== null
|
||||
},
|
||||
life
|
||||
);
|
||||
attachKeyboard(
|
||||
controller,
|
||||
{
|
||||
onToggleStats: toggleStatsPanel,
|
||||
onCloseModal: closeModal,
|
||||
isModalVisible: () => modalVisible,
|
||||
isStatsVisible: () => statsPanelVisible
|
||||
},
|
||||
life
|
||||
);
|
||||
|
||||
// Every star position, the gradient radius, the vignette size and the
|
||||
// dust wrap bounds are baked from app.screen at build time. Without this
|
||||
// a resized window leaves an unlit, starless band.
|
||||
let lastWidth = app.screen.width;
|
||||
let lastHeight = app.screen.height;
|
||||
let resizeFrame = -1;
|
||||
|
||||
function rebuildBackground() {
|
||||
bgLife.dispose();
|
||||
bg.deepBackgroundContainer.destroy({ children: true });
|
||||
bg.nebulaContainer.destroy({ children: true });
|
||||
bg.starContainer.destroy({ children: true });
|
||||
bg.vignette.destroy();
|
||||
|
||||
bgLife = createLifecycle();
|
||||
bg = createBackground(app, isMobile, bgLife);
|
||||
controller.bg = bg;
|
||||
|
||||
// createBackground appends to the stage, so the tree would end up
|
||||
// behind the new layers. Restore it to the top.
|
||||
app.stage.setChildIndex(treeContainer, app.stage.children.length - 1);
|
||||
updateParallax(controller);
|
||||
}
|
||||
});
|
||||
const detachKeyboard = attachKeyboard(controller, {
|
||||
onToggleStats: toggleStatsPanel,
|
||||
onCloseModal: closeModal,
|
||||
isModalVisible: () => modalVisible,
|
||||
isStatsVisible: () => statsPanelVisible
|
||||
});
|
||||
|
||||
// Sequenced entrance animation
|
||||
runEntranceAnimations(controller, {
|
||||
isMobile,
|
||||
onTitleDone: () => {
|
||||
showWelcomeTitle = false;
|
||||
function handleCanvasResize() {
|
||||
resizeFrame = -1;
|
||||
const width = app.screen.width;
|
||||
const height = app.screen.height;
|
||||
if (width === lastWidth && height === lastHeight) return;
|
||||
|
||||
// Keep whatever the user was looking at anchored: shift by half the
|
||||
// delta rather than snapping back to centre and yanking their view.
|
||||
const dx = (width - lastWidth) / 2;
|
||||
const dy = (height - lastHeight) / 2;
|
||||
treeContainer.x += dx;
|
||||
treeContainer.y += dy;
|
||||
controller.initialTreeX += dx;
|
||||
controller.initialTreeY += dy;
|
||||
|
||||
lastWidth = width;
|
||||
lastHeight = height;
|
||||
rebuildBackground();
|
||||
}
|
||||
});
|
||||
|
||||
// Store cleanup functions
|
||||
cleanupFunctions.push(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
detachPanZoom();
|
||||
detachKeyboard();
|
||||
});
|
||||
// Coalesce to one rebuild per frame — resize fires continuously while
|
||||
// dragging a window edge, and a rebuild allocates ~300 Graphics.
|
||||
life.listen(window, 'resize', () => {
|
||||
if (resizeFrame === -1) resizeFrame = requestAnimationFrame(handleCanvasResize);
|
||||
});
|
||||
life.add(() => {
|
||||
if (resizeFrame !== -1) cancelAnimationFrame(resizeFrame);
|
||||
});
|
||||
|
||||
// Sequenced entrance animation
|
||||
runEntranceAnimations(controller, {
|
||||
isMobile,
|
||||
life,
|
||||
onTitleDone: () => {
|
||||
showWelcomeTitle = false;
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
// No WebGL, or a texture failed to load. Don't strand the user on a
|
||||
// spinner that never resolves — reveal the text version instead.
|
||||
console.error('Skill tree failed to initialise:', err);
|
||||
isLoading = false;
|
||||
// Hands off to +page.svelte, which reveals the text version.
|
||||
onRenderFail?.();
|
||||
life.dispose();
|
||||
app.destroy(true, { children: true, texture: true });
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup on component unmount
|
||||
$effect(() => {
|
||||
return () => {
|
||||
cleanupFunctions.forEach((fn) => fn());
|
||||
};
|
||||
return () => life.dispose();
|
||||
});
|
||||
|
||||
// Calculate tooltip position to keep it on screen
|
||||
// Live tooltip element, so flip decisions use its real measured size rather
|
||||
// than a hardcoded 280x120 guess (descriptions vary in length, so the old
|
||||
// height constant mis-flipped tall tooltips near the viewport bottom).
|
||||
let tooltipEl = $state<HTMLDivElement | null>(null);
|
||||
|
||||
const tooltipStyle = $derived.by(() => {
|
||||
let x = tooltipX + 15;
|
||||
let y = tooltipY + 15;
|
||||
const gap = 15;
|
||||
const rect = tooltipEl?.getBoundingClientRect();
|
||||
const width = rect?.width || 280;
|
||||
const height = rect?.height || 120;
|
||||
|
||||
// Keep tooltip on screen
|
||||
const tooltipWidth = 280;
|
||||
const tooltipHeight = 120;
|
||||
let x = tooltipX + gap;
|
||||
let y = tooltipY + gap;
|
||||
|
||||
if (x + tooltipWidth > windowWidth) {
|
||||
x = tooltipX - tooltipWidth - 15;
|
||||
}
|
||||
if (y + tooltipHeight > windowHeight) {
|
||||
y = tooltipY - tooltipHeight - 15;
|
||||
}
|
||||
// Flip to the other side of the cursor rather than overflow the viewport.
|
||||
if (x + width > windowWidth) x = Math.max(0, tooltipX - width - gap);
|
||||
if (y + height > windowHeight) y = Math.max(0, tooltipY - height - gap);
|
||||
|
||||
return `left: ${x}px; top: ${y}px;`;
|
||||
return `transform: translate3d(${x}px, ${y}px, 0);`;
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -239,6 +336,7 @@
|
||||
<!-- Hover Tooltip (hidden on mobile) -->
|
||||
{#if hoveredNode && !modalVisible && !isMobile}
|
||||
<Tooltip
|
||||
bind:element={tooltipEl}
|
||||
node={hoveredNode}
|
||||
style={tooltipStyle}
|
||||
colorHex={categoryColorHex[hoveredNode.category]}
|
||||
|
||||
@@ -1,10 +1,34 @@
|
||||
<script lang="ts">
|
||||
import type { TreeNode } from '$lib/data';
|
||||
|
||||
const { node, style, colorHex }: { node: TreeNode; style: string; colorHex: string } = $props();
|
||||
// `let`, not `const`: bind:this assigns to `element`, and a bindable prop is
|
||||
// only writable when destructured with let.
|
||||
let {
|
||||
node,
|
||||
style,
|
||||
colorHex,
|
||||
element = $bindable(null)
|
||||
}: {
|
||||
node: TreeNode;
|
||||
style: string;
|
||||
colorHex: string;
|
||||
element?: HTMLDivElement | null;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="tooltip" role="tooltip" aria-live="polite" style="{style} --node-color: {colorHex};">
|
||||
<!--
|
||||
aria-hidden: this is a mouse-only visual duplicate of canvas content. It used
|
||||
to carry role="tooltip" + aria-live="polite", which announced the full label,
|
||||
description and "Click for details" on every single hover. Nothing references
|
||||
it via aria-describedby either — the trigger is a WebGL sprite with no DOM
|
||||
node — so the role was inert anyway. The accessible path is the text version.
|
||||
-->
|
||||
<div
|
||||
bind:this={element}
|
||||
class="tooltip"
|
||||
aria-hidden="true"
|
||||
style="{style} --node-color: {colorHex};"
|
||||
>
|
||||
<h3>
|
||||
{#if node.icon}
|
||||
<img src={node.icon} alt="" class="tooltip-icon" />
|
||||
@@ -18,6 +42,12 @@
|
||||
<style>
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
/* Positioned via translate3d, not left/top: moving on the compositor
|
||||
avoids a layout+paint per frame on an element with two color-mix
|
||||
shadows. The offsets live in the transform, so these stay at 0. */
|
||||
top: 0;
|
||||
left: 0;
|
||||
will-change: transform;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, #12121a 100%);
|
||||
border: 1px solid var(--node-color);
|
||||
border-radius: 8px;
|
||||
|
||||
+195
-186
@@ -6,9 +6,11 @@ import { gsap } from 'gsap';
|
||||
import { getDistanceFromOrigin } from '$lib/utils/tree';
|
||||
import { updateParallax } from './interaction';
|
||||
import type { SkillTreeController } from './controller';
|
||||
import type { Lifecycle } from './lifecycle';
|
||||
|
||||
interface EntranceOpts {
|
||||
isMobile: boolean;
|
||||
life: Lifecycle;
|
||||
/** Called when the welcome title should be removed (matches its CSS fade). */
|
||||
onTitleDone: () => void;
|
||||
}
|
||||
@@ -22,201 +24,208 @@ export function runEntranceAnimations(ctrl: SkillTreeController, opts: EntranceO
|
||||
const zoomDuration = isMobile ? 2.5 : 4.5;
|
||||
const nodeStagger = isMobile ? 0.05 : 0.08;
|
||||
|
||||
// Hide all lines and plasma beams initially
|
||||
lineObjects.forEach((line) => {
|
||||
line.graphics.alpha = 0;
|
||||
line.glowGraphics.alpha = 0;
|
||||
line.plasmaBeam.alpha = 0;
|
||||
});
|
||||
|
||||
// Hide all nodes initially
|
||||
nodeObjects.forEach((obj) => {
|
||||
obj.graphics.alpha = 0;
|
||||
obj.graphics.scale.set(0.5);
|
||||
obj.glowGraphics.alpha = 0;
|
||||
});
|
||||
|
||||
// Sort by distance from origin
|
||||
const sortedNodes = [...nodeObjects].sort(
|
||||
(a, b) => getDistanceFromOrigin(a.node) - getDistanceFromOrigin(b.node)
|
||||
);
|
||||
const sortedLines = [...lineObjects].sort(
|
||||
(a, b) => getDistanceFromOrigin(a.node) - getDistanceFromOrigin(b.node)
|
||||
);
|
||||
|
||||
// STEP 1: After title fades, show origin node first (overlap on mobile)
|
||||
const originNode = sortedNodes.find((obj) => obj.node.id === 'origin');
|
||||
const originDelay = isMobile ? titleDuration - 0.5 : titleDuration;
|
||||
const originDuration = isMobile ? 0.3 : 0.6;
|
||||
|
||||
if (originNode && isMobile) {
|
||||
originNode.graphics.scale.set(0.8); // Start slightly larger
|
||||
}
|
||||
|
||||
if (originNode) {
|
||||
gsap.to(originNode.graphics, {
|
||||
alpha: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'power2.out'
|
||||
// The entrance allocates ~340 finite tweens plus ~170 `repeat: -1` pulses,
|
||||
// some created inside an onComplete. GSAP restores an animation's context
|
||||
// while running its callbacks, so wrapping the whole sequence here makes
|
||||
// even those late-created pulses killable via the lifecycle.
|
||||
opts.life.animate(() => {
|
||||
// Hide all lines and plasma beams initially
|
||||
lineObjects.forEach((line) => {
|
||||
line.graphics.alpha = 0;
|
||||
line.glowGraphics.alpha = 0;
|
||||
line.plasmaBeam.alpha = 0;
|
||||
});
|
||||
gsap.to(originNode.graphics.scale, {
|
||||
x: 1,
|
||||
y: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'back.out(1.7)',
|
||||
onComplete: () => {
|
||||
if (originNode.graphics instanceof Container) {
|
||||
originNode.graphics.eventMode = 'static';
|
||||
|
||||
// Hide all nodes initially
|
||||
nodeObjects.forEach((obj) => {
|
||||
obj.graphics.alpha = 0;
|
||||
obj.graphics.scale.set(0.5);
|
||||
obj.glowGraphics.alpha = 0;
|
||||
});
|
||||
|
||||
// Sort by distance from origin
|
||||
const sortedNodes = [...nodeObjects].sort(
|
||||
(a, b) => getDistanceFromOrigin(a.node) - getDistanceFromOrigin(b.node)
|
||||
);
|
||||
const sortedLines = [...lineObjects].sort(
|
||||
(a, b) => getDistanceFromOrigin(a.node) - getDistanceFromOrigin(b.node)
|
||||
);
|
||||
|
||||
// STEP 1: After title fades, show origin node first (overlap on mobile)
|
||||
const originNode = sortedNodes.find((obj) => obj.node.id === 'origin');
|
||||
const originDelay = isMobile ? titleDuration - 0.5 : titleDuration;
|
||||
const originDuration = isMobile ? 0.3 : 0.6;
|
||||
|
||||
if (originNode && isMobile) {
|
||||
originNode.graphics.scale.set(0.8); // Start slightly larger
|
||||
}
|
||||
|
||||
if (originNode) {
|
||||
gsap.to(originNode.graphics, {
|
||||
alpha: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
gsap.to(originNode.graphics.scale, {
|
||||
x: 1,
|
||||
y: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'back.out(1.7)',
|
||||
onComplete: () => {
|
||||
if (originNode.graphics instanceof Container) {
|
||||
originNode.graphics.eventMode = 'static';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
gsap.to(originNode.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
}
|
||||
|
||||
// STEP 2: Start zoom out after origin appears
|
||||
const zoomDelay = isMobile ? titleDuration - 0.3 : titleDuration + 0.3;
|
||||
|
||||
gsap.to(treeContainer.scale, {
|
||||
x: endScale,
|
||||
y: endScale,
|
||||
duration: zoomDuration,
|
||||
delay: zoomDelay,
|
||||
ease: 'power1.out',
|
||||
onUpdate: () => updateParallax(ctrl)
|
||||
});
|
||||
gsap.to(originNode.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: originDuration,
|
||||
delay: originDelay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
}
|
||||
|
||||
// STEP 2: Start zoom out after origin appears
|
||||
const zoomDelay = isMobile ? titleDuration - 0.3 : titleDuration + 0.3;
|
||||
// STEP 3: Animate in the rest of the nodes (excluding origin)
|
||||
const otherNodes = sortedNodes.filter((obj) => obj.node.id !== 'origin');
|
||||
const nodeStartDelay = isMobile ? titleDuration - 0.2 : titleDuration + 0.5;
|
||||
|
||||
gsap.to(treeContainer.scale, {
|
||||
x: endScale,
|
||||
y: endScale,
|
||||
duration: zoomDuration,
|
||||
delay: zoomDelay,
|
||||
ease: 'power1.out',
|
||||
onUpdate: () => updateParallax(ctrl)
|
||||
});
|
||||
otherNodes.forEach((obj, index) => {
|
||||
const delay = nodeStartDelay + index * nodeStagger;
|
||||
|
||||
// STEP 3: Animate in the rest of the nodes (excluding origin)
|
||||
const otherNodes = sortedNodes.filter((obj) => obj.node.id !== 'origin');
|
||||
const nodeStartDelay = isMobile ? titleDuration - 0.2 : titleDuration + 0.5;
|
||||
|
||||
otherNodes.forEach((obj, index) => {
|
||||
const delay = nodeStartDelay + index * nodeStagger;
|
||||
|
||||
gsap.to(obj.graphics, {
|
||||
alpha: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
gsap.to(obj.graphics.scale, {
|
||||
x: 1,
|
||||
y: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'back.out(1.7)',
|
||||
onComplete: () => {
|
||||
if (obj.graphics instanceof Container) {
|
||||
obj.graphics.eventMode = 'static';
|
||||
gsap.to(obj.graphics, {
|
||||
alpha: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
gsap.to(obj.graphics.scale, {
|
||||
x: 1,
|
||||
y: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'back.out(1.7)',
|
||||
onComplete: () => {
|
||||
if (obj.graphics instanceof Container) {
|
||||
obj.graphics.eventMode = 'static';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
gsap.to(obj.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
gsap.to(obj.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: 0.5,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// Start ambient pulse after node appears
|
||||
gsap.to(obj.glowGraphics.scale, {
|
||||
x: 1.4,
|
||||
y: 1.4,
|
||||
duration: 2 + Math.random() * 1,
|
||||
delay: delay + 0.5,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
});
|
||||
|
||||
// Start ambient pulse after node appears
|
||||
gsap.to(obj.glowGraphics.scale, {
|
||||
x: 1.4,
|
||||
y: 1.4,
|
||||
duration: 2 + Math.random() * 1,
|
||||
delay: delay + 0.5,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
// Start origin pulse too
|
||||
if (originNode) {
|
||||
gsap.to(originNode.glowGraphics.scale, {
|
||||
x: 1.4,
|
||||
y: 1.4,
|
||||
duration: 2 + Math.random() * 1,
|
||||
delay: titleDuration + 1,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
}
|
||||
|
||||
// STEP 4: Animate lines and plasma beams as nodes appear
|
||||
const lineStartDelay = isMobile ? titleDuration - 0.3 : titleDuration + 0.4;
|
||||
|
||||
sortedLines.forEach((line, index) => {
|
||||
const delay = lineStartDelay + index * nodeStagger;
|
||||
|
||||
// Core line appears first
|
||||
gsap.to(line.graphics, {
|
||||
alpha: 1,
|
||||
duration: 0.4,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// Base glow appears with line
|
||||
gsap.to(line.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: 0.6,
|
||||
delay: delay + 0.1,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// Plasma beam fades in, then breathes continuously
|
||||
gsap.to(line.plasmaBeam, {
|
||||
alpha: 1,
|
||||
duration: 0.8,
|
||||
delay: delay + 0.2,
|
||||
ease: 'power2.out',
|
||||
onComplete: () => {
|
||||
const pulseDuration = 2.0 + Math.random() * 1.0; // Vary pulse speed
|
||||
const minAlpha = 0.6 * line.intensity; // Minimum brightness - stays visible
|
||||
|
||||
gsap.to(line.plasmaBeam, {
|
||||
alpha: minAlpha,
|
||||
duration: pulseDuration,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
|
||||
const glowMinAlpha = 0.12 * line.intensity;
|
||||
gsap.to(line.glowGraphics, {
|
||||
alpha: glowMinAlpha,
|
||||
duration: pulseDuration * 1.2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up title card after animation (matches titleDuration)
|
||||
const titleTimer = setTimeout(
|
||||
() => {
|
||||
opts.onTitleDone();
|
||||
},
|
||||
isMobile ? 1500 : 2500
|
||||
);
|
||||
opts.life.add(() => clearTimeout(titleTimer));
|
||||
|
||||
// Fade in stats panel toggle button with the tree
|
||||
const toggleButton = document.querySelector('.stats-panel-toggle');
|
||||
if (toggleButton) {
|
||||
gsap.to(toggleButton, {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
delay: nodeStartDelay + otherNodes.length * nodeStagger * 0.5, // midway through node animation
|
||||
ease: 'power2.out'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Start origin pulse too
|
||||
if (originNode) {
|
||||
gsap.to(originNode.glowGraphics.scale, {
|
||||
x: 1.4,
|
||||
y: 1.4,
|
||||
duration: 2 + Math.random() * 1,
|
||||
delay: titleDuration + 1,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
}
|
||||
|
||||
// STEP 4: Animate lines and plasma beams as nodes appear
|
||||
const lineStartDelay = isMobile ? titleDuration - 0.3 : titleDuration + 0.4;
|
||||
|
||||
sortedLines.forEach((line, index) => {
|
||||
const delay = lineStartDelay + index * nodeStagger;
|
||||
|
||||
// Core line appears first
|
||||
gsap.to(line.graphics, {
|
||||
alpha: 1,
|
||||
duration: 0.4,
|
||||
delay,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// Base glow appears with line
|
||||
gsap.to(line.glowGraphics, {
|
||||
alpha: 1,
|
||||
duration: 0.6,
|
||||
delay: delay + 0.1,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// Plasma beam fades in, then breathes continuously
|
||||
gsap.to(line.plasmaBeam, {
|
||||
alpha: 1,
|
||||
duration: 0.8,
|
||||
delay: delay + 0.2,
|
||||
ease: 'power2.out',
|
||||
onComplete: () => {
|
||||
const pulseDuration = 2.0 + Math.random() * 1.0; // Vary pulse speed
|
||||
const minAlpha = 0.6 * line.intensity; // Minimum brightness - stays visible
|
||||
|
||||
gsap.to(line.plasmaBeam, {
|
||||
alpha: minAlpha,
|
||||
duration: pulseDuration,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
|
||||
const glowMinAlpha = 0.12 * line.intensity;
|
||||
gsap.to(line.glowGraphics, {
|
||||
alpha: glowMinAlpha,
|
||||
duration: pulseDuration * 1.2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up title card after animation (matches titleDuration)
|
||||
setTimeout(
|
||||
() => {
|
||||
opts.onTitleDone();
|
||||
},
|
||||
isMobile ? 1500 : 2500
|
||||
);
|
||||
|
||||
// Fade in stats panel toggle button with the tree
|
||||
const toggleButton = document.querySelector('.stats-panel-toggle');
|
||||
if (toggleButton) {
|
||||
gsap.to(toggleButton, {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
delay: nodeStartDelay + otherNodes.length * nodeStagger * 0.5, // midway through node animation
|
||||
ease: 'power2.out'
|
||||
});
|
||||
}
|
||||
}
|
||||
+228
-217
@@ -6,9 +6,15 @@ import { gsap } from 'gsap';
|
||||
import { nebulaPalette } from '$lib/theme';
|
||||
import { PARTICLE_COUNTS, byDevice } from '$lib/config';
|
||||
import type { BackgroundLayers } from './types';
|
||||
import type { Lifecycle } from './lifecycle';
|
||||
|
||||
export function createBackground(app: Application, isMobile: boolean): BackgroundLayers {
|
||||
export function createBackground(
|
||||
app: Application,
|
||||
isMobile: boolean,
|
||||
life: Lifecycle
|
||||
): BackgroundLayers {
|
||||
const deepBackgroundContainer = new Container();
|
||||
let vignette!: Graphics;
|
||||
const nebulaContainer = new Container();
|
||||
const starContainer = new Container();
|
||||
|
||||
@@ -16,238 +22,243 @@ export function createBackground(app: Application, isMobile: boolean): Backgroun
|
||||
app.stage.addChild(nebulaContainer);
|
||||
app.stage.addChild(starContainer);
|
||||
|
||||
const screenWidth = app.screen.width;
|
||||
const screenHeight = app.screen.height;
|
||||
const centerX = screenWidth / 2;
|
||||
const centerY = screenHeight / 2;
|
||||
// Everything below allocates `repeat: -1` ambient tweens; building it inside
|
||||
// the lifecycle's GSAP context makes all of them killable on teardown.
|
||||
life.animate(() => {
|
||||
const screenWidth = app.screen.width;
|
||||
const screenHeight = app.screen.height;
|
||||
const centerX = screenWidth / 2;
|
||||
const centerY = screenHeight / 2;
|
||||
|
||||
// ========== DEEP SPACE GRADIENT ==========
|
||||
const spaceGradient = new Graphics();
|
||||
const gradientRadius = Math.max(screenWidth, screenHeight);
|
||||
// ========== DEEP SPACE GRADIENT ==========
|
||||
const spaceGradient = new Graphics();
|
||||
const gradientRadius = Math.max(screenWidth, screenHeight);
|
||||
|
||||
const gradientSteps = 15;
|
||||
for (let i = gradientSteps; i >= 0; i--) {
|
||||
const ratio = i / gradientSteps;
|
||||
const radius = gradientRadius * (0.3 + ratio * 0.7);
|
||||
const gradientSteps = 15;
|
||||
for (let i = gradientSteps; i >= 0; i--) {
|
||||
const ratio = i / gradientSteps;
|
||||
const radius = gradientRadius * (0.3 + ratio * 0.7);
|
||||
|
||||
const r = Math.floor(8 * (1 - ratio));
|
||||
const g = Math.floor(6 * (1 - ratio));
|
||||
const b = Math.floor(20 * (1 - ratio));
|
||||
const color = (r << 16) + (g << 8) + b;
|
||||
const r = Math.floor(8 * (1 - ratio));
|
||||
const g = Math.floor(6 * (1 - ratio));
|
||||
const b = Math.floor(20 * (1 - ratio));
|
||||
const color = (r << 16) + (g << 8) + b;
|
||||
|
||||
spaceGradient.circle(centerX, centerY, radius).fill({ color, alpha: 0.8 });
|
||||
}
|
||||
deepBackgroundContainer.addChild(spaceGradient);
|
||||
spaceGradient.circle(centerX, centerY, radius).fill({ color, alpha: 0.8 });
|
||||
}
|
||||
deepBackgroundContainer.addChild(spaceGradient);
|
||||
|
||||
// ========== NEBULA CLOUDS ==========
|
||||
const nebulaColors = nebulaPalette;
|
||||
// ========== NEBULA CLOUDS ==========
|
||||
const nebulaColors = nebulaPalette;
|
||||
|
||||
nebulaColors.forEach((nebula, index) => {
|
||||
const angle = (index / nebulaColors.length) * Math.PI * 2 + Math.PI / 4;
|
||||
const distance = Math.min(screenWidth, screenHeight) * 0.35;
|
||||
const baseX = centerX + Math.cos(angle) * distance;
|
||||
const baseY = centerY + Math.sin(angle) * distance;
|
||||
nebulaColors.forEach((nebula, index) => {
|
||||
const angle = (index / nebulaColors.length) * Math.PI * 2 + Math.PI / 4;
|
||||
const distance = Math.min(screenWidth, screenHeight) * 0.35;
|
||||
const baseX = centerX + Math.cos(angle) * distance;
|
||||
const baseY = centerY + Math.sin(angle) * distance;
|
||||
|
||||
const nebulaCloud = new Graphics();
|
||||
const nebulaCloud = new Graphics();
|
||||
|
||||
// Outer very faint glow
|
||||
const outerSize = 200 + Math.random() * 150;
|
||||
for (let layer = 5; layer >= 0; layer--) {
|
||||
const layerRatio = layer / 5;
|
||||
const size = outerSize * (0.4 + layerRatio * 0.6);
|
||||
const alpha = 0.02 * (1 - layerRatio);
|
||||
nebulaCloud.circle(0, 0, size).fill({ color: nebula.color, alpha });
|
||||
// Outer very faint glow
|
||||
const outerSize = 200 + Math.random() * 150;
|
||||
for (let layer = 5; layer >= 0; layer--) {
|
||||
const layerRatio = layer / 5;
|
||||
const size = outerSize * (0.4 + layerRatio * 0.6);
|
||||
const alpha = 0.02 * (1 - layerRatio);
|
||||
nebulaCloud.circle(0, 0, size).fill({ color: nebula.color, alpha });
|
||||
}
|
||||
|
||||
// Irregular blobs for a more organic look
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const offsetX = (Math.random() - 0.5) * 100;
|
||||
const offsetY = (Math.random() - 0.5) * 100;
|
||||
const blobSize = 60 + Math.random() * 80;
|
||||
|
||||
for (let layer = 3; layer >= 0; layer--) {
|
||||
const layerRatio = layer / 3;
|
||||
const size = blobSize * (0.5 + layerRatio * 0.5);
|
||||
const alpha = 0.03 * (1 - layerRatio);
|
||||
nebulaCloud.circle(offsetX, offsetY, size).fill({ color: nebula.color, alpha });
|
||||
}
|
||||
}
|
||||
|
||||
nebulaCloud.x = baseX;
|
||||
nebulaCloud.y = baseY;
|
||||
nebulaContainer.addChild(nebulaCloud);
|
||||
|
||||
// Animate nebula pulsing
|
||||
gsap.to(nebulaCloud, {
|
||||
alpha: 0.6,
|
||||
duration: 3 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
|
||||
gsap.to(nebulaCloud.scale, {
|
||||
x: 1.1,
|
||||
y: 1.1,
|
||||
duration: 4 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
});
|
||||
|
||||
// ========== DISTANT STAR FIELD ==========
|
||||
// Layer 1: Tiny distant stars (many, dim)
|
||||
const distantStarCount = byDevice(PARTICLE_COUNTS.distantStars, isMobile);
|
||||
for (let i = 0; i < distantStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 1 + 0.5;
|
||||
const alpha = Math.random() * 0.4 + 0.1;
|
||||
|
||||
star.circle(0, 0, size).fill({ color: 0xffffff, alpha });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star, {
|
||||
alpha: alpha * 0.3,
|
||||
duration: 1 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 3
|
||||
});
|
||||
}
|
||||
|
||||
// Irregular blobs for a more organic look
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const offsetX = (Math.random() - 0.5) * 100;
|
||||
const offsetY = (Math.random() - 0.5) * 100;
|
||||
const blobSize = 60 + Math.random() * 80;
|
||||
// Layer 2: Medium stars with colour tints
|
||||
const mediumStarCount = byDevice(PARTICLE_COUNTS.mediumStars, isMobile);
|
||||
const starTints = [0xffffff, 0xfff8e7, 0xe7f0ff, 0xffe7e7, 0xe7ffe7];
|
||||
|
||||
for (let layer = 3; layer >= 0; layer--) {
|
||||
const layerRatio = layer / 3;
|
||||
const size = blobSize * (0.5 + layerRatio * 0.5);
|
||||
const alpha = 0.03 * (1 - layerRatio);
|
||||
nebulaCloud.circle(offsetX, offsetY, size).fill({ color: nebula.color, alpha });
|
||||
for (let i = 0; i < mediumStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 1.5 + 1;
|
||||
const alpha = Math.random() * 0.5 + 0.3;
|
||||
const tint = starTints[Math.floor(Math.random() * starTints.length)];
|
||||
|
||||
star.circle(0, 0, size + 2).fill({ color: tint, alpha: alpha * 0.2 });
|
||||
star.circle(0, 0, size).fill({ color: tint, alpha });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star, {
|
||||
alpha: alpha * 0.4,
|
||||
duration: 0.5 + Math.random() * 1.5,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// Layer 3: Bright feature stars (few, prominent)
|
||||
const brightStarCount = byDevice(PARTICLE_COUNTS.brightStars, isMobile);
|
||||
for (let i = 0; i < brightStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 2 + 1.5;
|
||||
const tint = starTints[Math.floor(Math.random() * starTints.length)];
|
||||
|
||||
star.circle(0, 0, size + 6).fill({ color: tint, alpha: 0.05 });
|
||||
star.circle(0, 0, size + 3).fill({ color: tint, alpha: 0.1 });
|
||||
star.circle(0, 0, size).fill({ color: 0xffffff, alpha: 0.9 });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star.scale, {
|
||||
x: 1.3,
|
||||
y: 1.3,
|
||||
duration: 2 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// ========== FLOATING DUST PARTICLES ==========
|
||||
const dustParticles: Array<{ graphics: Graphics; vx: number; vy: number }> = [];
|
||||
const dustCount = byDevice(PARTICLE_COUNTS.dust, isMobile);
|
||||
|
||||
for (let i = 0; i < dustCount; i++) {
|
||||
const dust = new Graphics();
|
||||
const size = Math.random() * 2 + 1;
|
||||
const colorIndex = Math.floor(Math.random() * nebulaColors.length);
|
||||
const color = nebulaColors[colorIndex].color;
|
||||
|
||||
dust.circle(0, 0, size + 4).fill({ color, alpha: 0.05 });
|
||||
dust.circle(0, 0, size + 2).fill({ color, alpha: 0.08 });
|
||||
dust.circle(0, 0, size).fill({ color, alpha: 0.15 });
|
||||
|
||||
dust.x = Math.random() * screenWidth;
|
||||
dust.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(dust);
|
||||
|
||||
dustParticles.push({
|
||||
graphics: dust,
|
||||
vx: (Math.random() - 0.5) * 0.2,
|
||||
vy: (Math.random() - 0.5) * 0.2
|
||||
});
|
||||
|
||||
gsap.to(dust, {
|
||||
alpha: 0.3,
|
||||
duration: 3 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// Animate dust particles drifting. Named function + indexed loop: `forEach`
|
||||
// with an inline arrow allocated a fresh closure on every frame.
|
||||
function driftDust() {
|
||||
for (let i = 0; i < dustParticles.length; i++) {
|
||||
const p = dustParticles[i];
|
||||
const g = p.graphics;
|
||||
g.x += p.vx;
|
||||
g.y += p.vy;
|
||||
|
||||
if (g.x < -20) g.x = screenWidth + 20;
|
||||
else if (g.x > screenWidth + 20) g.x = -20;
|
||||
if (g.y < -20) g.y = screenHeight + 20;
|
||||
else if (g.y > screenHeight + 20) g.y = -20;
|
||||
}
|
||||
}
|
||||
app.ticker.add(driftDust);
|
||||
life.add(() => app.ticker.remove(driftDust));
|
||||
|
||||
nebulaCloud.x = baseX;
|
||||
nebulaCloud.y = baseY;
|
||||
nebulaContainer.addChild(nebulaCloud);
|
||||
// ========== VIGNETTE OVERLAY ==========
|
||||
vignette = new Graphics();
|
||||
const vignetteSize = Math.max(screenWidth, screenHeight) * 1.2;
|
||||
|
||||
// Animate nebula pulsing
|
||||
gsap.to(nebulaCloud, {
|
||||
alpha: 0.6,
|
||||
duration: 3 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
for (let i = 12; i >= 0; i--) {
|
||||
const ratio = i / 12;
|
||||
const radius = vignetteSize * (0.4 + ratio * 0.6);
|
||||
const alpha = ratio * ratio * 0.4;
|
||||
vignette.circle(centerX, centerY, radius).fill({ color: 0x000000, alpha });
|
||||
}
|
||||
app.stage.addChild(vignette);
|
||||
|
||||
gsap.to(nebulaCloud.scale, {
|
||||
x: 1.1,
|
||||
y: 1.1,
|
||||
duration: 4 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
// The gradient (16 fills) and vignette (13 fills) are near-full-screen and
|
||||
// never change — bake them to a texture instead of recompositing every frame.
|
||||
deepBackgroundContainer.cacheAsTexture(true);
|
||||
vignette.cacheAsTexture(true);
|
||||
|
||||
// Nothing in the background is clickable; skip it during hit-testing.
|
||||
deepBackgroundContainer.interactiveChildren = false;
|
||||
nebulaContainer.interactiveChildren = false;
|
||||
starContainer.interactiveChildren = false;
|
||||
vignette.eventMode = 'none';
|
||||
});
|
||||
|
||||
// ========== DISTANT STAR FIELD ==========
|
||||
// Layer 1: Tiny distant stars (many, dim)
|
||||
const distantStarCount = byDevice(PARTICLE_COUNTS.distantStars, isMobile);
|
||||
for (let i = 0; i < distantStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 1 + 0.5;
|
||||
const alpha = Math.random() * 0.4 + 0.1;
|
||||
|
||||
star.circle(0, 0, size).fill({ color: 0xffffff, alpha });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star, {
|
||||
alpha: alpha * 0.3,
|
||||
duration: 1 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 3
|
||||
});
|
||||
}
|
||||
|
||||
// Layer 2: Medium stars with colour tints
|
||||
const mediumStarCount = byDevice(PARTICLE_COUNTS.mediumStars, isMobile);
|
||||
const starTints = [0xffffff, 0xfff8e7, 0xe7f0ff, 0xffe7e7, 0xe7ffe7];
|
||||
|
||||
for (let i = 0; i < mediumStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 1.5 + 1;
|
||||
const alpha = Math.random() * 0.5 + 0.3;
|
||||
const tint = starTints[Math.floor(Math.random() * starTints.length)];
|
||||
|
||||
star.circle(0, 0, size + 2).fill({ color: tint, alpha: alpha * 0.2 });
|
||||
star.circle(0, 0, size).fill({ color: tint, alpha });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star, {
|
||||
alpha: alpha * 0.4,
|
||||
duration: 0.5 + Math.random() * 1.5,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// Layer 3: Bright feature stars (few, prominent)
|
||||
const brightStarCount = byDevice(PARTICLE_COUNTS.brightStars, isMobile);
|
||||
for (let i = 0; i < brightStarCount; i++) {
|
||||
const star = new Graphics();
|
||||
const size = Math.random() * 2 + 1.5;
|
||||
const tint = starTints[Math.floor(Math.random() * starTints.length)];
|
||||
|
||||
star.circle(0, 0, size + 6).fill({ color: tint, alpha: 0.05 });
|
||||
star.circle(0, 0, size + 3).fill({ color: tint, alpha: 0.1 });
|
||||
star.circle(0, 0, size).fill({ color: 0xffffff, alpha: 0.9 });
|
||||
|
||||
star.x = Math.random() * screenWidth;
|
||||
star.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(star);
|
||||
|
||||
gsap.to(star.scale, {
|
||||
x: 1.3,
|
||||
y: 1.3,
|
||||
duration: 2 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// ========== FLOATING DUST PARTICLES ==========
|
||||
const dustParticles: Array<{ graphics: Graphics; vx: number; vy: number }> = [];
|
||||
const dustCount = byDevice(PARTICLE_COUNTS.dust, isMobile);
|
||||
|
||||
for (let i = 0; i < dustCount; i++) {
|
||||
const dust = new Graphics();
|
||||
const size = Math.random() * 2 + 1;
|
||||
const colorIndex = Math.floor(Math.random() * nebulaColors.length);
|
||||
const color = nebulaColors[colorIndex].color;
|
||||
|
||||
dust.circle(0, 0, size + 4).fill({ color, alpha: 0.05 });
|
||||
dust.circle(0, 0, size + 2).fill({ color, alpha: 0.08 });
|
||||
dust.circle(0, 0, size).fill({ color, alpha: 0.15 });
|
||||
|
||||
dust.x = Math.random() * screenWidth;
|
||||
dust.y = Math.random() * screenHeight;
|
||||
starContainer.addChild(dust);
|
||||
|
||||
dustParticles.push({
|
||||
graphics: dust,
|
||||
vx: (Math.random() - 0.5) * 0.2,
|
||||
vy: (Math.random() - 0.5) * 0.2
|
||||
});
|
||||
|
||||
gsap.to(dust, {
|
||||
alpha: 0.3,
|
||||
duration: 3 + Math.random() * 2,
|
||||
ease: 'sine.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
delay: Math.random() * 2
|
||||
});
|
||||
}
|
||||
|
||||
// Animate dust particles drifting. Named function + indexed loop: `forEach`
|
||||
// with an inline arrow allocated a fresh closure on every frame.
|
||||
function driftDust() {
|
||||
for (let i = 0; i < dustParticles.length; i++) {
|
||||
const p = dustParticles[i];
|
||||
const g = p.graphics;
|
||||
g.x += p.vx;
|
||||
g.y += p.vy;
|
||||
|
||||
if (g.x < -20) g.x = screenWidth + 20;
|
||||
else if (g.x > screenWidth + 20) g.x = -20;
|
||||
if (g.y < -20) g.y = screenHeight + 20;
|
||||
else if (g.y > screenHeight + 20) g.y = -20;
|
||||
}
|
||||
}
|
||||
app.ticker.add(driftDust);
|
||||
|
||||
// ========== VIGNETTE OVERLAY ==========
|
||||
const vignette = new Graphics();
|
||||
const vignetteSize = Math.max(screenWidth, screenHeight) * 1.2;
|
||||
|
||||
for (let i = 12; i >= 0; i--) {
|
||||
const ratio = i / 12;
|
||||
const radius = vignetteSize * (0.4 + ratio * 0.6);
|
||||
const alpha = ratio * ratio * 0.4;
|
||||
vignette.circle(centerX, centerY, radius).fill({ color: 0x000000, alpha });
|
||||
}
|
||||
app.stage.addChild(vignette);
|
||||
|
||||
// The gradient (16 fills) and vignette (13 fills) are near-full-screen and
|
||||
// never change — bake them to a texture instead of recompositing every frame.
|
||||
deepBackgroundContainer.cacheAsTexture(true);
|
||||
vignette.cacheAsTexture(true);
|
||||
|
||||
// Nothing in the background is clickable; skip it during hit-testing.
|
||||
deepBackgroundContainer.interactiveChildren = false;
|
||||
nebulaContainer.interactiveChildren = false;
|
||||
starContainer.interactiveChildren = false;
|
||||
vignette.eventMode = 'none';
|
||||
|
||||
return { deepBackgroundContainer, nebulaContainer, starContainer };
|
||||
return { deepBackgroundContainer, nebulaContainer, starContainer, vignette };
|
||||
}
|
||||
+97
-47
@@ -6,6 +6,7 @@
|
||||
import { gsap } from 'gsap';
|
||||
import { ZOOM, PARALLAX, PAN_SPEED } from '$lib/config';
|
||||
import type { SkillTreeController } from './controller';
|
||||
import type { Lifecycle } from './lifecycle';
|
||||
|
||||
/** Offset the background layers behind the tree to create parallax depth. */
|
||||
export function updateParallax(ctrl: SkillTreeController) {
|
||||
@@ -25,16 +26,31 @@ export function updateParallax(ctrl: SkillTreeController) {
|
||||
|
||||
interface PanZoomOpts {
|
||||
onTooltipMove: (x: number, y: number) => void;
|
||||
/** Tooltip coords are only worth computing while a node is actually hovered. */
|
||||
hasHover: () => boolean;
|
||||
}
|
||||
|
||||
/** Wire mouse/touch/wheel pan + zoom. Returns a cleanup for window listeners. */
|
||||
export function attachPanZoom(ctrl: SkillTreeController, opts: PanZoomOpts): () => void {
|
||||
export interface PanZoomHandle {
|
||||
/**
|
||||
* Push the current pointer position to the tooltip immediately. Needed on
|
||||
* hover-start: the move handler below only writes state while a node is
|
||||
* hovered, so without this the first hover would render at stale coords.
|
||||
*/
|
||||
flushTooltip: () => void;
|
||||
}
|
||||
|
||||
/** Wire mouse/touch/wheel pan + zoom. Every listener is owned by `life`. */
|
||||
export function attachPanZoom(
|
||||
ctrl: SkillTreeController,
|
||||
opts: PanZoomOpts,
|
||||
life: Lifecycle
|
||||
): PanZoomHandle {
|
||||
const { app, treeContainer } = ctrl;
|
||||
const minZoom = ZOOM.min;
|
||||
const maxZoom = ZOOM.max;
|
||||
|
||||
// ===== MOUSE PANNING =====
|
||||
app.canvas.addEventListener('mousedown', (e: MouseEvent) => {
|
||||
life.listen(app.canvas, 'mousedown', (e: MouseEvent) => {
|
||||
ctrl.isDragging = true;
|
||||
ctrl.hasMoved = false;
|
||||
ctrl.dragStartX = e.clientX;
|
||||
@@ -55,23 +71,47 @@ export function attachPanZoom(ctrl: SkillTreeController, opts: PanZoomOpts): ()
|
||||
treeContainer.y = ctrl.containerStartY + dy;
|
||||
updateParallax(ctrl);
|
||||
};
|
||||
window.addEventListener('mousemove', onWindowMouseMove);
|
||||
life.listen(window, 'mousemove', onWindowMouseMove);
|
||||
|
||||
const onWindowMouseUp = () => {
|
||||
ctrl.isDragging = false;
|
||||
app.canvas.style.cursor = 'grab';
|
||||
};
|
||||
window.addEventListener('mouseup', onWindowMouseUp);
|
||||
life.listen(window, 'mouseup', onWindowMouseUp);
|
||||
|
||||
app.canvas.style.cursor = 'grab';
|
||||
|
||||
// Track mouse position for tooltip
|
||||
app.canvas.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
opts.onTooltipMove(e.clientX, e.clientY);
|
||||
// Track mouse position for the tooltip.
|
||||
//
|
||||
// Three things matter here. It is gated on `hasHover()` so moving the mouse
|
||||
// across empty canvas costs nothing (this previously wrote Svelte state on
|
||||
// every single mousemove, hovered or not). It coalesces to one write per
|
||||
// frame instead of one per pointer event. And it listens on `window`, not the
|
||||
// canvas, so coordinates keep updating when a drag leaves the canvas bounds.
|
||||
let tooltipFrame = -1;
|
||||
let tooltipPointerX = 0;
|
||||
let tooltipPointerY = 0;
|
||||
|
||||
const flushTooltip = () => {
|
||||
tooltipFrame = -1;
|
||||
opts.onTooltipMove(tooltipPointerX, tooltipPointerY);
|
||||
};
|
||||
|
||||
life.listen(window, 'mousemove', (e: MouseEvent) => {
|
||||
// Raw coords are always tracked — two plain number writes, negligible.
|
||||
// What was expensive, and is now gated, is writing Svelte state.
|
||||
tooltipPointerX = e.clientX;
|
||||
tooltipPointerY = e.clientY;
|
||||
if (!opts.hasHover()) return;
|
||||
if (tooltipFrame === -1) tooltipFrame = requestAnimationFrame(flushTooltip);
|
||||
});
|
||||
life.add(() => {
|
||||
if (tooltipFrame !== -1) cancelAnimationFrame(tooltipFrame);
|
||||
});
|
||||
|
||||
// ===== TOUCH PANNING & PINCH ZOOM =====
|
||||
app.canvas.addEventListener(
|
||||
life.listen(
|
||||
app.canvas,
|
||||
'touchstart',
|
||||
(e: TouchEvent) => {
|
||||
if (e.touches.length === 1) {
|
||||
@@ -94,7 +134,8 @@ export function attachPanZoom(ctrl: SkillTreeController, opts: PanZoomOpts): ()
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
app.canvas.addEventListener(
|
||||
life.listen(
|
||||
app.canvas,
|
||||
'touchmove',
|
||||
(e: TouchEvent) => {
|
||||
if (e.touches.length === 1 && ctrl.isDragging && !ctrl.isTouchZooming) {
|
||||
@@ -129,7 +170,8 @@ export function attachPanZoom(ctrl: SkillTreeController, opts: PanZoomOpts): ()
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
app.canvas.addEventListener(
|
||||
life.listen(
|
||||
app.canvas,
|
||||
'touchend',
|
||||
(e: TouchEvent) => {
|
||||
if (e.touches.length === 0) {
|
||||
@@ -150,22 +192,26 @@ export function attachPanZoom(ctrl: SkillTreeController, opts: PanZoomOpts): ()
|
||||
);
|
||||
|
||||
// ===== WHEEL ZOOM =====
|
||||
app.canvas.addEventListener('wheel', (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const oldScale = treeContainer.scale.x;
|
||||
const zoomFactor = e.deltaY > 0 ? ZOOM.wheelOut : ZOOM.wheelIn;
|
||||
const newScale = Math.max(minZoom, Math.min(maxZoom, oldScale * zoomFactor));
|
||||
// Explicitly non-passive: this calls preventDefault(). It works by default on
|
||||
// a non-root element, but relying on that is an implicit dependency.
|
||||
life.listen(
|
||||
app.canvas,
|
||||
'wheel',
|
||||
(e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const oldScale = treeContainer.scale.x;
|
||||
const zoomFactor = e.deltaY > 0 ? ZOOM.wheelOut : ZOOM.wheelIn;
|
||||
const newScale = Math.max(minZoom, Math.min(maxZoom, oldScale * zoomFactor));
|
||||
|
||||
// Zoom centered on origin node (0,0 in tree space): origin sits at
|
||||
// (treeContainer.x, treeContainer.y), so scaling keeps it anchored.
|
||||
treeContainer.scale.set(newScale);
|
||||
updateParallax(ctrl);
|
||||
});
|
||||
// Zoom centered on origin node (0,0 in tree space): origin sits at
|
||||
// (treeContainer.x, treeContainer.y), so scaling keeps it anchored.
|
||||
treeContainer.scale.set(newScale);
|
||||
updateParallax(ctrl);
|
||||
},
|
||||
{ passive: false }
|
||||
);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onWindowMouseMove);
|
||||
window.removeEventListener('mouseup', onWindowMouseUp);
|
||||
};
|
||||
return { flushTooltip };
|
||||
}
|
||||
|
||||
interface KeyboardOpts {
|
||||
@@ -175,8 +221,8 @@ interface KeyboardOpts {
|
||||
isStatsVisible: () => boolean;
|
||||
}
|
||||
|
||||
/** Wire keyboard navigation (pan/zoom/reset/stats/escape). Returns cleanup. */
|
||||
export function attachKeyboard(ctrl: SkillTreeController, opts: KeyboardOpts): () => void {
|
||||
/** Wire keyboard navigation (pan/zoom/reset/stats/escape). Owned by `life`. */
|
||||
export function attachKeyboard(ctrl: SkillTreeController, opts: KeyboardOpts, life: Lifecycle) {
|
||||
const { app, treeContainer } = ctrl;
|
||||
const minZoom = ZOOM.min;
|
||||
const maxZoom = ZOOM.max;
|
||||
@@ -241,28 +287,32 @@ export function attachKeyboard(ctrl: SkillTreeController, opts: KeyboardOpts): (
|
||||
// R to reset view to origin
|
||||
if (e.key === 'r' || e.key === 'R') {
|
||||
e.preventDefault();
|
||||
gsap.to(treeContainer, {
|
||||
x: app.screen.width / 2,
|
||||
y: app.screen.height / 2,
|
||||
duration: 0.5,
|
||||
ease: 'power2.out',
|
||||
onUpdate: () => updateParallax(ctrl),
|
||||
onComplete: () => {
|
||||
// Update parallax baseline after reset
|
||||
ctrl.initialTreeX = treeContainer.x;
|
||||
ctrl.initialTreeY = treeContainer.y;
|
||||
}
|
||||
});
|
||||
gsap.to(treeContainer.scale, {
|
||||
x: ctrl.endScale,
|
||||
y: ctrl.endScale,
|
||||
duration: 0.5,
|
||||
ease: 'power2.out',
|
||||
onUpdate: () => updateParallax(ctrl)
|
||||
// Re-enter the GSAP context: these are created per keypress.
|
||||
life.animate(() => {
|
||||
gsap.to(treeContainer, {
|
||||
x: app.screen.width / 2,
|
||||
y: app.screen.height / 2,
|
||||
duration: 0.5,
|
||||
ease: 'power2.out',
|
||||
overwrite: 'auto',
|
||||
onUpdate: () => updateParallax(ctrl),
|
||||
onComplete: () => {
|
||||
// Update parallax baseline after reset
|
||||
ctrl.initialTreeX = treeContainer.x;
|
||||
ctrl.initialTreeY = treeContainer.y;
|
||||
}
|
||||
});
|
||||
gsap.to(treeContainer.scale, {
|
||||
x: ctrl.endScale,
|
||||
y: ctrl.endScale,
|
||||
duration: 0.5,
|
||||
ease: 'power2.out',
|
||||
overwrite: 'auto',
|
||||
onUpdate: () => updateParallax(ctrl)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
return () => window.removeEventListener('keydown', handleKeydown);
|
||||
life.listen(window, 'keydown', handleKeydown);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
// Single owner for every resource the tree allocates, so one dispose() call
|
||||
// releases all of it.
|
||||
//
|
||||
// Why this exists: the PixiJS layer creates ~480 infinite GSAP tweens, a ticker
|
||||
// callback, and a dozen DOM listeners. None of them were ever released, and 112
|
||||
// of the tweens are created inside an `onComplete` — so they don't exist yet at
|
||||
// the moment a naive `killTweensOf` sweep would run.
|
||||
//
|
||||
// `gsap.context()` solves exactly that: GSAP records each animation's context on
|
||||
// creation, and restores that context while invoking the animation's callbacks
|
||||
// (see `_callback` in gsap-core). So a tween created inside a tracked tween's
|
||||
// onComplete is tracked by the same context, and ctx.kill() gets all of them.
|
||||
import { gsap } from 'gsap';
|
||||
|
||||
export function createLifecycle() {
|
||||
const disposers: Array<() => void> = [];
|
||||
const gsapCtx = gsap.context(() => {});
|
||||
let isDisposed = false;
|
||||
|
||||
return {
|
||||
/** True once dispose() has run — guards async work that resolves late. */
|
||||
get disposed() {
|
||||
return isDisposed;
|
||||
},
|
||||
|
||||
/**
|
||||
* Run `fn` with GSAP's active context set, so every tween it creates is
|
||||
* tracked for teardown. Returns whatever `fn` returns.
|
||||
*/
|
||||
animate<T>(fn: () => T): T {
|
||||
return gsapCtx.add(fn) as T;
|
||||
},
|
||||
|
||||
/** Register an arbitrary teardown step. */
|
||||
add(fn: () => void) {
|
||||
disposers.push(fn);
|
||||
},
|
||||
|
||||
/** Add a DOM listener and register its removal in one call. */
|
||||
listen<T extends EventTarget>(
|
||||
target: T,
|
||||
type: string,
|
||||
handler: (event: never) => void,
|
||||
options?: AddEventListenerOptions
|
||||
) {
|
||||
target.addEventListener(type, handler as EventListener, options);
|
||||
disposers.push(() => target.removeEventListener(type, handler as EventListener, options));
|
||||
},
|
||||
|
||||
/**
|
||||
* Release everything, newest first. `kill()` rather than `revert()`: we do
|
||||
* not want GSAP writing properties back onto Pixi objects that are about
|
||||
* to be destroyed.
|
||||
*/
|
||||
dispose() {
|
||||
if (isDisposed) return;
|
||||
isDisposed = true;
|
||||
|
||||
gsapCtx.kill();
|
||||
|
||||
for (let i = disposers.length - 1; i >= 0; i--) {
|
||||
try {
|
||||
disposers[i]();
|
||||
} catch (err) {
|
||||
// One failing teardown step must not strand the rest.
|
||||
console.warn('Teardown step failed:', err);
|
||||
}
|
||||
}
|
||||
disposers.length = 0;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export type Lifecycle = ReturnType<typeof createLifecycle>;
|
||||
+16
-5
@@ -8,11 +8,13 @@ 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;
|
||||
}
|
||||
@@ -34,15 +36,22 @@ function attachNodeInteraction(
|
||||
}
|
||||
});
|
||||
|
||||
// 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', () => {
|
||||
gsap.to(target.scale, { x: 1.2, y: 1.2, duration: 0.2 });
|
||||
gsap.to(glowGraphics, { alpha: 1.5, duration: 0.2 });
|
||||
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', () => {
|
||||
gsap.to(target.scale, { x: 1, y: 1, duration: 0.2 });
|
||||
gsap.to(glowGraphics, { alpha: 1, duration: 0.2 });
|
||||
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);
|
||||
});
|
||||
}
|
||||
@@ -59,7 +68,9 @@ export async function createNodes(treeContainer: Container, opts: NodeOpts): Pro
|
||||
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>)
|
||||
iconUrls.length
|
||||
? Assets.load<Texture>(iconUrls)
|
||||
: Promise.resolve({} as Record<string, Texture>)
|
||||
]);
|
||||
|
||||
for (const node of treeNodes) {
|
||||
|
||||
@@ -19,9 +19,11 @@ export interface NodeObject {
|
||||
glowGraphics: Graphics;
|
||||
}
|
||||
|
||||
/** The three parallax background layers (vignette lives on the stage). */
|
||||
/** The parallax background layers plus the vignette overlay. */
|
||||
export interface BackgroundLayers {
|
||||
deepBackgroundContainer: Container;
|
||||
nebulaContainer: Container;
|
||||
starContainer: Container;
|
||||
/** Static overlay on the stage; returned so a resize rebuild can destroy it. */
|
||||
vignette: Graphics;
|
||||
}
|
||||
Reference in new issue
Block a user