TehRiehlDealandClaude Opus 4.8
f08138718a
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>
502 lines
11 KiB
Svelte
502 lines
11 KiB
Svelte
<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>
|