implement queue to keep track of splitting and merging

.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+*.example.js

src/routes/+page.svelte

@@ -20,8 +20,14 @@
 	</h2>
 	<h2 class="grid grid-cols-1 font-bold text-xl">
 		<a
-			class="border-2 border-black underline text-blue-600 hover:bg-gray-200 cursor-pointer"
+			class="border-2 border-black border-b-0 underline text-blue-600 hover:bg-gray-200 cursor-pointer"
 			href="/merge">Merge sort</a
 		>
 	</h2>
+	<h2 class="grid grid-cols-1 font-bold text-xl">
+		<a
+			class="border-2 border-black underline text-blue-600 hover:bg-gray-200 cursor-pointer"
+			href="/bogo">Bogosort</a
+		>
+	</h2>
 </div>

src/routes/bogo/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="js">
+	import { createData } from '$lib/createData';
+	import { scaleData } from '$lib/scaleData';
+	import { error } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	// Constants / Parameters
+	const FPS = 20;
+	const AMOUNT = 100;
+
+	// System variables
+	const data = scaleData(createData(AMOUNT));
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+	/** @type {CanvasRenderingContext2D} */
+	let context;
+	/** @type {number} */
+	let width;
+	/** @type {number} */
+	let interv;
+	onMount(() => {
+		// Initialize the canvas dimensions
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+
+		// Try getting 2D context
+		const ctx = canvas.getContext('2d');
+		if (!ctx) error(417, 'Canvas not supported');
+
+		// Initialize global variables
+		context = ctx;
+		width = canvas.width / AMOUNT;
+
+		// Start continuous animation
+		interv = setInterval(animate, 1000 / FPS);
+	});
+
+	let index = 0;
+
+	/** Render a single frame of the sorting algorithm at a time on the canvas. */
+	function animate() {
+		// Random index after current in Fisher-Yates shuffle style
+		const compr = Math.floor(Math.random() * (AMOUNT - index)) + index;
+
+		// Clear canvas with black background
+		context.fillStyle = 'black';
+		context.fillRect(0, 0, canvas.width, canvas.height);
+
+		// Display datapoints as lines
+		context.fillStyle = 'white';
+		data.forEach((d, i) => {
+			if (i === index) context.fillStyle = 'red';
+			else if (i === compr) context.fillStyle = 'lime';
+			else context.fillStyle = 'white';
+			context.fillRect(i * width, canvas.height, width - 1, -d * canvas.height);
+		});
+
+		// Swap datapoints
+		[data[index], data[compr]] = [data[compr], data[index]];
+
+		// After last iteration, check order
+		if (index++ >= data.length - 1) {
+			let prev = 0,
+				sorted = true;
+			for (const d of data) {
+				if (d < prev) {
+					sorted = false;
+					break;
+				}
+				prev = d;
+			}
+
+			if (sorted) {
+				clearInterval(interv);
+				index = data.length;
+			} else index = 0;
+		}
+	}
+</script>
+
+<canvas bind:this={canvas} class="fixed top-0 left-0" />

src/routes/heap/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="js">
+	import { createData } from '$lib/createData';
+	import { scaleData } from '$lib/scaleData';
+	import { error } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	// Constants / Parameters
+	const FPS = 20;
+	const AMOUNT = 100;
+
+	// System variables
+	const data = scaleData(createData(AMOUNT));
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+	/** @type {CanvasRenderingContext2D} */
+	let context;
+	/** @type {number} */
+	let width;
+	/** @type {number} */
+	let interv;
+	onMount(() => {
+		// Initialize the canvas dimensions
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+
+		// Try getting 2D context
+		const ctx = canvas.getContext('2d');
+		if (!ctx) error(417, 'Canvas not supported');
+
+		// Initialize global variables
+		context = ctx;
+		width = canvas.width / AMOUNT;
+
+		// Start continuous animation
+		interv = setInterval(animate, 1000 / FPS);
+	});
+
+	/** Render a single frame of the sorting algorithm at a time on the canvas. */
+	function animate() {
+		// Clear canvas with black background
+		context.fillStyle = 'black';
+		context.fillRect(0, 0, canvas.width, canvas.height);
+
+		// Display datapoints as lines
+		context.fillStyle = 'white';
+		data.forEach((d, i) =>
+			context.fillRect(i * width, canvas.height, width - 1, -d * canvas.height)
+		);
+	}
+</script>
+
+<canvas bind:this={canvas} class="fixed top-0 left-0" />

src/routes/merge/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="js">
+	import { createData } from '$lib/createData';
+	import { scaleData } from '$lib/scaleData';
+	import { error } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	// Constants / Parameters
+	const FPS = 20;
+	const AMOUNT = 100;
+
+	// System variables
+	const data = scaleData(createData(AMOUNT));
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+	/** @type {CanvasRenderingContext2D} */
+	let context;
+	/** @type {number} */
+	let width;
+	/** @type {number} */
+	let interv;
+	onMount(() => {
+		// Initialize the canvas dimensions
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+
+		// Try getting 2D context
+		const ctx = canvas.getContext('2d');
+		if (!ctx) error(417, 'Canvas not supported');
+
+		// Initialize global variables
+		context = ctx;
+		width = canvas.width / AMOUNT;
+
+		// Start continuous animation
+		interv = setInterval(animate, 1000 / FPS);
+
+		queue.push(new ArrRef(0, AMOUNT));
+	});
+
+	class ArrRef {
+		/**
+		 * @param {number} start
+		 * @param {number} end
+		 */
+		constructor(start, end) {
+			this.start = start;
+			this.end = end;
+			this.length = end - start;
+		}
+
+		/**
+		 * @param {number} index
+		 * @returns {number}
+		 */
+		at(index) {
+			return data[this.start + index];
+		}
+	}
+
+	/**
+	 * @param {ArrRef} a
+	 * @param {ArrRef} b
+	 */
+	function merge(a, b) {
+		let index = 0,
+			compr = 0;
+
+		while (index < a.length && compr < b.length) {
+			if (a.at(index) < b.at(compr)) {
+				data[index + compr] = a.at(index);
+				index++;
+			} else {
+				data[index + compr] = b.at(compr);
+				compr++;
+			}
+		}
+
+		while (index < a.length) (data[index + compr] = a.at(index)), index++;
+		while (compr < b.length) (data[index + compr] = b.at(compr)), compr++;
+	}
+
+	/** @type {ArrRef[]} */
+	const queue = [];
+	/** Render a single frame of the sorting algorithm at a time on the canvas. */
+	function animate() {
+		// Clear canvas with black background
+		context.fillStyle = 'black';
+		context.fillRect(0, 0, canvas.width, canvas.height);
+
+		// Display datapoints as lines
+		context.fillStyle = 'white';
+		data.forEach((d, i) =>
+			context.fillRect(i * width, canvas.height, width - 1, -d * canvas.height)
+		);
+	}
+</script>
+
+<canvas bind:this={canvas} class="fixed top-0 left-0" />

src/routes/quick/+page.svelte

@@ -138,12 +138,20 @@
 			context.fillRect(i * width, canvas.height, width - 1, -d * canvas.height);
 		});
 
+		/** @type {Job[]} */
+		const newQueue = [];
+
 		// Step job and handle result
-		const result = queue[0].step();
-		if (result) {
-			queue.shift();
-			if (!result.done) queue.push(...result.generate(data));
-		}
+		queue.forEach((j, i) => {
+			const result = j.step();
+			if (result !== undefined) {
+				queue.splice(i, 1);
+				if (!result.done) newQueue.push(...result.generate(data));
+			}
+		});
+
+		// Add new jobs to queue
+		queue.push(...newQueue);
 	}
 </script>