refactor: extract leaf UI components from SkillTree.svelte
Phase 4 (behavior-preserving): split the monolithic component's DOM overlays into focused children, each owning its markup + scoped CSS: - LoadingIndicator.svelte, WelcomeTitle.svelte, Tooltip.svelte - NodeModal.svelte (modal + ~280 lines CSS; onClose callback, category-narrowed) - StatsPanel.svelte (toggle + backdrop + panel + ~340 lines CSS; onToggle/ onToggleBranch callbacks). Kept the .stats-panel-toggle class name stable so the entrance-animation GSAP querySelector still resolves. SkillTree.svelte drops from 2453 -> ~600 lines. Modernized the moved event handlers (on:click -> onclick), clearing the 9 Svelte deprecation warnings. svelte-check: 0 errors, 0 warnings. lint/test/build clean. Verified the stats panel renders identically in-browser (LVL/mastery/branches all correct). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TehRiehlDealandClaude Opus 4.8 committed
1 parent
bf235680a4
commit
f08138718a
6 files changed
+1273
-1222
No files matched your search
@@ -0,0 +1,501 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import { treeNodes, type SkillNode } from '$lib/data';
|
||||
|
||||
const {
|
||||
visible,
|
||||
playerLevel,
|
||||
playerClass,
|
||||
skillCounts,
|
||||
totalSkills,
|
||||
skillsByBranch,
|
||||
expandedBranches,
|
||||
onToggle,
|
||||
onToggleBranch
|
||||
}: {
|
||||
visible: boolean;
|
||||
playerLevel: number;
|
||||
playerClass: string;
|
||||
skillCounts: { expert: number; advanced: number; intermediate: number; beginner: number };
|
||||
totalSkills: number;
|
||||
skillsByBranch: Record<string, { label: string; skills: SkillNode[] }>;
|
||||
expandedBranches: Set<string>;
|
||||
onToggle: () => void;
|
||||
onToggleBranch: (branchId: string) => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<!-- Stats Panel Toggle Button -->
|
||||
<button
|
||||
class="stats-panel-toggle"
|
||||
class:open={visible}
|
||||
onclick={onToggle}
|
||||
title="Character Stats (C)"
|
||||
aria-label="Toggle Character Stats Panel (Keyboard shortcut: C)"
|
||||
aria-expanded={visible}
|
||||
aria-controls="stats-panel"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
|
||||
<!-- Stats Panel Backdrop -->
|
||||
{#if visible}
|
||||
<div
|
||||
class="stats-panel-backdrop visible"
|
||||
onclick={onToggle}
|
||||
onkeydown={(e) => e.key === 'Escape' && onToggle()}
|
||||
role="presentation"
|
||||
aria-label="Stats panel backdrop. Click to close or press Escape."
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<!-- Stats Panel -->
|
||||
<div
|
||||
id="stats-panel"
|
||||
class="stats-panel"
|
||||
class:visible
|
||||
role="complementary"
|
||||
aria-label="Character Statistics"
|
||||
aria-hidden={!visible}
|
||||
>
|
||||
<!-- Character Card -->
|
||||
<div class="character-card">
|
||||
<img src="/headshot.jpg" alt="Character Portrait" class="character-portrait" />
|
||||
|
||||
<div class="character-stats-bar">
|
||||
<div class="stat-item">
|
||||
<span>⚔️</span>
|
||||
<span class="stat-label">LVL</span>
|
||||
<span>{playerLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="character-name">Kevin Riehl</h1>
|
||||
<p class="character-title">{playerClass}</p>
|
||||
</div>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<div class="skills-section">
|
||||
<!-- Proficiency Summary -->
|
||||
<div class="proficiency-summary">
|
||||
<h3>⚡ Skill Mastery</h3>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐⭐⭐ Expert</span>
|
||||
<span class="proficiency-count">{skillCounts.expert}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐⭐ Advanced</span>
|
||||
<span class="proficiency-count">{skillCounts.advanced}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐ Intermediate</span>
|
||||
<span class="proficiency-count">{skillCounts.intermediate}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">Beginner</span>
|
||||
<span class="proficiency-count">{skillCounts.beginner}</span>
|
||||
</div>
|
||||
<div
|
||||
class="proficiency-row"
|
||||
style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.5rem; padding-top: 0.5rem;"
|
||||
>
|
||||
<span class="proficiency-label">Total Skills</span>
|
||||
<span class="proficiency-count">{totalSkills}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Branches -->
|
||||
{#each Object.entries(skillsByBranch) as [branchId, branch] (branchId)}
|
||||
<div class="skill-branch">
|
||||
<div
|
||||
class="branch-header"
|
||||
onclick={() => onToggleBranch(branchId)}
|
||||
onkeydown={(e) => e.key === 'Enter' && onToggleBranch(branchId)}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-expanded={expandedBranches.has(branchId)}
|
||||
>
|
||||
<img
|
||||
src={treeNodes.find((n) => n.id === branchId)?.icon || ''}
|
||||
alt=""
|
||||
class="branch-icon"
|
||||
/>
|
||||
<span class="branch-title">{branch.label}</span>
|
||||
<span class="branch-count">({branch.skills.length})</span>
|
||||
<span class="expand-icon" class:expanded={expandedBranches.has(branchId)}>▼</span>
|
||||
</div>
|
||||
|
||||
{#if expandedBranches.has(branchId)}
|
||||
<div class="skill-list" transition:slide={{ duration: 300 }}>
|
||||
{#each branch.skills as skill (skill.id)}
|
||||
<div class="skill-item">
|
||||
{#if skill.icon}
|
||||
<img src={skill.icon} alt="" class="skill-item-icon" />
|
||||
{/if}
|
||||
<span class="skill-name">{skill.label}</span>
|
||||
<span class="skill-proficiency">
|
||||
{#if skill.proficiency === 'expert'}
|
||||
<span class="proficiency-stars">⭐⭐⭐</span>
|
||||
{:else if skill.proficiency === 'advanced'}
|
||||
<span class="proficiency-stars">⭐⭐</span>
|
||||
{:else if skill.proficiency === 'intermediate'}
|
||||
<span class="proficiency-stars">⭐</span>
|
||||
{/if}
|
||||
<span>{skill.proficiency || ''}</span>
|
||||
</span>
|
||||
{#if skill.yearsOfExperience}
|
||||
<span class="skill-years">{skill.yearsOfExperience}y</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ========== STATS PANEL STYLES ========== */
|
||||
|
||||
/* Toggle Button */
|
||||
.stats-panel-toggle {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border: 2px solid var(--color-gold);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 950;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: var(--color-gold);
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 215, 0, 0.3),
|
||||
0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.stats-panel-toggle:hover:not(.open) {
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 215, 0, 0.5),
|
||||
0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open:hover {
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 215, 0, 0.5),
|
||||
0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open {
|
||||
transform: translateX(380px) rotate(180deg);
|
||||
}
|
||||
|
||||
/* Panel and Backdrop */
|
||||
.stats-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 380px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border-right: 2px solid var(--color-gold);
|
||||
box-shadow:
|
||||
4px 0 40px rgba(255, 215, 0, 0.3),
|
||||
8px 0 80px rgba(255, 215, 0, 0.15);
|
||||
z-index: 900;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling for stats panel */
|
||||
.stats-panel::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(255, 215, 0, 0.1);
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, var(--color-gold) 0%, #b7941f 100%);
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, #ffed4e 0%, #d4af37 100%);
|
||||
}
|
||||
|
||||
.stats-panel.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.stats-panel-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 899;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Character Card */
|
||||
.character-card {
|
||||
padding: 2rem 1.5rem;
|
||||
border-bottom: 2px solid rgba(255, 215, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.character-portrait {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--color-gold);
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
||||
margin: 0 auto 1rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.character-stats-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.character-title {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.proficiency-summary {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.proficiency-summary h3 {
|
||||
color: var(--color-gold);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.proficiency-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.proficiency-label {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.proficiency-count {
|
||||
color: var(--color-gold);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.skill-branch {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.branch-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.branch-header:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.branch-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: drop-shadow(0 0 8px rgba(249, 168, 37, 0.5));
|
||||
}
|
||||
|
||||
.branch-title {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-skills);
|
||||
text-shadow: 0 0 10px rgba(249, 168, 37, 0.3);
|
||||
}
|
||||
|
||||
.branch-count {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.skill-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-left-color: var(--color-skills);
|
||||
}
|
||||
|
||||
.skill-item-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.skill-proficiency {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.proficiency-stars {
|
||||
color: var(--color-gold);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.skill-years {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 767px) {
|
||||
.stats-panel-toggle {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
top: auto;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open {
|
||||
transform: translateY(-85dvh) rotate(180deg);
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
width: 100%;
|
||||
height: 85dvh;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: 2px solid var(--color-gold);
|
||||
border-radius: 16px 16px 0 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
box-shadow:
|
||||
0 -4px 40px rgba(255, 215, 0, 0.3),
|
||||
0 -8px 80px rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
.stats-panel.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.character-portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.character-stats-bar {
|
||||
gap: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user