change to better resizable panels library and make default algorithm …

…quicksort

package.json

@@ -15,7 +15,7 @@
     "lucide-solid": "^0.379.0",
     "solid-js": "^1.8.15",
     "solid-monaco": "^0.2.0",
-    "solid-resizable-panels": "^0.5.4"
+    "solid-resizable-panels-port": "^0.0.0"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

src/App.tsx

@@ -1,15 +1,15 @@
 import { MonacoEditor } from "solid-monaco";
 import type { Monaco } from '@monaco-editor/loader';
 // import { useCallback, useEffect, useRef, useState } from "solid-js";
-import { PanelGroup, Panel, ResizeHandle } from "solid-resizable-panels";
+import { PanelGroup, Panel, PanelResizeHandle } from "solid-resizable-panels-port";
 // import { useInterval } from "usehooks-ts";
 import defaultScript from "./defaultScript?raw";
 import editorExtraTypes from "./types?raw";
 
 import "./business/audio";
 import "./App.css";
 
-import { visualizeJackieSort } from "./business/commands";
+import { quickSort } from "./business/commands";
 import { transformTypescript } from "./ts";
 import { createOscillator } from "./business/audio";
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -21,11 +21,11 @@ const JS_EXTRA_FUNCTIONS = transformTypescript(editorExtraTypes);
 console.log(JS_EXTRA_FUNCTIONS);
 
 function setUpMonaco(monaco: Monaco): void {
+	monaco.editor.setTheme('vs-dark');
 	monaco.languages.typescript.typescriptDefaults.addExtraLib(editorExtraTypes);
 }
-// let lastScript = "";
 export default function App() {
-	const [itemCount] = createSignal(50);
+	const [itemCount, setItemCount] = createSignal(50);
 	let interval: ReturnType<typeof setInterval> | null = null;
 	const [swaps, setSwaps] = createSignal<boolean[]>(Array(itemCount()).fill(false));
 	const [sorted, setSorted] = createSignal<boolean[]>(Array(itemCount()).fill(false));
@@ -40,16 +40,19 @@ export default function App() {
 		VisualizerCommand,
 		void,
 		number[]
-	> | null>(visualizeJackieSort(items()));
+	> | null>(quickSort(items()));
 
-	const [commandGeneratorFunction, setCommandGeneratorFunction] = createSignal(visualizeJackieSort);
+	const [commandGeneratorFunction, setCommandGeneratorFunction] = createSignal(quickSort);
 
 	const [sortPlaying, setSortPlaying] = createSignal(false);
 	const [muted, setMuted] = createSignal(false);
 	const [sortFinished, setSortFinished] = createSignal(false);
 	// useEffect(() => {
 	// 	if(commandGeneratorFunction) setCommandGenerator(commandGeneratorFunction(items));
 	// }, [commandGenerator])
+	createEffect(() => {
+		setItems([...Array(itemCount()).keys()].sort(() => Math.random() - 0.5));
+	}, [itemCount()]);
 	createEffect(() => {
 		if (interval) clearInterval(interval);
 		const gen = commandGenerator();
@@ -235,12 +238,11 @@ export default function App() {
 	};
 
 	return (
-		<PanelGroup>
-			<Panel id="editor" initialSize={1} minSize={0.5}>
+		<PanelGroup direction="horizontal">
+			<Panel id="editor" defaultSize={1} minSize={0.5}>
 				<MonacoEditor
 					onMount={setUpMonaco}
 					language="typescript"
-					theme="vs-dark"
 					value={defaultScript}
 					height="90vh"
 					width="100%"
@@ -249,7 +251,10 @@ export default function App() {
 				<div
 					style={{
 						height: "10vh",
-					}}
+						display: 'flex',
+						"justify-content": 'center',
+						"align-content": 'center'
+					}} id="controls"
 				>
 					<button onClick={() => toggleVolume()}>
 						{/* <FontAwesomeIcon */}
@@ -266,10 +271,11 @@ export default function App() {
 						{/* /> */}
 						{sortPlaying() ? <Pause /> : <Play />}
 					</button>
+					<input type="number" value={50} onChange={(e) => setItemCount(parseInt(e.target.value))}/>
 				</div>
 			</Panel>
-			<ResizeHandle />
-			<Panel id="visualization" initialSize={1}>
+			<PanelResizeHandle style={{width: "2px", "background-color": "#b9b7df", margin: '2px', "border-radius": '12px', border: '1px solid #80809b', cursor: "ew-resize"}}/>
+			<Panel id="visualization" defaultSize={1}>
 				<div
 					style={{
 						'flex-grow': "1",

src/business/commands.ts

@@ -145,5 +145,8 @@ export function* quickSort(items: number[]): Generator<VisualizerCommand, void,
 		return [i + 1, arr];
 	}
 	yield* quicksort(items, 0, items.length - 1);
-	yield sorted([...Array(items.length).keys()]);
+	for (let i = 0; i < items.length; i ++) {
+		yield cursors([i]);
+		yield sorted([i]);
+	}
 }

src/defaultScript.ts

@@ -1,32 +1,33 @@
-export default function* visualizeJackieSort(
-	items: number[]
-): Generator<VisualizerCommand, void, number[]> {
-	let clean = false;
+export default function* sort(items: number[]): Generator<VisualizerCommand, void, number[]> {
+	yield* _quicksort(items, 0, items.length - 1);
+	for (let i = 0; i < items.length; i ++) {
+		yield cursors([i]);
+		yield sorted([i]);
+	}
+}
+
+function* _quicksort(arr: number[], low: number, high: number): Generator<VisualizerCommand, void, number[]> {
+	arr = yield cursors([low, high]);
+	if (low < high) {
+		const [pivotIndex, updatedArr] = yield* partition(arr, low, high);
+		arr = updatedArr; // update the array after partition
+		yield* _quicksort(arr, low, pivotIndex - 1);
+		yield* _quicksort(arr, pivotIndex + 1, high);
+	}
+}
 
-	let sortedCount = 0;
+function* partition(arr: number[], low: number, high: number): Generator<VisualizerCommand, [number, number[]], number[]> {
+	let pivot = arr[high];
+	let i = low - 1;
 
-	while (!clean) {
-		clean = true;
-		yield notSorted([...Array(items.length).keys()]);
-		for (let i = 0; i < items.length - 1; i++) {
-			yield cursors([i, i + 1]);
-			if (items[i] > items[i + 1]) {
-				for (
-					let j = items.length - ((sortedCount % (items.length - i)) + 1);
-					j > i;
-					j--
-				) {
-					yield cursors([i, j]);
-					if (items[j] < items[i]) {
-						// yield notSorted([i, j]);
-						items = yield swap(i, j);
-						// yield sorted([i, j]);
-						break;
-					}
-				}
-				sortedCount += 1;
-				clean = false;
-			} else yield sorted([i, i + 1]);
+	for (let j = low; j < high; j++) {
+		yield cursors([i, j, high]);
+		if (arr[j] < pivot) {
+			i++;
+			arr = yield swap(i, j);
 		}
 	}
-}
+	arr = yield swap(i + 1, high);
+	yield sorted([i + 1]);
+	return [i + 1, arr];
+}

src/index.css

@@ -11,4 +11,14 @@ body {
 
 .list-item {
 	transition: left 0.25s;
+}
+
+#controls > button, #controls > input {
+	background-color: #121212;
+	color: white;
+	border: 1px solid #ffffff20;
+	margin: 4px;
+	border-radius: 8px;
+	min-height: 32px;
+	height: 32px;
 }