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

Replace numbers with icons

Browse source 
Replace the numerical representation of people in the Sikinia Parliament puzzle with icons.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-23 20:55:30 +00:00
parent 6acfc2748b
commit 95c79baf92
1 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/SikiniaParliamentPuzzle.tsx
View file

@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Play, RotateCcw, Trophy, Clock, Info, ChevronDown, ChevronUp } from 'lucide-react';
import { Play, RotateCcw, Trophy, Clock, Info, ChevronDown, ChevronUp, Crown, Shield, Star, Heart, Diamond, Zap, Target, Award, Gem, Sparkles } from 'lucide-react';
import SocialShare from '@/components/SocialShare';
interface Person {
@ -215,6 +215,11 @@ const SikiniaParliamentPuzzle: React.FC<SikiniaParliamentPuzzleProps> = ({ showS
}
};
const getPersonIcon = (id: number) => {
const icons = [Crown, Shield, Star, Heart, Diamond, Zap, Target, Award, Gem, Sparkles];
return icons[id];
};
return (
<div className="min-h-screen bg-background p-6 space-y-6">
<Card>
@ -326,14 +331,25 @@ const SikiniaParliamentPuzzle: React.FC<SikiniaParliamentPuzzleProps> = ({ showS
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => colorPerson(person.id)}
/>
<text
x={person.x}
y={person.y + 5}
textAnchor="middle"
className="text-sm font-bold fill-white pointer-events-none"
<foreignObject
x={person.x - 10}
y={person.y - 10}
width="20"
height="20"
className="pointer-events-none"
>
{person.id + 1}
</text>
{(() => {
const IconComponent = getPersonIcon(person.id);
return (
<IconComponent
size={16}
color="white"
className="w-4 h-4"
style={{ display: 'block', margin: '2px auto' }}
/>
);
})()}
</foreignObject>
</g>
))}
</svg>