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};