Visual edit in Lovable

Edited UI in Lovable

src/components/LadybugClockPuzzle.tsx

@@ -8,11 +8,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Play, Pause, RotateCcw, SkipForward, FastForward, Info, ExternalLink, BarChart3 } from 'lucide-react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } from 'recharts';
 import SocialShare from '@/components/SocialShare';
-
 interface LadybugClockPuzzleProps {
   showSocialShare?: boolean;
 }
-
 interface SimulationState {
   position: number; // 0-11 (0 = 12 o'clock, 1 = 1 o'clock, etc.)
   visited: Set<number>;
@@ -21,10 +19,10 @@ interface SimulationState {
   isComplete: boolean;
   moveCount: number;
 }
-
 const CLOCK_NUMBERS = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-
+const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({
-const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare = true }) => {
+  showSocialShare = true
+}) => {
   // Simulation state
   const [simulation, setSimulation] = useState<SimulationState>({
     position: 0,
@@ -53,14 +51,13 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
   // Refs
   const animationRef = useRef<number | null>(null);
   const isPlayingRef = useRef(isPlaying);
-  
   useEffect(() => {
     isPlayingRef.current = isPlaying;
   }, [isPlaying]);
 
   // Get delay from speed (inverse relationship)
   const getDelay = useCallback(() => {
-    return Math.max(50, 1000 - (speed * 9));
+    return Math.max(50, 1000 - speed * 9);
   }, [speed]);
 
   // Reset simulation
@@ -87,14 +84,11 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
       // Random move: clockwise or counterclockwise
       const direction = Math.random() < 0.5 ? 1 : -1;
       const newPosition = ((prev.position + direction) % numPositions + numPositions) % numPositions;
-      
       const newVisited = new Set(prev.visited);
       const wasNewlyPainted = !newVisited.has(newPosition);
       newVisited.add(newPosition);
-      
       const isNowComplete = newVisited.size === numPositions;
       const lastPainted = isNowComplete && wasNewlyPainted ? newPosition : prev.lastPainted;
-      
       return {
         position: newPosition,
         visited: newVisited,
@@ -111,13 +105,11 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
     if (!isPlaying || simulation.isComplete) {
       return;
     }
-
     const timeoutId = setTimeout(() => {
       if (isPlayingRef.current && !simulation.isComplete) {
         step();
       }
     }, getDelay());
-
     return () => clearTimeout(timeoutId);
   }, [isPlaying, simulation, step, getDelay]);
 
@@ -134,44 +126,40 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
     const visited = new Set([0]);
     let moveCount = 0;
     let lastPainted = 0;
-    
     while (visited.size < numPositions) {
       const direction = Math.random() < 0.5 ? 1 : -1;
       position = ((position + direction) % numPositions + numPositions) % numPositions;
-      
       if (!visited.has(position)) {
         lastPainted = position;
         visited.add(position);
       }
       moveCount++;
     }
-    
+    return {
-    return { lastPainted, moveCount };
+      lastPainted,
+      moveCount
+    };
   }, [numPositions]);
 
   // Run to completion
   const runToCompletion = useCallback(() => {
     setIsPlaying(false);
-    
     let currentSim = simulation;
     let position = currentSim.position;
     const visited = new Set(currentSim.visited);
     let moveCount = currentSim.moveCount;
     let lastPainted = currentSim.lastPainted;
     const path = [...currentSim.path];
-    
     while (visited.size < numPositions) {
       const direction = Math.random() < 0.5 ? 1 : -1;
       position = ((position + direction) % numPositions + numPositions) % numPositions;
       path.push(position);
-      
       if (!visited.has(position)) {
         lastPainted = position;
         visited.add(position);
       }
       moveCount++;
     }
-    
     setSimulation({
       position,
       visited,
@@ -184,15 +172,15 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
 
   // Run batch simulations
   const runBatchSimulations = useCallback((count: number) => {
-    const newCounts = { ...lastPaintedCounts };
+    const newCounts = {
+      ...lastPaintedCounts
+    };
     let batchMoves = 0;
-    
     for (let i = 0; i < count; i++) {
       const result = runInstantSimulation();
       newCounts[result.lastPainted] = (newCounts[result.lastPainted] || 0) + 1;
       batchMoves += result.moveCount;
     }
-    
     setLastPaintedCounts(newCounts);
     setTotalSimulations(prev => prev + count);
     setTotalMoves(prev => prev + batchMoves);
@@ -225,7 +213,7 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
 
   // Calculate clock position for a given index
   const getClockPosition = (index: number, radius: number) => {
-    const angle = (index / numPositions) * 2 * Math.PI - Math.PI / 2;
+    const angle = index / numPositions * 2 * Math.PI - Math.PI / 2;
     return {
       x: Math.cos(angle) * radius,
       y: Math.sin(angle) * radius
@@ -233,10 +221,12 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
   };
 
   // Prepare chart data
-  const chartData = Array.from({ length: numPositions - 1 }, (_, i) => {
+  const chartData = Array.from({
+    length: numPositions - 1
+  }, (_, i) => {
     const pos = i + 1; // 1 to n-1 (0/12 can't be last)
     const count = lastPaintedCounts[pos] || 0;
-    const percentage = totalSimulations > 0 ? (count / totalSimulations) * 100 : 0;
+    const percentage = totalSimulations > 0 ? count / totalSimulations * 100 : 0;
     return {
       position: positionToNumber(pos),
       count,
@@ -244,15 +234,9 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
       label: `${positionToNumber(pos)}`
     };
   });
-
   const theoreticalProbability = 100 / (numPositions - 1);
-
+  const shareUrl = typeof window !== 'undefined' ? `${window.location.origin}/puzzles/ladybug-clock` : '';
-  const shareUrl = typeof window !== 'undefined' 
+  return <div className="w-full max-w-6xl mx-auto px-4 space-y-6">
-    ? `${window.location.origin}/puzzles/ladybug-clock`
-    : '';
-
-  return (
-    <div className="w-full max-w-6xl mx-auto px-4 space-y-6">
       {/* Header */}
       <div className="text-center space-y-2">
         <h1 className="text-3xl font-bold text-foreground">The Ladybug Clock Puzzle</h1>
@@ -272,71 +256,34 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
                 <circle cx="0" cy="0" r="120" fill="none" stroke="#3d3d5c" strokeWidth="1" strokeDasharray="4 4" />
                 
                 {/* Hour markers and numbers */}
-                {Array.from({ length: numPositions }, (_, i) => {
+                {Array.from({
-                  const pos = getClockPosition(i, 100);
+                length: numPositions
-                  const isPainted = simulation.visited.has(i);
+              }, (_, i) => {
-                  const isLast = simulation.isComplete && simulation.lastPainted === i;
+                const pos = getClockPosition(i, 100);
-                  const isCurrent = simulation.position === i;
+                const isPainted = simulation.visited.has(i);
-                  
+                const isLast = simulation.isComplete && simulation.lastPainted === i;
-                  return (
+                const isCurrent = simulation.position === i;
-                    <g key={i}>
+                return <g key={i}>
                       {/* Tick mark */}
-                      <line
+                      <line x1={getClockPosition(i, 115).x} y1={getClockPosition(i, 115).y} x2={getClockPosition(i, 125).x} y2={getClockPosition(i, 125).y} stroke={isPainted ? '#f59e0b' : '#6b7280'} strokeWidth="2" />
-                        x1={getClockPosition(i, 115).x}
-                        y1={getClockPosition(i, 115).y}
-                        x2={getClockPosition(i, 125).x}
-                        y2={getClockPosition(i, 125).y}
-                        stroke={isPainted ? '#f59e0b' : '#6b7280'}
-                        strokeWidth="2"
-                      />
                       
                       {/* Number circle background */}
-                      <circle
+                      <circle cx={pos.x} cy={pos.y} r="20" fill={isLast ? '#ef4444' : isPainted ? '#f59e0b' : '#374151'} className="transition-all duration-300" />
-                        cx={pos.x}
-                        cy={pos.y}
-                        r="20"
-                        fill={isLast ? '#ef4444' : isPainted ? '#f59e0b' : '#374151'}
-                        className="transition-all duration-300"
-                      />
                       
                       {/* Glow effect for newly painted or last */}
-                      {(isPainted || isLast) && (
+                      {(isPainted || isLast) && <circle cx={pos.x} cy={pos.y} r="24" fill="none" stroke={isLast ? '#ef4444' : '#f59e0b'} strokeWidth="2" opacity="0.5" />}
-                        <circle
-                          cx={pos.x}
-                          cy={pos.y}
-                          r="24"
-                          fill="none"
-                          stroke={isLast ? '#ef4444' : '#f59e0b'}
-                          strokeWidth="2"
-                          opacity="0.5"
-                        />
-                      )}
                       
                       {/* Number text */}
-                      <text
+                      <text x={pos.x} y={pos.y} textAnchor="middle" dominantBaseline="central" fill={isPainted ? '#1a1a2e' : '#d1d5db'} fontSize="14" fontWeight="bold" className="select-none">
-                        x={pos.x}
-                        y={pos.y}
-                        textAnchor="middle"
-                        dominantBaseline="central"
-                        fill={isPainted ? '#1a1a2e' : '#d1d5db'}
-                        fontSize="14"
-                        fontWeight="bold"
-                        className="select-none"
-                      >
                         {positionToNumber(i)}
                       </text>
-                    </g>
+                    </g>;
-                  );
+              })}
-                })}
                 
                 {/* Ladybug */}
                 {(() => {
-                  const ladybugPos = getClockPosition(simulation.position, 100);
+                const ladybugPos = getClockPosition(simulation.position, 100);
-                  return (
+                return <g transform={`translate(${ladybugPos.x}, ${ladybugPos.y})`} className="transition-transform duration-200">
-                    <g 
-                      transform={`translate(${ladybugPos.x}, ${ladybugPos.y})`}
-                      className="transition-transform duration-200"
-                    >
                       {/* Ladybug body */}
                       <ellipse cx="0" cy="-30" rx="12" ry="15" fill="#dc2626" />
                       {/* Head */}
@@ -351,9 +298,8 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
                       {/* Antennae */}
                       <line x1="-3" y1="-52" x2="-6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
                       <line x1="3" y1="-52" x2="6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
-                    </g>
+                    </g>;
-                  );
+              })()}
-                })()}
                 
                 {/* Center decoration */}
                 <circle cx="0" cy="0" r="8" fill="#4a4a6a" />
@@ -374,13 +320,11 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
                 </Badge>
               </div>
               
-              {simulation.isComplete && simulation.lastPainted !== null && (
+              {simulation.isComplete && simulation.lastPainted !== null && <div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg">
-                <div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg">
                   <p className="text-red-400 font-semibold">
                     🎉 Complete! Last painted: <span className="text-red-300 text-lg">{positionToNumber(simulation.lastPainted)}</span>
                   </p>
-                </div>
+                </div>}
-              )}
             </div>
           </CardContent>
         </Card>
@@ -394,32 +338,17 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="flex flex-wrap gap-2">
-                <Button
+                <Button onClick={() => setIsPlaying(!isPlaying)} disabled={simulation.isComplete} variant={isPlaying ? "destructive" : "default"} size="sm">
-                  onClick={() => setIsPlaying(!isPlaying)}
-                  disabled={simulation.isComplete}
-                  variant={isPlaying ? "destructive" : "default"}
-                  size="sm"
-                >
                   {isPlaying ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
                   {isPlaying ? 'Pause' : 'Play'}
                 </Button>
                 
-                <Button
+                <Button onClick={step} disabled={simulation.isComplete || isPlaying} variant="outline" size="sm">
-                  onClick={step}
-                  disabled={simulation.isComplete || isPlaying}
-                  variant="outline"
-                  size="sm"
-                >
                   <SkipForward className="w-4 h-4 mr-1" />
                   Step
                 </Button>
                 
-                <Button
+                <Button onClick={runToCompletion} disabled={simulation.isComplete} variant="outline" size="sm">
-                  onClick={runToCompletion}
-                  disabled={simulation.isComplete}
-                  variant="outline"
-                  size="sm"
-                >
                   <FastForward className="w-4 h-4 mr-1" />
                   Complete
                 </Button>
@@ -432,26 +361,12 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
               
               <div className="space-y-2">
                 <label className="text-sm text-muted-foreground">Animation Speed</label>
-                <Slider
+                <Slider value={[speed]} onValueChange={v => setSpeed(v[0])} min={1} max={100} step={1} className="w-full" />
-                  value={[speed]}
-                  onValueChange={(v) => setSpeed(v[0])}
-                  min={1}
-                  max={100}
-                  step={1}
-                  className="w-full"
-                />
               </div>
               
               <div className="space-y-2">
                 <label className="text-sm text-muted-foreground">Number of Positions: {numPositions}</label>
-                <Slider
+                <Slider value={[numPositions]} onValueChange={v => setNumPositions(v[0])} min={4} max={24} step={2} className="w-full" />
-                  value={[numPositions]}
-                  onValueChange={(v) => setNumPositions(v[0])}
-                  min={4}
-                  max={24}
-                  step={2}
-                  className="w-full"
-                />
               </div>
             </CardContent>
           </Card>
@@ -466,16 +381,9 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="flex flex-wrap gap-2">
-                {[100, 1000, 10000].map(count => (
+                {[100, 1000, 10000].map(count => <Button key={count} onClick={() => runBatchSimulations(count)} variant="outline" size="sm">
-                  <Button
-                    key={count}
-                    onClick={() => runBatchSimulations(count)}
-                    variant="outline"
-                    size="sm"
-                  >
                     Run {count.toLocaleString()}
-                  </Button>
+                  </Button>)}
-                ))}
                 <Button onClick={clearStats} variant="ghost" size="sm">
                   Clear Stats
                 </Button>
@@ -485,18 +393,15 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
                 <p className="text-muted-foreground">
                   Total simulations: <span className="text-foreground font-medium">{totalSimulations.toLocaleString()}</span>
                 </p>
-                {totalSimulations > 0 && (
+                {totalSimulations > 0 && <p className="text-muted-foreground">
-                  <p className="text-muted-foreground">
                     Average moves to complete: <span className="text-foreground font-medium">{averageMoves.toFixed(1)}</span>
-                  </p>
+                  </p>}
-                )}
               </div>
             </CardContent>
           </Card>
 
           {/* User Prediction */}
-          {totalSimulations === 0 && (
+          {totalSimulations === 0 && <Card className="border-primary/50 bg-primary/5">
-            <Card className="border-primary/50 bg-primary/5">
               <CardHeader className="pb-3">
                 <CardTitle className="text-lg">Make a Prediction! 🤔</CardTitle>
               </CardHeader>
@@ -505,32 +410,22 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
                   Which number do you think is most likely to be painted last?
                 </p>
                 <div className="flex flex-wrap gap-2">
-                  {Array.from({ length: numPositions - 1 }, (_, i) => i + 1).map(pos => (
+                  {Array.from({
-                    <Button
+                length: numPositions - 1
-                      key={pos}
+              }, (_, i) => i + 1).map(pos => <Button key={pos} onClick={() => setUserPrediction(pos)} variant={userPrediction === pos ? "default" : "outline"} size="sm" className="w-10 h-10">
-                      onClick={() => setUserPrediction(pos)}
-                      variant={userPrediction === pos ? "default" : "outline"}
-                      size="sm"
-                      className="w-10 h-10"
-                    >
                       {positionToNumber(pos)}
-                    </Button>
+                    </Button>)}
-                  ))}
                 </div>
-                {userPrediction !== null && (
+                {userPrediction !== null && <p className="mt-3 text-sm text-primary">
-                  <p className="mt-3 text-sm text-primary">
                     You predicted: <strong>{positionToNumber(userPrediction)}</strong>. Run some simulations to see!
-                  </p>
+                  </p>}
-                )}
               </CardContent>
-            </Card>
+            </Card>}
-          )}
         </div>
       </div>
 
       {/* Statistics Chart */}
-      {totalSimulations > 0 && (
+      {totalSimulations > 0 && <Card>
-        <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               Statistics: Which number was painted last?
@@ -540,52 +435,42 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
           <CardContent>
             <div className="h-64">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+                <BarChart data={chartData} margin={{
+              top: 20,
+              right: 30,
+              left: 20,
+              bottom: 5
+            }}>
                   <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                   <XAxis dataKey="label" stroke="#9ca3af" />
-                  <YAxis 
+                  <YAxis stroke="#9ca3af" tickFormatter={v => `${v.toFixed(1)}%`} domain={[0, Math.max(theoreticalProbability * 1.5, 15)]} />
-                    stroke="#9ca3af" 
+                  <Tooltip contentStyle={{
-                    tickFormatter={(v) => `${v.toFixed(1)}%`}
+                backgroundColor: '#1f2937',
-                    domain={[0, Math.max(theoreticalProbability * 1.5, 15)]}
+                border: '1px solid #374151'
-                  />
+              }} labelStyle={{
-                  <Tooltip 
+                color: '#f3f4f6'
-                    contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151' }}
+              }} formatter={(value: number) => [`${value.toFixed(2)}%`, 'Probability']} />
-                    labelStyle={{ color: '#f3f4f6' }}
+                  <ReferenceLine y={theoreticalProbability} stroke="#22c55e" strokeDasharray="5 5" label={{
-                    formatter={(value: number) => [`${value.toFixed(2)}%`, 'Probability']}
+                value: `Theory: ${theoreticalProbability.toFixed(2)}%`,
-                  />
+                fill: '#22c55e',
-                  <ReferenceLine 
+                fontSize: 12,
-                    y={theoreticalProbability} 
+                position: 'right'
-                    stroke="#22c55e" 
+              }} />
-                    strokeDasharray="5 5" 
-                    label={{ 
-                      value: `Theory: ${theoreticalProbability.toFixed(2)}%`, 
-                      fill: '#22c55e',
-                      fontSize: 12,
-                      position: 'right'
-                    }} 
-                  />
                   <Bar dataKey="percentage" radius={[4, 4, 0, 0]}>
-                    {chartData.map((entry, index) => (
+                    {chartData.map((entry, index) => <Cell key={`cell-${index}`} fill={userPrediction === index + 1 ? '#8b5cf6' : '#f59e0b'} />)}
-                      <Cell 
-                        key={`cell-${index}`} 
-                        fill={userPrediction === index + 1 ? '#8b5cf6' : '#f59e0b'} 
-                      />
-                    ))}
                   </Bar>
                 </BarChart>
               </ResponsiveContainer>
             </div>
             
-            {userPrediction !== null && (
+            {userPrediction !== null && <div className="mt-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
-              <div className="mt-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
                 <p className="text-sm">
                   <strong className="text-purple-400">Your prediction ({positionToNumber(userPrediction)}):</strong>{' '}
                   {((lastPaintedCounts[userPrediction] || 0) / totalSimulations * 100).toFixed(2)}%
                   {' '}— Theory predicts all numbers have equal probability of{' '}
                   <span className="text-green-400">{theoreticalProbability.toFixed(2)}%</span>!
                 </p>
-              </div>
+              </div>}
-            )}
             
             <div className="mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
               <p className="text-sm text-amber-200">
@@ -594,34 +479,21 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
               </p>
             </div>
           </CardContent>
-        </Card>
+        </Card>}
-      )}
 
       {/* Path History */}
-      {simulation.path.length > 1 && (
+      {simulation.path.length > 1 && <Card>
-        <Card>
           <CardHeader className="pb-3">
             <CardTitle className="text-lg">Path History</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
-              {simulation.path.map((pos, i) => (
+              {simulation.path.map((pos, i) => <Badge key={i} variant={i === 0 ? "default" : "outline"} className={`${simulation.isComplete && i === simulation.path.length - 1 ? 'bg-red-500 text-white' : ''}`}>
-                <Badge 
-                  key={i} 
-                  variant={i === 0 ? "default" : "outline"}
-                  className={`${
-                    simulation.isComplete && i === simulation.path.length - 1 
-                      ? 'bg-red-500 text-white' 
-                      : ''
-                  }`}
-                >
                   {positionToNumber(pos)}
-                </Badge>
+                </Badge>)}
-              ))}
             </div>
           </CardContent>
-        </Card>
+        </Card>}
-      )}
 
       {/* Educational Info */}
       <Card>
@@ -641,19 +513,14 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
               <li>The simulation ends when all numbers have been visited at least once</li>
             </ul>
             
-            <h4 className="text-foreground">The Surprising Result</h4>
-            <p className="text-muted-foreground">
-              Intuitively, you might expect the number 6 (opposite to 12) to be the most likely to be painted last, 
-              since it's the farthest from the starting point. However, the probability is exactly <strong>1/{numPositions - 1}</strong> for 
-              every number from 1 to {numPositions - 1}! This is because once all but one number is painted, the random walk 
-              will eventually reach that last number, regardless of where it is.
-            </p>
             
-            <h4 className="text-foreground">Mathematical Connections</h4>
+            
+            
+            
             <ul className="text-muted-foreground">
-              <li><strong>Random Walks on Cycles:</strong> This is an example of a random walk on a cycle graph</li>
+              
-              <li><strong>Cover Time:</strong> The number of moves to visit all vertices is called the "cover time"</li>
+              
-              <li><strong>Gambler's Ruin:</strong> Related to the classic probability problem of a gambler with a finite amount</li>
+              
             </ul>
           </div>
         </CardContent>
@@ -675,15 +542,7 @@ const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare
         </CardContent>
       </Card>
 
-      {showSocialShare && (
+      {showSocialShare && <SocialShare title="The Ladybug Clock Puzzle" description="Explore random walks on a clock face and discover why every number has the same probability of being painted last!" url={shareUrl} />}
-        <SocialShare 
+    </div>;
-          title="The Ladybug Clock Puzzle" 
-          description="Explore random walks on a clock face and discover why every number has the same probability of being painted last!" 
-          url={shareUrl}
-        />
-      )}
-    </div>
-  );
 };
-
 export default LadybugClockPuzzle;