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) <noreply@anthropic.com>
This commit is contained in:
Cal Corum
parent
251eb1b05a
commit
9990743357
@ -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 {
|
||||
</div>
|
||||
<div class="ctrl-row">
|
||||
<label>Size</label>
|
||||
<input type="range" id="ctrlDiamondSize" min="16" max="40" step="1" value="26">
|
||||
<span class="val" id="valDiamondSize">26px</span>
|
||||
<input type="range" id="ctrlDiamondSize" min="20" max="60" step="1" value="32">
|
||||
<span class="val" id="valDiamondSize">32px</span>
|
||||
</div>
|
||||
<div class="ctrl-row">
|
||||
<label>Glow</label>
|
||||
@ -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 `<polygon id="${id}" class="diamond-base filled" points="${pts}" fill="url(#baseFillGrad)" stroke="${baseHighlight}" stroke-width="0.6"/>`;
|
||||
return `<div class="diamond-base ${posClass} filled" style="background:${diamondBG};"></div>`;
|
||||
}
|
||||
return `<polygon id="${id}" class="diamond-base" points="${pts}" fill="${emptyFill}" stroke="${emptyStroke}"/>`;
|
||||
return `<div class="diamond-base ${posClass}"></div>`;
|
||||
}
|
||||
|
||||
diamondHTML =
|
||||
`<div class="tier-diamond${glowClass}" style="width:${ds}px;height:${ds}px;${glowVar}">` +
|
||||
`<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">` +
|
||||
`<defs><linearGradient id="baseFillGrad" x1="0%" y1="0%" x2="100%" y2="100%">` +
|
||||
`<stop offset="0%" stop-color="${baseHighlight}"/>` +
|
||||
`<stop offset="50%" stop-color="${baseFill}"/>` +
|
||||
`<stop offset="100%" stop-color="${darkenHex(baseFill, 0.75)}"/>` +
|
||||
`</linearGradient></defs>` +
|
||||
`<polygon class="diamond-outline" points="50,5 95,50 50,95 5,50"/>` +
|
||||
baseEl(76, 50, firstFilled, 'base-1b') +
|
||||
baseEl(50, 24, secFilled, 'base-2b') +
|
||||
baseEl(24, 50, thirdFilled, 'base-3b') +
|
||||
baseEl(50, 76, homeFilled, 'base-home') +
|
||||
`</svg></div>`;
|
||||
baseDiv('base-east', firstFilled) +
|
||||
baseDiv('base-north', secFilled) +
|
||||
baseDiv('base-west', thirdFilled) +
|
||||
baseDiv('base-south', homeFilled) +
|
||||
`</div>`;
|
||||
}
|
||||
|
||||
// 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};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user