← back to Neon Baguette Battle
Apply graphic-designer review fixes #1-5
5e37c3adbbd09e24d330a51e368c345b4542163a · 2026-08-31 14:15:03 -0700 · Steve Abrams
1. Select screen: 6->3 col grid, bigger cards, name 13px/600, stats 11px, 2x-crisp 72x90 portraits, portrait/stats separator
2. HUD micro-text: ROCKET READY 9->11px bold+shadow; round pips 6->8px with empty-slot rings
3. FIGHT!/announcements: warm-yellow FIGHT! + dark pill backdrop so callouts pop off the neon Eiffel Tower
4. Fighter/floor separation: larger ground shadow + stronger dark torso outline
5. Select cursors: solid 3px border + scale(1.05) active card, bigger P1/P2 ready badges
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Files touched
Diff
commit 5e37c3adbbd09e24d330a51e368c345b4542163a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Aug 31 14:15:03 2026 -0700
Apply graphic-designer review fixes #1-5
1. Select screen: 6->3 col grid, bigger cards, name 13px/600, stats 11px, 2x-crisp 72x90 portraits, portrait/stats separator
2. HUD micro-text: ROCKET READY 9->11px bold+shadow; round pips 6->8px with empty-slot rings
3. FIGHT!/announcements: warm-yellow FIGHT! + dark pill backdrop so callouts pop off the neon Eiffel Tower
4. Fighter/floor separation: larger ground shadow + stronger dark torso outline
5. Select cursors: solid 3px border + scale(1.05) active card, bigger P1/P2 ready badges
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
index.html | 71 +++++++++++++++++++++++++++++++++++---------------------------
1 file changed, 40 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index cefe7ed..645bb15 100644
--- a/index.html
+++ b/index.html
@@ -70,24 +70,25 @@
.pTag{ font-size:13px; letter-spacing:.08em; padding:6px 14px; border-radius:6px; border:1px solid; min-width:170px; }
.pTag.p1{ color:#ff8a8a; border-color:rgba(255,107,107,.5); }
.pTag.p2{ color:#8ac2ff; border-color:rgba(107,184,255,.5); }
- .roster{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-width:720px; margin:2px auto; }
- @media(max-width:720px){ .roster{ grid-template-columns:repeat(3,1fr); max-width:360px; } }
+ .roster{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:620px; margin:2px auto; }
+ @media(max-width:620px){ .roster{ grid-template-columns:repeat(2,1fr); max-width:340px; } }
.card{ position:relative; background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.1);
- border-radius:10px; padding:6px 5px 8px; cursor:pointer; transition:.12s; }
- .card:hover{ border-color:rgba(201,169,97,.6); transform:translateY(-2px); }
- .card canvas{ width:56px; height:70px; display:block; margin:0 auto 2px; }
- .card .cname{ font-size:10px; letter-spacing:.02em; color:#eee; text-align:center; line-height:1.15;
- min-height:24px; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; }
- .card .stat{ display:flex; align-items:center; gap:4px; font-size:8px; color:#b8b2a6; margin:2px 3px; letter-spacing:.08em; }
- .card .stat b{ width:24px; display:inline-block; }
- .card .bar{ flex:1; height:5px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
+ border-radius:10px; padding:8px 8px 10px; cursor:pointer; transition:.12s; }
+ .card:hover{ border-color:rgba(201,169,97,.6); }
+ .card canvas{ width:72px; height:90px; display:block; margin:0 auto 4px; }
+ .card .cname{ font-size:13px; font-weight:600; letter-spacing:.02em; color:#f2efe6; text-align:center; line-height:1.15;
+ min-height:30px; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; }
+ .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.p1cursor{ border-color:#ff6b6b; box-shadow:0 0 16px rgba(255,61,90,.55); }
- .card.p2cursor{ border-color:#6bb8ff; box-shadow:0 0 16px rgba(34,120,255,.55); }
- .card.p1cursor.p2cursor{ border-color:#c9a961; box-shadow:0 0 18px rgba(201,169,97,.6); }
- .card .rdy{ position:absolute; top:4px; font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; }
- .card .rdy.r1{ left:4px; background:#c0392b; color:#fff; }
- .card .rdy.r2{ right:4px; background:#2c6fb0; color:#fff; }
+ .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); }
+ .card .rdy{ position:absolute; top:5px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; z-index:2; }
+ .card .rdy.r1{ left:5px; background:#c0392b; color:#fff; }
+ .card .rdy.r2{ right:5px; background:#2c6fb0; color:#fff; }
</style>
</head>
<body>
@@ -580,8 +581,8 @@
// shadow
g.save();
g.scale(1, .35);
- g.beginPath(); g.arc(0, 6/.35, this.w*0.5+6, 0, Math.PI*2);
- g.fillStyle = 'rgba(0,0,0,.45)'; g.fill();
+ 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.restore();
g.scale(f, 1); // face direction
@@ -630,7 +631,7 @@
for (let sy=ty+5; sy<ty+thh; sy+=10) g.fillRect(tx, sy, tw, 5);
g.restore();
}
- g.lineWidth=2; g.strokeStyle='rgba(0,0,0,.28)'; roundRectPath(g, tx, ty, tw, thh, 9); g.stroke();
+ g.lineWidth=2.5; g.strokeStyle='rgba(0,0,0,.5)'; roundRectPath(g, tx, ty, tw, thh, 9); g.stroke(); // dark outline for floor separation
g.restore();
// ---- neckerchief ----
@@ -1055,11 +1056,19 @@
g.fillText('ROUND '+roundNum, W/2, 70);
// announce
if (announce.text){
- g.globalAlpha = Math.min(1, announce.t/12) * Math.min(1, announce.life/16);
+ const a = Math.min(1, announce.t/12) * Math.min(1, announce.life/16);
+ const ay = H*0.42;
g.textAlign='center';
g.font = '800 '+announce.size+'px Georgia';
+ const tw = g.measureText(announce.text).width;
+ // pill backdrop so the callout pops off the neon Eiffel Tower behind it
+ g.globalAlpha = a*0.6;
+ g.fillStyle = 'rgba(8,4,20,1)';
+ roundRectPath(g, W/2 - tw/2 - 22, ay - announce.size*0.82, tw+44, announce.size+18, 14); g.fill();
+ // text
+ g.globalAlpha = a;
g.fillStyle = announce.color; g.shadowColor=announce.color; g.shadowBlur=24;
- g.fillText(announce.text, W/2, H*0.42);
+ g.fillText(announce.text, W/2, ay);
g.shadowBlur=0; g.globalAlpha=1;
}
// mute indicator
@@ -1090,16 +1099,16 @@
g.fillStyle = val>=100 ? '#fff' : c.accent;
if (val>=100){ g.shadowColor=c.glow; g.shadowBlur=10; }
g.fillRect(bx,y,bw,h); g.shadowBlur=0;
- if (val>=100){ g.fillStyle=c.accent; g.font='700 9px Georgia'; g.textAlign=flip?'right':'left';
- g.fillText('ROCKET READY', flip?x+w:x, y+18); g.textAlign='left'; }
+ if (val>=100){ g.save(); g.font='700 11px Georgia'; g.textAlign=flip?'right':'left';
+ g.shadowColor='#000'; g.shadowBlur=4; g.fillStyle=c.accent;
+ g.fillText('ROCKET READY', flip?x+w:x, y+19); g.restore(); g.textAlign='left'; }
}
function drawPips(g,x,y,n,flip){
for (let i=0;i<2;i++){
- const px = flip ? x-8-i*20 : x+8+i*20;
- g.beginPath(); g.arc(px,y,6,0,Math.PI*2);
- g.fillStyle = i<n ? '#ffd166' : 'rgba(255,255,255,.15)';
- if (i<n){ g.shadowColor='#ffd166'; g.shadowBlur=10; }
- g.fill(); g.shadowBlur=0;
+ const px = flip ? x-9-i*22 : x+9+i*22;
+ g.beginPath(); g.arc(px,y,8,0,Math.PI*2);
+ if (i<n){ g.fillStyle='#ffd166'; g.shadowColor='#ffd166'; g.shadowBlur=10; g.fill(); g.shadowBlur=0; }
+ else { g.fillStyle='rgba(255,255,255,.12)'; g.fill(); g.strokeStyle='rgba(255,255,255,.42)'; g.lineWidth=1.5; g.stroke(); } // empty slot ring
}
}
@@ -1150,8 +1159,8 @@
ROSTER.forEach((c, i) => {
const card = document.createElement('div');
card.className = 'card'; card.dataset.idx = i;
- const cv = document.createElement('canvas'); cv.width = 56; cv.height = 70;
- drawMini(cv.getContext('2d'), c.colors); card.appendChild(cv);
+ const cv = document.createElement('canvas'); cv.width = 112; cv.height = 140; // 2x, drawn in 56x70 space
+ const cvx = cv.getContext('2d'); cvx.scale(2,2); drawMini(cvx, c.colors); card.appendChild(cv);
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';
@@ -1223,7 +1232,7 @@
Voice.round();
}
let introT=0;
- function beginFight(){ state='fight'; setAnnounce('FIGHT!','#ff3d9a',64,40); Audio.bell(); Voice.fight(); }
+ function beginFight(){ state='fight'; setAnnounce('FIGHT!','#ffe566',64,40); Audio.bell(); Voice.fight(); }
function endRound(winner){
if (state!=='fight') return;
← e6c5071 Weapon loadout: Space=poke, Return=throw baguette, R=rocket,
·
back to Neon Baguette Battle
·
Fix select-card layout: scope global canvas rule to #game so 2398d24 →