From 95c79baf92d0d6b6f11d9c7407b35324c183d11b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 23 Jul 2025 20:55:30 +0000
Subject: [PATCH] Replace numbers with icons

Replace the numerical representation of people in the Sikinia Parliament puzzle with icons.
---
 src/components/SikiniaParliamentPuzzle.tsx | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/SikiniaParliamentPuzzle.tsx b/src/components/SikiniaParliamentPuzzle.tsx
index 0eafb1b..0b6cf05 100644
--- a/src/components/SikiniaParliamentPuzzle.tsx
+++ b/src/components/SikiniaParliamentPuzzle.tsx
@@ -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>