Add blinking effect to nodes

Implement a random blinking effect for the nodes in the NetworkAnimation component to enhance visual dynamics.
[skip gpt_engineer]

src/components/game/animations/NetworkAnimation.tsx

@@ -7,18 +7,20 @@ interface Node {
   y: number;
   size: number;
   delay: number;
+  isGreen: boolean;  // New property to determine node color
 }
 
 export const NetworkAnimation = ({ className = '' }: { className?: string }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   
-  // Generate nodes with different sizes and positions
+  // Generate nodes with different sizes, positions, and colors
   const nodes: Node[] = Array.from({ length: 15 }, (_, i) => ({
     id: i,
     x: 20 + Math.random() * 60,
     y: 20 + Math.random() * 60,
-    size: 3 + Math.random() * 3, // Larger nodes (3-6px)
+    size: 3 + Math.random() * 3,
-    delay: i * 0.1
+    delay: i * 0.1,
+    isGreen: Math.random() > 0.7  // 30% chance of being green
   }));
 
   // Create pairs of nodes for connections
@@ -27,7 +29,7 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
       id: `${node.id}-${otherNode.id}`,
       from: node,
       to: otherNode,
-      opacity: Math.random() * 0.5 + 0.2 // Higher opacity (0.2-0.7)
+      opacity: Math.random() * 0.5 + 0.2
     }))
   );
 
@@ -37,7 +39,6 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
       className={`relative w-full h-40 overflow-hidden bg-black/20 rounded-lg ${className}`}
     >
       <svg className="absolute inset-0 w-full h-full">
-        {/* Render connections between nodes */}
         {connections.map(({ id, from, to, opacity }) => (
           <motion.line
             key={id}
@@ -45,13 +46,13 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
             y1={`${from.y}%`}
             x2={`${to.x}%`}
             y2={`${to.y}%`}
-            stroke="rgba(255, 215, 0, 0.4)" // Brighter connections
+            stroke={`rgba(${from.isGreen && to.isGreen ? '0, 255, 0' : '255, 215, 0'}, 0.4)`}
-            strokeWidth="1" // Thicker lines
+            strokeWidth="1"
             initial={{ opacity: 0, pathLength: 0 }}
             animate={{
               opacity: [0, opacity, opacity/2],
               pathLength: [0, 1, 1],
-              strokeWidth: [1, 2, 1] // Pulsing line thickness
+              strokeWidth: [1, 2, 1]
             }}
             transition={{
               duration: 2,
@@ -64,7 +65,6 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
         ))}
       </svg>
 
-      {/* Render nodes */}
       {nodes.map((node) => (
         <motion.div
           key={node.id}
@@ -79,20 +79,8 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
           animate={{
             scale: [0, 1.2, 1],
             opacity: [0, 1, 0.8],
-            x: [
+            x: [-15, 15, -10, 10, 0],
-              -15,
+            y: [-10, 10, -15, 15, 0]
-              15,
-              -10,
-              10,
-              0
-            ],
-            y: [
-              -10,
-              10,
-              -15,
-              15,
-              0
-            ]
           }}
           transition={{
             duration: 6,
@@ -104,13 +92,13 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
         >
           {/* Core node */}
           <motion.div
-            className="absolute w-full h-full rounded-full bg-yellow-400" // Brighter yellow
+            className={`absolute w-full h-full rounded-full ${node.isGreen ? 'bg-green-400' : 'bg-yellow-400'}`}
             animate={{
               scale: [1, 1.5, 1],
-              opacity: [0.8, 1, 0.8],
+              opacity: node.isGreen ? [0.8, 0.2, 0.8] : [0.8, 1, 0.8],
             }}
             transition={{
-              duration: 1.5,
+              duration: node.isGreen ? 1 : 1.5,
               repeat: Infinity,
               ease: "easeInOut",
             }}
@@ -118,9 +106,9 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
           
           {/* Outer glow */}
           <motion.div
-            className="absolute w-full h-full rounded-full bg-yellow-400/40" // Brighter glow
+            className={`absolute w-full h-full rounded-full ${node.isGreen ? 'bg-green-400/40' : 'bg-yellow-400/40'}`}
             animate={{
-              scale: [1, 4, 1], // Larger glow
+              scale: [1, 4, 1],
               opacity: [0.4, 0, 0.4],
             }}
             transition={{
@@ -135,12 +123,14 @@ export const NetworkAnimation = ({ className = '' }: { className?: string }) =>
           {Array.from({ length: 4 }).map((_, i) => (
             <motion.div
               key={i}
-              className="absolute w-1.5 h-1.5 rounded-full bg-yellow-300/30" // Larger, brighter particles
+              className={`absolute w-1.5 h-1.5 rounded-full ${
+                node.isGreen ? 'bg-green-300/30' : 'bg-yellow-300/30'
+              }`}
               animate={{
-                x: [0, (i - 1.5) * 15], // Wider spread
+                x: [0, (i - 1.5) * 15],
                 y: [0, (i - 1.5) * 15],
-                scale: [0, 1.5, 0], // Larger scale
+                scale: [0, 1.5, 0],
-                opacity: [0, 0.7, 0], // Higher opacity
+                opacity: [0, 0.7, 0],
               }}
               transition={{
                 duration: 1.5,