Add player-specific styling

Updated Subtraction Game to visually distinguish between moves made by "Lata" and "Raj". Circles taken by Lata will now have a dashed blue border, while those taken by Raj will have a dashed purple border. Additionally, Lata's background has been changed from red to a muted blue.
-edited src/components/SubtractionGame.tsx

src/components/SubtractionGame.tsx

@@ -9,6 +9,7 @@ const SubtractionGame = () => {
   const [gameStarted, setGameStarted] = useState(false);
   const [circles, setCircles] = useState<number[]>([]);
   const [removedCircles, setRemovedCircles] = useState<Set<number>>(new Set());
+  const [removedByPlayer, setRemovedByPlayer] = useState<Map<number, 'Lata' | 'Raj'>>(new Map());
   const [currentPlayer, setCurrentPlayer] = useState<'Lata' | 'Raj'>('Lata');
   const [winner, setWinner] = useState<string | null>(null);
   const [highlightedIndices, setHighlightedIndices] = useState<number[]>([]);
@@ -39,6 +40,7 @@ const SubtractionGame = () => {
     const initialCircles = Array.from({ length: n[0] }, (_, i) => i);
     setCircles(initialCircles);
     setRemovedCircles(new Set());
+    setRemovedByPlayer(new Map());
     setGameStarted(true);
     setCurrentPlayer('Lata');
     setWinner(null);
@@ -48,6 +50,7 @@ const SubtractionGame = () => {
     setGameStarted(false);
     setCircles([]);
     setRemovedCircles(new Set());
+    setRemovedByPlayer(new Map());
     setWinner(null);
     setCurrentPlayer('Lata');
     setHighlightedIndices([]);
@@ -61,15 +64,18 @@ const SubtractionGame = () => {
 
     // Mark all circles from clicked index onwards as removed
     const newRemovedCircles = new Set(removedCircles);
+    const newRemovedByPlayer = new Map(removedByPlayer);
     const activeCircles = circles.filter(i => !removedCircles.has(i));
     const clickedPosition = activeCircles.indexOf(index);
     
     // Remove all circles from clicked position onwards
     for (let i = clickedPosition; i < activeCircles.length; i++) {
       newRemovedCircles.add(activeCircles[i]);
+      newRemovedByPlayer.set(activeCircles[i], currentPlayer);
     }
     
     setRemovedCircles(newRemovedCircles);
+    setRemovedByPlayer(newRemovedByPlayer);
 
     // Check if game is over (no active circles left)
     const remainingActive = circles.filter(i => !newRemovedCircles.has(i));
@@ -91,7 +97,7 @@ const SubtractionGame = () => {
 
   const getBackgroundColor = () => {
     if (!gameStarted || winner) return 'bg-background';
-    return currentPlayer === 'Lata' ? 'bg-red-100 dark:bg-red-950' : 'bg-purple-100 dark:bg-purple-950';
+    return currentPlayer === 'Lata' ? 'bg-blue-100 dark:bg-blue-950' : 'bg-purple-100 dark:bg-purple-950';
   };
 
   const getCircleClass = (index: number) => {
@@ -100,7 +106,9 @@ const SubtractionGame = () => {
     const isHovered = hoveredIndex !== null && index >= hoveredIndex;
     
     if (isRemoved) {
-      return 'w-8 h-8 rounded-full border border-gray-300 bg-transparent';
+      const removedBy = removedByPlayer.get(index);
+      const borderColor = removedBy === 'Lata' ? 'border-blue-400' : 'border-purple-400';
+      return `w-8 h-8 rounded-full border-2 border-dashed bg-transparent ${borderColor}`;
     }
     
     const baseClass = `w-8 h-8 rounded-full border-2 border-black transition-colors ${isHighlighted ? 'cursor-pointer' : ''}`;