Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine edge labels and layout

Browse source 
Improve edge label readability by using red outlines for negated conditions and rounded rectangles for specific conditions. Adjust graph layout to occupy full width for better scaling.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-10 06:09:28 +00:00
parent 5e095857fe
commit 4c2d03fce3
1 changed files with 57 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/DogsBunnyPuzzle.tsx
View file

@ -344,8 +344,8 @@ const DogsBunnyPuzzle: React.FC<DogsBunnyPuzzleProps> = ({
<div className="flex-1">
<div
id="puzzle-area"
className="relative bg-muted/10 rounded-lg p-6 min-h-[500px]"
style={{ width: '500px', height: '400px' }}
className="relative bg-muted/10 rounded-lg p-6 min-h-[500px] w-full"
style={{ height: '400px' }}
>
{/* Edges */}
<svg className="absolute inset-0 w-full h-full pointer-events-none">
@ -369,50 +369,67 @@ const DogsBunnyPuzzle: React.FC<DogsBunnyPuzzleProps> = ({
strokeWidth={isValid ? "3" : "1"}
strokeDasharray={isValid ? "none" : "5,5"}
/>
{/* Condition icons */}
{edge.conditions.slice(0, 2).map((condition, condIndex) => (
<g key={condIndex}>
{/* Condition labels */}
{edge.conditions.length === 1 ? (
// Single condition - use circle with red outline for negated
<g>
<circle
cx={(fromLoc.x + toLoc.x) / 2 + 20 + (condIndex - 0.5) * 16}
cx={(fromLoc.x + toLoc.x) / 2 + 20}
cy={(fromLoc.y + toLoc.y) / 2 + 20}
r="8"
r="10"
fill="hsl(var(--background))"
stroke={edge.conditions[0].includes('NOBODY') ? "#ef4444" : "hsl(var(--border))"}
strokeWidth="2"
/>
<text
x={(fromLoc.x + toLoc.x) / 2 + 20}
y={(fromLoc.y + toLoc.y) / 2 + 25}
fontSize="12"
textAnchor="middle"
className="pointer-events-none"
>
{getConditionIcon(edge.conditions[0])}
</text>
<title>{formatCondition(edge.conditions[0])}</title>
</g>
) : (
// Multiple conditions - use rounded rectangle
<g>
<rect
x={(fromLoc.x + toLoc.x) / 2 + 20 - (edge.conditions.length * 6)}
y={(fromLoc.y + toLoc.y) / 2 + 10}
width={edge.conditions.length * 12}
height="20"
rx="10"
fill="hsl(var(--background))"
stroke="hsl(var(--border))"
strokeWidth="1"
/>
<text
x={(fromLoc.x + toLoc.x) / 2 + 20 + (condIndex - 0.5) * 16}
y={(fromLoc.y + toLoc.y) / 2 + 25}
fontSize="10"
textAnchor="middle"
className="pointer-events-none"
>
{condition.includes('NOBODY') ? '❌' : ''}
{getConditionIcon(condition)}
</text>
<title>{formatCondition(condition)}</title>
</g>
))}
{edge.conditions.length > 2 && (
<g>
<circle
cx={(fromLoc.x + toLoc.x) / 2 + 20 + 16}
cy={(fromLoc.y + toLoc.y) / 2 + 20}
r="6"
fill="hsl(var(--muted))"
stroke="hsl(var(--border))"
strokeWidth="1"
/>
<text
x={(fromLoc.x + toLoc.x) / 2 + 20 + 16}
y={(fromLoc.y + toLoc.y) / 2 + 24}
fontSize="8"
textAnchor="middle"
className="pointer-events-none"
>
+{edge.conditions.length - 2}
</text>
<title>{edge.conditions.slice(2).map(formatCondition).join(', ')}</title>
{edge.conditions.slice(0, 3).map((condition, condIndex) => (
<text
key={condIndex}
x={(fromLoc.x + toLoc.x) / 2 + 20 - (edge.conditions.length * 6) + 6 + (condIndex * 12)}
y={(fromLoc.y + toLoc.y) / 2 + 25}
fontSize="10"
textAnchor="middle"
className="pointer-events-none"
fill={condition.includes('NOBODY') ? "#ef4444" : "currentColor"}
>
{getConditionIcon(condition)}
</text>
))}
{edge.conditions.length > 3 && (
<text
x={(fromLoc.x + toLoc.x) / 2 + 20 + (edge.conditions.length * 6) - 6}
y={(fromLoc.y + toLoc.y) / 2 + 25}
fontSize="8"
textAnchor="middle"
className="pointer-events-none"
>
+{edge.conditions.length - 3}
</text>
)}
<title>{edge.conditions.map(formatCondition).join(', ')}</title>
</g>
)}
</g>