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' clickable ? 'cursor-pointer hover:border-primary' : 'cursor-default'
}`} }`}
> >
{/* H / T counters */} {/* H / T counters with a fraction indicator dot — position = H/N,
<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"> 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>H:{run.heads}</span>
<span>T:{run.tails}</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> </div>
{/* Billboard + footer */} {/* Billboard + footer */}