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

docs: restore original diamond with bloom/metallic/shadow effects

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2026-04-03 23:13:13 -05:00
parent 9990743357
commit 07e8da1935
1 changed files with 147 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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; } .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 TIER DIAMOND INDICATOR — 4-quadrant fill at x=600, y=95
Outer diamond outline (rotated container border) with 4 small A square rotated 45deg, divided into a 2x2 grid.
diamond-shaped bases inside at the cardinal positions. Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(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
═══════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════ */
.tier-diamond { .tier-diamond {
@ -897,34 +896,24 @@ body {
left: 600px; left: 600px;
top: 78.5px; top: 78.5px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
gap: 2px;
z-index: 20; z-index: 20;
pointer-events: none; pointer-events: none;
/* Outer diamond outline */ /* Dark gap color gives the cross visible definition */
border: 1.5px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.75);
border-radius: 2px; border-radius: 2px;
background: transparent;
box-shadow: 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 2px 5px rgba(0,0,0,0.5);
} }
.diamond-base { .diamond-quad {
position: absolute; background: rgba(0,0,0,0.3);
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;
} }
/* Position each base at the cardinal midpoints of the container */ .diamond-quad.filled {
.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 {
box-shadow: box-shadow:
inset 0 1px 2px rgba(255,255,255,0.45), inset 0 1px 2px rgba(255,255,255,0.45),
inset 0 -1px 2px rgba(0,0,0,0.35), 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 */ /* Diamond glow pulse animation — applied to whole container for T4 */
@keyframes diamond-glow-pulse { @keyframes diamond-glow-pulse {
0% { box-shadow: 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 2px 5px rgba(0,0,0,0.5),
0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6)); 0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6));
} }
50% { box-shadow: 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 2px 4px rgba(0,0,0,0.3),
0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.8)), 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)); 0 0 24px 8px var(--diamond-glow-color, rgba(201,169,78,0.3));
} }
100% { box-shadow: 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 2px 5px rgba(0,0,0,0.5),
0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6)); 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; 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);
}
</style> </style>
</head> </head>
<body> <body>
@ -1141,8 +1139,8 @@ body {
</div> </div>
<div class="ctrl-row"> <div class="ctrl-row">
<label>Size</label> <label>Size</label>
<input type="range" id="ctrlDiamondSize" min="20" max="60" step="1" value="32"> <input type="range" id="ctrlDiamondSize" min="16" max="40" step="1" value="26">
<span class="val" id="valDiamondSize">32px</span> <span class="val" id="valDiamondSize">26px</span>
</div> </div>
<div class="ctrl-row"> <div class="ctrl-row">
<label>Glow</label> <label>Glow</label>
@ -1155,6 +1153,17 @@ body {
<label>Glow color</label> <label>Glow color</label>
<input type="color" id="ctrlDiamondGlowColor" value="#c9a94e"> <input type="color" id="ctrlDiamondGlowColor" value="#c9a94e">
</div> </div>
<div class="ctrl-row">
<label>Effect</label>
<select id="ctrlDiamondEffect">
<option value="none">None</option>
<option value="bloom">Bloom glow</option>
<option value="metallic">Metallic sheen</option>
<option value="border">Border accent</option>
<option value="shadow">Shadow depth</option>
<option value="escalation">Tiered escalation</option>
</select>
</div>
</div> </div>
<div class="export-area"> <div class="export-area">
@ -1330,9 +1339,10 @@ const TIER_PRESETS = {
diamondFill: 0, diamondFill: 0,
diamondColor: '#000000', diamondColor: '#000000',
diamondHighlight: '#000000', diamondHighlight: '#000000',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#000000', diamondGlowColor: '#000000',
diamondEffect: 'none',
}, },
t1: { t1: {
name: 'T1 Base Chrome', name: 'T1 Base Chrome',
@ -1357,9 +1367,10 @@ const TIER_PRESETS = {
diamondFill: 1, diamondFill: 1,
diamondColor: '#a82020', diamondColor: '#a82020',
diamondHighlight: '#e85050', diamondHighlight: '#e85050',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#a82020', diamondGlowColor: '#a82020',
diamondEffect: 'none',
}, },
t2: { t2: {
name: 'T2 Refractor', name: 'T2 Refractor',
@ -1384,9 +1395,10 @@ const TIER_PRESETS = {
diamondFill: 2, diamondFill: 2,
diamondColor: '#5a4fbf', diamondColor: '#5a4fbf',
diamondHighlight: '#9a8ff0', diamondHighlight: '#9a8ff0',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#5a4fbf', diamondGlowColor: '#5a4fbf',
diamondEffect: 'none',
}, },
t3: { t3: {
name: 'T3 Gold Refractor', name: 'T3 Gold Refractor',
@ -1411,9 +1423,10 @@ const TIER_PRESETS = {
diamondFill: 3, diamondFill: 3,
diamondColor: '#b8942a', diamondColor: '#b8942a',
diamondHighlight: '#e8c850', diamondHighlight: '#e8c850',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'off', diamondGlow: 'off',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
diamondEffect: 'none',
}, },
t4: { t4: {
name: 'T4 Superfractor', name: 'T4 Superfractor',
@ -1438,9 +1451,10 @@ const TIER_PRESETS = {
diamondFill: 4, diamondFill: 4,
diamondColor: '#c9a94e', diamondColor: '#c9a94e',
diamondHighlight: '#f0d878', diamondHighlight: '#f0d878',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'on', diamondGlow: 'on',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
diamondEffect: 'none',
}, },
t4b: { t4b: {
name: 'T4b Superfractor (full-card rainbow)', name: 'T4b Superfractor (full-card rainbow)',
@ -1465,9 +1479,10 @@ const TIER_PRESETS = {
diamondFill: 4, diamondFill: 4,
diamondColor: '#c9a94e', diamondColor: '#c9a94e',
diamondHighlight: '#f0d878', diamondHighlight: '#f0d878',
diamondSize: 32, diamondSize: 19,
diamondGlow: 'on', diamondGlow: 'on',
diamondGlowColor: '#c9a94e', diamondGlowColor: '#c9a94e',
diamondEffect: 'none',
}, },
}; };
@ -1533,35 +1548,59 @@ function renderCardHTML(tierKey) {
<div class="corner-accent br" style="width:${cs};height:${cs};border-color:${cc};border-bottom-width:${cw};border-right-width:${cw};"></div>`; <div class="corner-accent br" style="width:${cs};height:${cs};border-color:${cc};border-bottom-width:${cw};border-right-width:${cw};"></div>`;
} }
// Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside // Tier diamond indicator — 4-quadrant fill (baseball base path)
// CSS-based: outer container rotated 45deg = diamond outline, 4 child divs = bases // Grid reading order: top-left, top-right, bottom-left, bottom-right
// Each base is a div with gradient fill + inset box-shadows for jewel/bloom effect // After rotate(45deg): top-left=LEFT(3rd), top-right=BOTTOM(home), bottom-left=TOP(2nd), bottom-right=RIGHT(1st)
// Fill order: 1st/east → 2nd/north → 3rd/west → home/south // Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom)
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 effect = t.diamondEffect || 'none';
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 // Standard gradient for filled quads; metallic uses a different one
const secFilled = t.diamondFill >= 2; // 2nd base / north let diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`;
const thirdFilled = t.diamondFill >= 3; // 3rd base / west if (effect === 'metallic') {
const homeFilled = t.diamondFill >= 4; // home plate / south 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%)`;
function baseDiv(posClass, filled) {
if (filled) {
return `<div class="diamond-base ${posClass} filled" style="background:${diamondBG};"></div>`;
}
return `<div class="diamond-base ${posClass}"></div>`;
} }
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 = diamondHTML =
`<div class="tier-diamond${glowClass}" style="width:${ds}px;height:${ds}px;${glowVar}">` + `<div class="tier-diamond${glowClass}" style="${containerStyle}">` +
baseDiv('base-east', firstFilled) + `<div class="diamond-quad${secFilled ? ' filled' + metallicClass : ''}" style="${secFilled ? 'background:' + diamondBG : ''}"></div>` +
baseDiv('base-north', secFilled) + `<div class="diamond-quad${firstFilled ? ' filled' + metallicClass : ''}" style="${firstFilled ? 'background:' + diamondBG : ''}"></div>` +
baseDiv('base-west', thirdFilled) + `<div class="diamond-quad${thirdFilled ? ' filled' + metallicClass : ''}" style="${thirdFilled ? 'background:' + diamondBG : ''}"></div>` +
baseDiv('base-south', homeFilled) + `<div class="diamond-quad${homeFilled ? ' filled' + metallicClass : ''}" style="${homeFilled ? 'background:' + diamondBG : ''}"></div>` +
`</div>`; `</div>`;
} }
@ -1762,6 +1801,7 @@ function loadControlsFromState() {
document.getElementById('ctrlDiamondSize').value = t.diamondSize; document.getElementById('ctrlDiamondSize').value = t.diamondSize;
document.getElementById('ctrlDiamondGlow').value = t.diamondGlow; document.getElementById('ctrlDiamondGlow').value = t.diamondGlow;
document.getElementById('ctrlDiamondGlowColor').value = t.diamondGlowColor; document.getElementById('ctrlDiamondGlowColor').value = t.diamondGlowColor;
document.getElementById('ctrlDiamondEffect').value = t.diamondEffect || 'none';
updateValueLabels(); updateValueLabels();
} }
@ -1791,6 +1831,7 @@ function saveControlsToState() {
t.diamondSize = parseInt(document.getElementById('ctrlDiamondSize').value); t.diamondSize = parseInt(document.getElementById('ctrlDiamondSize').value);
t.diamondGlow = document.getElementById('ctrlDiamondGlow').value; t.diamondGlow = document.getElementById('ctrlDiamondGlow').value;
t.diamondGlowColor = document.getElementById('ctrlDiamondGlowColor').value; t.diamondGlowColor = document.getElementById('ctrlDiamondGlowColor').value;
t.diamondEffect = document.getElementById('ctrlDiamondEffect').value;
} }
/* ───────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────
@ -1901,7 +1942,7 @@ ${cls} .red-gradient {
background-image: ${redGrad}; background-image: ${redGrad};
}` + (t.diamondFill > 0 ? ` }` + (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 { ${cls} .tier-diamond {
position: absolute; position: absolute;
left: 600px; left: 600px;
@ -1909,34 +1950,64 @@ ${cls} .tier-diamond {
width: ${t.diamondSize}px; width: ${t.diamondSize}px;
height: ${t.diamondSize}px; height: ${t.diamondSize}px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
gap: 2px;
z-index: 20; z-index: 20;
pointer-events: none; pointer-events: none;
border: 1.5px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.75);
border-radius: 2px; border-radius: 2px;
background: transparent;
box-shadow: 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 2px 5px rgba(0,0,0,0.5);
} }
${cls} .diamond-base { ${cls} .diamond-quad {
position: absolute; background: rgba(0,0,0,0.3);
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-base.base-east { top: 50%; right: 6%; transform: translate(0, -50%); } ${cls} .diamond-quad.filled {
${cls} .diamond-base.base-north { top: 6%; left: 50%; transform: translate(-50%, 0); } background: ${(t.diamondEffect === 'metallic')
${cls} .diamond-base.base-west { top: 50%; left: 6%; transform: translate(0, -50%); } ? `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%)`
${cls} .diamond-base.base-south { bottom: 6%; left: 50%; transform: translate(-50%, 0); } : `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`};
${cls} .diamond-base.filled {
background: linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%);
box-shadow: 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 0 -1px 2px rgba(0,0,0,0.35),
inset 1px 0 2px rgba(255,255,255,0.15); inset 1px 0 2px rgba(255,255,255,0.15)`};
}` + (t.diamondGlow === 'on' ? ` }` + (() => {
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 { ${cls} .tier-diamond.diamond-glow {
--diamond-glow-color: ${t.diamondGlowColor}; --diamond-glow-color: ${t.diamondGlowColor};
animation: diamond-glow-pulse 2s ease-in-out infinite; animation: diamond-glow-pulse 2s ease-in-out infinite;