Skip to content

feat(playground): add extra info #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jake8655 merged 1 commit into from
Apr 22, 2025
Merged

feat(playground): add extra info #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,5 +70,80 @@
"current": "Current Element",
"sorted": "Sorted",
"length": "Length:"
},
"algorithm-explanation": {
"stats": {
"title": "Statistics",
"iterations": "Iterations",
"swaps": "Swaps"
},
"complexity": {
"title": "Complexity Analysis",
"case": "Case",
"best": "Best",
"average": "Average",
"worst": "Worst",
"time": "Time",
"space": "Space"
},
"explanation": {
"title": "How It Works",
"steps": "Steps",
"cases": "Cases",
"code": "Code"
},
"bubble": {
"title": "Bubble Sort",
"description": "A simple comparison-based algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order.",
"steps": [
"Start at the beginning of the array",
"Compare adjacent elements. If the first is greater than the second, swap them",
"Move to the next pair of elements and repeat the comparison and swap if necessary",
"After one complete pass, the largest element will be at the end. Repeat the process for the remaining elements"
],
"best-case": "When the array is already sorted, bubble sort makes only one pass through the array with no swaps.",
"average-case": "For random arrays, bubble sort still requires quadratic time.",
"worst-case": "When the array is sorted in reverse order, bubble sort must make the maximum number of comparisons and swaps."
},
"selection": {
"title": "Selection Sort",
"description": "A simple in-place comparison sorting algorithm that divides the input list into two parts: a sorted sublist and an unsorted sublist.",
"steps": [
"Find the minimum element in the unsorted part of the array",
"Swap it with the element at the beginning of the unsorted part",
"Move the boundary between the sorted and unsorted parts one element to the right",
"Repeat until the entire array is sorted"
],
"best-case": "Selection sort always performs the same number of comparisons regardless of the input array's order.",
"average-case": "For random arrays, selection sort requires quadratic time.",
"worst-case": "Selection sort always performs the same number of comparisons and swaps regardless of the input array's order."
},
"insertion": {
"title": "Insertion Sort",
"description": "A simple sorting algorithm that builds the final sorted array one item at a time, similar to how you might sort playing cards in your hand.",
"steps": [
"Start with the second element (assume the first element is already sorted)",
"Compare the current element with the previous elements",
"If the previous element is greater than the current element, move the previous element one position ahead",
"Repeat until the correct position for the current element is found, then insert it"
],
"best-case": "When the array is already sorted, insertion sort makes only one comparison per element.",
"average-case": "For random arrays, insertion sort requires quadratic time.",
"worst-case": "When the array is sorted in reverse order, insertion sort must shift each element to the beginning of the array."
},
"quicksort": {
"title": "Quick Sort",
"description": "An efficient, divide-and-conquer sorting algorithm that works by selecting a 'pivot' element and partitioning the array around the pivot.",
"steps": [
"Choose a pivot element from the array",
"Partition the array: items less than the pivot go to the left, items greater go to the right",
"The pivot is now in its final sorted position",
"Recursively apply the above steps to the sub-arrays on the left and right of the pivot",
"The base case is when a sub-array has 0 or 1 elements (already sorted)"
],
"best-case": "When the pivot always divides the array into nearly equal halves, quick sort achieves its best performance.",
"average-case": "For random arrays, quick sort is very efficient with O(n log n) time complexity.",
"worst-case": "When the pivot is always the smallest or largest element (e.g., in already sorted arrays), quick sort degrades to O(n²) performance."
}
}
}
75 changes: 75 additions & 0 deletions messages/sk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,5 +71,80 @@
"current": "Aktuálny prvok",
"sorted": "Vytriedené",
"length": "Dĺžka"
},
"algorithm-explanation": {
"stats": {
"title": "Štatistiky",
"iterations": "Iterácie",
"swaps": "Výmeny"
},
"complexity": {
"title": "Analýza zložitosti",
"case": "Prípad",
"best": "Najlepší",
"average": "Priemerný",
"worst": "Najhorší",
"time": "Čas",
"space": "Priestor"
},
"explanation": {
"title": "Ako to funguje",
"steps": "Kroky",
"cases": "Prípady",
"code": "Kód"
},
"bubble": {
"title": "Bubble Sort",
"description": "Jednoduchý porovnávací algoritmus, ktorý opakovane prechádza zoznamom, porovnáva susedné prvky a vymieňa ich, ak sú v nesprávnom poradí.",
"steps": [
"Začnite na začiatku poľa",
"Porovnajte susedné prvky. Ak je prvý väčší ako druhý, vymeňte ich",
"Prejdite na ďalší pár prvkov a opakujte porovnanie a výmenu, ak je to potrebné",
"Po jednom úplnom prechode bude najväčší prvok na konci. Opakujte proces pre zostávajúce prvky"
],
"best-case": "Keď je pole už zoradené, bubble sort urobí iba jeden prechod poľom bez výmen.",
"average-case": "Pre náhodné polia bubble sort stále vyžaduje kvadratický čas.",
"worst-case": "Keď je pole zoradené v opačnom poradí, bubble sort musí urobiť maximálny počet porovnaní a výmen."
},
"selection": {
"title": "Selection Sort",
"description": "Jednoduchý porovnávací algoritmus triedenia na mieste, ktorý rozdeľuje vstupný zoznam na dve časti: zoradenú časť a nezoradenú časť.",
"steps": [
"Nájdite minimálny prvok v nezotriedenej časti poľa",
"Vymeňte ho s prvkom na začiatku nezotriedenej časti",
"Posuňte hranicu medzi zotriedenou a nezotriedenou časťou o jeden prvok doprava",
"Opakujte, kým nie je celé pole zotriedené"
],
"best-case": "Selection sort vždy vykonáva rovnaký počet porovnaní bez ohľadu na poradie vstupného poľa.",
"average-case": "Pre náhodné polia selection sort vyžaduje kvadratický čas.",
"worst-case": "Selection sort vždy vykonáva rovnaký počet porovnaní a výmen bez ohľadu na poradie vstupného poľa."
},
"insertion": {
"title": "Insertion Sort",
"description": "Jednoduchý triediaci algoritmus, ktorý buduje konečné zoradené pole po jednom prvku, podobne ako by ste mohli triediť hracie karty v ruke.",
"steps": [
"Začnite s druhým prvkom (predpokladajte, že prvý prvok je už zotriedený)",
"Porovnajte aktuálny prvok s predchádzajúcimi prvkami",
"Ak je predchádzajúci prvok väčší ako aktuálny prvok, posuňte predchádzajúci prvok o jednu pozíciu dopredu",
"Opakujte, kým sa nenájde správna pozícia pre aktuálny prvok, potom ho vložte"
],
"best-case": "Keď je pole už zoradené, insertion sort robí iba jedno porovnanie na prvok.",
"average-case": "Pre náhodné polia insertion sort vyžaduje kvadratický čas.",
"worst-case": "Keď je pole zoradené v opačnom poradí, insertion sort musí posunúť každý prvok na začiatok poľa."
},
"quicksort": {
"title": "Quick Sort",
"description": "Efektívny algoritmus triedenia typu rozdeľuj a panuj, ktorý funguje výberom 'pivotného' prvku a rozdelením poľa okolo pivotu.",
"steps": [
"Vyberte pivotný prvok z poľa",
"Rozdeľte pole: prvky menšie ako pivot idú doľava, väčšie doprava",
"Pivot je teraz na svojej konečnej zotriedenej pozícii",
"Rekurzívne aplikujte vyššie uvedené kroky na podpolia naľavo a napravo od pivotu",
"Základný prípad je, keď podpole má 0 alebo 1 prvok (už zotriedené)"
],
"best-case": "Keď pivot vždy rozdelí pole na takmer rovnaké polovice, quick sort dosahuje najlepší výkon.",
"average-case": "Pre náhodné polia je quick sort veľmi efektívny s časovou zložitosťou O(n log n).",
"worst-case": "Keď je pivot vždy najmenší alebo najväčší prvok (napr. v už zoradených poliach), výkon quick sortu sa zhoršuje na O(n²)."
}
}
}
37 changes: 33 additions & 4 deletions src/app/[locale]/playground/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,42 @@
"use client";

import AlgorithmExplanation from "@/components/algorithm-explanation";
import { HexagonBackground } from "@/components/animate-ui/hexagon-background";
import SortingVisualizer from "@/components/sorting-visualizer";
import { useState } from "react";

export default function Playground() {
const [algorithm, setAlgorithm] = useState<
"bubble" | "selection" | "insertion" | "quicksort"
>("bubble");
const [iterations, setIterations] = useState(0);
const [swaps, setSwaps] = useState(0);

return (
<div className="relative flex min-h-screen items-center justify-center">
<HexagonBackground className="absolute inset-0" />
<div>
<div className="relative flex min-h-[90vh] items-center justify-center">
<HexagonBackground className="absolute inset-0" />

<div className="pointer-events-none relative z-10 w-4xl mt-40">
<SortingVisualizer
algorithm={algorithm}
setAlgorithm={setAlgorithm}
setIterations={setIterations}
setSwaps={setSwaps}
/>
</div>
</div>

<div className="pointer-events-none relative z-10 w-4xl">
<SortingVisualizer />
<div className="relative flex justify-center">
<HexagonBackground className="absolute inset-0" />
<div className="pointer-events-none relative z-10 w-4xl my-16">
<AlgorithmExplanation
algorithm={algorithm}
iterations={iterations}
swaps={swaps}
className="pointer-events-auto"
/>
</div>
</div>
</div>
);
Expand Down
Loading