cal/paper-dynasty-card-creation
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: baseball diamond with CSS-based bases preserving bloom/shine effects

Browse Source 
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 2026-04-03 23:07:03 -05:00
parent 251eb1b05a
commit 9990743357
1 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
docs/refractor-tier-mockup.html
View File

@ -887,7 +887,8 @@ body {
/* ═══════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════
TIER DIAMOND INDICATOR — baseball diamond with 4 base diamonds 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) 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 T0=none, T1=1st, T2=1st+2nd, T3=1st+2nd+3rd, T4=all 4
═══════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════ */
@ -895,48 +896,58 @@ body {
position: absolute; position: absolute;
left: 600px; left: 600px;
top: 78.5px; top: 78.5px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) rotate(45deg);
z-index: 20; z-index: 20;
pointer-events: none; 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 { .diamond-base {
display: block; 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 { /* Position each base at the cardinal midpoints of the container */
fill: none; .diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); }
stroke: rgba(255,255,255,0.2); .diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); }
stroke-width: 0.7; .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 { .diamond-base.filled {
fill: rgba(0,0,0,0.25); box-shadow:
stroke: rgba(255,255,255,0.15); inset 0 1px 2px rgba(255,255,255,0.45),
stroke-width: 0.4; inset 0 -1px 2px rgba(0,0,0,0.35),
transition: fill 0.3s, stroke 0.3s, filter 0.3s; inset 1px 0 2px rgba(255,255,255,0.15);
}
.tier-diamond .diamond-base.filled {
stroke-width: 0.6;
filter: brightness(1.1);
} }
/* Diamond glow pulse animation — applied to whole container for T4 */ /* Diamond glow pulse animation — applied to whole container for T4 */
@keyframes diamond-glow-pulse { @keyframes diamond-glow-pulse {
0% { filter: 0% { box-shadow:
drop-shadow(0 1px 3px rgba(0,0,0,0.6)) 0 0 0 1px rgba(255,255,255,0.08),
drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); 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: 50% { box-shadow:
drop-shadow(0 1px 2px rgba(0,0,0,0.4)) 0 0 0 1px rgba(255,255,255,0.04),
drop-shadow(0 0 8px var(--diamond-glow-color, rgba(201,169,78,0.8))) 0 2px 4px rgba(0,0,0,0.3),
drop-shadow(0 0 16px var(--diamond-glow-color, rgba(201,169,78,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: 100% { box-shadow:
drop-shadow(0 1px 3px rgba(0,0,0,0.6)) 0 0 0 1px rgba(255,255,255,0.08),
drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); 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>
<div class="ctrl-row"> <div class="ctrl-row">
<label>Size</label> <label>Size</label>
<input type="range" id="ctrlDiamondSize" min="16" max="40" step="1" value="26"> <input type="range" id="ctrlDiamondSize" min="20" max="60" step="1" value="32">
<span class="val" id="valDiamondSize">26px</span> <span class="val" id="valDiamondSize">32px</span>
</div> </div>
<div class="ctrl-row"> <div class="ctrl-row">
<label>Glow</label> <label>Glow</label>
@ -1319,7 +1330,7 @@ const TIER_PRESETS = {
diamondFill: 0, diamondFill: 0,
diamondColor: '#000000', diamondColor: '#000000',
diamondHighlight: '#000000', diamondHighlight: '#000000',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#000000', diamondGlowColor: '#000000',
}, },
@ -1346,7 +1357,7 @@ const TIER_PRESETS = {
diamondFill: 1, diamondFill: 1,
diamondColor: '#a82020', diamondColor: '#a82020',
diamondHighlight: '#e85050', diamondHighlight: '#e85050',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#a82020', diamondGlowColor: '#a82020',
}, },
@ -1373,7 +1384,7 @@ const TIER_PRESETS = {
diamondFill: 2, diamondFill: 2,
diamondColor: '#5a4fbf', diamondColor: '#5a4fbf',
diamondHighlight: '#9a8ff0', diamondHighlight: '#9a8ff0',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#5a4fbf', diamondGlowColor: '#5a4fbf',
}, },
@ -1400,7 +1411,7 @@ const TIER_PRESETS = {
diamondFill: 3, diamondFill: 3,
diamondColor: '#b8942a', diamondColor: '#b8942a',
diamondHighlight: '#e8c850', diamondHighlight: '#e8c850',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
}, },
@ -1427,7 +1438,7 @@ const TIER_PRESETS = {
diamondFill: 4, diamondFill: 4,
diamondColor: '#c9a94e', diamondColor: '#c9a94e',
diamondHighlight: '#f0d878', diamondHighlight: '#f0d878',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'on', diamondGlow: 'on',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
}, },
@ -1454,7 +1465,7 @@ const TIER_PRESETS = {
diamondFill: 4, diamondFill: 4,
diamondColor: '#c9a94e', diamondColor: '#c9a94e',
diamondHighlight: '#f0d878', diamondHighlight: '#f0d878',
diamondSize: 19, diamondSize: 32,
diamondGlow: 'on', diamondGlow: 'on',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
}, },
@ -1523,50 +1534,35 @@ function renderCardHTML(tierKey) {
} }
// Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside // 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 // Fill order: 1st/east → 2nd/north → 3rd/west → home/south
let diamondHTML = ''; let diamondHTML = '';
if (t.diamondFill > 0) { if (t.diamondFill > 0) {
const ds = t.diamondSize; const ds = t.diamondSize;
const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; 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 firstFilled = t.diamondFill >= 1; // 1st base / east
const secFilled = t.diamondFill >= 2; // 2nd base / north const secFilled = t.diamondFill >= 2; // 2nd base / north
const thirdFilled = t.diamondFill >= 3; // 3rd base / west const thirdFilled = t.diamondFill >= 3; // 3rd base / west
const homeFilled = t.diamondFill >= 4; // home plate / south const homeFilled = t.diamondFill >= 4; // home plate / south
// SVG viewBox is 100x100, diamond centered function baseDiv(posClass, filled) {
// 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) { 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 = diamondHTML =
`<div class="tier-diamond${glowClass}" style="width:${ds}px;height:${ds}px;${glowVar}">` + `<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">` + baseDiv('base-east', firstFilled) +
`<defs><linearGradient id="baseFillGrad" x1="0%" y1="0%" x2="100%" y2="100%">` + baseDiv('base-north', secFilled) +
`<stop offset="0%" stop-color="${baseHighlight}"/>` + baseDiv('base-west', thirdFilled) +
`<stop offset="50%" stop-color="${baseFill}"/>` + baseDiv('base-south', homeFilled) +
`<stop offset="100%" stop-color="${darkenHex(baseFill, 0.75)}"/>` + `</div>`;
`</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>`;
} }
// Result rows // Result rows
@ -1912,27 +1908,34 @@ ${cls} .tier-diamond {
top: 78.5px; top: 78.5px;
width: ${t.diamondSize}px; width: ${t.diamondSize}px;
height: ${t.diamondSize}px; height: ${t.diamondSize}px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) rotate(45deg);
z-index: 20; z-index: 20;
pointer-events: none; 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} .diamond-base {
${cls} .tier-diamond .diamond-outline { position: absolute;
fill: none; width: 32%;
stroke: rgba(255,255,255,0.2); height: 32%;
stroke-width: 0.7; 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 { ${cls} .diamond-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); }
fill: rgba(0,0,0,0.25); ${cls} .diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); }
stroke: rgba(255,255,255,0.15); ${cls} .diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); }
stroke-width: 0.4; ${cls} .diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); }
} ${cls} .diamond-base.filled {
${cls} .tier-diamond .diamond-base.filled { background: linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%);
fill: url(#baseFillGrad); box-shadow:
stroke: ${t.diamondHighlight}; inset 0 1px 2px rgba(255,255,255,0.45),
stroke-width: 0.6; inset 0 -1px 2px rgba(0,0,0,0.35),
filter: brightness(1.1); inset 1px 0 2px rgba(255,255,255,0.15);
}` + (t.diamondGlow === 'on' ? ` }` + (t.diamondGlow === 'on' ? `
${cls} .tier-diamond.diamond-glow { ${cls} .tier-diamond.diamond-glow {
--diamond-glow-color: ${t.diamondGlowColor}; --diamond-glow-color: ${t.diamondGlowColor};