From 1c6b1641e41a693701b160af0a5ca325126bd96e Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Wed, 19 Nov 2025 02:59:44 +0000 Subject: [PATCH] Visual edit in Lovable Edited UI in Lovable --- src/components/PresentsPuzzle.tsx | 178 ++++++++++-------------------- 1 file changed, 56 insertions(+), 122 deletions(-) diff --git a/src/components/PresentsPuzzle.tsx b/src/components/PresentsPuzzle.tsx index 62e096a..606b3e5 100644 --- a/src/components/PresentsPuzzle.tsx +++ b/src/components/PresentsPuzzle.tsx @@ -4,19 +4,19 @@ import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import SocialShare from './SocialShare'; import { Gift, Play, RotateCw, Zap } from 'lucide-react'; - interface PresentsPuzzleProps { showSocialShare?: boolean; shareUrl?: string; } - interface SimulationResult { alice: number; bob: number; ties: number; } - -const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzleProps) => { +const PresentsPuzzle = ({ + showSocialShare = false, + shareUrl +}: PresentsPuzzleProps) => { const [presentBoxes, setPresentBoxes] = useState>(new Set()); const [aliceOpened, setAliceOpened] = useState>(new Set()); const [bobOpened, setBobOpened] = useState>(new Set()); @@ -24,7 +24,11 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro const [bobFound, setBobFound] = useState(0); const [isRunning, setIsRunning] = useState(false); const [winner, setWinner] = useState<'alice' | 'bob' | 'tie' | null>(null); - const [simulationResults, setSimulationResults] = useState({ alice: 0, bob: 0, ties: 0 }); + const [simulationResults, setSimulationResults] = useState({ + alice: 0, + bob: 0, + ties: 0 + }); const [hasSimulated, setHasSimulated] = useState(false); // Generate random present positions @@ -38,13 +42,19 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro // Get Alice's opening order: 1, 2, 3, ..., 100 const getAliceOrder = (): number[] => { - return Array.from({ length: 100 }, (_, i) => i + 1); + return Array.from({ + length: 100 + }, (_, i) => i + 1); }; // Get Bob's opening order: 1, 3, 5, ..., 99, 2, 4, 6, ..., 100 const getBobOrder = (): number[] => { - const odds = Array.from({ length: 50 }, (_, i) => i * 2 + 1); - const evens = Array.from({ length: 50 }, (_, i) => (i + 1) * 2); + const odds = Array.from({ + length: 50 + }, (_, i) => i * 2 + 1); + const evens = Array.from({ + length: 50 + }, (_, i) => (i + 1) * 2); return [...odds, ...evens]; }; @@ -52,14 +62,11 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro const simulateRound = (presents: Set): 'alice' | 'bob' | 'tie' => { const aliceOrder = getAliceOrder(); const bobOrder = getBobOrder(); - let aliceCount = 0; let bobCount = 0; - for (let i = 0; i < 100; i++) { const aliceFoundPresent = presents.has(aliceOrder[i]); const bobFoundPresent = presents.has(bobOrder[i]); - if (aliceFoundPresent) aliceCount++; if (bobFoundPresent) bobCount++; @@ -70,7 +77,6 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro if (aliceCount === 26) return 'alice'; if (bobCount === 26) return 'bob'; } - return 'tie'; // Default, though this should never happen }; @@ -82,34 +88,26 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro setBobOpened(new Set()); setAliceFound(0); setBobFound(0); - const presents = generatePresents(); setPresentBoxes(presents); - const aliceOrder = getAliceOrder(); const bobOrder = getBobOrder(); - let aliceCount = 0; let bobCount = 0; let currentWinner: 'alice' | 'bob' | 'tie' | null = null; - for (let i = 0; i < 100 && !currentWinner; i++) { await new Promise(resolve => setTimeout(resolve, 50)); // Animation delay const aliceBox = aliceOrder[i]; const bobBox = bobOrder[i]; - setAliceOpened(prev => new Set(prev).add(aliceBox)); setBobOpened(prev => new Set(prev).add(bobBox)); - const aliceFoundPresent = presents.has(aliceBox); const bobFoundPresent = presents.has(bobBox); - if (aliceFoundPresent) { aliceCount++; setAliceFound(aliceCount); } - if (bobFoundPresent) { bobCount++; setBobFound(bobCount); @@ -124,7 +122,6 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro currentWinner = 'bob'; } } - setWinner(currentWinner); setIsRunning(false); }; @@ -142,8 +139,11 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro // Run 100 simulations const runMultipleSimulations = () => { - const results: SimulationResult = { alice: 0, bob: 0, ties: 0 }; - + const results: SimulationResult = { + alice: 0, + bob: 0, + ties: 0 + }; for (let i = 0; i < 100; i++) { const presents = generatePresents(); const winner = simulateRound(presents); @@ -155,20 +155,13 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro results.ties++; } } - setSimulationResults(results); setHasSimulated(true); }; // Render a grid of boxes - const renderGrid = ( - title: string, - openedBoxes: Set, - found: number, - color: string - ) => { - return ( -
+ const renderGrid = (title: string, openedBoxes: Set, found: number, color: string) => { + return

{title}

@@ -177,41 +170,28 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro
- {Array.from({ length: 100 }, (_, i) => i + 1).map((boxNum) => { - const hasPresent = presentBoxes.has(boxNum); - const isOpened = openedBoxes.has(boxNum); - const showPresent = isOpened && hasPresent; - - return ( -
i + 1).map(boxNum => { + const hasPresent = presentBoxes.has(boxNum); + const isOpened = openedBoxes.has(boxNum); + const showPresent = isOpened && hasPresent; + return
+ ${isOpened ? showPresent ? 'bg-[#808000] text-white border-[#606000] shadow-sm' : 'bg-muted border-border text-muted-foreground' : 'bg-gray-400 border-gray-500 text-gray-700'} + `} title={`Box ${boxNum}${hasPresent ? ' (Present!)' : ''}`}> {showPresent ? : boxNum} -
- ); - })} +
; + })}
{title === 'Alice' && 'Opens in order: 1, 2, 3, 4, 5, ...'} {title === 'Bob' && 'Opens odds first, then evens: 1, 3, 5, ..., 2, 4, 6, ...'}
-
- ); +
; }; - - return ( -
+ return
@@ -242,37 +222,23 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro
{/* Winner Display */} - {winner && ( - + {winner &&
- {winner === 'tie' - ? "🤝 It's a tie! Both found all 26 presents at the same time!" - : `🎉 ${winner === 'alice' ? 'Alice' : 'Bob'} found all 26 presents first!` - } + {winner === 'tie' ? "🤝 It's a tie! Both found all 26 presents at the same time!" : `🎉 ${winner === 'alice' ? 'Alice' : 'Bob'} found all 26 presents first!`}
- - )} + } {/* Control Buttons */}
- - @@ -281,20 +247,14 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro {/* Simulate 100 */}
-
{/* Results */} - {hasSimulated && ( - + {hasSimulated && Results from 100 Simulations @@ -306,7 +266,7 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro
Alice Wins
- {((simulationResults.alice / 100) * 100).toFixed(1)}% + {(simulationResults.alice / 100 * 100).toFixed(1)}%
@@ -315,7 +275,7 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro
Bob Wins
- {((simulationResults.bob / 100) * 100).toFixed(1)}% + {(simulationResults.bob / 100 * 100).toFixed(1)}%
@@ -324,26 +284,18 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro
Ties
- {((simulationResults.ties / 100) * 100).toFixed(1)}% + {(simulationResults.ties / 100 * 100).toFixed(1)}%

- {simulationResults.alice > simulationResults.bob && simulationResults.alice > simulationResults.ties - ? '💡 Alice tends to win more often!' - : simulationResults.bob > simulationResults.alice && simulationResults.bob > simulationResults.ties - ? '💡 Bob tends to win more often!' - : simulationResults.ties > simulationResults.alice && simulationResults.ties > simulationResults.bob - ? '💡 Ties are most common!' - : '💡 The results are quite balanced!' - } + {simulationResults.alice > simulationResults.bob && simulationResults.alice > simulationResults.ties ? '💡 Alice tends to win more often!' : simulationResults.bob > simulationResults.alice && simulationResults.bob > simulationResults.ties ? '💡 Bob tends to win more often!' : simulationResults.ties > simulationResults.alice && simulationResults.ties > simulationResults.bob ? '💡 Ties are most common!' : '💡 The results are quite balanced!'}

- - )} + } {/* Insight */} @@ -361,24 +313,14 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro {/* Acknowledgement */} -

🙏 Acknowledgement

+

This simulation was inspired by{' '} - + this tweet {' '}by Daniel Litt, which in turn is a variation of{' '} - + this puzzle {' '}by Gil Kalai. @@ -388,15 +330,7 @@ const PresentsPuzzle = ({ showSocialShare = false, shareUrl }: PresentsPuzzlePro - {showSocialShare && ( - - )} - - ); + {showSocialShare && } + ; }; - -export default PresentsPuzzle; +export default PresentsPuzzle; \ No newline at end of file