@@ -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) {
`;
}
- // 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 `
`;
- }
- return `
`;
+ // 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 =
- `
` +
- baseDiv('base-east', firstFilled) +
- baseDiv('base-north', secFilled) +
- baseDiv('base-west', thirdFilled) +
- baseDiv('base-south', homeFilled) +
+ `
` +
+ `
` +
+ `
` +
+ `
` +
+ `
` +
`
`;
}
@@ -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;