Prettier refactoring

.eslintrc

@@ -3,7 +3,11 @@
 	"parser": "@babel/eslint-parser",
 	"parserOptions": {
 		"ecmaVersion": 6,
-		"sourceType": "module"
+		"sourceType": "module",
+		"requireConfigFile": false,
+		"babelOptions": {
+			"presets": ["@babel/preset-react"]
+		 }
 	},
 	"env": {
 		"browser": true,

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 
 # my notes for how to contribute from the bluejeans meeting
 contrib.txt
+.eslintrc

src/App.js

@@ -2,42 +2,52 @@ import './css/App.css';
 import React, { useEffect, useState } from 'react';
 import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 import AlgoScreen from './screens/AlgoScreen';
-import Cookies from 'js-cookie'
+import Cookies from 'js-cookie';
 import HomeScreen from './screens/HomeScreen';
 import ReactGA from 'react-ga4';
 
 const App = () => {
 	ReactGA.initialize('G-0ERQ9E89XM');
-	ReactGA.send({ hitType: "pageview", page: "home" });	
+	ReactGA.send({ hitType: 'pageview', page: 'home' });
 
 	const [loading, setLoading] = useState(true);
 	const [theme, setTheme] = useState('light');
 
 	useEffect(() => {
 		const storedTheme = Cookies.get('theme');
 		if (storedTheme) {
-		  setTheme(storedTheme);
-		  document.body.setAttribute('data-theme', storedTheme);
+			setTheme(storedTheme);
+			document.body.setAttribute('data-theme', storedTheme);
 		}
 		setLoading(false);
 	}, []);
 
 	const toggleTheme = () => {
 		const newTheme = theme === 'light' ? 'dark' : 'light';
-    	setTheme(newTheme);
-    	Cookies.set('theme', newTheme);
-    	document.body.setAttribute('data-theme', newTheme);
-	}
+		setTheme(newTheme);
+		Cookies.set('theme', newTheme);
+		document.body.setAttribute('data-theme', newTheme);
+	};
 
 	if (loading) {
-		return <div>.</div>
+		return <div>.</div>;
 	}
 
 	return (
 		<Router basename={process.env.PUBLIC_URL + '/'}>
 			<Switch>
-				<Route exact path={['/', '/about']} render={(props) => <HomeScreen {...props} theme={theme} toggleTheme={toggleTheme} />} />
-				<Route render={(props) => <AlgoScreen {...props} theme={theme} toggleTheme={toggleTheme} />} />
+				<Route
+					exact
+					path={['/', '/about']}
+					render={props => (
+						<HomeScreen {...props} theme={theme} toggleTheme={toggleTheme} />
+					)}
+				/>
+				<Route
+					render={props => (
+						<AlgoScreen {...props} theme={theme} toggleTheme={toggleTheme} />
+					)}
+				/>
 			</Switch>
 		</Router>
 	);

src/algo/AVL.js

@@ -841,7 +841,7 @@ AVL.HIGHLIGHT_COLOR = '#007700';
 AVL.HEIGHT_LABEL_COLOR = '#000000';
 
 AVL.LINK_COLOR = '#000000';
-AVL.LINK_OPACITY = 0.20;
+AVL.LINK_OPACITY = 0.2;
 AVL.HIGHLIGHT_CIRCLE_COLOR = '#007700';
 AVL.FOREGROUND_COLOR = '#000000';
 AVL.BACKGROUND_COLOR = '#FFFFFF';

src/algo/Algorithm.js

@@ -79,11 +79,11 @@ export function addCheckboxToAlgorithmBar(boxLabel, checked, group) {
 }
 
 export function addDropDownGroupToAlgorithmBar(optionNames, groupName, group) {
-	const dropDown = document.createElement("select");
+	const dropDown = document.createElement('select');
 	dropDown.name = groupName;
 	for (let i = 0; i < optionNames.length; i++) {
-		const option = document.createElement("option");
-    	option.text = optionNames[i];
+		const option = document.createElement('option');
+		option.text = optionNames[i];
 		dropDown.add(option);
 	}
 
@@ -373,13 +373,13 @@ export default class Algorithm {
 
 export function controlKey(keyASCII) {
 	return (
-		keyASCII === 8 ||  // backspace
-		keyASCII === 9 ||  // tab
-		keyASCII === 37 || // % percent 
+		keyASCII === 8 || // backspace
+		keyASCII === 9 || // tab
+		keyASCII === 37 || // % percent
 		keyASCII === 38 || // & ampersand
 		keyASCII === 39 || // ' apostrophe
 		keyASCII === 40 || // ( left parenthesis
-		keyASCII === 46    // . period
+		keyASCII === 46 // . period
 	);
 }
 

src/algo/BTree.js

@@ -609,7 +609,11 @@ export default class BTree extends Algorithm {
 	}
 
 	split(tree) {
-		this.cmd(act.setText, this.messageID, 'Node now contains too many elements.  Splitting ...');
+		this.cmd(
+			act.setText,
+			this.messageID,
+			'Node now contains too many elements.  Splitting ...',
+		);
 		this.cmd(act.setHighlight, tree.graphicID, 1);
 		this.cmd(act.step);
 		this.cmd(act.setHighlight, tree.graphicID, 0);

src/algo/BoyerMoore.js

@@ -295,13 +295,7 @@ export default class BoyerMoore extends Algorithm {
 			const xpos = i * this.cellSize + ARRAY_START_X;
 			const ypos = ARRAY_START_Y - 25;
 			this.textRowID[i] = this.nextIndex;
-			this.cmd(
-				act.createLabel,
-				this.nextIndex++,
-				i,
-				xpos,
-				ypos,
-			);
+			this.cmd(act.createLabel, this.nextIndex++, i, xpos, ypos);
 		}
 
 		for (let i = 0; i < text.length; i++) {

src/algo/BruteForce.js

@@ -172,13 +172,7 @@ export default class BruteForce extends Algorithm {
 			xpos = i * this.cellSize + ARRAY_START_X;
 			ypos = ARRAY_START_Y - 25;
 			this.textRowID[i] = this.nextIndex;
-			this.cmd(
-				act.createLabel,
-				this.nextIndex++,
-				i,
-				xpos,
-				ypos,
-			);
+			this.cmd(act.createLabel, this.nextIndex++, i, xpos, ypos);
 		}
 
 		for (let i = 0; i < text.length; i++) {

src/algo/BubbleSort.js

@@ -125,7 +125,7 @@ export default class BubbleSort extends Algorithm {
 			'Swap Count: ' + this.swapCount,
 			COMP_COUNT_X + 250,
 			COMP_COUNT_Y,
-		)
+		);
 
 		this.code = [
 			['procedure BubbleSort(array):'],
@@ -373,11 +373,7 @@ export default class BubbleSort extends Algorithm {
 		// Move labels
 		this.cmd(act.move, iLabelID, jXPos, ARRAY_START_Y);
 		this.cmd(act.move, jLabelID, iXPos, ARRAY_START_Y);
-		this.cmd(
-			act.setText,
-			this.swapCountID,
-			'Swap Count: ' + ++this.swapCount,
-		);
+		this.cmd(act.setText, this.swapCountID, 'Swap Count: ' + ++this.swapCount);
 		this.cmd(act.step);
 		// Set text in array and delete temporary labels
 		this.cmd(act.setText, this.arrayID[i], this.displayData[j]);

src/algo/CocktailSort.js

@@ -438,11 +438,7 @@ export default class CocktailSort extends Algorithm {
 		this.cmd(act.setText, this.arrayID[j], '');
 		this.cmd(act.move, iLabelID, jXPos, jYPos);
 		this.cmd(act.move, jLabelID, iXPos, iYPos);
-		this.cmd(
-			act.setText,
-			this.swapCountID,
-			'Swap Count: ' + ++this.swapCount,
-		);
+		this.cmd(act.setText, this.swapCountID, 'Swap Count: ' + ++this.swapCount);
 		this.cmd(act.step);
 		this.cmd(act.setText, this.arrayID[i], this.displayData[j]);
 		this.cmd(act.setText, this.arrayID[j], this.displayData[i]);

src/algo/DFS.js

@@ -186,9 +186,23 @@ export default class DFS extends Graph {
 		];
 
 		if (this.physicalStack) {
-			this.codeID = this.addCodeToCanvasBase(this.itCode, CODE_START_X, CODE_START_Y, undefined, undefined, 1);
+			this.codeID = this.addCodeToCanvasBase(
+				this.itCode,
+				CODE_START_X,
+				CODE_START_Y,
+				undefined,
+				undefined,
+				1,
+			);
 		} else {
-			this.codeID = this.addCodeToCanvasBase(this.recCode, CODE_START_X, CODE_START_Y, undefined, undefined, 1);
+			this.codeID = this.addCodeToCanvasBase(
+				this.recCode,
+				CODE_START_X,
+				CODE_START_Y,
+				undefined,
+				undefined,
+				1,
+			);
 		}
 
 		this.animationManager.setAllLayers([0, this.currentLayer]);

src/algo/Dijkstras.js

@@ -126,7 +126,14 @@ export default class Dijkstras extends Graph {
 			['      PQ.enqueue((w, d1 + d2))'],
 		];
 
-		this.codeID = this.addCodeToCanvasBase(this.code, CODE_START_X, CODE_START_Y, undefined, undefined, 1);
+		this.codeID = this.addCodeToCanvasBase(
+			this.code,
+			CODE_START_X,
+			CODE_START_Y,
+			undefined,
+			undefined,
+			1,
+		);
 
 		this.tableEntryHeight = this.isLarge ? LARGE_TABLE_ENTRY_HEIGHT : SMALL_TABLE_ENTRY_HEIGHT;
 		for (let i = 0; i < this.size; i++) {

src/algo/Hash.js

@@ -179,19 +179,14 @@ export default class Hash extends Algorithm {
 		this.dropDownGroup = addGroupToAlgorithmBar(false);
 
 		this.hashTypeDropDown = addDropDownGroupToAlgorithmBar(
-			[
-				'Hash Integers',
-				'Hash Strings',
-				'True Hash Function'
-			],
+			['Hash Integers', 'Hash Strings', 'True Hash Function'],
 			'Hash Type',
-			this.dropDownGroup
+			this.dropDownGroup,
 		);
 
 		this.hashTypeDropDown.onchange = this.checkHashType.bind(this);
 
 		this.hashType = 'integers';
-
 	}
 
 	checkHashType() {
@@ -200,7 +195,7 @@ export default class Hash extends Algorithm {
 		} else if (this.hashTypeDropDown.value === 'Hash Strings') {
 			this.implementAction(this.changeHashType.bind(this), 'strings');
 		} else if (this.hashTypeDropDown.value === 'True Hash Function') {
-			this.implementAction(this.changeHashType.bind(this), 'true')
+			this.implementAction(this.changeHashType.bind(this), 'true');
 		}
 	}
 
@@ -269,7 +264,7 @@ export default class Hash extends Algorithm {
 					false,
 				);
 			}
-		}	
+		}
 		return this.resetAll();
 	}
 
@@ -657,13 +652,13 @@ export default class Hash extends Algorithm {
 			return 0;
 		}
 		let hash = 0;
-  		for (let i = 0; i < key.length; i++) {
-    		hash = ((hash << 5) - hash) + key.charCodeAt(i);
+		for (let i = 0; i < key.length; i++) {
+			hash = (hash << 5) - hash + key.charCodeAt(i);
 			hash ^= 11597109109121;
-			hash &= 0xFFFF // convert to 16 bits
-  		}
-  		return hash;
-	}			
+			hash &= 0xffff; // convert to 16 bits
+		}
+		return hash;
+	}
 
 	resetAll() {
 		this.keyField.value = '';
@@ -674,7 +669,10 @@ export default class Hash extends Algorithm {
 	}
 
 	insertCallback() {
-		const insertedKey = this.hashType === 'integers' ? parseInt(this.keyField.value).toString() : this.keyField.value;
+		const insertedKey =
+			this.hashType === 'integers'
+				? parseInt(this.keyField.value).toString()
+				: this.keyField.value;
 		const insertedValue = this.valueField.value;
 		if (insertedKey !== '' && insertedValue !== '') {
 			this.keyField.value = '';

src/algo/InsertionSort.js

@@ -323,11 +323,7 @@ export default class InsertionSort extends Algorithm {
 		this.cmd(act.setText, this.arrayID[j], '');
 		this.cmd(act.move, iLabelID, jXPos, jYPos);
 		this.cmd(act.move, jLabelID, iXPos, iYPos);
-		this.cmd(
-			act.setText,
-			this.swapCountID,
-			'Swap Count: ' + ++this.swapCount,
-		);
+		this.cmd(act.setText, this.swapCountID, 'Swap Count: ' + ++this.swapCount);
 		this.cmd(act.step);
 		this.cmd(act.setText, this.arrayID[i], this.displayData[j]);
 		this.cmd(act.setText, this.arrayID[j], this.displayData[i]);

src/algo/KMP.js

@@ -220,13 +220,7 @@ export default class KMP extends Algorithm {
 			xpos = i * this.cellSize + ARRAY_START_X;
 			ypos = ARRAY_START_Y - 25;
 			this.textRowID[i] = this.nextIndex;
-			this.cmd(
-				act.createLabel,
-				this.nextIndex++,
-				i,
-				xpos,
-				ypos,
-			);
+			this.cmd(act.createLabel, this.nextIndex++, i, xpos, ypos);
 		}
 
 		for (let i = 0; i < text.length; i++) {

src/algo/Kruskals.js

@@ -166,7 +166,14 @@ export default class Kruskals extends Graph {
 			[`    merge u's cluster with v's cluster`],
 		];
 
-		this.codeID = this.addCodeToCanvasBase(this.code, CODE_START_X, CODE_START_Y, undefined, undefined, 1);
+		this.codeID = this.addCodeToCanvasBase(
+			this.code,
+			CODE_START_X,
+			CODE_START_Y,
+			undefined,
+			undefined,
+			1,
+		);
 
 		this.animationManager.setAllLayers([0, this.currentLayer]);
 		this.animationManager.startNewAnimation(this.commands);

src/algo/LCS.js

@@ -96,13 +96,7 @@ export default class LCS extends Algorithm {
 			['      if ', '(S1[y] == S2[x])'],
 			['        matrix[y][x] = 1 + ', 'matrix[y - 1][x - 1]'],
 			['      else'],
-			[
-			'        matrix[y][x] = max(',
-				'matrix[y - 1][x]',
-				',',
-				' matrix[y][x - 1]',
-				')',
-			],
+			['        matrix[y][x] = max(', 'matrix[y - 1][x]', ',', ' matrix[y][x - 1]', ')'],
 			['    end for'],
 			['  end for'],
 			['  currY ← S1.length'],