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

Add number selection and help text

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2025-09-30 19:40:12 +00:00
parent 753685f5ca
commit 391210fa72
1 changed files with 51 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/NeighborSumAvoidance.tsx
View file

@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch'; import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { Timer, RotateCcw } from 'lucide-react'; import { Timer, RotateCcw } from 'lucide-react';
import confetti from 'canvas-confetti'; import confetti from 'canvas-confetti';
import { toast } from 'sonner'; import { toast } from 'sonner';
@ -13,10 +14,13 @@ interface NeighborSumAvoidanceProps {
} }
const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceProps) => { const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceProps) => {
const [numberCount, setNumberCount] = useState(9);
const [mode, setMode] = useState<'default' | 'guided'>('default'); const [mode, setMode] = useState<'default' | 'guided'>('default');
const [isActive, setIsActive] = useState(false); const [isActive, setIsActive] = useState(false);
const [slots, setSlots] = useState<(number | null)[]>(Array(9).fill(null)); const [slots, setSlots] = useState<(number | null)[]>(Array(numberCount).fill(null));
const [availableNumbers, setAvailableNumbers] = useState<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9]); const [availableNumbers, setAvailableNumbers] = useState<number[]>(
Array.from({ length: numberCount }, (_, i) => i + 1)
);
const [draggedNumber, setDraggedNumber] = useState<number | null>(null); const [draggedNumber, setDraggedNumber] = useState<number | null>(null);
const [draggedFrom, setDraggedFrom] = useState<number | null>(null); const [draggedFrom, setDraggedFrom] = useState<number | null>(null);
const [draggedSlot, setDraggedSlot] = useState<number | null>(null); const [draggedSlot, setDraggedSlot] = useState<number | null>(null);
@ -45,9 +49,9 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
const getViolations = () => { const getViolations = () => {
const violations: number[] = []; const violations: number[] = [];
for (let i = 0; i < 9; i++) { for (let i = 0; i < numberCount; i++) {
const current = slots[i]; const current = slots[i];
const next = slots[(i + 1) % 9]; const next = slots[(i + 1) % numberCount];
if (current !== null && next !== null && isDivisible(current, next)) { if (current !== null && next !== null && isDivisible(current, next)) {
violations.push(i); violations.push(i);
} }
@ -87,11 +91,11 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
setIsComplete(false); setIsComplete(false);
if (selectedMode === 'default') { if (selectedMode === 'default') {
setSlots(Array(9).fill(null)); setSlots(Array(numberCount).fill(null));
setAvailableNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9]); setAvailableNumbers(Array.from({ length: numberCount }, (_, i) => i + 1));
} else { } else {
// Guided mode: random arrangement // Guided mode: random arrangement
const shuffled = [...Array(9)].map((_, i) => i + 1).sort(() => Math.random() - 0.5); const shuffled = Array.from({ length: numberCount }, (_, i) => i + 1).sort(() => Math.random() - 0.5);
setSlots(shuffled); setSlots(shuffled);
setAvailableNumbers([]); setAvailableNumbers([]);
} }
@ -100,8 +104,8 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
const restart = () => { const restart = () => {
setIsActive(false); setIsActive(false);
setIsComplete(false); setIsComplete(false);
setSlots(Array(9).fill(null)); setSlots(Array(numberCount).fill(null));
setAvailableNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9]); setAvailableNumbers(Array.from({ length: numberCount }, (_, i) => i + 1));
setTime(0); setTime(0);
setSwaps(0); setSwaps(0);
}; };
@ -164,20 +168,24 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
}; };
const renderCircle = () => { const renderCircle = () => {
const radius = 150; // Dynamic radius based on number count
const centerX = 200; const baseRadius = 120;
const centerY = 200; const radiusIncrement = (numberCount - 5) * 5;
const radius = baseRadius + radiusIncrement;
const svgSize = (radius + 50) * 2;
const centerX = svgSize / 2;
const centerY = svgSize / 2;
const violations = getViolations(); const violations = getViolations();
return ( return (
<svg width="400" height="400" className="mx-auto"> <svg width={svgSize} height={svgSize} className="mx-auto">
{/* Draw circle */} {/* Draw circle */}
<circle cx={centerX} cy={centerY} r={radius} fill="none" stroke="hsl(var(--border))" strokeWidth="2" /> <circle cx={centerX} cy={centerY} r={radius} fill="none" stroke="hsl(var(--border))" strokeWidth="2" />
{/* Draw violation arcs */} {/* Draw violation arcs */}
{violations.map(i => { {violations.map(i => {
const angle1 = (i * 360 / 9 - 90) * Math.PI / 180; const angle1 = (i * 360 / numberCount - 90) * Math.PI / 180;
const angle2 = ((i + 1) * 360 / 9 - 90) * Math.PI / 180; const angle2 = ((i + 1) * 360 / numberCount - 90) * Math.PI / 180;
const x1 = centerX + radius * Math.cos(angle1); const x1 = centerX + radius * Math.cos(angle1);
const y1 = centerY + radius * Math.sin(angle1); const y1 = centerY + radius * Math.sin(angle1);
const x2 = centerX + radius * Math.cos(angle2); const x2 = centerX + radius * Math.cos(angle2);
@ -199,15 +207,15 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
return slots.slice(i + 1).map((num2, j) => { return slots.slice(i + 1).map((num2, j) => {
const idx2 = i + j + 1; const idx2 = i + j + 1;
if (num1 !== null && num2 !== null && !isDivisible(num1, num2)) { if (num1 !== null && num2 !== null && !isDivisible(num1, num2)) {
const angle1 = (i * 360 / 9 - 90) * Math.PI / 180; const angle1 = (i * 360 / numberCount - 90) * Math.PI / 180;
const angle2 = (idx2 * 360 / 9 - 90) * Math.PI / 180; const angle2 = (idx2 * 360 / numberCount - 90) * Math.PI / 180;
const x1 = centerX + radius * Math.cos(angle1); const x1 = centerX + radius * Math.cos(angle1);
const y1 = centerY + radius * Math.sin(angle1); const y1 = centerY + radius * Math.sin(angle1);
const x2 = centerX + radius * Math.cos(angle2); const x2 = centerX + radius * Math.cos(angle2);
const y2 = centerY + radius * Math.sin(angle2); const y2 = centerY + radius * Math.sin(angle2);
// Check if this forms part of the cycle (adjacent positions on circle) // Check if this forms part of the cycle (adjacent positions on circle)
const isAdjacentOnCircle = Math.abs(i - idx2) === 1 || Math.abs(i - idx2) === 8; const isAdjacentOnCircle = Math.abs(i - idx2) === 1 || Math.abs(i - idx2) === numberCount - 1;
return ( return (
<line <line
@ -228,7 +236,7 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
{/* Draw slots */} {/* Draw slots */}
{slots.map((num, i) => { {slots.map((num, i) => {
const angle = (i * 360 / 9 - 90) * Math.PI / 180; const angle = (i * 360 / numberCount - 90) * Math.PI / 180;
const x = centerX + radius * Math.cos(angle); const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle); const y = centerY + radius * Math.sin(angle);
@ -273,20 +281,35 @@ const NeighborSumAvoidance = ({ showSocialShare = false }: NeighborSumAvoidanceP
<CardHeader> <CardHeader>
<CardTitle>Neighbor Sum Avoidance</CardTitle> <CardTitle>Neighbor Sum Avoidance</CardTitle>
<CardDescription> <CardDescription>
Can you arrange the numbers 1-9 in a circle so that the sum of two neighbors is never divisible by 3, 5, or 7? Can you arrange the numbers 1-{numberCount} in a circle so that the sum of two neighbors is never divisible by 3, 5, or 7?
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{!isActive ? ( {!isActive ? (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-6">
<Label htmlFor="mode-switch">Default Mode</Label> <div className="flex items-center gap-4">
<Switch <Label htmlFor="mode-switch">Default Mode</Label>
id="mode-switch" <Switch
checked={mode === 'guided'} id="mode-switch"
onCheckedChange={(checked) => setMode(checked ? 'guided' : 'default')} checked={mode === 'guided'}
/> onCheckedChange={(checked) => setMode(checked ? 'guided' : 'default')}
<Label htmlFor="mode-switch">Guided Mode</Label> />
<Label htmlFor="mode-switch">Guided Mode</Label>
</div>
<div className="flex items-center gap-4 min-w-[200px]">
<Label htmlFor="number-count">Numbers: {numberCount}</Label>
<Slider
id="number-count"
min={5}
max={15}
step={1}
value={[numberCount]}
onValueChange={(value) => setNumberCount(value[0])}
className="w-24"
/>
</div>
</div> </div>
<div className="space-y-4 text-center"> <div className="space-y-4 text-center">