Skip to content

Commit 35efc1d

Browse files
Sohan-RoutSohan-Rout
committed
feat : added daily challenge to insertion sort
1 parent f7320a3 commit 35efc1d

8 files changed

Lines changed: 573 additions & 531 deletions

File tree

‎app/visualizer/sorting/bubblesort/animation.jsx‎

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -116,124 +116,124 @@ const BubbleSortVisualizer = () => {
116116
}, []);
117117

118118
return (
119-
<main className="container mx-auto px-6 pb-4">
120-
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
121-
Watch Bubble Sort in action as it repeatedly swaps adjacent elements
122-
to sort the array step by step.
123-
</p>
124-
125-
<div className="max-w-4xl mx-auto">
126-
{/* Controls */}
127-
<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
128-
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
129-
<div className="flex flex-col gap-1">
130-
<ArrayGenerator
131-
onGenerate={handleArrayGenerated}
132-
disabled={sorting}
133-
/>
134-
<CustomArrayInput
135-
onUseCustomArray={(arr) => {
136-
setArray(arr);
137-
setSorted(false);
138-
resetStats();
139-
}}
140-
disabled={sorting}
141-
className="w-full"
142-
/>
143-
</div>
144-
<div className="flex flex-col gap-2 justify-between">
145-
<button
146-
onClick={bubbleSort}
147-
disabled={!array.length || sorting || sorted}
148-
className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
149-
>
150-
{sorting ? "Sorting..." : "Start Bubble Sort"}
151-
</button>
152-
<button
153-
onClick={reset}
154-
className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
155-
>
156-
Reset All
157-
</button>
158-
</div>
159-
</div>
160-
161-
{/* Speed controls */}
162-
<div className="flex items-center gap-4 mb-4">
163-
<span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
164-
Speed:
165-
</span>
166-
<input
167-
type="range"
168-
min="0.5"
169-
max="5"
170-
step="0.5"
171-
value={speed}
172-
onChange={(e) => setSpeed(parseFloat(e.target.value))}
173-
className="w-24 sm:w-32"
119+
<main className="container mx-auto px-6 pb-4">
120+
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
121+
Watch Bubble Sort in action as it repeatedly swaps adjacent elements to
122+
sort the array step by step.
123+
</p>
124+
125+
<div className="max-w-4xl mx-auto">
126+
{/* Controls */}
127+
<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
128+
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
129+
<div className="flex flex-col gap-1">
130+
<ArrayGenerator
131+
onGenerate={handleArrayGenerated}
132+
disabled={sorting}
133+
/>
134+
<CustomArrayInput
135+
onUseCustomArray={(arr) => {
136+
setArray(arr);
137+
setSorted(false);
138+
resetStats();
139+
}}
174140
disabled={sorting}
141+
className="w-full"
175142
/>
176-
<span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
177-
{speed}x
178-
</span>
179143
</div>
144+
<div className="flex flex-col gap-2 justify-between">
145+
<button
146+
onClick={bubbleSort}
147+
disabled={!array.length || sorting || sorted}
148+
className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
149+
>
150+
{sorting ? "Sorting..." : "Start Bubble Sort"}
151+
</button>
152+
<button
153+
onClick={reset}
154+
className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
155+
>
156+
Reset All
157+
</button>
158+
</div>
159+
</div>
160+
161+
{/* Speed controls */}
162+
<div className="flex items-center gap-4 mb-4">
163+
<span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
164+
Speed:
165+
</span>
166+
<input
167+
type="range"
168+
min="0.5"
169+
max="5"
170+
step="0.5"
171+
value={speed}
172+
onChange={(e) => setSpeed(parseFloat(e.target.value))}
173+
className="w-24 sm:w-32"
174+
disabled={sorting}
175+
/>
176+
<span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
177+
{speed}x
178+
</span>
179+
</div>
180180

181-
{/* Stats */}
182-
<div className="grid grid-cols-2 gap-4 text-sm sm:text-base">
183-
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
184-
<div className="font-medium">Comparisons:</div>
185-
<div className="text-xl sm:text-2xl">{comparisons}</div>
186-
</div>
187-
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
188-
<div className="font-medium">Swaps:</div>
189-
<div className="text-xl sm:text-2xl">{swaps}</div>
190-
</div>
181+
{/* Stats */}
182+
<div className="grid grid-cols-2 gap-4 text-sm sm:text-base">
183+
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
184+
<div className="font-medium">Comparisons:</div>
185+
<div className="text-xl sm:text-2xl">{comparisons}</div>
186+
</div>
187+
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
188+
<div className="font-medium">Swaps:</div>
189+
<div className="text-xl sm:text-2xl">{swaps}</div>
191190
</div>
192191
</div>
192+
</div>
193193

194-
{/* Visualization */}
195-
<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
196-
<h2 className="text-lg sm:text-xl font-semibold mb-4">
197-
Array Visualization
198-
</h2>
199-
{array.length > 0 ? (
200-
<div className="flex flex-wrap gap-2 sm:gap-4 justify-center">
201-
{array.map((value, index) => {
202-
const isComparing =
203-
index === currentIndices.i || index === currentIndices.j;
204-
const isSorted = sorted;
205-
206-
return (
207-
<div key={index} className="flex flex-col items-center">
208-
<div
209-
className={`bar w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-lg border-2 shadow-md dark:shadow-blue-900 transition-all duration-300 text-sm sm:text-lg font-bold
194+
{/* Visualization */}
195+
<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
196+
<h2 className="text-lg sm:text-xl font-semibold mb-4">
197+
Array Visualization
198+
</h2>
199+
{array.length > 0 ? (
200+
<div className="flex flex-wrap gap-2 sm:gap-4 justify-center">
201+
{array.map((value, index) => {
202+
const isComparing =
203+
index === currentIndices.i || index === currentIndices.j;
204+
const isSorted = sorted;
205+
206+
return (
207+
<div key={index} className="flex flex-col items-center">
208+
<div
209+
className={`bar w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-lg border-2 shadow-md dark:shadow-blue-900 transition-all duration-300 text-sm sm:text-lg font-bold
210210
${
211211
isComparing
212212
? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-900"
213213
: isSorted
214214
? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-900"
215215
: "bg-blue-400 dark:bg-blue-400 border-blue-600 dark:border-blue-600 dark:text-gray-900"
216216
}`}
217-
>
218-
{value}
219-
</div>
220-
<div className="mt-1 text-xs text-gray-700 dark:text-blue-300 font-semibold">
221-
{index === currentIndices.i && "i"}
222-
{index === currentIndices.j && "j"}
223-
</div>
217+
>
218+
{value}
224219
</div>
225-
);
226-
})}
227-
</div>
228-
) : (
229-
<div className="text-center py-8 text-gray-500 text-sm sm:text-base">
230-
{sorting ? "Sorting..." : "Generate or enter an array to begin"}
231-
</div>
232-
)}
233-
</div>
220+
<div className="mt-1 text-xs text-gray-700 dark:text-blue-300 font-semibold">
221+
{index === currentIndices.i && "i"}
222+
{index === currentIndices.j && "j"}
223+
</div>
224+
</div>
225+
);
226+
})}
227+
</div>
228+
) : (
229+
<div className="text-center py-8 text-gray-500 text-sm sm:text-base">
230+
{sorting ? "Sorting..." : "Generate or enter an array to begin"}
231+
</div>
232+
)}
234233
</div>
235-
</main>
234+
</div>
235+
</main>
236236
);
237237
};
238238

239-
export default BubbleSortVisualizer;
239+
export default BubbleSortVisualizer;

‎app/visualizer/sorting/bubblesort/content.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const content = () => {
215215
{/* Additional Info */}
216216
<section className="p-6">
217217
<div className="prose dark:prose-invert max-w-none">
218-
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
218+
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
219219
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
220220
{paragraph[2]}
221221
</p>

0 commit comments

Comments
 (0)