From 5d248fcd15a12c6a5df6a22f0248d9d81ffcd272 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Fri, 3 Apr 2026 23:00:19 -0500 Subject: [PATCH 1/5] docs: replace diamond indicator with baseball-diamond SVG design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the rotated 2x2 CSS grid diamond with an SVG baseball diamond containing 4 small diamond-shaped bases at 1B/2B/3B/Home positions. Fill order: east(1B) → north(2B) → west(3B) → south(Home). Keeps all existing controls and tier preset properties intact. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/card-cosmetics-playground.html | 810 ++++++++++++++++++++++++++++ docs/refractor-tier-mockup.html | 288 ++++------ 2 files changed, 916 insertions(+), 182 deletions(-) create mode 100644 docs/card-cosmetics-playground.html diff --git a/docs/card-cosmetics-playground.html b/docs/card-cosmetics-playground.html new file mode 100644 index 0000000..13d58a3 --- /dev/null +++ b/docs/card-cosmetics-playground.html @@ -0,0 +1,810 @@ + + + + + +Paper Dynasty — Card Cosmetics Explorer + + + + + +
+

Card Cosmetics Explorer

+

Paper Dynasty — Evolution Visual System

+ +
+ + + + + + +
+ +
+

Frame

+ + + + + +
+ +
+

Header Background

+ + + + +
+ +
+

Column Backgrounds

+ + + + + +
+ +
+

Gradient Bars

+ + + + +
+ +
+

Evolution Badge

+ + + + + +
+ +
+

Rarity Glow

+ + + +
+ +
+

Team Color

+
+ + Team primary color +
+
+ + + + + + + + +
+
+
+ + +
+
+
+ +
+
+
+
+ R +
+
+
+
Mike Trout
+
CF   LF   RF
+
+
+
+
+
+
+ ALL-STAR +
+
+
+
+
+
stealing A-12
+
running 14
+
bunting B
+
hit & run A
+
2025 Live
+
+
+ + +
+
+
+
1
+
2
+
3
+
+
+
1
+
2
+
3
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Default card — no cosmetics applied. + +
+
+
+ + + + diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html index ec06cef..36b0ae5 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -886,57 +886,57 @@ body { .pd-card.anim-on.tier-t4b .col-header-right-group .col-header:nth-child(3)::before { animation-delay: -1.35s; } /* ═══════════════════════════════════════════════════════ - TIER DIAMOND INDICATOR — 4-quadrant fill at x=600, y=95 - A square rotated 45deg, divided into a 2x2 grid. - Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) + TIER DIAMOND INDICATOR — baseball diamond with 4 base diamonds + Outer diamond outline + 4 small diamond-shaped bases inside. + Fill order: 1st/east(right) → 2nd/north(top) → 3rd/west(left) → home/south(bottom) T0=none, T1=1st, T2=1st+2nd, T3=1st+2nd+3rd, T4=all 4 ═══════════════════════════════════════════════════════ */ .tier-diamond { position: absolute; left: 600px; top: 78.5px; - transform: translate(-50%, -50%) rotate(45deg); - display: grid; - grid-template: 1fr 1fr / 1fr 1fr; - gap: 2px; + transform: translate(-50%, -50%); z-index: 20; pointer-events: none; - /* Dark gap color gives the cross visible definition */ - background: rgba(0,0,0,0.75); - border-radius: 2px; - box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5); + filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } -.diamond-quad { - background: rgba(0,0,0,0.3); +.tier-diamond svg { + display: block; } -.diamond-quad.filled { - box-shadow: - inset 0 1px 2px rgba(255,255,255,0.45), - inset 0 -1px 2px rgba(0,0,0,0.35), - inset 1px 0 2px rgba(255,255,255,0.15); +.tier-diamond .diamond-outline { + fill: none; + stroke: rgba(255,255,255,0.2); + stroke-width: 0.7; } -/* Diamond glow pulse animation — applied to whole container */ +.tier-diamond .diamond-base { + fill: rgba(0,0,0,0.25); + stroke: rgba(255,255,255,0.15); + stroke-width: 0.4; + transition: fill 0.3s, stroke 0.3s, filter 0.3s; +} + +.tier-diamond .diamond-base.filled { + stroke-width: 0.6; + filter: brightness(1.1); +} + +/* Diamond glow pulse animation — applied to whole container for T4 */ @keyframes diamond-glow-pulse { - 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, rgba(201,169,78,0.6)); + 0% { filter: + drop-shadow(0 1px 3px rgba(0,0,0,0.6)) + drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); } - 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, rgba(201,169,78,0.8)), - 0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.25)); + 50% { filter: + drop-shadow(0 1px 2px rgba(0,0,0,0.4)) + drop-shadow(0 0 8px var(--diamond-glow-color, rgba(201,169,78,0.8))) + drop-shadow(0 0 16px var(--diamond-glow-color, rgba(201,169,78,0.3))); } - 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 5px 1px var(--diamond-glow-color, rgba(201,169,78,0.6)); + 100% { filter: + drop-shadow(0 1px 3px rgba(0,0,0,0.6)) + drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); } } @@ -944,15 +944,6 @@ body { animation: diamond-glow-pulse 2s ease-in-out infinite; } -/* Metallic sheen — boosted inset highlights on filled quads */ -.diamond-quad.metallic.filled { - box-shadow: - inset 0 1px 3px rgba(255,255,255,0.7), - inset 0 -1px 2px rgba(0,0,0,0.5), - inset 1px 0 3px rgba(255,255,255,0.3), - inset -1px 0 2px rgba(0,0,0,0.2); -} - @@ -1153,17 +1144,6 @@ body { -
- - -
@@ -1342,7 +1322,6 @@ const TIER_PRESETS = { diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#000000', - diamondEffect: 'none', }, t1: { name: 'T1 Base Chrome', @@ -1365,12 +1344,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 1, - diamondColor: '#d46a1a', - diamondHighlight: '#f0a050', + diamondColor: '#a82020', + diamondHighlight: '#e85050', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#d46a1a', - diamondEffect: 'none', + diamondGlowColor: '#a82020', }, t2: { name: 'T2 Refractor', @@ -1393,12 +1371,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 2, - diamondColor: '#b82020', - diamondHighlight: '#e85050', + diamondColor: '#5a4fbf', + diamondHighlight: '#9a8ff0', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#b82020', - diamondEffect: 'none', + diamondGlowColor: '#5a4fbf', }, t3: { name: 'T3 Gold Refractor', @@ -1421,12 +1398,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 3, - diamondColor: '#7b2d8e', - diamondHighlight: '#b860d0', + diamondColor: '#b8942a', + diamondHighlight: '#e8c850', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#7b2d8e', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, t4: { name: 'T4 Superfractor', @@ -1449,12 +1425,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#c9a94e', + diamondHighlight: '#f0d878', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, t4b: { name: 'T4b Superfractor (full-card rainbow)', @@ -1477,12 +1452,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#c9a94e', + diamondHighlight: '#f0d878', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, }; @@ -1548,62 +1522,51 @@ function renderCardHTML(tierKey) {
`; } - // Tier diamond indicator — 4-quadrant fill (baseball base path) - // Grid reading order: top-left, top-right, bottom-left, bottom-right - // After rotate(45deg): top-left=LEFT(3rd), top-right=BOTTOM(home), bottom-left=TOP(2nd), bottom-right=RIGHT(1st) - // Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) + // Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside + // Outer diamond outline, 4 small diamonds at: east(1B), north(2B), west(3B), south(Home) + // Fill order: 1st/east → 2nd/north → 3rd/west → home/south let diamondHTML = ''; if (t.diamondFill > 0) { const ds = t.diamondSize; - const effect = t.diamondEffect || 'none'; + const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; + const glowVar = t.diamondGlow === 'on' ? `--diamond-glow-color: ${t.diamondGlowColor};` : ''; - // Standard gradient for filled quads; metallic uses a different one - let diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`; - if (effect === 'metallic') { - diamondBG = `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)`; + const firstFilled = t.diamondFill >= 1; // 1st base / east + const secFilled = t.diamondFill >= 2; // 2nd base / north + const thirdFilled = t.diamondFill >= 3; // 3rd base / west + const homeFilled = t.diamondFill >= 4; // home plate / south + + // SVG viewBox is 100x100, diamond centered + // Outer diamond: points at N(50,5) E(95,50) S(50,95) W(5,50) + // Each base is a small diamond (~16x16 units) + const baseFill = `${t.diamondColor}`; + const baseHighlight = `${t.diamondHighlight}`; + const emptyFill = 'rgba(0,0,0,0.25)'; + const emptyStroke = 'rgba(255,255,255,0.15)'; + + function baseEl(cx, cy, filled, id) { + const r = 8; // half-size of each base diamond + const pts = `${cx},${cy-r} ${cx+r},${cy} ${cx},${cy+r} ${cx-r},${cy}`; + if (filled) { + return ``; + } + return ``; } - // Metallic effect automatically includes glow pulse - const wantsGlow = t.diamondGlow === 'on' || effect === 'metallic'; - const glowClass = wantsGlow ? ' diamond-glow' : ''; - const glowVar = wantsGlow ? ` --diamond-glow-color: ${t.diamondGlowColor || t.diamondColor};` : ''; - - // Build container inline style — effects stack on top of the base box-shadow - let containerStyle = `width:${ds}px;height:${ds}px;${glowVar}`; - if (effect === 'bloom') { - containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)};`; - } else if (effect === 'border') { - containerStyle += `border: 1.5px solid ${t.diamondHighlight}; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)};`; - } else if (effect === 'shadow') { - containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6);`; - } else if (effect === 'escalation') { - containerStyle += `border: 1.5px solid ${t.diamondHighlight};`; - const intensity = t.diamondFill / 4; // 0.25 → 1.0 - const bloomSize = Math.round(4 + intensity * 12); - const bloomSpread = Math.round(1 + intensity * 5); - containerStyle += `box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)};`; - } - // metallic has no container-level effect — it only changes gradient + quad shadows - - // Extra CSS class for metallic quads - const metallicClass = effect === 'metallic' ? ' metallic' : ''; - - // Empirically verified grid-to-visual mapping after rotate(45deg): - // div 1 (grid top-left) → LEFT = 3rd base - // div 2 (grid top-right) → BOTTOM = home plate - // div 3 (grid bottom-left) → TOP = 2nd base - // Verified mapping: div1→TOP, div2→RIGHT, div3→LEFT, div4→BOTTOM - const firstFilled = t.diamondFill >= 1; // 1st base / right = div 2 - const secFilled = t.diamondFill >= 2; // 2nd base / top = div 1 - const thirdFilled = t.diamondFill >= 3; // 3rd base / left = div 3 - const homeFilled = t.diamondFill >= 4; // home plate / bottom = div 4 diamondHTML = - `
` + - `
` + - `
` + - `
` + - `
` + - `
`; + `
` + + `` + + `` + + `` + + `` + + `` + + `` + + `` + + baseEl(76, 50, firstFilled, 'base-1b') + + baseEl(50, 24, secFilled, 'base-2b') + + baseEl(24, 50, thirdFilled, 'base-3b') + + baseEl(50, 76, homeFilled, 'base-home') + + `
`; } // Result rows @@ -1803,7 +1766,6 @@ function loadControlsFromState() { document.getElementById('ctrlDiamondSize').value = t.diamondSize; document.getElementById('ctrlDiamondGlow').value = t.diamondGlow; document.getElementById('ctrlDiamondGlowColor').value = t.diamondGlowColor; - document.getElementById('ctrlDiamondEffect').value = t.diamondEffect || 'none'; updateValueLabels(); } @@ -1833,7 +1795,6 @@ function saveControlsToState() { t.diamondSize = parseInt(document.getElementById('ctrlDiamondSize').value); t.diamondGlow = document.getElementById('ctrlDiamondGlow').value; t.diamondGlowColor = document.getElementById('ctrlDiamondGlowColor').value; - t.diamondEffect = document.getElementById('ctrlDiamondEffect').value; } /* ───────────────────────────────────────────────────────── @@ -1944,72 +1905,35 @@ ${cls} .red-gradient { background-image: ${redGrad}; }` + (t.diamondFill > 0 ? ` -/* Tier diamond indicator — 4-quadrant fill at x=600, y=95 */ +/* Tier diamond indicator — baseball diamond with 4 base diamonds */ ${cls} .tier-diamond { position: absolute; left: 600px; top: 78.5px; width: ${t.diamondSize}px; height: ${t.diamondSize}px; - transform: translate(-50%, -50%) rotate(45deg); - display: grid; - grid-template: 1fr 1fr / 1fr 1fr; - gap: 2px; + transform: translate(-50%, -50%); z-index: 20; pointer-events: none; - background: rgba(0,0,0,0.75); - border-radius: 2px; - box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5); + filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } -${cls} .diamond-quad { - background: rgba(0,0,0,0.3); +${cls} .tier-diamond svg { display: block; } +${cls} .tier-diamond .diamond-outline { + fill: none; + stroke: rgba(255,255,255,0.2); + stroke-width: 0.7; } -${cls} .diamond-quad.filled { - background: ${(t.diamondEffect === 'metallic') - ? `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)` - : `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`}; - box-shadow: - ${(t.diamondEffect === 'metallic') - ? `inset 0 1px 3px rgba(255,255,255,0.7), - inset 0 -1px 2px rgba(0,0,0,0.5), - inset 1px 0 3px rgba(255,255,255,0.3), - inset -1px 0 2px rgba(0,0,0,0.2)` - : `inset 0 1px 2px rgba(255,255,255,0.45), - inset 0 -1px 2px rgba(0,0,0,0.35), - inset 1px 0 2px rgba(255,255,255,0.15)`}; -}` + (() => { - const eff = t.diamondEffect || 'none'; - let effectCSS = ''; - if (eff === 'bloom') { - effectCSS = ` -${cls} .tier-diamond { - box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)}; -}`; - } else if (eff === 'border') { - effectCSS = ` -${cls} .tier-diamond { - border: 1.5px solid ${t.diamondHighlight}; - box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)}; -}`; - } else if (eff === 'shadow') { - effectCSS = ` -${cls} .tier-diamond { - box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6); -}`; - } else if (eff === 'escalation') { - const intensity = t.diamondFill / 4; - const bloomSize = Math.round(4 + intensity * 12); - const bloomSpread = Math.round(1 + intensity * 5); - effectCSS = ` -${cls} .tier-diamond { - border: 1.5px solid ${t.diamondHighlight}; - box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)}; -}`; - } - return effectCSS; -})() + (t.diamondGlow === 'on' ? ` +${cls} .tier-diamond .diamond-base { + fill: rgba(0,0,0,0.25); + stroke: rgba(255,255,255,0.15); + stroke-width: 0.4; +} +${cls} .tier-diamond .diamond-base.filled { + fill: url(#baseFillGrad); + stroke: ${t.diamondHighlight}; + stroke-width: 0.6; + filter: brightness(1.1); +}` + (t.diamondGlow === 'on' ? ` ${cls} .tier-diamond.diamond-glow { --diamond-glow-color: ${t.diamondGlowColor}; animation: diamond-glow-pulse 2s ease-in-out infinite; -- 2.25.1 From f2327deb56bed5d28ffa14327dac8952d6b0cf18 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Fri, 3 Apr 2026 23:07:03 -0500 Subject: [PATCH 2/5] docs: baseball diamond with CSS-based bases preserving bloom/shine effects Replaces SVG polygon approach with CSS divs so inset box-shadows, gradient fills, and glow animations are preserved from the original implementation. Outer container rotated 45deg = diamond outline, 4 child divs positioned at cardinal points = base diamonds. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/refractor-tier-mockup.html | 167 ++++++++++++++++---------------- 1 file changed, 85 insertions(+), 82 deletions(-) diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html index 36b0ae5..9de43e1 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -887,7 +887,8 @@ body { /* ═══════════════════════════════════════════════════════ TIER DIAMOND INDICATOR — baseball diamond with 4 base diamonds - Outer diamond outline + 4 small diamond-shaped bases inside. + Outer diamond outline (rotated container border) with 4 small + diamond-shaped bases inside at the cardinal positions. Fill order: 1st/east(right) → 2nd/north(top) → 3rd/west(left) → home/south(bottom) T0=none, T1=1st, T2=1st+2nd, T3=1st+2nd+3rd, T4=all 4 ═══════════════════════════════════════════════════════ */ @@ -895,48 +896,58 @@ body { position: absolute; left: 600px; top: 78.5px; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%) rotate(45deg); z-index: 20; pointer-events: none; - filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); + /* Outer diamond outline */ + border: 1.5px solid rgba(0,0,0,0.5); + border-radius: 2px; + background: transparent; + box-shadow: + 0 0 0 1px rgba(255,255,255,0.08), + 0 2px 5px rgba(0,0,0,0.5); } -.tier-diamond svg { - display: block; +.diamond-base { + position: absolute; + width: 32%; + height: 32%; + border-radius: 1px; + background: rgba(0,0,0,0.2); + border: 0.5px solid rgba(0,0,0,0.3); + transition: background 0.3s, box-shadow 0.3s; } -.tier-diamond .diamond-outline { - fill: none; - stroke: rgba(255,255,255,0.2); - stroke-width: 0.7; -} +/* Position each base at the cardinal midpoints of the container */ +.diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); } +.diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); } +.diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); } +.diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); } -.tier-diamond .diamond-base { - fill: rgba(0,0,0,0.25); - stroke: rgba(255,255,255,0.15); - stroke-width: 0.4; - transition: fill 0.3s, stroke 0.3s, filter 0.3s; -} - -.tier-diamond .diamond-base.filled { - stroke-width: 0.6; - filter: brightness(1.1); +.diamond-base.filled { + box-shadow: + inset 0 1px 2px rgba(255,255,255,0.45), + inset 0 -1px 2px rgba(0,0,0,0.35), + inset 1px 0 2px rgba(255,255,255,0.15); } /* Diamond glow pulse animation — applied to whole container for T4 */ @keyframes diamond-glow-pulse { - 0% { filter: - drop-shadow(0 1px 3px rgba(0,0,0,0.6)) - drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); + 0% { box-shadow: + 0 0 0 1px rgba(255,255,255,0.08), + 0 2px 5px rgba(0,0,0,0.5), + 0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6)); } - 50% { filter: - drop-shadow(0 1px 2px rgba(0,0,0,0.4)) - drop-shadow(0 0 8px var(--diamond-glow-color, rgba(201,169,78,0.8))) - drop-shadow(0 0 16px var(--diamond-glow-color, rgba(201,169,78,0.3))); + 50% { box-shadow: + 0 0 0 1px rgba(255,255,255,0.04), + 0 2px 4px rgba(0,0,0,0.3), + 0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.8)), + 0 0 24px 8px var(--diamond-glow-color, rgba(201,169,78,0.3)); } - 100% { filter: - drop-shadow(0 1px 3px rgba(0,0,0,0.6)) - drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); + 100% { box-shadow: + 0 0 0 1px rgba(255,255,255,0.08), + 0 2px 5px rgba(0,0,0,0.5), + 0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6)); } } @@ -1130,8 +1141,8 @@ body {
- - 26px + + 32px
@@ -1319,7 +1330,7 @@ const TIER_PRESETS = { diamondFill: 0, diamondColor: '#000000', diamondHighlight: '#000000', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'off', diamondGlowColor: '#000000', }, @@ -1346,7 +1357,7 @@ const TIER_PRESETS = { diamondFill: 1, diamondColor: '#a82020', diamondHighlight: '#e85050', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'off', diamondGlowColor: '#a82020', }, @@ -1373,7 +1384,7 @@ const TIER_PRESETS = { diamondFill: 2, diamondColor: '#5a4fbf', diamondHighlight: '#9a8ff0', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'off', diamondGlowColor: '#5a4fbf', }, @@ -1400,7 +1411,7 @@ const TIER_PRESETS = { diamondFill: 3, diamondColor: '#b8942a', diamondHighlight: '#e8c850', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'off', diamondGlowColor: '#c9a94e', }, @@ -1427,7 +1438,7 @@ const TIER_PRESETS = { diamondFill: 4, diamondColor: '#c9a94e', diamondHighlight: '#f0d878', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'on', diamondGlowColor: '#c9a94e', }, @@ -1454,7 +1465,7 @@ const TIER_PRESETS = { diamondFill: 4, diamondColor: '#c9a94e', diamondHighlight: '#f0d878', - diamondSize: 19, + diamondSize: 32, diamondGlow: 'on', diamondGlowColor: '#c9a94e', }, @@ -1523,50 +1534,35 @@ function renderCardHTML(tierKey) { } // Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside - // Outer diamond outline, 4 small diamonds at: east(1B), north(2B), west(3B), south(Home) + // CSS-based: outer container rotated 45deg = diamond outline, 4 child divs = bases + // Each base is a div with gradient fill + inset box-shadows for jewel/bloom effect // Fill order: 1st/east → 2nd/north → 3rd/west → home/south let diamondHTML = ''; if (t.diamondFill > 0) { const ds = t.diamondSize; const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; - const glowVar = t.diamondGlow === 'on' ? `--diamond-glow-color: ${t.diamondGlowColor};` : ''; + const glowVar = t.diamondGlow === 'on' ? ` --diamond-glow-color: ${t.diamondGlowColor};` : ''; + const diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`; const firstFilled = t.diamondFill >= 1; // 1st base / east const secFilled = t.diamondFill >= 2; // 2nd base / north const thirdFilled = t.diamondFill >= 3; // 3rd base / west const homeFilled = t.diamondFill >= 4; // home plate / south - // SVG viewBox is 100x100, diamond centered - // Outer diamond: points at N(50,5) E(95,50) S(50,95) W(5,50) - // Each base is a small diamond (~16x16 units) - const baseFill = `${t.diamondColor}`; - const baseHighlight = `${t.diamondHighlight}`; - const emptyFill = 'rgba(0,0,0,0.25)'; - const emptyStroke = 'rgba(255,255,255,0.15)'; - - function baseEl(cx, cy, filled, id) { - const r = 8; // half-size of each base diamond - const pts = `${cx},${cy-r} ${cx+r},${cy} ${cx},${cy+r} ${cx-r},${cy}`; + function baseDiv(posClass, filled) { if (filled) { - return ``; + return `
`; } - return ``; + return `
`; } diamondHTML = `
` + - `` + - `` + - `` + - `` + - `` + - `` + - `` + - baseEl(76, 50, firstFilled, 'base-1b') + - baseEl(50, 24, secFilled, 'base-2b') + - baseEl(24, 50, thirdFilled, 'base-3b') + - baseEl(50, 76, homeFilled, 'base-home') + - `
`; + baseDiv('base-east', firstFilled) + + baseDiv('base-north', secFilled) + + baseDiv('base-west', thirdFilled) + + baseDiv('base-south', homeFilled) + + `
`; } // Result rows @@ -1912,27 +1908,34 @@ ${cls} .tier-diamond { top: 78.5px; width: ${t.diamondSize}px; height: ${t.diamondSize}px; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%) rotate(45deg); z-index: 20; pointer-events: none; - filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); + border: 1.5px solid rgba(0,0,0,0.5); + border-radius: 2px; + background: transparent; + box-shadow: + 0 0 0 1px rgba(255,255,255,0.08), + 0 2px 5px rgba(0,0,0,0.5); } -${cls} .tier-diamond svg { display: block; } -${cls} .tier-diamond .diamond-outline { - fill: none; - stroke: rgba(255,255,255,0.2); - stroke-width: 0.7; +${cls} .diamond-base { + position: absolute; + width: 32%; + height: 32%; + border-radius: 1px; + background: rgba(0,0,0,0.2); + border: 0.5px solid rgba(0,0,0,0.3); } -${cls} .tier-diamond .diamond-base { - fill: rgba(0,0,0,0.25); - stroke: rgba(255,255,255,0.15); - stroke-width: 0.4; -} -${cls} .tier-diamond .diamond-base.filled { - fill: url(#baseFillGrad); - stroke: ${t.diamondHighlight}; - stroke-width: 0.6; - filter: brightness(1.1); +${cls} .diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); } +${cls} .diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); } +${cls} .diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); } +${cls} .diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); } +${cls} .diamond-base.filled { + background: linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%); + box-shadow: + inset 0 1px 2px rgba(255,255,255,0.45), + inset 0 -1px 2px rgba(0,0,0,0.35), + inset 1px 0 2px rgba(255,255,255,0.15); }` + (t.diamondGlow === 'on' ? ` ${cls} .tier-diamond.diamond-glow { --diamond-glow-color: ${t.diamondGlowColor}; -- 2.25.1 From 94150b4e004bb8e2aa255a2e688b32dc23ee85f4 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Fri, 3 Apr 2026 23:13:13 -0500 Subject: [PATCH 3/5] docs: restore original diamond with bloom/metallic/shadow effects Recovered the diamondEffect feature (bloom, metallic, border, shadow, escalation) from session logs and applied to the original quad-based diamond design. All 12 edits from the effects subagent applied cleanly. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/refractor-tier-mockup.html | 223 +++++++++++++++++++++----------- 1 file changed, 147 insertions(+), 76 deletions(-) diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html index 9de43e1..7f42f82 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -886,10 +886,9 @@ body { .pd-card.anim-on.tier-t4b .col-header-right-group .col-header:nth-child(3)::before { animation-delay: -1.35s; } /* ═══════════════════════════════════════════════════════ - TIER DIAMOND INDICATOR — baseball diamond with 4 base diamonds - Outer diamond outline (rotated container border) with 4 small - diamond-shaped bases inside at the cardinal positions. - Fill order: 1st/east(right) → 2nd/north(top) → 3rd/west(left) → home/south(bottom) + TIER DIAMOND INDICATOR — 4-quadrant fill at x=600, y=95 + A square rotated 45deg, divided into a 2x2 grid. + Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) T0=none, T1=1st, T2=1st+2nd, T3=1st+2nd+3rd, T4=all 4 ═══════════════════════════════════════════════════════ */ .tier-diamond { @@ -897,34 +896,24 @@ body { left: 600px; top: 78.5px; transform: translate(-50%, -50%) rotate(45deg); + display: grid; + grid-template: 1fr 1fr / 1fr 1fr; + gap: 2px; z-index: 20; pointer-events: none; - /* Outer diamond outline */ - border: 1.5px solid rgba(0,0,0,0.5); + /* Dark gap color gives the cross visible definition */ + background: rgba(0,0,0,0.75); border-radius: 2px; - background: transparent; box-shadow: - 0 0 0 1px rgba(255,255,255,0.08), + 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5); } -.diamond-base { - position: absolute; - width: 32%; - height: 32%; - border-radius: 1px; - background: rgba(0,0,0,0.2); - border: 0.5px solid rgba(0,0,0,0.3); - transition: background 0.3s, box-shadow 0.3s; +.diamond-quad { + background: rgba(0,0,0,0.3); } -/* Position each base at the cardinal midpoints of the container */ -.diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); } -.diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); } -.diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); } -.diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); } - -.diamond-base.filled { +.diamond-quad.filled { box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), @@ -934,18 +923,18 @@ body { /* Diamond glow pulse animation — applied to whole container for T4 */ @keyframes diamond-glow-pulse { 0% { box-shadow: - 0 0 0 1px rgba(255,255,255,0.08), + 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, rgba(201,169,78,0.6)); } 50% { box-shadow: - 0 0 0 1px rgba(255,255,255,0.04), + 0 0 0 1.5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3), 0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.8)), 0 0 24px 8px var(--diamond-glow-color, rgba(201,169,78,0.3)); } 100% { box-shadow: - 0 0 0 1px rgba(255,255,255,0.08), + 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, rgba(201,169,78,0.6)); } @@ -955,6 +944,15 @@ body { animation: diamond-glow-pulse 2s ease-in-out infinite; } +/* Metallic sheen — boosted inset highlights on filled quads */ +.diamond-quad.metallic.filled { + box-shadow: + inset 0 1px 3px rgba(255,255,255,0.7), + inset 0 -1px 2px rgba(0,0,0,0.5), + inset 1px 0 3px rgba(255,255,255,0.3), + inset -1px 0 2px rgba(0,0,0,0.2); +} + @@ -1141,8 +1139,8 @@ body {
- - 32px + + 26px
@@ -1155,6 +1153,17 @@ body {
+
+ + +
@@ -1330,9 +1339,10 @@ const TIER_PRESETS = { diamondFill: 0, diamondColor: '#000000', diamondHighlight: '#000000', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#000000', + diamondEffect: 'none', }, t1: { name: 'T1 Base Chrome', @@ -1357,9 +1367,10 @@ const TIER_PRESETS = { diamondFill: 1, diamondColor: '#a82020', diamondHighlight: '#e85050', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#a82020', + diamondEffect: 'none', }, t2: { name: 'T2 Refractor', @@ -1384,9 +1395,10 @@ const TIER_PRESETS = { diamondFill: 2, diamondColor: '#5a4fbf', diamondHighlight: '#9a8ff0', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#5a4fbf', + diamondEffect: 'none', }, t3: { name: 'T3 Gold Refractor', @@ -1411,9 +1423,10 @@ const TIER_PRESETS = { diamondFill: 3, diamondColor: '#b8942a', diamondHighlight: '#e8c850', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#c9a94e', + diamondEffect: 'none', }, t4: { name: 'T4 Superfractor', @@ -1438,9 +1451,10 @@ const TIER_PRESETS = { diamondFill: 4, diamondColor: '#c9a94e', diamondHighlight: '#f0d878', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'on', diamondGlowColor: '#c9a94e', + diamondEffect: 'none', }, t4b: { name: 'T4b Superfractor (full-card rainbow)', @@ -1465,9 +1479,10 @@ const TIER_PRESETS = { diamondFill: 4, diamondColor: '#c9a94e', diamondHighlight: '#f0d878', - diamondSize: 32, + diamondSize: 19, diamondGlow: 'on', diamondGlowColor: '#c9a94e', + diamondEffect: 'none', }, }; @@ -1533,35 +1548,59 @@ function renderCardHTML(tierKey) {
`; } - // Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside - // CSS-based: outer container rotated 45deg = diamond outline, 4 child divs = bases - // Each base is a div with gradient fill + inset box-shadows for jewel/bloom effect - // Fill order: 1st/east → 2nd/north → 3rd/west → home/south + // Tier diamond indicator — 4-quadrant fill (baseball base path) + // Grid reading order: top-left, top-right, bottom-left, bottom-right + // After rotate(45deg): top-left=LEFT(3rd), top-right=BOTTOM(home), bottom-left=TOP(2nd), bottom-right=RIGHT(1st) + // Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) let diamondHTML = ''; if (t.diamondFill > 0) { const ds = t.diamondSize; - const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; - const glowVar = t.diamondGlow === 'on' ? ` --diamond-glow-color: ${t.diamondGlowColor};` : ''; - const diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`; + const effect = t.diamondEffect || 'none'; - const firstFilled = t.diamondFill >= 1; // 1st base / east - const secFilled = t.diamondFill >= 2; // 2nd base / north - const thirdFilled = t.diamondFill >= 3; // 3rd base / west - const homeFilled = t.diamondFill >= 4; // home plate / south - - function baseDiv(posClass, filled) { - if (filled) { - return `
`; - } - return `
`; + // Standard gradient for filled quads; metallic uses a different one + let diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`; + if (effect === 'metallic') { + diamondBG = `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)`; } + const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; + const glowVar = t.diamondGlow === 'on' ? ` --diamond-glow-color: ${t.diamondGlowColor};` : ''; + + // Build container inline style — effects stack on top of the base box-shadow + let containerStyle = `width:${ds}px;height:${ds}px;${glowVar}`; + if (effect === 'bloom') { + containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)};`; + } else if (effect === 'border') { + containerStyle += `border: 1.5px solid ${t.diamondHighlight}; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)};`; + } else if (effect === 'shadow') { + containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6);`; + } else if (effect === 'escalation') { + containerStyle += `border: 1.5px solid ${t.diamondHighlight};`; + const intensity = t.diamondFill / 4; // 0.25 → 1.0 + const bloomSize = Math.round(4 + intensity * 12); + const bloomSpread = Math.round(1 + intensity * 5); + containerStyle += `box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)};`; + } + // metallic has no container-level effect — it only changes gradient + quad shadows + + // Extra CSS class for metallic quads + const metallicClass = effect === 'metallic' ? ' metallic' : ''; + + // Empirically verified grid-to-visual mapping after rotate(45deg): + // div 1 (grid top-left) → LEFT = 3rd base + // div 2 (grid top-right) → BOTTOM = home plate + // div 3 (grid bottom-left) → TOP = 2nd base + // Verified mapping: div1→TOP, div2→RIGHT, div3→LEFT, div4→BOTTOM + const firstFilled = t.diamondFill >= 1; // 1st base / right = div 2 + const secFilled = t.diamondFill >= 2; // 2nd base / top = div 1 + const thirdFilled = t.diamondFill >= 3; // 3rd base / left = div 3 + const homeFilled = t.diamondFill >= 4; // home plate / bottom = div 4 diamondHTML = - `
` + - baseDiv('base-east', firstFilled) + - baseDiv('base-north', secFilled) + - baseDiv('base-west', thirdFilled) + - baseDiv('base-south', homeFilled) + + `
` + + `
` + + `
` + + `
` + + `
` + `
`; } @@ -1762,6 +1801,7 @@ function loadControlsFromState() { document.getElementById('ctrlDiamondSize').value = t.diamondSize; document.getElementById('ctrlDiamondGlow').value = t.diamondGlow; document.getElementById('ctrlDiamondGlowColor').value = t.diamondGlowColor; + document.getElementById('ctrlDiamondEffect').value = t.diamondEffect || 'none'; updateValueLabels(); } @@ -1791,6 +1831,7 @@ function saveControlsToState() { t.diamondSize = parseInt(document.getElementById('ctrlDiamondSize').value); t.diamondGlow = document.getElementById('ctrlDiamondGlow').value; t.diamondGlowColor = document.getElementById('ctrlDiamondGlowColor').value; + t.diamondEffect = document.getElementById('ctrlDiamondEffect').value; } /* ───────────────────────────────────────────────────────── @@ -1901,7 +1942,7 @@ ${cls} .red-gradient { background-image: ${redGrad}; }` + (t.diamondFill > 0 ? ` -/* Tier diamond indicator — baseball diamond with 4 base diamonds */ +/* Tier diamond indicator — 4-quadrant fill at x=600, y=95 */ ${cls} .tier-diamond { position: absolute; left: 600px; @@ -1909,34 +1950,64 @@ ${cls} .tier-diamond { width: ${t.diamondSize}px; height: ${t.diamondSize}px; transform: translate(-50%, -50%) rotate(45deg); + display: grid; + grid-template: 1fr 1fr / 1fr 1fr; + gap: 2px; z-index: 20; pointer-events: none; - border: 1.5px solid rgba(0,0,0,0.5); + background: rgba(0,0,0,0.75); border-radius: 2px; - background: transparent; box-shadow: - 0 0 0 1px rgba(255,255,255,0.08), + 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5); } -${cls} .diamond-base { - position: absolute; - width: 32%; - height: 32%; - border-radius: 1px; - background: rgba(0,0,0,0.2); - border: 0.5px solid rgba(0,0,0,0.3); +${cls} .diamond-quad { + background: rgba(0,0,0,0.3); } -${cls} .diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); } -${cls} .diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); } -${cls} .diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); } -${cls} .diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); } -${cls} .diamond-base.filled { - background: linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%); +${cls} .diamond-quad.filled { + background: ${(t.diamondEffect === 'metallic') + ? `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)` + : `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`}; box-shadow: - inset 0 1px 2px rgba(255,255,255,0.45), + ${(t.diamondEffect === 'metallic') + ? `inset 0 1px 3px rgba(255,255,255,0.7), + inset 0 -1px 2px rgba(0,0,0,0.5), + inset 1px 0 3px rgba(255,255,255,0.3), + inset -1px 0 2px rgba(0,0,0,0.2)` + : `inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), - inset 1px 0 2px rgba(255,255,255,0.15); -}` + (t.diamondGlow === 'on' ? ` + inset 1px 0 2px rgba(255,255,255,0.15)`}; +}` + (() => { + const eff = t.diamondEffect || 'none'; + let effectCSS = ''; + if (eff === 'bloom') { + effectCSS = ` +${cls} .tier-diamond { + box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)}; +}`; + } else if (eff === 'border') { + effectCSS = ` +${cls} .tier-diamond { + border: 1.5px solid ${t.diamondHighlight}; + box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)}; +}`; + } else if (eff === 'shadow') { + effectCSS = ` +${cls} .tier-diamond { + box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6); +}`; + } else if (eff === 'escalation') { + const intensity = t.diamondFill / 4; + const bloomSize = Math.round(4 + intensity * 12); + const bloomSpread = Math.round(1 + intensity * 5); + effectCSS = ` +${cls} .tier-diamond { + border: 1.5px solid ${t.diamondHighlight}; + box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)}; +}`; + } + return effectCSS; +})() + (t.diamondGlow === 'on' ? ` ${cls} .tier-diamond.diamond-glow { --diamond-glow-color: ${t.diamondGlowColor}; animation: diamond-glow-pulse 2s ease-in-out infinite; -- 2.25.1 From 9fbd0c25bac628c2cb2d2b7eb1562fee9f4526a6 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Fri, 3 Apr 2026 23:19:17 -0500 Subject: [PATCH 4/5] =?UTF-8?q?docs:=20update=20diamond=20tier=20colors=20?= =?UTF-8?q?=E2=80=94=20green/blue/red/purple=20progression?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit T1 dark green (#1a6b1a), T2 light blue (#2070b0), T3 red (#a82020), T4 regal purple (#6b2d8e). Cal approved. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/refractor-tier-mockup.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html index 7f42f82..9d81315 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -1365,11 +1365,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 1, - diamondColor: '#a82020', - diamondHighlight: '#e85050', + diamondColor: '#1a6b1a', + diamondHighlight: '#40b040', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#a82020', + diamondGlowColor: '#1a6b1a', diamondEffect: 'none', }, t2: { @@ -1393,11 +1393,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 2, - diamondColor: '#5a4fbf', - diamondHighlight: '#9a8ff0', + diamondColor: '#2070b0', + diamondHighlight: '#50a0e8', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#5a4fbf', + diamondGlowColor: '#2070b0', diamondEffect: 'none', }, t3: { @@ -1421,11 +1421,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 3, - diamondColor: '#b8942a', - diamondHighlight: '#e8c850', + diamondColor: '#a82020', + diamondHighlight: '#e85050', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#c9a94e', + diamondGlowColor: '#a82020', diamondEffect: 'none', }, t4: { @@ -1449,11 +1449,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#c9a94e', - diamondHighlight: '#f0d878', + diamondColor: '#6b2d8e', + diamondHighlight: '#a060d0', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#c9a94e', + diamondGlowColor: '#6b2d8e', diamondEffect: 'none', }, t4b: { @@ -1477,11 +1477,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#c9a94e', - diamondHighlight: '#f0d878', + diamondColor: '#6b2d8e', + diamondHighlight: '#a060d0', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#c9a94e', + diamondGlowColor: '#6b2d8e', diamondEffect: 'none', }, }; -- 2.25.1 From 4dae64d2398c08859e0d15e4bb0cf13cc6d65a1d Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Mon, 6 Apr 2026 17:00:48 -0500 Subject: [PATCH 5/5] docs: update diamond colors in visual spec to match production Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/refractor-visual-spec.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md index 313af1a..1b96381 100644 --- a/docs/refractor-visual-spec.md +++ b/docs/refractor-visual-spec.md @@ -117,10 +117,10 @@ Metallic effect **automatically** enables the glow pulse (no separate toggle nee | Tier | Color (body) | Highlight (bright edge) | Glow Color | Intent | |------|-------------|------------------------|------------|--------| -| T1 | `#d46a1a` | `#f0a050` | `#d46a1a` | Orange | -| T2 | `#b82020` | `#e85050` | `#b82020` | Red | -| T3 | `#7b2d8e` | `#b860d0` | `#7b2d8e` | Purple | -| T4 | `#1a6af0` | `#60b0ff` | `#1a6af0` | Blue flame | +| T1 | `#1a6b1a` | `#40b040` | `#1a6b1a` | Green | +| T2 | `#2070b0` | `#50a0e8` | `#2070b0` | Blue | +| T3 | `#a82020` | `#e85050` | `#a82020` | Red | +| T4 | `#6b2d8e` | `#a060d0` | `#6b2d8e` | Purple | Progression: warm → hot → regal → transcendent. @@ -235,9 +235,9 @@ L-shaped corner brackets on all four card corners. ### Database/API considerations The diamond fill count is already derivable from the tier level — no new database fields needed: -- `refractor_tier = 1` → `diamondFill = 1`, color = orange -- `refractor_tier = 2` → `diamondFill = 2`, color = red -- `refractor_tier = 3` → `diamondFill = 3`, color = purple -- `refractor_tier = 4` → `diamondFill = 4`, color = blue-flame +- `refractor_tier = 1` → `diamondFill = 1`, color = green +- `refractor_tier = 2` → `diamondFill = 2`, color = blue +- `refractor_tier = 3` → `diamondFill = 3`, color = red +- `refractor_tier = 4` → `diamondFill = 4`, color = purple Diamond colors are purely visual (CSS) — they don't need to be stored. -- 2.25.1