Polish: distinct per-stat select bars + stronger fighter/floor separation

beedee1792263ec3bf4b036ddbabb899715cd90b · 2026-08-31 14:23:04 -0700 · Steve Abrams

- Select stat bars: color-coded SPD=cyan / PWR=pink / DEF=gold, taller, with 5-segment notches so each fighter's profile reads at a glance (fixes 'bars too uniform')
- Fighter/floor: two-layer ground shadow (wide soft halo + tight dark core) + cooler/darker cobblestones so warm-toned fighters (Petit Eclair/Le Costaud) stop blending into the street

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Files touched

M index.html

Diff

commit beedee1792263ec3bf4b036ddbabb899715cd90b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 31 14:23:04 2026 -0700

    Polish: distinct per-stat select bars + stronger fighter/floor separation
    
    - Select stat bars: color-coded SPD=cyan / PWR=pink / DEF=gold, taller, with 5-segment notches so each fighter's profile reads at a glance (fixes 'bars too uniform')
    - Fighter/floor: two-layer ground shadow (wide soft halo + tight dark core) + cooler/darker cobblestones so warm-toned fighters (Petit Eclair/Le Costaud) stop blending into the street
    
    Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 27815ee..c7b1a52 100644
--- a/index.html
+++ b/index.html
@@ -81,8 +81,13 @@
   .card .stat{ display:flex; align-items:center; gap:6px; font-size:11px; color:#c3bdb0; margin:3px 4px; letter-spacing:.06em; }
   .card .stat:first-of-type{ margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.09); }
   .card .stat b{ width:30px; display:inline-block; }
-  .card .bar{ flex:1; height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
-  .card .bar i{ display:block; height:100%; background:linear-gradient(90deg,#c9a961,#ff3d9a); }
+  .card .bar{ position:relative; flex:1; height:7px; background:rgba(255,255,255,.10); border-radius:3px; overflow:hidden; }
+  .card .bar i{ display:block; height:100%; }
+  .card .bar.spd i{ background:linear-gradient(90deg,#17a2bd,#22e0ff); }
+  .card .bar.pwr i{ background:linear-gradient(90deg,#c02d78,#ff3d9a); }
+  .card .bar.def i{ background:linear-gradient(90deg,#9a7d3a,#e7c987); }
+  .card .bar::after{ content:''; position:absolute; inset:0; pointer-events:none;
+                     background:repeating-linear-gradient(90deg, transparent 0 19.4%, rgba(0,0,0,.5) 19.4% 20%); }
   .card.p1cursor{ border:3px solid #ff6b6b; box-shadow:0 0 18px rgba(255,61,90,.6); transform:scale(1.05); }
   .card.p2cursor{ border:3px solid #6bb8ff; box-shadow:0 0 18px rgba(34,120,255,.6); transform:scale(1.05); }
   .card.p1cursor.p2cursor{ border-color:#c9a961; box-shadow:0 0 20px rgba(201,169,97,.65); }
@@ -578,11 +583,11 @@
       g.save();
       g.translate(this.x, this.y);
 
-      // shadow
+      // ground shadow — wide soft halo + tight dark core, so warm fighters separate from the cobbles
       g.save();
-      g.scale(1, .35);
-      g.beginPath(); g.arc(0, 6/.35, this.w*0.5+11, 0, Math.PI*2);
-      g.fillStyle = 'rgba(0,0,0,.5)'; g.fill();
+      g.scale(1, .32);
+      g.beginPath(); g.arc(0, 6/.32, this.w*0.5+13, 0, Math.PI*2); g.fillStyle='rgba(0,0,0,.32)'; g.fill();
+      g.beginPath(); g.arc(0, 6/.32, this.w*0.42,    0, Math.PI*2); g.fillStyle='rgba(0,0,0,.6)';  g.fill();
       g.restore();
 
       g.scale(f, 1);   // face direction
@@ -1021,7 +1026,7 @@
       for (let x=-sw; x<W+sw; x+=sw){
         const cx=x+off;
         const h=(Math.sin(cx*0.21 + j*1.7)*0.5+0.5);            // stable per-stone shade
-        const r=Math.round(40+h*20), gg=Math.round(30+h*14), bl=Math.round(50+h*22);
+        const r=Math.round(30+h*14), gg=Math.round(26+h*12), bl=Math.round(46+h*20);  // cooler + darker so warm fighters pop
         roundRectPath(g, cx+2, y0+pad, sw-4, sh, rr);
         g.fillStyle='rgb('+r+','+gg+','+bl+')'; g.fill();
         g.lineWidth=1.4; g.strokeStyle='rgba(255,61,154,'+(0.05+t0*0.13).toFixed(3)+')'; g.stroke();  // neon rim
@@ -1164,7 +1169,7 @@
       const nm = document.createElement('div'); nm.className = 'cname'; nm.textContent = c.name; card.appendChild(nm);
       [['SPD',c.spd],['PWR',c.pow],['DEF',c.def]].forEach(([lbl,v]) => {
         const s = document.createElement('div'); s.className = 'stat';
-        s.innerHTML = '<b>'+lbl+'</b><span class="bar"><i style="width:'+(v/5*100)+'%"></i></span>';
+        s.innerHTML = '<b>'+lbl+'</b><span class="bar '+lbl.toLowerCase()+'"><i style="width:'+(v/5*100)+'%"></i></span>';
         card.appendChild(s);
       });
       const r1 = document.createElement('div'); r1.className='rdy r1'; r1.textContent='P1'; r1.style.display='none'; card.appendChild(r1);

← 2398d24 Fix select-card layout: scope global canvas rule to #game so · back to Neon Baguette Battle · Add mobile touch controls (drive Player 1) 6e85f4c →