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

Add numbers below circles

Browse source 
Add small-sized black font numbers below the circles in the Subtraction Game.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 11:37:18 +00:00
parent ddb1c17cb5
commit 28e09a1e28
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/SubtractionGame.tsx
View file

@ -212,14 +212,18 @@ const SubtractionGame: React.FC<SubtractionGameProps> = ({ showSocialShare = tru
<div className="bg-card rounded-lg p-8 shadow-lg"> <div className="bg-card rounded-lg p-8 shadow-lg">
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3">
{circles.map((_, index) => ( {circles.map((_, index) => (
<div <div key={index} className="flex flex-col items-center">
key={index} <div
className={getCircleClass(index)} className={getCircleClass(index)}
onClick={() => handleCircleClick(index)} onClick={() => handleCircleClick(index)}
onMouseEnter={() => (highlightedIndices.includes(index) && !removedCircles.has(index)) ? setHoveredIndex(index) : null} onMouseEnter={() => (highlightedIndices.includes(index) && !removedCircles.has(index)) ? setHoveredIndex(index) : null}
onMouseLeave={() => setHoveredIndex(null)} onMouseLeave={() => setHoveredIndex(null)}
title={highlightedIndices.includes(index) ? 'Click to select' : 'Not selectable'} title={highlightedIndices.includes(index) ? 'Click to select' : 'Not selectable'}
/> />
<span className="text-xs text-black dark:text-white mt-1 font-medium">
{index + 1}
</span>
</div>
))} ))}
</div> </div>