first commit

2024-06-29 12:51:27 +02:00
parent ff35aed92c
commit 6da5690572
23 changed files with 6355 additions and 0 deletions
@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 36 39% 88%;
+    --foreground: 36 45% 15%;
+    --primary: 36 45% 70%;
+    --primary-foreground: 36 45% 11%;
+    --secondary: 40 35% 77%;
+    --secondary-foreground: 36 45% 25%;
+    --accent: 36 64% 57%;
+    --accent-foreground: 36 72% 17%;
+    --destructive: 0 84% 37%;
+    --destructive-foreground: 0 0% 98%;
+    --muted: 36 33% 75%;
+    --muted-foreground: 36 45% 25%;
+    --card: 36 46% 82%;
+    --card-foreground: 36 45% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --border: 36 45% 60%;
+    --input: 36 45% 60%;
+    --ring: 36 45% 30%;
+    --radius: 0rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /*h1, h2, h3, h4, h5, h6 {*/
+  /*  @apply font-heading;*/
+  /*}*/
+}
@@ -0,0 +1,25 @@
+import {DM_Sans, Space_Mono} from 'next/font/google'
+import { cn } from '@/lib/utils'
+import './globals.css'
+
+const fontHeading = DM_Sans({
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-heading',
+})
+
+
+export default function Layout({ children }) {
+    return (
+        <html lang="en">
+        <body
+            className={cn(
+                'antialiased',
+                fontHeading.variable
+            )}
+        >
+        {children}
+        </body>
+        </html>
+    )
+}
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/ui/dropdown-menu"
+
+export default function Component() {
+  const [array, setArray] = useState<number[]>([])
+  const [isRunning, setIsRunning] = useState(false)
+  const [currentAlgorithm, setCurrentAlgorithm] = useState("bubble")
+
+  useEffect(() => {
+    generateRandomArray()
+  }, [])
+
+  const generateRandomArray = () => {
+    const newArray = Array.from({ length: 50 }, () => Math.floor(Math.random() * 100))
+    setArray(newArray)
+  }
+
+  const startAnimation = () => {
+    setIsRunning(true)
+    switch (currentAlgorithm) {
+      case "bubble":
+        bubbleSort()
+        break
+      case "insertion":
+        insertionSort()
+        break
+      case "merge":
+        mergeSort(array, 0, array.length - 1)
+        break
+      default:
+        break
+    }
+  }
+
+  const pauseAnimation = () => {
+    setIsRunning(false)
+  }
+
+  const resetAnimation = () => {
+    setIsRunning(false)
+    generateRandomArray()
+  }
+
+  const bubbleSort = async () => {
+    const newArray = [...array]
+    for (let i = 0; i < newArray.length; i++) {
+      for (let j = 0; j < newArray.length - i - 1; j++) {
+        if (newArray[j] > newArray[j + 1]) {
+          ;[newArray[j], newArray[j + 1]] = [newArray[j + 1], newArray[j]]
+          setArray([...newArray])
+          await new Promise((resolve) => setTimeout(resolve, 100))
+        }
+      }
+    }
+    setIsRunning(false)
+  }
+
+  const insertionSort = async () => {
+    const newArray = [...array]
+    for (let i = 1; i < newArray.length; i++) {
+      const key = newArray[i]
+      let j = i - 1
+      while (j >= 0 && newArray[j] > key) {
+        newArray[j + 1] = newArray[j]
+        j = j - 1
+        setArray([...newArray])
+        await new Promise((resolve) => setTimeout(resolve, 100))
+      }
+      newArray[j + 1] = key
+      setArray([...newArray])
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+    setIsRunning(false)
+  }
+
+  const mergeSort = async (arr: number[], left: number, right: number) => {
+    if (left < right) {
+      const mid = Math.floor((left + right) / 2)
+      await mergeSort(arr, left, mid)
+      await mergeSort(arr, mid + 1, right)
+      await merge(arr, left, mid, right)
+    }
+  }
+
+  const merge = async (arr: number[], left: number, mid: number, right: number) => {
+    const n1 = mid - left + 1
+    const n2 = right - mid
+    const leftArr = new Array(n1)
+    const rightArr = new Array(n2)
+
+    for (let i = 0; i < n1; i++) leftArr[i] = arr[left + i]
+    for (let j = 0; j < n2; j++) rightArr[j] = arr[mid + 1 + j]
+
+    let i = 0, j = 0, k = left
+
+    while (i < n1 && j < n2) {
+      if (leftArr[i] <= rightArr[j]) {
+        arr[k] = leftArr[i]
+        i++
+      } else {
+        arr[k] = rightArr[j]
+        j++
+      }
+      setArray([...arr])
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      k++
+    }
+
+    while (i < n1) {
+      arr[k] = leftArr[i]
+      i++
+      k++
+      setArray([...arr])
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+
+    while (j < n2) {
+      arr[k] = rightArr[j]
+      j++
+      k++
+      setArray([...arr])
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+  }
+
+  return (
+      <div className="flex flex-col items-center">
+        <div className="flex items-end justify-center w-full h-64 mt-10">
+          {array.map((value, index) => (
+              <div
+                  key={index}
+                  className={`mx-0.5 bg-blue-500 ${isRunning ? 'bg-red-500' : 'bg-blue-500'}`}
+                  style={{ height: `${value * 2}px`, width: '20px' }}
+              ></div>
+          ))}
+        </div>
+        <div className="flex mt-10 space-x-4">
+          <Button onClick={startAnimation}>Start</Button>
+          <Button onClick={pauseAnimation}>Pause</Button>
+          <Button onClick={resetAnimation}>Reset</Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger>Algorithms</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuRadioGroup
+                  value={currentAlgorithm}
+                  onValueChange={setCurrentAlgorithm}
+              >
+                <DropdownMenuRadioItem value="bubble">Bubble Sort</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="insertion">Insertion Sort</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="merge">Merge Sort</DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+  )
+}
+
+function ArrowUpDownIcon(props) {
+  return (
+      <svg
+          {...props}
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+      >
+        <path d="m21 16-4 4-4-4" />
+        <path d="M17 20V4" />
+        <path d="m3 8 4-4 4 4" />
+        <path d="M7 4v16" />
+      </svg>
+  )
+}