TehRiehlDealandClaude Opus 5
c4f1fd9f84
Typography: - The codebase contained exactly one font-family declaration (LoadingIndicator), naming 'Cinzel Decorative' and 'Trajan Pro' — neither loaded, bundled, or present in static/. So every word on the site, in every component, rendered in the browser's default serif. For a site whose whole premise is atmosphere, that was the largest craft gap. - Now a display/body pairing: self-hosted Cinzel Variable for the name, headings, welcome title and tooltip titles; a system stack for body and UI copy, which costs nothing to load and is far more legible than Times at the 13-14px the modal and stats panel use. - @fontsource-variable/cinzel ships two subsets with unicode-range, so only the 25.3KB latin file is fetched for this content (verified — latin-ext is emitted but never requested). font-display: swap, so text never blocks. Contrast (WCAG 1.4.3): - Measured every grey against the panel background (#1a1a2e) rather than eyeballing it. #666 is 2.97:1 and fails AA for normal text; it was used for the modal close glyph, the tooltip hint, the branch count and the skill years. Replaced with --text-subtle (#9a9aa8, 6.1:1). - Correction to the audit: #888 was listed as failing. It measures 4.81:1 and passes. Tokenised for consistency, not because it was broken. --text-muted (#a8a8b8) is 7.3:1, not the ~9:1 I claimed. Tokens: - z-index was nine ad-hoc literals across seven files, with LoadingIndicator and the modal backdrop both on 1000. Now a named scale, and no raw z-index literal survives anywhere in src/ (verified against the live stylesheet). - Added spacing, radius, motion and type tokens alongside the existing colour ones, so the system covers more than colour. Note: package-lock.json in this commit also carries pre-existing churn from before this work; adding the font dependency entangled the two. Verified in the production build: Cinzel loads and applies to headings, computed body font resolves to system-ui, one font file fetched, zero raw z-index literals in the rendered CSS. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
522 lines
12 KiB
Svelte
522 lines
12 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}
|
|
<!-- Presentational click-to-close. The onkeydown this used to carry could
|
|
never fire (role="presentation", no tabindex); Escape is global. -->
|
|
<div class="stats-panel-backdrop visible" onclick={onToggle} role="presentation"></div>
|
|
{/if}
|
|
|
|
<!-- Stats Panel -->
|
|
<!--
|
|
`inert` rather than aria-hidden: the panel is only translated off-screen, so
|
|
its focusable children stayed in the tab order while announcing as nothing —
|
|
a direct axe `aria-hidden-focus` violation. inert removes it from the
|
|
accessibility tree AND the tab order together.
|
|
-->
|
|
<div
|
|
id="stats-panel"
|
|
class="stats-panel"
|
|
class:visible
|
|
role="complementary"
|
|
aria-label="Character Statistics"
|
|
inert={!visible}
|
|
>
|
|
<!-- Character Card -->
|
|
<div class="character-card">
|
|
<img
|
|
src="/headshot.jpg"
|
|
alt=""
|
|
width="120"
|
|
height="120"
|
|
decoding="async"
|
|
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>
|
|
|
|
<p class="character-name">Kevin Riehl</p>
|
|
<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">
|
|
<!-- A real <button>: the previous div+role="button" handled Enter but
|
|
not Space, which the ARIA button pattern requires. -->
|
|
<button
|
|
type="button"
|
|
class="branch-header"
|
|
onclick={() => onToggleBranch(branchId)}
|
|
aria-expanded={expandedBranches.has(branchId)}
|
|
aria-controls="skill-list-{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>
|
|
</button>
|
|
|
|
{#if expandedBranches.has(branchId)}
|
|
<div id="skill-list-{branchId}" 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: var(--z-panel-toggle);
|
|
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: var(--z-panel);
|
|
/* Offset past the box-shadow (8px offset + 80px blur) so the gold glow
|
|
doesn't bleed down the left edge of the viewport while closed. */
|
|
transform: translateX(calc(-100% - 100px));
|
|
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: var(--z-panel-backdrop);
|
|
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-family: var(--font-display);
|
|
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 {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.04em;
|
|
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;
|
|
/* Reset the UA button defaults so this keeps the previous appearance. */
|
|
width: 100%;
|
|
text-align: left;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.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: var(--text-muted);
|
|
}
|
|
|
|
.expand-icon {
|
|
font-size: 0.8rem;
|
|
color: var(--text-subtle);
|
|
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: var(--text-subtle);
|
|
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>
|