diff --git a/src/components/DogsBunnyPuzzle.tsx b/src/components/DogsBunnyPuzzle.tsx index 05d02ed..3988413 100644 --- a/src/components/DogsBunnyPuzzle.tsx +++ b/src/components/DogsBunnyPuzzle.tsx @@ -73,6 +73,7 @@ const DogsBunnyPuzzle: React.FC = ({ // Generate edges with conditions based on difficulty const edges: Edge[] = []; const locationTypes = ['carrot', 'bone', 'flower', 'well', 'bunny', 'dog']; + const conditionPrefixes = ['SOMEBODY AT', 'NOBODY AT']; // Connect all locations with conditional edges for (let i = 0; i < locations.length; i++) { @@ -82,7 +83,8 @@ const DogsBunnyPuzzle: React.FC = ({ for (let k = 0; k < numConditions; k++) { const conditionType = locationTypes[Math.floor(rng() * locationTypes.length)]; - conditions.push(`SOMEBODY AT ${conditionType.toUpperCase()}`); + const prefix = conditionPrefixes[Math.floor(rng() * conditionPrefixes.length)]; + conditions.push(`${prefix} ${conditionType.toUpperCase()}`); } edges.push({ @@ -137,16 +139,18 @@ const DogsBunnyPuzzle: React.FC = ({ const parts = condition.split(' AT '); if (parts.length !== 2) return false; + const isNobody = parts[0] === 'NOBODY'; const targetType = parts[1].toLowerCase(); - // Check if somebody is at the specified location type - return puzzleState.characters.some(char => { + const hasCharacterAtType = puzzleState.characters.some(char => { const location = puzzleState.locations.find(loc => loc.id === char.locationId); return location && ( location.type === targetType || char.type === targetType ); }); + + return isNobody ? !hasCharacterAtType : hasCharacterAtType; }); }; @@ -290,6 +294,27 @@ const DogsBunnyPuzzle: React.FC = ({ } }; + // Get condition icon + const getConditionIcon = (condition: string) => { + if (condition.includes('CARROT')) return 'ðŸĨ•'; + if (condition.includes('BONE')) return 'ðŸĶī'; + if (condition.includes('FLOWER')) return 'ðŸŒļ'; + if (condition.includes('WELL')) return 'ðŸŠĢ'; + if (condition.includes('BUNNY')) return '🐰'; + if (condition.includes('DOG')) return '🐕'; + return '❓'; + }; + + // Format condition text for tooltip + const formatCondition = (condition: string) => { + const parts = condition.split(' AT '); + if (parts.length !== 2) return condition; + + const prefix = parts[0] === 'NOBODY' ? 'Nobody at' : 'Someone at'; + const target = parts[1].toLowerCase(); + return `${prefix} ${target}`; + }; + if (!puzzleState) return
Loading...
; return ( @@ -344,17 +369,52 @@ const DogsBunnyPuzzle: React.FC = ({ strokeWidth={isValid ? "3" : "1"} strokeDasharray={isValid ? "none" : "5,5"} /> - {/* Condition labels */} - - {edge.conditions.length > 0 && edge.conditions[0].replace('SOMEBODY AT ', '')} - + {/* Condition icons */} + {edge.conditions.slice(0, 2).map((condition, condIndex) => ( + + + + {condition.includes('NOBODY') ? '❌' : ''} + {getConditionIcon(condition)} + + {formatCondition(condition)} + + ))} + {edge.conditions.length > 2 && ( + + + + +{edge.conditions.length - 2} + + {edge.conditions.slice(2).map(formatCondition).join(', ')} + + )} ); })}