Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

computing-pi: fraction-indicator dot on the H/T header

Browse source 
Small black dot on the H/T row at left: (H / total) * 100%. The
midpoint corresponds to H = T, so the dot crosses the middle exactly
when a run hits the stopping condition (H > T). Discarded runs end
the simulation with their dot still left of center.
This commit is contained in:
Claude 2026-04-21 12:31:11 +00:00
parent 1efdec5e44
commit 80ae2ecaa8
No known key found for this signature in database
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/interactives/ComputingPi.tsx
View file

@ -287,10 +287,18 @@ const RunTile: React.FC<RunTileProps> = ({ index, run, clickable, onClick }) =>
clickable ? 'cursor-pointer hover:border-primary' : 'cursor-default'
}`}
>
{/* H / T counters */}
<div className="flex justify-between items-center text-[10px] font-mono tabular-nums bg-black/5 dark:bg-white/5 px-2 py-0.5 text-muted-foreground">
{/* H / T counters with a fraction indicator dot — position = H/N,
midpoint = H=T, so the dot crosses the middle exactly when the run stops. */}
<div className="relative flex justify-between items-center text-[10px] font-mono tabular-nums bg-black/5 dark:bg-white/5 px-2 py-0.5 text-muted-foreground">
<span>H:{run.heads}</span>
<span>T:{run.tails}</span>
{run.sequence.length > 0 && (
<span
aria-hidden="true"
className="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-foreground"
style={{ left: `${(run.heads / run.sequence.length) * 100}%` }}
/>
)}
</div>
{/* Billboard + footer */}