TehRiehlDealandClaude Opus 4.8
6c652e7138
Phase 1 of the cohesion refactor (behavior-preserving): Single source of truth: - New src/lib/theme.ts: category colors (moved from data.ts, re-exported for back-compat), derived hex strings, nebula palette, UI colors, CSS var map - New src/lib/config.ts: breakpoint, zoom, parallax, node radii, particle counts, animation timings (previously scattered magic numbers) - New src/lib/utils/tree.ts: getNodeById, getNodeRadius, getDistanceFromOrigin, getBeamIntensity (pure helpers lifted out of onMount) - New src/lib/utils/stats.ts: branch ids/labels, proficiency order, and the stats-panel aggregation helpers (deduped from inline copies) - SkillTree.svelte now imports all of the above; removed the duplicated getCategoryColorHex, stats helpers, branch id/label lists, and inline magic numbers - Populated src/lib/index.ts barrel Bug fixes: - data.ts: tmdbAPI pypiUrl pointed at tvdbAPI -> corrected to tmdbAPI - Removed/ gated stray console.log noise (skill-tree-loaded, SW logs) - Removed dead vars (maxAlpha, glowMaxAlpha) and unused catch binding Tooling: ESLint + Prettier now clean; added Vitest unit tests for the new pure utils (14 tests). svelte-check: 0 errors. build: ok. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
// ==========================================================================
|
|
// THEME — single source of truth for colours.
|
|
//
|
|
// Category colours live here as PixiJS-friendly numbers (0xRRGGBB) and are
|
|
// derived to CSS hex strings (#rrggbb). The CSS custom properties in
|
|
// `src/app.css` mirror the `cssVars` map below — keep them in sync.
|
|
// ==========================================================================
|
|
|
|
export type Category = 'origin' | 'experience' | 'projects' | 'skills' | 'education';
|
|
|
|
/** Convert a PixiJS colour number (0xRRGGBB) to a CSS hex string (#rrggbb). */
|
|
export function toHex(color: number): string {
|
|
return '#' + color.toString(16).padStart(6, '0');
|
|
}
|
|
|
|
/** Category colours for PixiJS graphics (PoE-inspired palette). */
|
|
export const categoryColors: Record<Category, number> = {
|
|
origin: 0xffd700, // Gold
|
|
experience: 0x4ecdc4, // Teal
|
|
projects: 0xff6b6b, // Coral red
|
|
skills: 0xf9a825, // Amber orange
|
|
education: 0xdda0dd // Plum purple
|
|
};
|
|
|
|
/** Same category colours as CSS hex strings, derived from `categoryColors`. */
|
|
export const categoryColorHex: Record<Category, string> = {
|
|
origin: toHex(categoryColors.origin),
|
|
experience: toHex(categoryColors.experience),
|
|
projects: toHex(categoryColors.projects),
|
|
skills: toHex(categoryColors.skills),
|
|
education: toHex(categoryColors.education)
|
|
};
|
|
|
|
/** Nebula cloud / dust particle palette (background atmosphere). */
|
|
export const nebulaPalette: Array<{ color: number; name: string }> = [
|
|
{ color: categoryColors.experience, name: 'teal' },
|
|
{ color: categoryColors.projects, name: 'coral' },
|
|
{ color: categoryColors.skills, name: 'amber' },
|
|
{ color: categoryColors.education, name: 'plum' },
|
|
{ color: 0x6b5b95, name: 'purple' } // Extra accent
|
|
];
|
|
|
|
/** Semantic UI colours used across the canvas and the DOM overlays. */
|
|
export const uiTheme = {
|
|
gold: '#ffd700',
|
|
bgSpace: '#05050a',
|
|
panelFrom: '#1a1a2e',
|
|
panelTo: '#0f0f1a',
|
|
nodeFill: 0x12121a,
|
|
lineCore: 0x4a4a5a,
|
|
textMuted: '#a8a8b8'
|
|
} as const;
|
|
|
|
/**
|
|
* Flat map of CSS custom property name -> value. `src/app.css` declares these
|
|
* on `:root`; this object documents the canonical values they mirror.
|
|
*/
|
|
export const cssVars: Record<string, string> = {
|
|
'--color-gold': categoryColorHex.origin,
|
|
'--color-experience': categoryColorHex.experience,
|
|
'--color-projects': categoryColorHex.projects,
|
|
'--color-skills': categoryColorHex.skills,
|
|
'--color-education': categoryColorHex.education,
|
|
'--bg-space': uiTheme.bgSpace,
|
|
'--panel-from': uiTheme.panelFrom,
|
|
'--panel-to': uiTheme.panelTo,
|
|
'--text-muted': uiTheme.textMuted
|
|
};
|