From 07e8da193533f51e5d5836d07e521cdbf4018644 Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Fri, 3 Apr 2026 23:13:13 -0500 Subject: [PATCH] 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;