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) <noreply@anthropic.com>
This commit is contained in:
Cal Corum
parent
9990743357
commit
07e8da1935
@ -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);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -1141,8 +1139,8 @@ body {
|
||||
</div>
|
||||
<div class="ctrl-row">
|
||||
<label>Size</label>
|
||||
<input type="range" id="ctrlDiamondSize" min="20" max="60" step="1" value="32">
|
||||
<span class="val" id="valDiamondSize">32px</span>
|
||||
<input type="range" id="ctrlDiamondSize" min="16" max="40" step="1" value="26">
|
||||
<span class="val" id="valDiamondSize">26px</span>
|
||||
</div>
|
||||
<div class="ctrl-row">
|
||||
<label>Glow</label>
|
||||
@ -1155,6 +1153,17 @@ body {
|
||||
<label>Glow color</label>
|
||||
<input type="color" id="ctrlDiamondGlowColor" value="#c9a94e">
|
||||
</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 class="export-area">
|
||||
@ -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) {
|
||||
<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
|
||||
// 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 `<div class="diamond-base ${posClass} filled" style="background:${diamondBG};"></div>`;
|
||||
}
|
||||
return `<div class="diamond-base ${posClass}"></div>`;
|
||||
// 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 =
|
||||
`<div class="tier-diamond${glowClass}" style="width:${ds}px;height:${ds}px;${glowVar}">` +
|
||||
baseDiv('base-east', firstFilled) +
|
||||
baseDiv('base-north', secFilled) +
|
||||
baseDiv('base-west', thirdFilled) +
|
||||
baseDiv('base-south', homeFilled) +
|
||||
`<div class="tier-diamond${glowClass}" style="${containerStyle}">` +
|
||||
`<div class="diamond-quad${secFilled ? ' filled' + metallicClass : ''}" style="${secFilled ? 'background:' + diamondBG : ''}"></div>` +
|
||||
`<div class="diamond-quad${firstFilled ? ' filled' + metallicClass : ''}" style="${firstFilled ? 'background:' + diamondBG : ''}"></div>` +
|
||||
`<div class="diamond-quad${thirdFilled ? ' filled' + metallicClass : ''}" style="${thirdFilled ? 'background:' + diamondBG : ''}"></div>` +
|
||||
`<div class="diamond-quad${homeFilled ? ' filled' + metallicClass : ''}" style="${homeFilled ? 'background:' + diamondBG : ''}"></div>` +
|
||||
`</div>`;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user