From a14ca6a607355b4de1d29261dc315c930d2c9a00 Mon Sep 17 00:00:00 2001
From: AskaEth <i@yeij.top>
Date: Sat, 25 Jul 2026 17:17:02 +0800
Subject: [PATCH] style: arc ticks taper from 2x at bottom to 1x at top

---
 dashboards/forza_composite/index.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/dashboards/forza_composite/index.html b/dashboards/forza_composite/index.html
index 8ffaddf..24c7e75 100644
--- a/dashboards/forza_composite/index.html
+++ b/dashboards/forza_composite/index.html
@@ -103,12 +103,15 @@ const M={aspect_ratio:"16:9",render_mode:"contain"};let GAME_ID='';
   ctx.clearRect(0,0,W,H);
   const tw=Math.max(54,W/11),th=Math.max(18,H/24),gap=Math.max(2,tw*.06);
 
-  // bg ticks
-  for(let i=0;i<N;i++){const p=tp(i);ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle='rgba(255,255,255,.04)';ctx.fillRect(-tw/2,-th/2,tw-gap,th);ctx.restore()}
+ // tick thickness varies: 2x at bottom arc, 1x at top
+ function twScale(i){if(i>=Na)return 1;return 2-(i/(Na-1))}
 
-  // progress
-  const pc=Math.min(cur/max,1),on=Math.round(pc*N),rl=max*.85;
-  for(let i=0;i<on;i++){const p=tp(i);ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle=cur>=rl?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-tw/2,-th/2,tw-gap,th);ctx.restore()}
+ // bg ticks
+ for(let i=0;i<N;i++){const p=tp(i),s=twScale(i),w=(tw-gap)*s,h=th*s;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle='rgba(255,255,255,.04)';ctx.fillRect(-w/2,-h/2,w,h);ctx.restore()}
+
+ // progress
+ const pc=Math.min(cur/max,1),on=Math.round(pc*N),rl=max*.85;
+ for(let i=0;i<on;i++){const p=tp(i),s=twScale(i),w=(tw-gap)*s,h=th*s;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle=cur>=rl?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-w/2,-h/2,w,h);ctx.restore()}
 
   // scale nums - larger
   const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W;