From ab1788292912fff7689d0be1d91fd5f36a2e1d85 Mon Sep 17 00:00:00 2001
From: Alex <atm2g19@soton.ac.uk>
Date: Fri, 10 Apr 2020 21:53:17 +0100
Subject: [PATCH] Added to sorting-visualiser Added TS sources and maps

---
 .gitignore                                    |   4 +-
 .../collisions/quad-tree/qtree.js.map         |   1 +
 .../collisions/quad-tree/qtree.ts             | 115 ++++++++
 .../collisions/quad-tree/sketch.js.map        |   1 +
 .../collisions/quad-tree/sketch.ts            | 151 ++++++++++
 .../test-every-optim/test-every-optim.js.map  |   1 +
 .../test-every-optim/test-every-optim.ts      | 105 +++++++
 .../collisions/test-every/test-every.js.map   |   1 +
 .../collisions/test-every/test-every.ts       | 123 ++++++++
 .../sorting-visualiser/algo.js                |   1 +
 .../sorting-visualiser/algo.js.map            |   1 +
 .../sorting-visualiser/algo.ts                |  34 +++
 .../algorithms/bubble-sort.js.map             |   1 +
 .../algorithms/bubble-sort.ts                 |  34 +++
 .../algorithms/cocktail-shaker-sort.js.map    |   1 +
 .../algorithms/cocktail-shaker-sort.ts        |  37 +++
 .../algorithms/fisher-yates.js                |   4 +
 .../algorithms/fisher-yates.js.map            |   1 +
 .../algorithms/heap-sort.js                   |   4 +-
 .../algorithms/heap-sort.js.map               |   1 +
 .../algorithms/heap-sort.ts                   | 131 +++++++++
 .../sorting-visualiser/algorithms/in-order.js |  44 +++
 .../algorithms/in-order.js.map                |   1 +
 .../algorithms/near-sorted.js                 |   1 +
 .../algorithms/near-sorted.js.map             |   1 +
 .../algorithms/quick-sort.js.map              |   1 +
 .../algorithms/quick-sort.ts                  | 118 ++++++++
 .../sorting-visualiser/color.js               |   2 +
 .../sorting-visualiser/color.js.map           |   1 +
 .../sorting-visualiser/color.ts               |   7 +
 .../sorting-visualiser/colors/rainbow.js      |  54 ++++
 .../sorting-visualiser/colors/rainbow.js.map  |   1 +
 .../sorting-visualiser/colors/rainbow.ts      |  51 ++++
 .../sorting-visualiser/colors/simple.js       |  18 ++
 .../sorting-visualiser/colors/simple.js.map   |   1 +
 .../sorting-visualiser/colors/simple.ts       |  14 +
 .../sorting-visualiser/main.js                | 146 ++++++----
 .../sorting-visualiser/main.js.map            |   1 +
 .../sorting-visualiser/main.ts                | 267 ++++++++++++++++++
 .../shuffles/fisher-yates.js                  |  24 ++
 .../shuffles/fisher-yates.js.map              |   1 +
 .../shuffles/fisher-yates.ts                  |  23 ++
 .../sorting-visualiser/shuffles/in-order.js   |  44 +++
 .../shuffles/in-order.js.map                  |   1 +
 .../sorting-visualiser/shuffles/in-order.ts   |  42 +++
 .../shuffles/near-sorted.js                   |  53 ++++
 .../shuffles/near-sorted.js.map               |   1 +
 .../shuffles/near-sorted.ts                   |  55 ++++
 .../sorting-visualiser/visualiser.js          |  83 ++++--
 .../sorting-visualiser/visualiser.js.map      |   1 +
 .../sorting-visualiser/visualiser.ts          | 101 +++++++
 .../sorting-visualiser/visualisers/pie.js     |   7 +-
 .../sorting-visualiser/visualisers/pie.js.map |   1 +
 .../sorting-visualiser/visualisers/pie.ts     |  22 ++
 .../sorting-visualiser/visualisers/scatter.js |  12 +-
 .../visualisers/scatter.js.map                |   1 +
 .../sorting-visualiser/visualisers/scatter.ts |  19 ++
 .../sorting-visualiser/visualisers/spiral.js  |   7 +-
 .../visualisers/spiral.js.map                 |   1 +
 .../sorting-visualiser/visualisers/spiral.ts  |  26 ++
 .../visualisers/standard.js                   |   7 +-
 .../visualisers/standard.js.map               |   1 +
 .../visualisers/standard.ts                   |  18 ++
 public/games/backgammon/game.js.map           |   1 +
 public/games/game.js.map                      |   1 +
 public/games/game.ts                          |  62 ++++
 66 files changed, 1994 insertions(+), 102 deletions(-)
 create mode 100644 public/coding_challenges/collisions/quad-tree/qtree.js.map
 create mode 100644 public/coding_challenges/collisions/quad-tree/qtree.ts
 create mode 100644 public/coding_challenges/collisions/quad-tree/sketch.js.map
 create mode 100644 public/coding_challenges/collisions/quad-tree/sketch.ts
 create mode 100644 public/coding_challenges/collisions/test-every-optim/test-every-optim.js.map
 create mode 100644 public/coding_challenges/collisions/test-every-optim/test-every-optim.ts
 create mode 100644 public/coding_challenges/collisions/test-every/test-every.js.map
 create mode 100644 public/coding_challenges/collisions/test-every/test-every.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/algo.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algo.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/heap-sort.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/in-order.js
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/in-order.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/quick-sort.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/algorithms/quick-sort.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/color.js
 create mode 100644 public/coding_challenges/sorting-visualiser/color.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/color.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/rainbow.js
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/rainbow.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/rainbow.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/simple.js
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/simple.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/colors/simple.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/main.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/main.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/in-order.js
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/in-order.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/in-order.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/shuffles/near-sorted.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/visualiser.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/visualiser.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/pie.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/pie.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/scatter.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/scatter.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/spiral.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/spiral.ts
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/standard.js.map
 create mode 100644 public/coding_challenges/sorting-visualiser/visualisers/standard.ts
 create mode 100644 public/games/backgammon/game.js.map
 create mode 100644 public/games/game.js.map
 create mode 100644 public/games/game.ts

diff --git a/.gitignore b/.gitignore
index 71a49b6..4ecbaa9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,9 +5,9 @@ launch.json
 log/
 **/*.d.ts
 **/*.zip
-public/**/*.ts
+# public/**/*.ts
 public/**/tsconfig.json
-**/*.map
+# **/*.map
 .jsbeautifyrc
 nodemon.json
 public/js/p5/.DS_Store
diff --git a/public/coding_challenges/collisions/quad-tree/qtree.js.map b/public/coding_challenges/collisions/quad-tree/qtree.js.map
new file mode 100644
index 0000000..6c9705c
--- /dev/null
+++ b/public/coding_challenges/collisions/quad-tree/qtree.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"qtree.js","sourceRoot":"","sources":["qtree.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/quad-tree/qtree.ts b/public/coding_challenges/collisions/quad-tree/qtree.ts
new file mode 100644
index 0000000..1b0a39d
--- /dev/null
+++ b/public/coding_challenges/collisions/quad-tree/qtree.ts
@@ -0,0 +1,115 @@
+/// <reference path="../../../../p5.global-mode.d.ts"/>
+
+interface Boundary {
+	type: 'boundary' | 'circle';
+	x: number;
+	y: number;
+	w ? : number;
+	h ? : number;
+	r ? : number;
+}
+
+
+
+interface QTreeElem {
+	x: number;
+	y: number;
+	obj ? : any;
+	boundary ? : Boundary;
+}
+
+class QuadTree {
+	bounds: Boundary;
+	maxElems: number = 4;
+	elems: QTreeElem[] = [];
+	children: QuadTree[];
+	constructor(bounds: Boundary, maxElems ? : number) {
+		this.bounds = bounds;
+		if (maxElems) this.maxElems = maxElems;
+	}
+
+	insert(elem: QTreeElem) {
+		if (!this.children) {
+			if (this.elems.length >= this.maxElems) {
+				//generate children
+				this.children = [];
+				for (let i = 0; i < 2; i++) {
+					for (let j = 0; j < 2; j++) {
+						this.children.push(new QuadTree({
+							type: 'boundary',
+							x: this.bounds.x + i * this.bounds.w / 2,
+							y: this.bounds.y + j * this.bounds.h / 2,
+							w: this.bounds.w / 2,
+							h: this.bounds.h / 2
+						}, this.maxElems));
+					}
+				}
+				for (let i = 0; i < this.elems.length; i++) {
+					this.insert(this.elems[i]);
+				}
+				this.insert(elem);
+
+				this.elems = [];
+			} else {
+				this.elems.push(elem);
+			}
+		} else {
+			//find which child
+			for (let child of this.children) {
+				if (child.bounds.x <= elem.x && child.bounds.y <= elem.y &&
+					child.bounds.x + child.bounds.w > elem.x && child.bounds.y + child.bounds.h > elem.y) {
+					child.insert(elem);
+				}
+			}
+		}
+	}
+
+	draw() {
+		noFill();
+		stroke(100, 100, 100);
+		strokeWeight((this.bounds.w + this.bounds.h) / 200);
+		rect(this.bounds.x, this.bounds.y, this.bounds.w, this.bounds.h);
+		if (this.children) {
+			for (let c of this.children) {
+				c.draw();
+			}
+		}
+	}
+
+	query(b: Boundary): QTreeElem[] {
+		let elems: QTreeElem[] = [];
+		if (b.type == 'circle') {
+			let nb: Boundary = {
+				type: 'boundary',
+				x: b.x - b.r,
+				y: b.y - b.r,
+				w: b.r * 2,
+				h: b.r * 2,
+			}
+			return this.query(nb);
+
+		} else if (b.type == 'boundary') {
+			if (this.children) {
+				for (let c of this.children) {
+					//AABB
+					if (b.x < c.bounds.x + c.bounds.w &&
+						b.x + b.w > c.bounds.x &&
+						b.y < c.bounds.y + c.bounds.h &&
+						b.y + b.h > c.bounds.y) {
+
+						elems.push(...c.query(b));
+					}
+				}
+			} else {
+				for (let e of this.elems) {
+					if (e.x > b.x && e.y > b.y &&
+						e.x < b.x + b.w && e.y < b.y + b.h) {
+						elems.push(e);
+					}
+				}
+			}
+		}
+
+		return elems;
+	}
+}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/quad-tree/sketch.js.map b/public/coding_challenges/collisions/quad-tree/sketch.js.map
new file mode 100644
index 0000000..152d322
--- /dev/null
+++ b/public/coding_challenges/collisions/quad-tree/sketch.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"sketch.js","sourceRoot":"","sources":["sketch.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/quad-tree/sketch.ts b/public/coding_challenges/collisions/quad-tree/sketch.ts
new file mode 100644
index 0000000..25880fc
--- /dev/null
+++ b/public/coding_challenges/collisions/quad-tree/sketch.ts
@@ -0,0 +1,151 @@
+/// <reference path="./qtree.ts" />
+/// <reference path="../../../../p5.global-mode.d.ts"/>
+
+let count: number;
+let countSlider: p5.Element;
+let slider_label: p5.Element;
+let frCounter: p5.Element;
+let fr: number = 0;
+let circles: Circle[] = [];
+
+let b: Boundary = {
+	type: 'boundary',
+	x: 0,
+	y: 0,
+	w: 500,
+	h: 500,
+}
+
+function setup() {
+	let params = getURLParams();
+	if (params["count"]) {
+		count = params["count"];
+	} else {
+		count = 100;
+	}
+	//@ts-ignore
+	countSlider = createSlider(0, 80, Math.log10(count) * 20, 0.1);
+	countSlider.id("CountSlider");
+	// createElement("br");
+	//@ts-ignore
+	slider_label = createElement("label");
+	slider_label.attribute("for", "CountSlider");
+
+	//@ts-ignore
+	frCounter = createElement("label");
+
+	createElement("br");
+	createCanvas(500, 500);
+	frameRate(30);
+}
+
+function draw() {
+	let qtree = new QuadTree(b);
+
+	//@ts-ignore
+	count = Math.floor(Math.pow(10, countSlider.value() / 20));
+	slider_label.elt.innerText = (count);
+	fr = fr + (frameRate() - fr) / 8
+	frCounter.elt.innerText = `, FrameRate: ${Math.floor(fr)}`;
+	// console.log(count);
+	while (circles.length > count) {
+		circles.pop();
+	}
+	while (circles.length < count) {
+		circles.push(new Circle(Math.random() * width, Math.random() * height, 10));
+	}
+
+	for (let c of circles) {
+		qtree.insert({
+			x: c.getX(),
+			y: c.getY(),
+			obj: c,
+		})
+	}
+	// console.log(qtree);
+	background(0);
+
+	for (let c of circles) {
+		let poss =
+			qtree.query({
+				type: 'circle',
+				x: c.getX(),
+				y: c.getY(),
+				r: c.getRadius() * 2,
+			});
+		for (let {
+				obj
+			} of poss) {
+			if (obj != c && c.intersects(obj)) {
+				c.setHiglight(true);
+				obj.setHiglight(true);
+			}
+		}
+	}
+
+
+	for (let c of circles) {
+		c.draw();
+		c.move();
+		c.setHiglight(false);
+	}
+
+	qtree.draw();
+
+	// noLoop();
+
+}
+class Circle {
+	private x: number;
+	private y: number;
+	private r: number;
+	private highlight: boolean;
+	constructor(x: number, y: number, r: number) {
+		this.x = x;
+		this.y = y;
+		this.r = r;
+		this.highlight = false;
+	}
+
+	getRadius(): number {
+		return this.r;
+	}
+
+	getX(): number {
+		return this.x;
+	}
+	getY(): number {
+		return this.y;
+	}
+
+	setHiglight(b: boolean) {
+		this.highlight = b;
+	}
+
+	move() {
+		this.x += Math.random() * 5 - 2.5;
+		this.y += Math.random() * 5 - 2.5;
+	}
+
+	draw() {
+		fill(100, 100, 100);
+		if (this.highlight) {
+			fill(180, 180, 180)
+		}
+		noStroke();
+		ellipse(this.x, this.y, this.r * 2);
+	}
+
+	intersects(c: Circle): boolean {
+		let minD = c.getRadius() + this.r;
+		minD *= minD;
+		let dX = c.getX() - this.x;
+		dX *= dX;
+		let dY = c.getY() - this.y;
+		dY *= dY;
+		if (dX + dY < minD) {
+			return true;
+		}
+		return false;
+	}
+}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every-optim/test-every-optim.js.map b/public/coding_challenges/collisions/test-every-optim/test-every-optim.js.map
new file mode 100644
index 0000000..88ff1a0
--- /dev/null
+++ b/public/coding_challenges/collisions/test-every-optim/test-every-optim.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"test-every-optim.js","sourceRoot":"","sources":["test-every-optim.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every-optim/test-every-optim.ts b/public/coding_challenges/collisions/test-every-optim/test-every-optim.ts
new file mode 100644
index 0000000..2e7857b
--- /dev/null
+++ b/public/coding_challenges/collisions/test-every-optim/test-every-optim.ts
@@ -0,0 +1,105 @@
+/// <reference path="../../../../p5.global-mode.d.ts"/>
+
+let count: number;
+let countSlider: p5.Element;
+
+let circles: Circle[] = [];
+
+function setup() {
+	createCanvas(500, 500);
+	let params = getURLParams();
+	if (params["count"]) {
+		count = params["count"];
+	} else {
+		count = 100;
+	}
+	//@ts-ignore
+	countSlider = createSlider(1, 100, Math.log10(count) * 20, 1);
+}
+
+function draw() {
+	//@ts-ignore
+	count = Math.pow(10, countSlider.value() / 20);
+	console.log(count);
+	while (circles.length > count) {
+		circles.pop();
+	}
+	while (circles.length < count) {
+		circles.push(new Circle(Math.random() * width, Math.random() * height, width * height / (1500 * Math.sqrt(count))));
+	}
+
+	background(0);
+
+	for (let i = 0; i < circles.length; i++) {
+		for (let j = i + 1; j < circles.length; j++) {
+			if (circles[i] != circles[j] && circles[i].intersects(circles[j])) {
+				circles[i].setHiglight(true);
+				circles[j].setHiglight(true);
+			}
+		}
+	}
+
+	for (let c of circles) {
+		c.draw();
+		c.move();
+		c.setHiglight(false);
+	}
+
+}
+
+class Circle {
+	private x: number;
+	private y: number;
+	private r: number;
+	private highlight: boolean;
+	constructor(x: number, y: number, r: number) {
+		this.x = x;
+		this.y = y;
+		this.r = r;
+		this.highlight = false;
+	}
+
+	getRadius(): number {
+		return this.r;
+	}
+
+	getX(): number {
+		return this.x;
+	}
+	getY(): number {
+		return this.y;
+	}
+
+	setHiglight(b: boolean) {
+		this.highlight = b;
+	}
+
+	move() {
+		this.x += Math.random() * 5 - 2.5;
+		this.y += Math.random() * 5 - 2.5;
+	}
+
+	draw() {
+		fill(100, 100, 100);
+		if (this.highlight) {
+			fill(180, 180, 180)
+		}
+		noStroke();
+		ellipse(this.x, this.y, this.r * 2);
+	}
+
+	intersects(c: Circle): boolean {
+		let minD = c.getRadius() + this.r;
+		minD *= minD;
+		let dX = c.getX() - this.x;
+		dX *= dX;
+		let dY = c.getY() - this.y;
+		dY *= dY;
+		if (dX + dY < minD) {
+			return true;
+		}
+		return false;
+	}
+}
+
+new p5(null, document.getElementById("container"));
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every/test-every.js.map b/public/coding_challenges/collisions/test-every/test-every.js.map
new file mode 100644
index 0000000..f69b278
--- /dev/null
+++ b/public/coding_challenges/collisions/test-every/test-every.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"test-every.js","sourceRoot":"","sources":["test-every.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every/test-every.ts b/public/coding_challenges/collisions/test-every/test-every.ts
new file mode 100644
index 0000000..17d5ff5
--- /dev/null
+++ b/public/coding_challenges/collisions/test-every/test-every.ts
@@ -0,0 +1,123 @@
+/// <reference path="../../../../p5.global-mode.d.ts"/>
+
+let count: number;
+let countSlider: p5.Element;
+let slider_label: p5.Element;
+let frCounter: p5.Element;
+let fr: number = 0;
+
+let circles: Circle[] = [];
+
+function setup() {
+	let params = getURLParams();
+	if (params["count"]) {
+		count = params["count"];
+	} else {
+		count = 100;
+	}
+	//@ts-ignore
+	countSlider = createSlider(0, 80, Math.log10(count) * 20, 0.1);
+	countSlider.id("CountSlider");
+	// createElement("br");
+	//@ts-ignore
+	slider_label = createElement("label");
+	slider_label.attribute("for", "CountSlider");
+	//@ts-ignore
+	frCounter = createElement("label");
+	createElement("br");
+	createCanvas(500, 500);
+
+}
+
+function draw() {
+	//@ts-ignore
+	count = Math.floor(Math.pow(10, countSlider.value() / 20));
+	console.log(count);
+	slider_label.elt.innerText = (count);
+
+	fr = fr + (frameRate() - fr) / 8;
+
+	frCounter.elt.innerText = `, FrameRate: ${Math.floor(fr)}`;
+
+	while (circles.length > count) {
+		circles.pop();
+	}
+	while (circles.length < count) {
+		circles.push(new Circle(Math.random() * width, Math.random() * height, width * height / (1500 * Math.sqrt(count))));
+	}
+
+	background(0);
+
+	for (let i = 0; i < circles.length; i++) {
+		for (let j = 0; j < circles.length; j++) {
+			if (circles[i] != circles[j] && circles[i].intersects(circles[j])) {
+				circles[i].setHiglight(true);
+				circles[j].setHiglight(true);
+			}
+		}
+	}
+
+	for (let c of circles) {
+		c.draw();
+		c.move();
+		c.setHiglight(false);
+	}
+
+}
+
+class Circle {
+	private x: number;
+	private y: number;
+	private r: number;
+	private highlight: boolean;
+	constructor(x: number, y: number, r: number) {
+		this.x = x;
+		this.y = y;
+		this.r = r;
+		this.highlight = false;
+	}
+
+	getRadius(): number {
+		return this.r;
+	}
+
+	getX(): number {
+		return this.x;
+	}
+	getY(): number {
+		return this.y;
+	}
+
+	setHiglight(b: boolean) {
+		this.highlight = b;
+	}
+
+	move() {
+		this.x += Math.random() * 5 - 2.5;
+		this.y += Math.random() * 5 - 2.5;
+	}
+
+	draw() {
+		fill(100, 100, 100);
+		if (this.highlight) {
+			fill(180, 180, 180)
+		}
+		noStroke();
+		ellipse(this.x, this.y, this.r * 2);
+	}
+
+	intersects(c: Circle): boolean {
+		let minD = c.getRadius() + this.r;
+		minD *= minD;
+		let dX = c.getX() - this.x;
+		dX *= dX;
+		let dY = c.getY() - this.y;
+		dY *= dY;
+		if (dX + dY < minD) {
+			return true;
+		}
+		return false;
+	}
+}
+
+new p5(null, document.getElementById("container"));
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algo.js b/public/coding_challenges/sorting-visualiser/algo.js
index af7d87e..77bb47e 100644
--- a/public/coding_challenges/sorting-visualiser/algo.js
+++ b/public/coding_challenges/sorting-visualiser/algo.js
@@ -9,4 +9,5 @@ class Algorithm {
     }
 }
 let Algorithms = [];
+let Shuffles = [];
 //# sourceMappingURL=algo.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algo.js.map b/public/coding_challenges/sorting-visualiser/algo.js.map
new file mode 100644
index 0000000..9b53f74
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algo.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"algo.js","sourceRoot":"","sources":["algo.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAQtC,MAAe,SAAS;IAEvB,YAAY,GAAiB;QAC5B,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IAClB,CAAC;IAED,IAAI;QACH,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;IAClD,CAAC;CAID;AAYD,IAAI,UAAU,GAAW,EAAE,CAAC;AAC5B,IAAI,QAAQ,GAAW,EAAE,CAAC"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algo.ts b/public/coding_challenges/sorting-visualiser/algo.ts
new file mode 100644
index 0000000..b64d691
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algo.ts
@@ -0,0 +1,34 @@
+/// <reference path="visualiser.ts" />
+
+
+interface AlgorithmConstructor {
+	new(arr: WatchedArray): Algorithm;
+}
+
+
+abstract class Algorithm {
+	protected elems: WatchedArray;
+	constructor(arr: WatchedArray) {
+		this.elems = arr;
+	}
+
+	sort() {
+		while (!this.getComplete()) this.sortIteration();
+	}
+	abstract sortIteration();
+	abstract getComplete(): boolean;
+	abstract setOpt(key: string, value: any);
+}
+
+// type AlgoConstructor
+
+interface Algo {
+	name: string,
+		constructor: AlgorithmConstructor,
+		opts ? : {
+			[opt_name: string]: [string, any][],
+		}
+}
+
+let Algorithms: Algo[] = [];
+let Shuffles: Algo[] = [];
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.js.map b/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.js.map
new file mode 100644
index 0000000..015e7bb
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"bubble-sort.js","sourceRoot":"","sources":["bubble-sort.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QACC,YAAO,GAAW,CAAC,CAAC;QACpB,aAAQ,GAAW,CAAC,CAAC;IA0BtB,CAAC;IAvBA,aAAa;QACZ,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,EAAE;YACV,wCAAwC;YACxC,oCAAoC;YACpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAClD;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,2CAA2C;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE;YAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SAClB;IAEF,CAAC;IAED,WAAW;QAEV,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,UAAU,CAAC,IAAI,CAAC;IACf,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,UAAU;CACvB,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.ts b/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.ts
new file mode 100644
index 0000000..85f70a8
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/bubble-sort.ts
@@ -0,0 +1,34 @@
+class BubbleSort extends Algorithm {
+	noIters: number = 0;
+	position: number = 0;
+
+
+	sortIteration() {
+		let a = this.elems.get(this.position);
+		let b = this.elems.get(this.position + 1);
+		if (a > b) {
+			// this.elems.set(this.position + 1, a);
+			// this.elems.set(this.position, b);
+			this.elems.swap(this.position, this.position + 1);
+		}
+		this.position++;
+		// console.log(this.position, this.noIters)
+		if (this.position >= (this.elems.length - this.noIters - 1)) {
+			this.noIters++;
+			this.position = 0;
+		}
+
+	}
+
+	getComplete() {
+
+		return this.noIters >= (this.elems.length - 1);
+	}
+
+	setOpt(key: string, val: any) {}
+}
+
+Algorithms.push({
+	name: "bubble",
+	constructor: BubbleSort,
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.js.map b/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.js.map
new file mode 100644
index 0000000..951caa9
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"cocktail-shaker-sort.js","sourceRoot":"","sources":["cocktail-shaker-sort.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAmB,SAAQ,SAAS;IAA1C;;QACC,YAAO,GAAW,CAAC,CAAC;QACpB,aAAQ,GAAW,CAAC,CAAC;IA6BtB,CAAC;IA3BA,aAAa;QACZ,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,EAAE;YACV,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAEhB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjB,2CAA2C;QAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;YACjI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC;gBACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;;gBAEhB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;IAEF,CAAC;IAED,WAAW;QAEV,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC1C,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,UAAU,CAAC,IAAI,CAAC;IACf,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,kBAAkB;CAC/B,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.ts b/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.ts
new file mode 100644
index 0000000..c63b121
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/cocktail-shaker-sort.ts
@@ -0,0 +1,37 @@
+class CocktailShakerSort extends Algorithm {
+	noIters: number = 0;
+	position: number = 0;
+
+	sortIteration() {
+		let a = this.elems.get(this.position);
+		let b = this.elems.get(this.position + 1);
+		if (a > b) {
+			this.elems.set(this.position + 1, a);
+			this.elems.set(this.position, b);
+		}
+		if (this.noIters % 2 == 0)
+			this.position++;
+		else
+			this.position--;
+		// console.log(this.position, this.noIters)
+		if ((this.position >= (this.elems.length - Math.ceil(this.noIters / 2) - 1)) || (this.position < (Math.floor(this.noIters / 2)))) {
+			this.noIters++;
+			if (this.noIters % 2 == 0)
+				this.position++;
+			else
+				this.position--;
+		}
+
+	}
+
+	getComplete() {
+
+		return this.noIters >= this.elems.length;
+	}
+	setOpt(key: string, val: any) {}
+}
+
+Algorithms.push({
+	name: "cocktailshaker",
+	constructor: CocktailShakerSort,
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js b/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js
index fac783b..21cba29 100644
--- a/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js
+++ b/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js
@@ -17,4 +17,8 @@ class FisherYates extends Algorithm {
     }
     setOpt(key, val) { }
 }
+Shuffles.push({
+    name: "Fisher Yeates Shuffle",
+    constructor: FisherYates,
+});
 //# sourceMappingURL=fisher-yates.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js.map b/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js.map
new file mode 100644
index 0000000..91fae41
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/fisher-yates.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"fisher-yates.js","sourceRoot":"","sources":["fisher-yates.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QACC,gBAAW,GAAW,CAAC,CAAC;IAgBzB,CAAC;IAbA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;YACxC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,QAAQ,CAAC,IAAI,CAAC;IACb,IAAI,EAAE,uBAAuB;IAC7B,WAAW,EAAE,WAAW;CACxB,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js
index 778981c..629e728 100644
--- a/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js
+++ b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js
@@ -79,7 +79,7 @@ class HeapSort extends Algorithm {
             filtered = true;
         }
         //check
-        let a = this.elems.getArr();
+        let a = this.elems.arr;
         if (((fp * 2 + 1) < this.heapSize && a[fp] < a[fp * 2 + 1]) || ((fp * 2 + 2) < this.heapSize && a[fp] < a[fp * 2 + 2])) {
             console.error(`INVALID HEAP index ${fp} : ${a[fp]} => ${a[fp * 2 + 1]}, ${a[fp * 2 + 2]}`);
             console.log({
@@ -97,7 +97,7 @@ class HeapSort extends Algorithm {
         return this.heapSize <= 0;
     }
     verifyMaxHeap() {
-        let a = this.elems.getArr();
+        let a = this.elems.arr;
         for (let i = 0; i < this.heapSize; i++) {
             let p = a[i];
             let childIdx = i * 2 + 1;
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js.map b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js.map
new file mode 100644
index 0000000..575a02b
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"heap-sort.js","sourceRoot":"","sources":["heap-sort.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.ts b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.ts
new file mode 100644
index 0000000..24bd022
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/heap-sort.ts
@@ -0,0 +1,131 @@
+enum HeapSortState {
+	START,
+	HEAPIFY,
+	SORT,
+}
+
+class HeapSort extends Algorithm {
+	state: HeapSortState = HeapSortState.START;
+	heapSize: number;
+	filterPos: number;
+	pos: number;
+
+
+
+	sortIteration() {
+		if (this.state == HeapSortState.START) {
+			this.heapSize = this.elems.length;
+			//0 -> 1,2
+			//1 -> 3,4
+			//2 -> 5,6
+			//n -> 2n+1,2n+2
+			this.pos = Math.floor((this.heapSize - 1) / 2);
+			this.filterPos = this.pos;
+			this.state = HeapSortState.HEAPIFY;
+		} else
+		if (this.state == HeapSortState.HEAPIFY) {
+
+			if (!this.filterDownIteration()) {
+				this.pos--;
+				this.filterPos = this.pos;
+				if (this.pos < 0) {
+					this.state = HeapSortState.SORT;
+					console.log("Heap created");
+					this.pos = 0;
+					this.filterPos = this.pos;
+					this.verifyMaxHeap();
+				}
+			}
+
+		} else if (this.state == HeapSortState.SORT) {
+			// this.heapSize = 0;
+			// return;
+			if (this.filterPos == -1) {
+				this.elems.swap(0, this.heapSize - 1);
+				this.heapSize--;
+				this.filterPos = 0;
+			} else if (!this.filterDownIteration()) {
+				this.filterPos = -1;
+			}
+
+			// this.state = HeapSortState.
+			// this.heapSize = 0;
+		}
+	}
+
+	filterDownIteration(): boolean {
+		let filtered: boolean = false;
+		let fp = this.filterPos;
+		if (this.filterPos < 0 || this.filterPos >= this.heapSize) {
+			debugger;
+			return;
+		}
+
+		let parent = this.elems.get(this.filterPos);
+		let childIdx = this.filterPos * 2 + 1;
+		let c1: number, c2: number;
+		if (childIdx < this.heapSize)
+			c1 = this.elems.get(childIdx);
+		if ((childIdx + 1) < this.heapSize)
+			c2 = this.elems.get(childIdx + 1);
+		let greaterIdx: number, greater: number;
+		if (c1 != undefined) {
+			greaterIdx = childIdx;
+			greater = c1;
+			if (c2 != undefined && c2 > c1) {
+				greaterIdx++;
+				greater = c2;
+			}
+		}
+		if (greaterIdx && greater > parent) {
+			//swap
+			this.elems.swap(this.filterPos, greaterIdx);
+			//now filter child
+			this.filterPos = greaterIdx;
+			filtered = true;
+		}
+		//check
+
+		let a = this.elems.arr;
+		if (((fp * 2 + 1) < this.heapSize && a[fp] < a[fp * 2 + 1]) || ((fp * 2 + 2) < this.heapSize && a[fp] < a[fp * 2 + 2])) {
+			console.error(`INVALID HEAP index ${fp} : ${a[fp]} => ${a[fp*2+1]}, ${a[fp*2+2]}`);
+			console.log({
+				parent,
+				c1,
+				c2,
+				greater,
+				greaterIdx
+			});
+			debugger;
+		}
+
+		return filtered;
+	}
+
+	getComplete() {
+		return this.heapSize <= 0;
+	}
+
+	verifyMaxHeap() {
+		let a = this.elems.arr;
+		for (let i = 0; i < this.heapSize; i++) {
+			let p = a[i];
+			let childIdx = i * 2 + 1;
+
+			let c1: number, c2: number;
+			c1 = a[childIdx];
+			c2 = a[childIdx + 1];
+			if (c1 > p && c2 > p) {
+				console.error(`INVALID HEAP index ${i} : ${p} => ${c1}, ${c2}`);
+				debugger;
+			}
+		}
+	}
+
+	setOpt(key: string, val: any) {}
+}
+
+Algorithms.push({
+	name: "heapsort",
+	constructor: HeapSort,
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/in-order.js b/public/coding_challenges/sorting-visualiser/algorithms/in-order.js
new file mode 100644
index 0000000..00432d7
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/in-order.js
@@ -0,0 +1,44 @@
+class inOrder extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+    }
+    sortIteration() {
+        if (this.getComplete())
+            return;
+        this.elems.set(this.index, this.index);
+        this.index++;
+    }
+    getComplete() {
+        if (this.elems.length <= this.index)
+            return true;
+        return false;
+    }
+    setOpt(key, val) { }
+}
+class revOrder extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+    }
+    sortIteration() {
+        if (this.getComplete())
+            return;
+        this.elems.set(this.index, this.elems.length - 1 - this.index);
+        this.index++;
+    }
+    getComplete() {
+        if (this.elems.length <= this.index)
+            return true;
+        return false;
+    }
+    setOpt(key, val) { }
+}
+Shuffles.push({
+    name: "In-Order",
+    constructor: inOrder,
+}, {
+    name: "Rev-Order",
+    constructor: revOrder,
+});
+//# sourceMappingURL=in-order.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/in-order.js.map b/public/coding_challenges/sorting-visualiser/algorithms/in-order.js.map
new file mode 100644
index 0000000..211c914
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/in-order.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"in-order.js","sourceRoot":"","sources":["in-order.ts"],"names":[],"mappings":"AAAA,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QACS,UAAK,GAAW,CAAC,CAAC;IAe3B,CAAC;IAZA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YAClC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AACD,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QACS,UAAK,GAAW,CAAC,CAAC;IAe3B,CAAC;IAZA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YAClC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,QAAQ,CAAC,IAAI,CAAC;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,OAAO;CACpB,EAAE;IACF,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,QAAQ;CACrB,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js b/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js
new file mode 100644
index 0000000..1ad047d
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js
@@ -0,0 +1 @@
+//# sourceMappingURL=near-sorted.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js.map b/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js.map
new file mode 100644
index 0000000..dd3180c
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/near-sorted.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"near-sorted.js","sourceRoot":"","sources":["near-sorted.ts"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.js.map b/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.js.map
new file mode 100644
index 0000000..1afaa72
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"quick-sort.js","sourceRoot":"","sources":["quick-sort.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.ts b/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.ts
new file mode 100644
index 0000000..b1d2fc3
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/algorithms/quick-sort.ts
@@ -0,0 +1,118 @@
+enum QuickSortState {
+	START = 0,
+		GETPIVOT = 1,
+		FILTER = 2,
+		SOLVED = 3,
+}
+
+enum QuickSortPivot {
+	LOW,
+	MIDDLE,
+	HIGH,
+	RANDOM,
+	LMH_MEAN,
+}
+
+class QuickSort extends Algorithm {
+	state: QuickSortState = 0;
+	pivotType: QuickSortPivot = 0;
+	pivot: number;
+	pivotIdx: number;
+	anchor: number;
+	insert: number;
+	hi: number;
+	lo: number;
+
+
+	bt: [number, number][] = [];
+
+	sortIteration() {
+		if (this.state == QuickSortState.START) {
+			this.hi = this.elems.length - 1;
+			this.lo = 0;
+			this.state = QuickSortState.GETPIVOT;
+		}
+
+		if (this.state == QuickSortState.GETPIVOT) {
+			switch (this.pivotType) {
+				case QuickSortPivot.LOW:
+					this.pivotIdx = this.lo + 1;
+					this.pivot = this.elems.get(this.pivotIdx);
+					break;
+				case QuickSortPivot.MIDDLE:
+					// this.pivot = this.elems.get(this.lo) + this.elems.get(this.hi);
+					// this.pivot /= 2;
+					this.pivotIdx = Math.floor((this.lo + this.hi) / 2)
+					this.pivot = this.elems.get(this.pivotIdx);
+					break;
+				case QuickSortPivot.HIGH:
+					this.pivotIdx = this.hi;
+					this.pivot = this.elems.get(this.pivotIdx);
+					break;
+				case QuickSortPivot.RANDOM:
+					// this.pivot = this.elems.get(Math.floor(Math.random() * (this.hi - this.lo)));
+					// this.pivot += this.elems.get(Math.floor(Math.random() * (this.hi - this.lo)));
+					// this.pivot /= 2;
+					this.pivotIdx = Math.floor(Math.random() * (this.hi - this.lo)) + this.lo;
+					this.pivot = this.elems.get(this.pivotIdx);
+					break;
+				case QuickSortPivot.LMH_MEAN:
+					this.pivot = this.elems.get(this.lo) + 1 + this.elems.get(this.hi) + this.elems.get(Math.round((this.lo + this.hi) / 2)); //could be any value really
+					this.pivot /= 3;
+					break;
+			}
+			this.anchor = this.lo;
+			this.insert = this.hi;
+			this.state = QuickSortState.FILTER;
+		}
+		if (this.state == QuickSortState.FILTER) {
+
+			if ((this.hi - this.lo) < 1) {
+				if (this.bt.length == 0) {
+					this.state = QuickSortState.SOLVED;
+				} else {
+					[this.lo, this.hi] = this.bt.pop()
+					this.state = QuickSortState.GETPIVOT;
+				}
+				return;
+			}
+			let a = this.elems.get(this.anchor);
+			if (a >= this.pivot) {
+				this.elems.swap(this.anchor, this.insert);
+				this.insert--;
+			} else {
+				this.anchor++;
+			}
+			if (this.anchor > this.insert) {
+				if (this.anchor < this.hi)
+					this.bt.push([this.anchor, this.hi]);
+				this.hi = this.insert;
+				this.state = QuickSortState.GETPIVOT;
+			}
+		}
+	}
+
+	getComplete() {
+		return this.state == QuickSortState.SOLVED;
+	}
+
+	setOpt(key: string, val: any) {
+		if (key == "pivotmode") {
+			this.pivotType = val;
+		}
+	}
+}
+
+Algorithms.push({
+	name: "quicksort",
+	constructor: QuickSort,
+	opts: {
+		"pivotmode": [
+			["first", QuickSortPivot.LOW],
+			["middle", QuickSortPivot.MIDDLE],
+			["last", QuickSortPivot.HIGH],
+			["random", QuickSortPivot.RANDOM],
+			["average", QuickSortPivot.LMH_MEAN]
+		]
+	}
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/color.js b/public/coding_challenges/sorting-visualiser/color.js
new file mode 100644
index 0000000..0a382c5
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/color.js
@@ -0,0 +1,2 @@
+let Colors = [];
+//# sourceMappingURL=color.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/color.js.map b/public/coding_challenges/sorting-visualiser/color.js.map
new file mode 100644
index 0000000..a596e27
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/color.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["color.ts"],"names":[],"mappings":"AAMA,IAAI,MAAM,GAAmB,EAAE,CAAC"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/color.ts b/public/coding_challenges/sorting-visualiser/color.ts
new file mode 100644
index 0000000..91a5711
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/color.ts
@@ -0,0 +1,7 @@
+type ColorFunction = (ctx: p5, val: number, r: boolean, w: boolean) => p5.Color;
+interface _ColorScheme {
+	name: string,
+		fxn: ColorFunction;
+}
+
+let Colors: _ColorScheme[] = [];
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/rainbow.js b/public/coding_challenges/sorting-visualiser/colors/rainbow.js
new file mode 100644
index 0000000..9451e7a
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/rainbow.js
@@ -0,0 +1,54 @@
+Colors.push({
+    name: "rainbow",
+    fxn: (c, v, r, w) => {
+        c.push();
+        c.colorMode(HSB);
+        let col = c.color(v * 360, 100, 100);
+        c.pop();
+        return col;
+    }
+});
+Colors.push({
+    name: "rainbowMod",
+    fxn: (c, v, r, w) => {
+        c.push();
+        c.colorMode(HSB);
+        let col;
+        col = c.color(v * 360, w ? 0 : 100, r ? 0 : 100);
+        if (w)
+            console.log("w");
+        c.pop();
+        return col;
+    }
+});
+Colors.push({
+    name: "rainbowBW",
+    fxn: (c, v, r, w) => {
+        c.push();
+        c.colorMode(HSB);
+        let col;
+        col = c.color(0, 0, v * 100);
+        if (r || w)
+            col = c.color(0, 100, 100);
+        if (w)
+            console.log("w");
+        c.pop();
+        return col;
+    }
+});
+Colors.push({
+    name: "rainbowBWrev",
+    fxn: (c, v, r, w) => {
+        c.push();
+        c.colorMode(HSB);
+        let col;
+        col = c.color(0, 0, (1 - v) * 100);
+        if (r || w)
+            col = c.color(0, 100, 100);
+        if (w)
+            console.log("w");
+        c.pop();
+        return col;
+    }
+});
+//# sourceMappingURL=rainbow.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/rainbow.js.map b/public/coding_challenges/sorting-visualiser/colors/rainbow.js.map
new file mode 100644
index 0000000..b4c5b6d
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/rainbow.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"rainbow.js","sourceRoot":"","sources":["rainbow.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAI,CAAC;IACX,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;QACnB,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACjB,IAAI,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACrC,CAAC,CAAC,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,IAAI,CAAC;IACX,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;QACnB,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACjB,IAAI,GAAa,CAAC;QAClB,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACjD,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC,CAAC,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAC,CAAC;AAGH,MAAM,CAAC,IAAI,CAAC;IACX,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;QACnB,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACjB,IAAI,GAAa,CAAC;QAClB,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACvC,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC,CAAC,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAC,CAAC;AACH,MAAM,CAAC,IAAI,CAAC;IACX,IAAI,EAAE,cAAc;IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;QACnB,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACjB,IAAI,GAAa,CAAC;QAClB,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACvC,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC,CAAC,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAC,CAAC"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/rainbow.ts b/public/coding_challenges/sorting-visualiser/colors/rainbow.ts
new file mode 100644
index 0000000..cfca24b
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/rainbow.ts
@@ -0,0 +1,51 @@
+Colors.push({
+	name: "rainbow",
+	fxn: (c, v, r, w) => {
+		c.push();
+		c.colorMode(HSB);
+		let col = c.color(v * 360, 100, 100);
+		c.pop();
+		return col;
+	}
+});
+
+Colors.push({
+	name: "rainbowMod",
+	fxn: (c, v, r, w) => {
+		c.push();
+		c.colorMode(HSB);
+		let col: p5.Color;
+		col = c.color(v * 360, w ? 0 : 100, r ? 0 : 100);
+		if (w) console.log("w");
+		c.pop();
+		return col;
+	}
+});
+
+
+Colors.push({
+	name: "rainbowBW",
+	fxn: (c, v, r, w) => {
+		c.push();
+		c.colorMode(HSB);
+		let col: p5.Color;
+		col = c.color(0, 0, v * 100);
+		if (r || w) col = c.color(0, 100, 100);
+		if (w) console.log("w");
+		c.pop();
+		return col;
+	}
+});
+Colors.push({
+	name: "rainbowBWrev",
+	fxn: (c, v, r, w) => {
+		c.push();
+		c.colorMode(HSB);
+		let col: p5.Color;
+		col = c.color(0, 0, (1 - v) * 100);
+		if (r || w) col = c.color(0, 100, 100);
+		if (w) console.log("w");
+		c.pop();
+		return col;
+	}
+});
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/simple.js b/public/coding_challenges/sorting-visualiser/colors/simple.js
new file mode 100644
index 0000000..6193132
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/simple.js
@@ -0,0 +1,18 @@
+Colors.push({
+    name: "White+Red",
+    fxn: (c, v, r, w) => {
+        c.push();
+        c.colorMode(HSB);
+        let col;
+        // col = c.color(0, 0, (1 - v) * 100);
+        if (r || w)
+            col = c.color(0, 100, 100);
+        else
+            col = c.color(0, 0, 100);
+        if (w)
+            console.log("w");
+        c.pop();
+        return col;
+    }
+});
+//# sourceMappingURL=simple.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/simple.js.map b/public/coding_challenges/sorting-visualiser/colors/simple.js.map
new file mode 100644
index 0000000..a333de8
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/simple.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"simple.js","sourceRoot":"","sources":["simple.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAI,CAAC;IACX,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;QACnB,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACjB,IAAI,GAAa,CAAC;QAClB,sCAAsC;QACtC,IAAI,CAAC,IAAI,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;;YAClC,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9B,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC,CAAC,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAC,CAAC"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/colors/simple.ts b/public/coding_challenges/sorting-visualiser/colors/simple.ts
new file mode 100644
index 0000000..28908ee
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/colors/simple.ts
@@ -0,0 +1,14 @@
+Colors.push({
+	name: "White+Red",
+	fxn: (c, v, r, w) => {
+		c.push();
+		c.colorMode(HSB);
+		let col: p5.Color;
+		// col = c.color(0, 0, (1 - v) * 100);
+		if (r || w) col = c.color(0, 100, 100);
+		else col = c.color(0, 0, 100);
+		if (w) console.log("w");
+		c.pop();
+		return col;
+	}
+});
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/main.js b/public/coding_challenges/sorting-visualiser/main.js
index 0108c03..7c2e3e5 100644
--- a/public/coding_challenges/sorting-visualiser/main.js
+++ b/public/coding_challenges/sorting-visualiser/main.js
@@ -6,8 +6,11 @@ let sBar;
 let Arr;
 let Algo;
 let AlgoName;
+let ColFxn;
 let Vis;
 let visSelect;
+let colSelect;
+let shufSelect;
 let algoSelect;
 let sOpts;
 let sReset;
@@ -20,6 +23,7 @@ let speed;
 //@ts-ignore
 let count = 0;
 function setup() {
+    ColFxn = Colors[0].fxn;
     params = getURLParams();
     if (params["count"])
         Arr = new WatchedArray(parseInt(params["count"]));
@@ -29,6 +33,42 @@ function setup() {
         speed = parseFloat(params["speed"]);
     else
         speed = 1;
+    createConfigBar();
+    createCanvas(windowWidth - 40, 700);
+}
+function draw() {
+    if (Algo) {
+        while (count > 1) {
+            Algo.sortIteration();
+            count--;
+        }
+        count += speed;
+        if (Algo.getComplete()) {
+            Algo = null;
+            if (AlgoName == "shuffle") {
+                shuffled = true;
+                Arr.resetStats();
+            }
+            else {
+                shuffled = false;
+            }
+            sorting = false;
+            AlgoName = null;
+        }
+    }
+    sAccessors.html(`Accesses ${Arr.reads} | `);
+    sWrites.html(`Writes ${Arr.writes}`);
+    Vis = Visualisers.reduce((v, c) => c.name == visSelect.value() ? c.fxn : v, null);
+    if (Vis)
+        Vis(Arr, this, ColFxn);
+    // console.log(Arr.written.reduce((c, _c) => c + (_c ? 1 : 0), 0));
+    Arr.written = [false];
+    Arr.read = [false];
+}
+function windowResized() {
+    resizeCanvas(windowWidth - 30, height);
+}
+function createConfigBar() {
     //@ts-ignore
     Bar = createDiv();
     Bar.id("bar");
@@ -41,19 +81,44 @@ function setup() {
         //@ts-ignore
         visSelect.option(v.name);
     }
+    colSelect = createSelect(false);
+    colSelect.parent(sBar);
+    for (let c of Colors) {
+        //@ts-ignore
+        colSelect.option(c.name);
+    }
+    colSelect.input(setColScheme);
+    setColScheme();
+    shufSelect = createSelect(false);
+    shufSelect.parent(sBar);
+    for (let s of Shuffles) {
+        //@ts-ignore
+        shufSelect.option(s.name);
+    }
+    //@ts-ignore
+    shufSelect.input(() => createOptSels(shufSelect.value()));
     //@ts-ignore
     let ShuffleButton = createButton("Shuffle");
     ShuffleButton.parent(sBar);
     ShuffleButton.mouseClicked(() => {
-        Algo = new FisherYates(Arr);
-        AlgoName = "shuffle";
-        // shuffled = false;
-        sorting = true;
-    });
-    ShuffleButton.doubleClicked(() => {
-        if (Algo)
-            Algo.sort();
+        if (shufSelect.elt.value) {
+            let A = Shuffles.reduce((a, c) => c.name == shufSelect.elt.value ? c : a, null);
+            let AlgoCon = A.constructor;
+            if (AlgoCon) {
+                Algo = new AlgoCon(Arr);
+                AlgoName = "shuffle";
+                //set opts
+                let opts = document.getElementsByClassName("sort_opt");
+                if (A.opts)
+                    for (let elem of opts) {
+                        let id = elem.id.split(':')[1];
+                        //@ts-ignore
+                        Algo.setOpt(id, A.opts[id].reduce((a, c) => c[0] == elem.value ? c[1] : a, -1));
+                    }
+            }
+        }
     });
+    ShuffleButton.doubleClicked(finishAlgo);
     algoSelect = createSelect(false);
     algoSelect.parent(sBar);
     for (let a of Algorithms) {
@@ -61,7 +126,8 @@ function setup() {
         algoSelect.option(a.name);
     }
     algoSelect.value(params["algo"]);
-    algoSelect.input(createOptSels);
+    //@ts-ignore
+    algoSelect.input(() => createOptSels(algoSelect.value()));
     //@ts-ignore
     let SortButton = createButton("Sort");
     SortButton.parent(sBar);
@@ -76,19 +142,17 @@ function setup() {
                     AlgoName = algoSelect.elt.value;
                     //set opts
                     let opts = document.getElementsByClassName("sort_opt");
-                    for (let elem of opts) {
-                        let id = elem.id.split(':')[1];
-                        //@ts-ignore
-                        Algo.setOpt(id, A.opts[id].reduce((a, c) => c[0] == elem.value ? c[1] : a, -1));
-                    }
+                    if (A.opts)
+                        for (let elem of opts) {
+                            let id = elem.id.split(':')[1];
+                            //@ts-ignore
+                            Algo.setOpt(id, A.opts[id].reduce((a, c) => c[0] == elem.value ? c[1] : a, -1));
+                        }
                 }
             }
         }
     });
-    SortButton.doubleClicked(() => {
-        if (Algo)
-            Algo.sort();
-    });
+    SortButton.doubleClicked(finishAlgo);
     //@ts-ignore
     sAccessors = createSpan();
     sAccessors.parent(Bar);
@@ -117,44 +181,17 @@ function setup() {
     // resetButton.style("position", "absolute");
     // resetButton.style("right", "0");
     // resetButton.style("position", "absolute");
-    createOptSels();
-    createCanvas(windowWidth - 40, 700);
-}
-function draw() {
-    if (Algo) {
-        while (count > 1) {
-            Algo.sortIteration();
-            count--;
-        }
-        count += speed;
-        if (Algo.getComplete()) {
-            Algo = null;
-            if (AlgoName == "shuffle") {
-                shuffled = true;
-                Arr.resetStats();
-            }
-            else {
-                shuffled = false;
-            }
-            sorting = false;
-            AlgoName = null;
-        }
-    }
-    sAccessors.html(`Accesses ${Arr.getAccesses()} | `);
-    sWrites.html(`Writes ${Arr.getWrites()}`);
-    Vis = Visualisers.reduce((v, c) => c.name == visSelect.value() ? c.fxn : v, null);
-    if (Vis)
-        Vis(Arr, this);
-}
-function windowResized() {
-    resizeCanvas(windowWidth - 30, height);
+    //@ts-ignore
+    createOptSels(shufSelect.value());
+    //@ts-ignore
+    createOptSels(algoSelect.value());
 }
-function createOptSels() {
+function createOptSels(algoName) {
     let old_opts = document.getElementsByClassName("sort_opt");
     while (old_opts.length)
         old_opts[0].remove();
     //create new opts
-    let algoOpts = Algorithms.reduce((a, c) => c.name == algoSelect.elt.value ? c : a, null).opts;
+    let algoOpts = Algorithms.concat(Shuffles).reduce((a, c) => c.name == algoName ? c : a, null).opts;
     if (algoOpts) {
         for (let opt_key in algoOpts) {
             let optSel = createSelect(false);
@@ -173,6 +210,13 @@ function createOptSels() {
         }
     }
 }
+function setColScheme() {
+    ColFxn = Colors.reduce((a, c) => c.name == colSelect.value() ? c : a, null).fxn;
+}
+function finishAlgo() {
+    if (Algo)
+        Algo.sort();
+}
 // new p5(null, document.getElementById("sorter"));
 //@ts-ignore
 new p5(null, "sorter");
diff --git a/public/coding_challenges/sorting-visualiser/main.js.map b/public/coding_challenges/sorting-visualiser/main.js.map
new file mode 100644
index 0000000..e4e6a45
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/main.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/main.ts b/public/coding_challenges/sorting-visualiser/main.ts
new file mode 100644
index 0000000..9e51002
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/main.ts
@@ -0,0 +1,267 @@
+/// <reference path="../../../p5.global-mode.d.ts" />
+/// <reference path="./visualiser.ts" />
+/// <reference path="./algo.ts" />
+
+let Bar: p5.Element;
+let sBar: p5.Element;
+let Arr: WatchedArray;
+let Algo: Algorithm;
+let AlgoName: string;
+let ColFxn: ColorFunction;
+let Vis: VisualiserFunction;
+let visSelect: p5.Element;
+let colSelect: p5.Element;
+let shufSelect: p5.Element;
+let algoSelect: p5.Element;
+
+let sOpts: p5.Element;
+let sReset: p5.Element;
+
+let sAccessors: p5.Element;
+let sWrites: p5.Element;
+
+let params: any;
+let shuffled = false;
+let sorting = false;
+
+let speed: number;
+//@ts-ignore
+let count: number = 0;
+
+
+function setup() {
+
+	ColFxn = Colors[0].fxn;
+
+	params = getURLParams();
+	if (params["count"])
+		Arr = new WatchedArray(parseInt(params["count"]));
+	else
+		Arr = new WatchedArray(100);
+
+	if (params["speed"])
+		speed = parseFloat(params["speed"]);
+	else
+		speed = 1;
+
+	createConfigBar();
+
+	createCanvas(windowWidth - 40, 700);
+}
+
+function draw() {
+	if (Algo) {
+		while (count > 1) {
+			Algo.sortIteration();
+			count--;
+		}
+		count += speed;
+		if (Algo.getComplete()) {
+			Algo = null;
+			if (AlgoName == "shuffle") {
+				shuffled = true;
+				Arr.resetStats();
+			} else {
+				shuffled = false;
+			}
+			sorting = false;
+			AlgoName = null;
+		}
+	}
+
+	sAccessors.html(`Accesses ${Arr.reads} | `);
+	sWrites.html(`Writes ${Arr.writes}`);
+
+	Vis = Visualisers.reduce((v: VisualiserFunction, c) => c.name == visSelect.value() ? c.fxn : v, null);
+
+	if (Vis)
+		Vis(Arr, this, ColFxn);
+
+	// console.log(Arr.written.reduce((c, _c) => c + (_c ? 1 : 0), 0));
+
+	Arr.written = [false];
+	Arr.read = [false];
+}
+
+function windowResized() {
+	resizeCanvas(windowWidth - 30, height);
+}
+
+function createConfigBar() {
+
+	//@ts-ignore
+	Bar = createDiv();
+	Bar.id("bar");
+	//@ts-ignore
+	sBar = createSpan();
+	sBar.parent(Bar);
+
+
+	visSelect = createSelect(false);
+	visSelect.parent(sBar);
+	for (let v of Visualisers) {
+		//@ts-ignore
+		visSelect.option(v.name);
+	}
+
+	colSelect = createSelect(false);
+	colSelect.parent(sBar);
+	for (let c of Colors) {
+		//@ts-ignore
+		colSelect.option(c.name);
+	}
+
+	colSelect.input(setColScheme)
+	setColScheme();
+
+	shufSelect = createSelect(false);
+	shufSelect.parent(sBar);
+	for (let s of Shuffles) {
+		//@ts-ignore
+		shufSelect.option(s.name);
+	}
+
+	//@ts-ignore
+	shufSelect.input(() => createOptSels(shufSelect.value()))
+
+
+	//@ts-ignore
+	let ShuffleButton: p5.Element = createButton("Shuffle");
+	ShuffleButton.parent(sBar);
+	ShuffleButton.mouseClicked(() => {
+		if (shufSelect.elt.value) {
+			let A = Shuffles.reduce((a, c) => c.name == shufSelect.elt.value ? c : a, null);
+			let AlgoCon: AlgorithmConstructor = A.constructor;
+			if (AlgoCon) {
+				Algo = new AlgoCon(Arr);
+				AlgoName = "shuffle"
+				//set opts
+				let opts = document.getElementsByClassName("sort_opt");
+				if (A.opts)
+					for (let elem of opts) {
+						let id = elem.id.split(':')[1];
+						//@ts-ignore
+						Algo.setOpt(id, A.opts[id].reduce((a, c) => c[0] == elem.value ? c[1] : a, -1));
+
+					}
+			}
+		}
+	});
+	ShuffleButton.doubleClicked(finishAlgo);
+
+
+	algoSelect = createSelect(false);
+	algoSelect.parent(sBar);
+	for (let a of Algorithms) {
+		//@ts-ignore
+		algoSelect.option(a.name);
+	}
+	algoSelect.value(params["algo"]);
+	//@ts-ignore
+	algoSelect.input(() => createOptSels(algoSelect.value()))
+
+	//@ts-ignore
+	let SortButton: p5.Element = createButton("Sort");
+	SortButton.parent(sBar);
+	SortButton.mouseClicked(() => {
+		if (shuffled && !sorting) {
+			sorting = true;
+			if (algoSelect.elt.value) {
+				let A = Algorithms.reduce((a, c) => c.name == algoSelect.elt.value ? c : a, null);
+				let AlgoCon: AlgorithmConstructor = A.constructor;
+				if (AlgoCon) {
+					Algo = new AlgoCon(Arr);
+					AlgoName = algoSelect.elt.value;
+					//set opts
+					let opts = document.getElementsByClassName("sort_opt");
+					if (A.opts)
+						for (let elem of opts) {
+							let id = elem.id.split(':')[1];
+							//@ts-ignore
+							Algo.setOpt(id, A.opts[id].reduce((a, c) => c[0] == elem.value ? c[1] : a, -1));
+
+						}
+				}
+			}
+		}
+
+	});
+
+	SortButton.doubleClicked(finishAlgo);
+
+
+	//@ts-ignore
+	sAccessors = createSpan();
+	sAccessors.parent(Bar);
+	//@ts-ignore
+	sWrites = createSpan();
+	sWrites.parent(Bar);
+
+	//@ts-ignore
+	sOpts = createSpan();
+	sOpts.parent(Bar);
+	sOpts.style("margin-left", "10px");
+
+	//@ts-ignore
+	sReset = createSpan();
+	sReset.parent(Bar);
+	sReset.style("position", "relative");
+	sReset.style("float", "right");
+	//@ts-ignore
+	let resetButton: p5.Element = createButton("Reset.");
+	resetButton.parent(sReset);
+	resetButton.mouseClicked(() => {
+		Algo = null;
+
+		if (params["count"])
+			Arr = new WatchedArray(parseInt(params["count"]));
+		else
+			Arr = new WatchedArray(100);
+	});
+	// resetButton.style("position", "absolute");
+	// resetButton.style("right", "0");
+	// resetButton.style("position", "absolute");
+
+	//@ts-ignore
+	createOptSels(shufSelect.value());
+	//@ts-ignore
+	createOptSels(algoSelect.value());
+
+}
+
+function createOptSels(algoName: string) {
+	let old_opts = document.getElementsByClassName("sort_opt");
+	while (old_opts.length) old_opts[0].remove();
+	//create new opts
+	let algoOpts = Algorithms.concat(Shuffles).reduce((a, c) => c.name == algoName ? c : a, null).opts;
+	if (algoOpts) {
+		for (let opt_key in algoOpts) {
+			let optSel: p5.Element = createSelect(false);
+			optSel.parent(sOpts);
+			optSel.addClass("sort_opt");
+			optSel.id(`sort_opt:${opt_key}`);
+			for (let opt of algoOpts[opt_key]) {
+				//@ts-ignore
+				optSel.option(opt[0]);
+			}
+			optSel.input(() => {
+				if (Algo) {
+					Algo.setOpt(opt_key, algoOpts[opt_key].reduce((a, c) => c[0] == optSel.value() ? c[1] : a, -1));
+				}
+			})
+		}
+	}
+
+}
+
+function setColScheme() {
+	ColFxn = Colors.reduce((a, c) => c.name == colSelect.value() ? c : a, null).fxn;
+}
+
+function finishAlgo() {
+	if (Algo) Algo.sort();
+}
+
+// new p5(null, document.getElementById("sorter"));
+//@ts-ignore
+new p5(null, "sorter");
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js
new file mode 100644
index 0000000..21cba29
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js
@@ -0,0 +1,24 @@
+class FisherYates extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.shuffle_pos = 0;
+    }
+    sortIteration() {
+        if (this.getComplete())
+            return;
+        let Other = Math.floor(Math.random() * this.elems.length);
+        this.elems.swap(this.shuffle_pos, Other);
+        this.shuffle_pos++;
+    }
+    getComplete() {
+        if (this.elems.length <= this.shuffle_pos)
+            return true;
+        return false;
+    }
+    setOpt(key, val) { }
+}
+Shuffles.push({
+    name: "Fisher Yeates Shuffle",
+    constructor: FisherYates,
+});
+//# sourceMappingURL=fisher-yates.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js.map b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js.map
new file mode 100644
index 0000000..91fae41
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"fisher-yates.js","sourceRoot":"","sources":["fisher-yates.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QACC,gBAAW,GAAW,CAAC,CAAC;IAgBzB,CAAC;IAbA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;YACxC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,QAAQ,CAAC,IAAI,CAAC;IACb,IAAI,EAAE,uBAAuB;IAC7B,WAAW,EAAE,WAAW;CACxB,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.ts b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.ts
new file mode 100644
index 0000000..6ecccaf
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/fisher-yates.ts
@@ -0,0 +1,23 @@
+class FisherYates extends Algorithm {
+	shuffle_pos: number = 0;
+
+
+	sortIteration() {
+		if (this.getComplete()) return;
+		let Other = Math.floor(Math.random() * this.elems.length);
+		this.elems.swap(this.shuffle_pos, Other);
+		this.shuffle_pos++;
+	}
+
+	getComplete() {
+		if (this.elems.length <= this.shuffle_pos)
+			return true;
+		return false
+	}
+	setOpt(key: string, val: any) {}
+}
+
+Shuffles.push({
+	name: "Fisher Yeates Shuffle",
+	constructor: FisherYates,
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/in-order.js b/public/coding_challenges/sorting-visualiser/shuffles/in-order.js
new file mode 100644
index 0000000..00432d7
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/in-order.js
@@ -0,0 +1,44 @@
+class inOrder extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+    }
+    sortIteration() {
+        if (this.getComplete())
+            return;
+        this.elems.set(this.index, this.index);
+        this.index++;
+    }
+    getComplete() {
+        if (this.elems.length <= this.index)
+            return true;
+        return false;
+    }
+    setOpt(key, val) { }
+}
+class revOrder extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+    }
+    sortIteration() {
+        if (this.getComplete())
+            return;
+        this.elems.set(this.index, this.elems.length - 1 - this.index);
+        this.index++;
+    }
+    getComplete() {
+        if (this.elems.length <= this.index)
+            return true;
+        return false;
+    }
+    setOpt(key, val) { }
+}
+Shuffles.push({
+    name: "In-Order",
+    constructor: inOrder,
+}, {
+    name: "Rev-Order",
+    constructor: revOrder,
+});
+//# sourceMappingURL=in-order.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/in-order.js.map b/public/coding_challenges/sorting-visualiser/shuffles/in-order.js.map
new file mode 100644
index 0000000..211c914
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/in-order.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"in-order.js","sourceRoot":"","sources":["in-order.ts"],"names":[],"mappings":"AAAA,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QACS,UAAK,GAAW,CAAC,CAAC;IAe3B,CAAC;IAZA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YAClC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AACD,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QACS,UAAK,GAAW,CAAC,CAAC;IAe3B,CAAC;IAZA,aAAa;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,WAAW;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YAClC,OAAO,IAAI,CAAC;QACb,OAAO,KAAK,CAAA;IACb,CAAC;IACD,MAAM,CAAC,GAAW,EAAE,GAAQ,IAAG,CAAC;CAChC;AAED,QAAQ,CAAC,IAAI,CAAC;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,OAAO;CACpB,EAAE;IACF,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,QAAQ;CACrB,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/in-order.ts b/public/coding_challenges/sorting-visualiser/shuffles/in-order.ts
new file mode 100644
index 0000000..d50a2eb
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/in-order.ts
@@ -0,0 +1,42 @@
+class inOrder extends Algorithm {
+	private index: number = 0;
+
+
+	sortIteration() {
+		if (this.getComplete()) return;
+		this.elems.set(this.index, this.index);
+		this.index++;
+	}
+
+	getComplete() {
+		if (this.elems.length <= this.index)
+			return true;
+		return false
+	}
+	setOpt(key: string, val: any) {}
+}
+class revOrder extends Algorithm {
+	private index: number = 0;
+
+
+	sortIteration() {
+		if (this.getComplete()) return;
+		this.elems.set(this.index, this.elems.length - 1 - this.index);
+		this.index++;
+	}
+
+	getComplete() {
+		if (this.elems.length <= this.index)
+			return true;
+		return false
+	}
+	setOpt(key: string, val: any) {}
+}
+
+Shuffles.push({
+	name: "In-Order",
+	constructor: inOrder,
+}, {
+	name: "Rev-Order",
+	constructor: revOrder,
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js
new file mode 100644
index 0000000..993f3d0
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js
@@ -0,0 +1,53 @@
+class nearSorted extends Algorithm {
+    constructor() {
+        super(...arguments);
+        this.maxDist = 0;
+        this.remDist = -1;
+        this.idx = 0;
+    }
+    sortIteration() {
+        if (this.remDist == -1)
+            this.remDist = this.maxDist;
+        if (Math.round(Math.random())) {
+            this.elems.swap(this.idx, this.idx + 1);
+        }
+        this.idx += 2;
+        if (this.idx >= this.elems.length - 1) {
+            this.idx = 0;
+            this.remDist--;
+        }
+    }
+    setOpt(key, val) {
+        if (key == "distance") {
+            this.maxDist = val;
+        }
+    }
+    getComplete() {
+        return this.remDist <= 0;
+    }
+}
+Shuffles.push({
+    name: "near sorted",
+    constructor: nearSorted,
+    opts: {
+        "distance": [
+            ["1", 1],
+            ["2", 2],
+            ["3", 3],
+            ["4", 4],
+            ["5", 5],
+            ["6", 6],
+            ["7", 7],
+            ["8", 8],
+            ["10", 10],
+            ["12", 12],
+            ["14", 14],
+            ["17", 17],
+            ["20", 20],
+            ["24", 24],
+            ["28", 28],
+            ["33", 33],
+        ]
+    }
+});
+//# sourceMappingURL=near-sorted.js.map
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js.map b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js.map
new file mode 100644
index 0000000..a73c47d
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"near-sorted.js","sourceRoot":"","sources":["near-sorted.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QACC,YAAO,GAAW,CAAC,CAAC;QACpB,YAAO,GAAW,CAAC,CAAC,CAAC;QACrB,QAAG,GAAW,CAAC,CAAC;IAwBjB,CAAC;IAtBA,aAAa;QACZ,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QACpD,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;SACxC;QACD,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QACd,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACtC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;YACb,IAAI,CAAC,OAAO,EAAE,CAAC;SACf;IACF,CAAC;IAED,MAAM,CAAC,GAAW,EAAE,GAAG;QACtB,IAAI,GAAG,IAAI,UAAU,EAAE;YACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;SACnB;IACF,CAAC;IAED,WAAW;QACV,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;IAC1B,CAAC;CAED;AAGD,QAAQ,CAAC,IAAI,CAAC;IACb,IAAI,EAAE,aAAa;IACnB,WAAW,EAAE,UAAU;IACvB,IAAI,EAAE;QACL,UAAU,EAAE;YACX,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;YACV,CAAC,IAAI,EAAE,EAAE,CAAC;SAEV;KACD;CACD,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.ts b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.ts
new file mode 100644
index 0000000..e84e9ba
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/shuffles/near-sorted.ts
@@ -0,0 +1,55 @@
+class nearSorted extends Algorithm {
+	maxDist: number = 0;
+	remDist: number = -1;
+	idx: number = 0;
+
+	sortIteration() {
+		if (this.remDist == -1) this.remDist = this.maxDist;
+		if (Math.round(Math.random())) {
+			this.elems.swap(this.idx, this.idx + 1);
+		}
+		this.idx += 2;
+		if (this.idx >= this.elems.length - 1) {
+			this.idx = 0;
+			this.remDist--;
+		}
+	}
+
+	setOpt(key: string, val) {
+		if (key == "distance") {
+			this.maxDist = val;
+		}
+	}
+
+	getComplete() {
+		return this.remDist <= 0;
+	}
+
+}
+
+
+Shuffles.push({
+	name: "near sorted",
+	constructor: nearSorted,
+	opts: {
+		"distance": [
+			["1", 1],
+			["2", 2],
+			["3", 3],
+			["4", 4],
+			["5", 5],
+			["6", 6],
+			["7", 7],
+			["8", 8],
+			["10", 10],
+			["12", 12],
+			["14", 14],
+			["17", 17],
+			["20", 20],
+			["24", 24],
+			["28", 28],
+			["33", 33],
+
+		]
+	}
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualiser.js b/public/coding_challenges/sorting-visualiser/visualiser.js
index 823a351..ea13494 100644
--- a/public/coding_challenges/sorting-visualiser/visualiser.js
+++ b/public/coding_challenges/sorting-visualiser/visualiser.js
@@ -1,49 +1,76 @@
 /// <reference path="../../../p5.global-mode.d.ts" />
 class WatchedArray {
     constructor(size) {
-        this.accesses = 0;
-        this.writes = 0;
-        this.arr = [];
+        this._reads = 0;
+        this._writes = 0;
+        this._arr = [];
+        this._read = [];
+        this._written = [];
         for (let i = 0; i < size; i++) {
-            this.arr[i] = i;
+            this._arr[i] = i;
+            this._read[i] = false;
+            this._written[i] = false;
         }
-        this.length = size;
+        this._length = size;
+        // this._read = new Array < boolean > (size).map(b => false);
+        // this._written = new Array < boolean > (size).map(b => false);
     }
     resetStats() {
-        this.accesses = 0;
-        this.writes = 0;
-    }
-    getAccesses() {
-        return this.accesses;
-    }
-    getWrites() {
-        return this.writes;
+        this._reads = 0;
+        this._writes = 0;
     }
     get(idx) {
-        if (idx >= this.length)
+        if (idx >= this._length)
             console.error(`Invalid index : ${idx}`);
-        this.accesses++;
-        return this.arr[idx];
+        this._reads++;
+        this._read[idx] = true;
+        return this._arr[idx];
     }
     set(idx, val) {
-        if (idx >= this.length)
+        if (idx >= this._length)
             console.error(`Invalid index : ${idx}`);
-        this.writes++;
-        this.arr[idx] = val;
-    }
-    getArr() {
-        return this.arr;
+        this._writes++;
+        this._written[idx] = true;
+        this._arr[idx] = val;
     }
     swap(idx1, idx2) {
-        if (idx1 >= this.length)
+        if (idx1 >= this._length)
             console.error(`Invalid index : ${idx1}`);
-        if (idx2 >= this.length)
+        if (idx2 >= this._length)
             console.error(`Invalid index : ${idx2}`);
         // this.accesses += 2;
-        this.writes += 2;
-        let tmp = this.arr[idx1];
-        this.arr[idx1] = this.arr[idx2];
-        this.arr[idx2] = tmp;
+        this._writes += 2;
+        let tmp = this._arr[idx1];
+        this._arr[idx1] = this._arr[idx2];
+        this._arr[idx2] = tmp;
+        this._written[idx1] = true;
+        this._written[idx2] = true;
+        this._read[idx1] = true;
+        this._read[idx2] = true;
+    }
+    get written() {
+        return this._written;
+    }
+    set written(val) {
+        this._written = this._written.map(b => false);
+    }
+    get read() {
+        return this._read;
+    }
+    set read(val) {
+        this._read = this.read.map(b => false);
+    }
+    get arr() {
+        return this._arr;
+    }
+    get length() {
+        return this._length;
+    }
+    get writes() {
+        return this._writes;
+    }
+    get reads() {
+        return this._reads;
     }
 }
 let Visualisers = [];
diff --git a/public/coding_challenges/sorting-visualiser/visualiser.js.map b/public/coding_challenges/sorting-visualiser/visualiser.js.map
new file mode 100644
index 0000000..7ce32e3
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualiser.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"visualiser.js","sourceRoot":"","sources":["visualiser.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualiser.ts b/public/coding_challenges/sorting-visualiser/visualiser.ts
new file mode 100644
index 0000000..ddc2697
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualiser.ts
@@ -0,0 +1,101 @@
+/// <reference path="../../../p5.global-mode.d.ts" />
+
+class WatchedArray {
+	private _reads: number = 0;
+	private _writes: number = 0;
+	private _arr: number[];
+	private _written: boolean[];
+	private _read: boolean[];
+	private _length: number;
+	constructor(size: number) {
+		this._arr = [];
+		this._read = [];
+		this._written = [];
+		for (let i = 0; i < size; i++) {
+			this._arr[i] = i;
+			this._read[i] = false;
+			this._written[i] = false;
+		}
+		this._length = size;
+		// this._read = new Array < boolean > (size).map(b => false);
+		// this._written = new Array < boolean > (size).map(b => false);
+	}
+
+	resetStats() {
+		this._reads = 0;
+		this._writes = 0;
+	}
+
+	get(idx: number) {
+		if (idx >= this._length)
+			console.error(`Invalid index : ${idx}`);
+		this._reads++;
+		this._read[idx] = true;
+		return this._arr[idx];
+	}
+
+	set(idx: number, val: number) {
+		if (idx >= this._length)
+			console.error(`Invalid index : ${idx}`);
+		this._writes++;
+		this._written[idx] = true;
+		this._arr[idx] = val;
+	}
+
+	swap(idx1: number, idx2: number) {
+		if (idx1 >= this._length)
+			console.error(`Invalid index : ${idx1}`);
+		if (idx2 >= this._length)
+			console.error(`Invalid index : ${idx2}`);
+		// this.accesses += 2;
+		this._writes += 2;
+		let tmp = this._arr[idx1];
+		this._arr[idx1] = this._arr[idx2];
+		this._arr[idx2] = tmp;
+
+		this._written[idx1] = true;
+		this._written[idx2] = true;
+		this._read[idx1] = true;
+		this._read[idx2] = true;
+
+	}
+
+
+	get written() {
+		return this._written;
+	}
+	set written(val) {
+		this._written = this._written.map(b => false);
+	}
+
+	get read() {
+		return this._read;
+	}
+	set read(val) {
+		this._read = this.read.map(b => false);
+	}
+
+	get arr() {
+		return this._arr;
+	}
+
+	get length() {
+		return this._length;
+	}
+
+	get writes() {
+		return this._writes;
+	}
+	get reads() {
+		return this._reads;
+	}
+
+}
+
+type VisualiserFunction = (arr: WatchedArray, context: p5, colFxn: ColorFunction) => void;
+interface Visualiser {
+	name: string,
+		fxn: VisualiserFunction,
+}
+
+let Visualisers: Visualiser[] = [];
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/pie.js b/public/coding_challenges/sorting-visualiser/visualisers/pie.js
index 5be3264..110bd24 100644
--- a/public/coding_challenges/sorting-visualiser/visualisers/pie.js
+++ b/public/coding_challenges/sorting-visualiser/visualisers/pie.js
@@ -1,17 +1,16 @@
 Visualisers.push({
     name: "pie",
-    fxn: (arr, c) => {
+    fxn: (arr, c, cfn) => {
         c.background(180, 180, 180);
         c.push();
         let scale = Math.min(c.width, c.height) - 5;
         c.translate(c.width / 2, c.height / 2);
-        let a = arr.getArr();
+        let a = arr.arr;
         c.noStroke();
-        c.colorMode(HSB);
         c.angleMode("degrees");
         for (let i = 0; i < a.length; i++) {
             let pScale = a[i] / a.length;
-            let col = c.color(pScale * 360, 100, 100);
+            let col = cfn(c, pScale, arr.read[i], arr.written[i]);
             c.fill(col);
             c.arc(0, 0, scale, scale, 0, 360 / a.length);
             c.rotate(360 / a.length);
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/pie.js.map b/public/coding_challenges/sorting-visualiser/visualisers/pie.js.map
new file mode 100644
index 0000000..98c13b5
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/pie.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pie.js","sourceRoot":"","sources":["pie.ts"],"names":[],"mappings":"AAAA,WAAW,CAAC,IAAI,CAAC;IAChB,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,CAAC,GAAiB,EAAE,CAAK,EAAE,GAAkB,EAAE,EAAE;QACrD,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC,IAAI,EAAE,CAAA;QACR,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5C,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACvC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC;QAChB,CAAC,CAAC,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACZ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;YAC5C,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;SACzB;QAED,CAAC,CAAC,GAAG,EAAE,CAAC;IAET,CAAC;CACD,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/pie.ts b/public/coding_challenges/sorting-visualiser/visualisers/pie.ts
new file mode 100644
index 0000000..5067d20
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/pie.ts
@@ -0,0 +1,22 @@
+Visualisers.push({
+	name: "pie",
+	fxn: (arr: WatchedArray, c: p5, cfn: ColorFunction) => {
+		c.background(180, 180, 180);
+		c.push()
+		let scale = Math.min(c.width, c.height) - 5;
+		c.translate(c.width / 2, c.height / 2);
+		let a = arr.arr;
+		c.noStroke();
+		c.angleMode("degrees")
+		for (let i = 0; i < a.length; i++) {
+			let pScale = a[i] / a.length;
+			let col = cfn(c, pScale, arr.read[i], arr.written[i]);
+			c.fill(col);
+			c.arc(0, 0, scale, scale, 0, 360 / a.length)
+			c.rotate(360 / a.length);
+		}
+
+		c.pop();
+
+	}
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/scatter.js b/public/coding_challenges/sorting-visualiser/visualisers/scatter.js
index 6014fd0..20a9cc6 100644
--- a/public/coding_challenges/sorting-visualiser/visualisers/scatter.js
+++ b/public/coding_challenges/sorting-visualiser/visualisers/scatter.js
@@ -1,17 +1,15 @@
 Visualisers.push({
     name: "scatter",
-    fxn: (arr, c) => {
+    fxn: (arr, c, cfn) => {
         c.background(180, 180, 180);
         c.push();
-        c.noStroke();
-        c.colorMode(HSB);
-        let a = arr.getArr();
-        translate(0, height);
+        let a = arr.arr;
+        c.translate(0, height);
+        c.strokeWeight(Math.max(1, Math.max(c.width, c.height) / a.length) * 3);
         for (let i = 0; i < a.length; i++) {
             let pScale = a[i] / a.length;
-            let col = c.color(pScale * 360, 100, 100);
+            let col = cfn(c, pScale, arr.read[i], arr.written[i]);
             c.stroke(col);
-            c.strokeWeight(10);
             c.point(c.width / a.length, -c.height * pScale);
             c.translate(c.width / a.length, 0);
         }
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/scatter.js.map b/public/coding_challenges/sorting-visualiser/visualisers/scatter.js.map
new file mode 100644
index 0000000..b701588
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/scatter.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"scatter.js","sourceRoot":"","sources":["scatter.ts"],"names":[],"mappings":"AAAA,WAAW,CAAC,IAAI,CAAC;IAChB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,CAAC,GAAiB,EAAE,CAAK,EAAE,GAAkB,EAAE,EAAE;QACrD,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC;QAChB,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACvB,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;YAChD,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;SACnC;QAED,CAAC,CAAC,GAAG,EAAE,CAAC;IACT,CAAC;CACD,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/scatter.ts b/public/coding_challenges/sorting-visualiser/visualisers/scatter.ts
new file mode 100644
index 0000000..bd9e70e
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/scatter.ts
@@ -0,0 +1,19 @@
+Visualisers.push({
+	name: "scatter",
+	fxn: (arr: WatchedArray, c: p5, cfn: ColorFunction) => {
+		c.background(180, 180, 180);
+		c.push();
+		let a = arr.arr;
+		c.translate(0, height);
+		c.strokeWeight(Math.max(1, Math.max(c.width, c.height) / a.length) * 3);
+		for (let i = 0; i < a.length; i++) {
+			let pScale = a[i] / a.length;
+			let col = cfn(c, pScale, arr.read[i], arr.written[i]);
+			c.stroke(col);
+			c.point(c.width / a.length, -c.height * pScale);
+			c.translate(c.width / a.length, 0);
+		}
+
+		c.pop();
+	}
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/spiral.js b/public/coding_challenges/sorting-visualiser/visualisers/spiral.js
index d117925..ba72d15 100644
--- a/public/coding_challenges/sorting-visualiser/visualisers/spiral.js
+++ b/public/coding_challenges/sorting-visualiser/visualisers/spiral.js
@@ -1,18 +1,17 @@
 Visualisers.push({
     name: "spiral",
-    fxn: (arr, c) => {
+    fxn: (arr, c, cfn) => {
         c.background(180, 180, 180);
         c.push();
         let r = 10;
         let scale = Math.min(c.width, c.height) / 2 - r;
         c.translate(c.width / 2, c.height / 2);
-        let a = arr.getArr();
+        let a = arr.arr;
         c.noStroke();
-        c.colorMode(HSB);
         c.angleMode("degrees");
         for (let i = 0; i < a.length; i++) {
             let pScale = a[i] / a.length;
-            let col = c.color(pScale * 360, 100, 100);
+            let col = cfn(c, pScale, arr.read[i], arr.written[i]);
             c.fill(col);
             c.ellipse(pScale * scale, 0, r * 2);
             c.rotate(360 / a.length);
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/spiral.js.map b/public/coding_challenges/sorting-visualiser/visualisers/spiral.js.map
new file mode 100644
index 0000000..a7218b7
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/spiral.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"spiral.js","sourceRoot":"","sources":["spiral.ts"],"names":[],"mappings":"AAAA,WAAW,CAAC,IAAI,CAAC;IAChB,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,CAAC,GAAiB,EAAE,CAAK,EAAE,GAAkB,EAAE,EAAE;QACrD,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC,IAAI,EAAE,CAAA;QACR,IAAI,CAAC,GAAG,EAAE,CAAC;QACX,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChD,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACvC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC;QAChB,CAAC,CAAC,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACZ,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;YACpC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;SACzB;QAED,qBAAqB;QACrB,uBAAuB;QAEvB,CAAC,CAAC,GAAG,EAAE,CAAC;IAET,CAAC;CACD,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/spiral.ts b/public/coding_challenges/sorting-visualiser/visualisers/spiral.ts
new file mode 100644
index 0000000..3fef01c
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/spiral.ts
@@ -0,0 +1,26 @@
+Visualisers.push({
+	name: "spiral",
+	fxn: (arr: WatchedArray, c: p5, cfn: ColorFunction) => {
+		c.background(180, 180, 180);
+		c.push()
+		let r = 10;
+		let scale = Math.min(c.width, c.height) / 2 - r;
+		c.translate(c.width / 2, c.height / 2);
+		let a = arr.arr;
+		c.noStroke();
+		c.angleMode("degrees")
+		for (let i = 0; i < a.length; i++) {
+			let pScale = a[i] / a.length;
+			let col = cfn(c, pScale, arr.read[i], arr.written[i]);
+			c.fill(col);
+			c.ellipse(pScale * scale, 0, r * 2);
+			c.rotate(360 / a.length);
+		}
+
+		// c.fill(255, 0, 0);
+		// c.ellipse(0, 0, 10);
+
+		c.pop();
+
+	}
+})
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/standard.js b/public/coding_challenges/sorting-visualiser/visualisers/standard.js
index c1da623..b971042 100644
--- a/public/coding_challenges/sorting-visualiser/visualisers/standard.js
+++ b/public/coding_challenges/sorting-visualiser/visualisers/standard.js
@@ -1,14 +1,13 @@
 Visualisers.push({
     name: "standard",
-    fxn: (arr, c) => {
+    fxn: (arr, c, cfn) => {
         c.background(180, 180, 180);
         c.push();
         c.noStroke();
-        c.colorMode(HSB);
-        let a = arr.getArr();
+        let a = arr.arr;
         for (let i = 0; i < a.length; i++) {
             let pScale = a[i] / a.length;
-            let col = c.color(pScale * 360, 100, 100);
+            let col = cfn(c, pScale, arr.read[i], arr.written[i]);
             c.fill(col);
             c.rect(0, height, c.width / a.length, -c.height * pScale);
             c.translate(c.width / a.length, 0);
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/standard.js.map b/public/coding_challenges/sorting-visualiser/visualisers/standard.js.map
new file mode 100644
index 0000000..b41e016
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/standard.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"standard.js","sourceRoot":"","sources":["standard.ts"],"names":[],"mappings":"AAAA,WAAW,CAAC,IAAI,CAAC;IAChB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,CAAC,GAAiB,EAAE,CAAK,EAAE,GAAkB,EAAE,EAAE;QACrD,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,QAAQ,EAAE,CAAC;QACb,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACZ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;YAC1D,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;SACnC;QAED,CAAC,CAAC,GAAG,EAAE,CAAC;IACT,CAAC;CACD,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/visualisers/standard.ts b/public/coding_challenges/sorting-visualiser/visualisers/standard.ts
new file mode 100644
index 0000000..ec160f0
--- /dev/null
+++ b/public/coding_challenges/sorting-visualiser/visualisers/standard.ts
@@ -0,0 +1,18 @@
+Visualisers.push({
+	name: "standard",
+	fxn: (arr: WatchedArray, c: p5, cfn: ColorFunction) => {
+		c.background(180, 180, 180);
+		c.push();
+		c.noStroke();
+		let a = arr.arr;
+		for (let i = 0; i < a.length; i++) {
+			let pScale = a[i] / a.length;
+			let col = cfn(c, pScale, arr.read[i], arr.written[i]);
+			c.fill(col);
+			c.rect(0, height, c.width / a.length, -c.height * pScale);
+			c.translate(c.width / a.length, 0);
+		}
+
+		c.pop();
+	}
+})
\ No newline at end of file
diff --git a/public/games/backgammon/game.js.map b/public/games/backgammon/game.js.map
new file mode 100644
index 0000000..92f0792
--- /dev/null
+++ b/public/games/backgammon/game.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"game.js","sourceRoot":"","sources":["game.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,gDAAgD;AAChD,mCAAmC;AAoBnC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE;IAC5B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;AACzB,CAAC,CAAC,CAAA;AAEF,MAAM,UAAW,SAAQ,EAAE;IAE1B,YAAY,MAAuB;QAClC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACtC,CAAC;CAED"}
\ No newline at end of file
diff --git a/public/games/game.js.map b/public/games/game.js.map
new file mode 100644
index 0000000..b610cad
--- /dev/null
+++ b/public/games/game.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"game.js","sourceRoot":"","sources":["game.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAQ,QAAQ,CAAC,MAAM;KAClC,KAAK,CAAC,GAAG,CAAC;KACV,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;IAClB,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;IAC9D,IAAI;QACH,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;YACzB,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SACtB,CAAC,CAAA;KACF;IAAC,OAAO,CAAC,EAAE;QACX,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;YACzB,CAAC,GAAG,CAAC,EAAE,GAAG;SACV,CAAC,CAAA;KACF;AACF,CAAC,EAAE,EAAE,CAAC,CAAC;AACR,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAyBlE,IAAI,QAAQ,GAAiB;IAC5B,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC;IAC7B,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC;CACtC,CAAA;AAED,YAAY;AACZ,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;AACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;IAC1B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC/B,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC,CAAA;IACF,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE;QAC7B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,UAAU,CAAC,GAAG,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAA;QAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;IACV,CAAC,CAAC,CAAA;AACH,CAAC,CAAC,CAAA"}
\ No newline at end of file
diff --git a/public/games/game.ts b/public/games/game.ts
new file mode 100644
index 0000000..29ee070
--- /dev/null
+++ b/public/games/game.ts
@@ -0,0 +1,62 @@
+const cookies: any = document.cookie
+	.split(';')
+	.reduce((res, c) => {
+		const [key, val] = c.trim().split('=').map(decodeURIComponent)
+		try {
+			return Object.assign(res, {
+				[key]: JSON.parse(val)
+			})
+		} catch (e) {
+			return Object.assign(res, {
+				[key]: val
+			})
+		}
+	}, {});
+const params = new window.URLSearchParams(window.location.search);
+
+interface GameDataPacket {
+	gameId: number,
+		gameType: number,
+		gameToken: string,
+		packetType: string,
+		userName ? : string,
+		userToken ? : string,
+		data ? : any
+}
+
+interface Game {
+	gameId: number,
+		gameType: number,
+		gameName: string,
+		gameToken: string,
+}
+
+interface GameJoinData {
+	gameId: number,
+		userName: string,
+		gamePassword ? : string,
+}
+
+let joindata: GameJoinData = {
+	gameId: parseInt(params.get("id")),
+	userName: cookies["username"],
+	gamePassword: cookies["game_password"],
+}
+
+//@ts-ignore
+let _socket = io();
+_socket.on("connect", () => {
+	_socket.emit("join", joindata);
+	// _socket.removeAllListeners();
+	_socket.on("welcome", (d) => {
+		console.log(d);
+	})
+	// _socket.on("reconnect", reconnectData);
+	_socket.on("kick", (reason) => {
+		console.log("kick");
+		console.log(reason);
+		setTimeout(() => {
+			window.location.href = "../"
+		}, 1000);
+	})
+})
\ No newline at end of file
-- 
GitLab