From a4596c63a5e9a8ccafbae21b72b40764970d2a62 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Mon, 6 Apr 2026 18:04:01 -0500 Subject: [PATCH 1/2] fix: reconcile refractor visual spec with mockup and playground (#55) Closes #55 Co-Authored-By: Claude Sonnet 4.6 --- docs/card-cosmetics-playground.html | 8 ++++---- docs/refractor-visual-spec.md | 16 ++++++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/docs/card-cosmetics-playground.html b/docs/card-cosmetics-playground.html index 13d58a3..61d0345 100644 --- a/docs/card-cosmetics-playground.html +++ b/docs/card-cosmetics-playground.html @@ -697,9 +697,9 @@ function update() { const evoBadges = { none: { display: 'none' }, t1: { display: 'flex', text: '🌱', bg: '#1a6b1a', color: '#90ee90', shadow: 'none' }, - t2: { display: 'flex', text: '⭐', bg: '#8b6914', color: '#ffd700', shadow: 'none' }, - t3: { display: 'flex', text: '💎', bg: '#4a1a6b', color: '#c084fc', shadow: '0 0 10px #c084fc66' }, - t4: { display: 'flex', text: '👑', bg: '#0a5a5a', color: '#2dd4bf', shadow: '0 0 14px #2dd4bf88' }, + t2: { display: 'flex', text: '⭐', bg: '#2070b0', color: '#50a0e8', shadow: 'none' }, + t3: { display: 'flex', text: '💎', bg: '#a82020', color: '#e85050', shadow: '0 0 10px #e8505066' }, + t4: { display: 'flex', text: '👑', bg: '#6b2d8e', color: '#a060d0', shadow: '0 0 14px #a060d088' }, }; const eb = evoBadges[s.evoBadge]; badge.style.display = eb.display; @@ -771,7 +771,7 @@ function updatePrompt(s) { headerBg: { dark: 'Dark Mode header (#1a1a2e)', gold: 'Metallic Gold header gradient', team: 'Team-colored header' }, colBg: { dark: 'Dark Mode columns (#1a1a2e / #2d1b1b, light text)', midnight: 'Midnight columns (#0d1b2a / #1b0d0d, light text)', cream: 'Cream columns (#FFF8DC / #FFE4C4)', team: 'Team-themed columns (team color at 20%/30% opacity)' }, gradBars: { gold: 'Gold gradient bars', dark: 'Dark charcoal gradient bars', match: 'Gradient bars matching column backgrounds' }, - evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ gold)', t3: 'T3 Ascendant badge (💎 purple, glow)', t4: 'T4 Evolved badge (👑 teal, strong glow)' }, + evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ blue)', t3: 'T3 Ascendant badge (💎 red, glow)', t4: 'T4 Evolved badge (👑 purple, strong glow)' }, rarityGlow: { subtle: 'Subtle rarity pulse glow', strong: 'Strong rarity pulse glow' }, }; diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md index 1b96381..e335d09 100644 --- a/docs/refractor-visual-spec.md +++ b/docs/refractor-visual-spec.md @@ -93,15 +93,19 @@ background: linear-gradient(135deg, 0% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5), - 0 0 5px 1px var(--diamond-glow-color); + 0 0 8px 2px var(--diamond-glow-color); } 50% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3), - 0 0 8px 3px var(--diamond-glow-color), - 0 0 14px 5px color-mix(in srgb, var(--diamond-glow-color) 25%, transparent); + 0 0 14px 5px var(--diamond-glow-color), + 0 0 24px 8px var(--diamond-glow-color); + } + 100% { box-shadow: + 0 0 0 1.5px rgba(0,0,0,0.7), + 0 2px 5px rgba(0,0,0,0.5), + 0 0 8px 2px var(--diamond-glow-color); } - 100% { /* same as 0% */ } } .tier-diamond.diamond-glow { @@ -109,7 +113,7 @@ background: linear-gradient(135deg, } ``` -Metallic effect **automatically** enables the glow pulse (no separate toggle needed in production). +Metallic sheen and glow pulse are **independent** effects. In production, apply metallic sheen to filled diamonds across all tiers. Apply glow pulse selectively by tier (T4 always gets it; T1–T3 do not in the approved configuration). --- @@ -228,7 +232,7 @@ L-shaped corner brackets on all four card corners. - The mockup control panel UI (sliders, dropdowns, color pickers) - The `diamondEffect` dropdown with 5 options (we chose metallic — hardcode it) -- The separate `diamondGlow` toggle (metallic always includes glow) +- The separate `diamondGlow` toggle (hardcode glow ON for T4, OFF for T1–T3) - Border preset / header type controls (these are already in production tier configs) - T4b full-card rainbow (unless explicitly promoted later) From e9ecdec16803e3373e785403c87ea08edf113dfd Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Mon, 6 Apr 2026 20:31:15 -0500 Subject: [PATCH 2/2] fix: update 'What to port' item 3 to reflect glow/metallic decoupling Item 3 still said 'always apply glow animation to filled diamonds' after the body text was updated to decouple metallic and glow. Now correctly specifies glow (diamond-glow class) is T4-only. Addresses review feedback on PR #56. Co-Authored-By: Claude Sonnet 4.6 --- docs/refractor-visual-spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md index e335d09..60f4138 100644 --- a/docs/refractor-visual-spec.md +++ b/docs/refractor-visual-spec.md @@ -222,7 +222,7 @@ L-shaped corner brackets on all four card corners. 1. **Diamond indicator CSS** (`.tier-diamond`, `.diamond-quad`, keyframes) → add to card template stylesheet 2. **Diamond HTML generation** → add to Playwright card renderer (4 divs in a grid) -3. **Metallic + glow effect** → always apply metallic class + glow animation to filled diamonds +3. **Metallic effect** → always apply metallic class to filled diamonds; apply glow animation (`diamond-glow` class) for T4 only 4. **T3 shimmer** → APNG capture with `--anim-progress` variable (8 frames) 5. **T4 layered effects** → APNG capture with `--anim-progress` driving all 4 layers 6. **Diamond colors** → store in tier config or derive from tier level