Update npm dependencies

.yarnrc.yml

@@ -1 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules

README.md

@@ -4,6 +4,8 @@ A quick interactive Camelot Wheel for DJs into key matching through keys and key
 
 https://www.soulglo.com/camelot-wheel
 
+Note: `npm install` hit snags with dependencies that has not been looked into further. For now, Yarn is the way.
+
 ### Build Development
 
     $ yarn dev

index.html

@@ -6,11 +6,12 @@
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"/>
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
 	<script type="text/javascript" src="./dist/cw.js"></script>
+
 	<style>
 		footer {
 			display: flex;
 			width: 100%;
-			font-family: "Roboto Light";
+			font-family: "Roboto Light", sans-serif;
 			font-size: 10px;
 			justify-content: center;
 			align-items: center;
@@ -22,7 +23,9 @@
 
 </div>
 <footer>
-	please report bugs here: <a href="https://github.com/geeves/camelot-wheel">https://github.com/geeves/camelot-wheel</a>
+	<p style="text-align: center">
+		this is only meant to be a guide. trust your ears!<br/><br/>
+		report bugs here: <a href="https://github.com/geeves/camelot-wheel">https://github.com/geeves/camelot-wheel</a></p>
 </footer>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "camelot-wheel",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "Interactive Camelot Wheel for harmonic mixing",
 	"main": "index.js",
 	"scripts": {
@@ -21,55 +21,55 @@
 	"author": "geeves",
 	"license": "MIT",
 	"dependencies": {
-		"@material-ui/core": "^4.12.4",
-		"@material-ui/icons": "^4.11.3",
-		"classnames": "^2.3.1",
-		"core-js": "3.22.5",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"react-inlinesvg": "0.8.4",
-		"react-svg-map": "^2.2.0",
-		"react-swipeable-views": "^0.14.0"
+		"@material-ui/core": "4.12.4",
+		"@material-ui/icons": "4.11.3",
+		"classnames": "2.5.1",
+		"core-js": "3.40.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"react-inlinesvg": "4.1.8",
+		"react-svg-map": "2.2.0",
+		"react-swipeable-views": "0.14.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "7.17.10",
-		"@babel/core": "7.17.10",
-		"@babel/plugin-proposal-class-properties": "7.16.7",
-		"@babel/plugin-proposal-export-default-from": "7.16.7",
-		"@babel/plugin-transform-regenerator": "7.17.9",
-		"@babel/preset-env": "7.17.10",
-		"@babel/preset-react": "7.16.7",
-		"@svgr/cli": "^6.2.1",
-		"@svgr/core": "^6.2.1",
-		"@svgr/webpack": "^6.2.1",
-		"babel-core": "7.0.0-beta.3",
-		"babel-eslint": "^10.1.0",
-		"babel-jest": "28.1.0",
-		"babel-loader": "8.2.5",
-		"babel-plugin-inline-react-svg": "^2.0.1",
-		"babel-plugin-module-resolver": "4.1.0",
+		"@babel/cli": "7.26.4",
+		"@babel/core": "7.26.7",
+		"@babel/plugin-proposal-class-properties": "7.18.6",
+		"@babel/plugin-proposal-export-default-from": "7.25.9",
+		"@babel/plugin-transform-regenerator": "7.25.9",
+		"@babel/preset-env": "7.26.7",
+		"@babel/preset-react": "7.26.3",
+		"@svgr/cli": "7.0.0",
+		"@svgr/core": "7.0.0",
+		"@svgr/webpack": "7.0.0",
+		"babel-core": "7.0.0-bridge.0",
+		"babel-eslint": "10.1.0",
+		"babel-jest": "29.7.0",
+		"babel-loader": "9.2.1",
+		"babel-plugin-inline-react-svg": "2.0.2",
+		"babel-plugin-module-resolver": "5.0.2",
 		"clean-webpack-plugin": "4.0.0",
-		"css-loader": "^6.7.1",
+		"css-loader": "7.1.2",
 		"enzyme": "3.11.0",
 		"file-loader": "6.2.0",
-		"jest": "28.1.0",
+		"jest": "29.7.0",
 		"jest-dom": "4.0.0",
-		"less": "^4.1.2",
-		"less-loader": "10.2.0",
-		"lint-staged": "12.4.1",
+		"less": "4.2.2",
+		"less-loader": "12.2.0",
+		"lint-staged": "15.4.3",
 		"popper.js": "1.16.1",
-		"prettier": "2.6.2",
-		"prop-types": "^15.8.1",
-		"react-native-svg": "^12.3.0",
-		"react-test-renderer": "18.1.0",
+		"prettier": "3.4.2",
+		"prop-types": "15.8.1",
+		"react-native-svg": "12.3.0",
+		"react-test-renderer": "18.3.1",
 		"react-testing-library": "8.0.1",
-		"requirejs": "2.3.6",
-		"sass-loader": "12.6.0",
+		"requirejs": "2.3.7",
+		"sass-loader": "16.0.4",
 		"scss-loader": "0.0.1",
-		"style-loader": "^3.3.1",
-		"svg-inline-loader": "^0.8.0",
-		"webpack": "5.72.1",
-		"webpack-cli": "4.9.2"
+		"style-loader": "4.0.0",
+		"svg-inline-loader": "0.8.2",
+		"webpack": "5.97.1",
+		"webpack-cli": "6.0.1"
 	},
 	"babel": {
 		"plugins": [

src/components/CamelotDescription.js

@@ -76,7 +76,7 @@ class CamelotDescription extends React.Component {
 						</p>
 						<p>
 							Sometimes it may be best to trust your ears if a mix is working or not rather than a computer algorithm
-							tell you that two tracks are compatible. Most vinyl didn"t contain key information and either you had to
+							tell you that two tracks are compatible. Most vinyl didn't contain key information and either you had to
 							do the legwork yourself to identify the key or become intimately familiar with your records and trust your
 							ears.
 						</p>

src/components/CamelotWheel.js

@@ -13,7 +13,7 @@ import Radio from '@material-ui/core/Radio';
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import KeyState from "./camelot-states";
-import KeyMap from "./camelot-data";
+import KeyMap, {createUnderScoreKeys} from "./camelot-data";
 // import CamelotDescription from "./CamelotDescription";
 
 const styles = (theme) => ({
@@ -41,32 +41,7 @@ class CamelotWheel extends React.Component {
 			classes: props.classes,
 			currentKey: "",
 			mode: props.mode,
-			keys: {
-				__1A: false,
-				__1B: false,
-				__2A: false,
-				__2B: false,
-				__3A: false,
-				__3B: false,
-				__4A: false,
-				__4B: false,
-				__5A: false,
-				__5B: false,
-				__6A: false,
-				__6B: false,
-				__7A: false,
-				__7B: false,
-				__8A: false,
-				__8B: false,
-				__9A: false,
-				__9B: false,
-				__10A: false,
-				__10B: false,
-				__11A: false,
-				__11B: false,
-				__12A: false,
-				__12B: false
-			}
+			keys: createUnderScoreKeys()
 		};
 	}
 
@@ -116,13 +91,13 @@ class CamelotWheel extends React.Component {
 
 		return (
 			<Grid
-				justify="center"
+				justifyContent="center"
 				spacing={16}
 				mode={mode}
 				xs={12}
 				container>
 				<Grid xs={12} item>
-					<Grid container justify="center" spacing={Number(spacing)}>
+					<Grid container justifyContent="center" spacing={Number(spacing)}>
 						<Grid xs={12} item>
 							<Paper className={classes.control}>
 								<svg

src/components/camelot-data.js

@@ -1,18 +1,45 @@
+function createDefaultArrayKeys() {
+	const min = 1;
+	const max = 12;
+	let keys = [];
+	for (let i = min; i <= max; i++) {
+		keys.push(`${i}A`);
+		keys.push(`${i}B`);
+	}
+	return keys;
+}
+
+function createUnderScoreKeys() {
+	let map = {};
+	createDefaultArrayKeys().forEach((v) => {
+		map[`__${v}`] = false;
+	});
+	return map;
+}
+
+function createArrayKeys(min, max) {
+	let keys = [];
+	for (let i = min; i <= max; i++) {
+		keys.push(`${i}A`);
+		keys.push(`${i}B`);
+	}
+	return keys;
+}
+
+function getMain(index) {
+	let min = index -1;
+	let max = index + 1;
+	max = (max > 12) ? (max - 12) : max;
+	let keys = [];
+
+	for (let i = min; i <= max; i++){
+		const altMax = (max > 12) ? (max - 12) : max;
+		const altMin = (max < 1) ? (min + 12) : min;
+	}
+}
+
 export default {
-	keys: [
-		"1A", "1B",
-		"2A", "2B",
-		"3A", "3B",
-		"4A", "4B",
-		"5A", "5B",
-		"6A", "6B",
-		"7A", "7B",
-		"8A", "8B",
-		"9A", "9B",
-		"10A", "10B",
-		"11A", "11B",
-		"12A", "12B"
-	],
+	keys: createDefaultArrayKeys(),
 	__1A: {
 		key: "A-flat Minor",
 		type: "minor",
@@ -829,3 +856,5 @@ export default {
 		]
 	}
 };
+
+export {createUnderScoreKeys, createDefaultArrayKeys}

src/components/camelot.css

@@ -4,7 +4,7 @@ div#camelot-container {
 }
 
 article {
-	font-family: Roboto, EuphemiaUCAS, Euphemia UCAS;
+	font-family: Roboto, EuphemiaUCAS, Euphemia UCAS, Arial, sans-serif;
 }
 
 .cls-1 {
@@ -132,11 +132,11 @@ article {
 }
 
 .cls-24, .cls-27 {
-	font-family: EuphemiaUCAS, Euphemia UCAS;
+	font-family: EuphemiaUCAS, Euphemia UCAS, Arial, sans-serif;;
 }
 
 .cls-25, .cls-26 {
-	font-family: STIXGeneral-Regular, STIXGeneral;
+	font-family: STIXGeneral-Regular, STIXGeneral, Arial, sans-serif;;
 }
 
 .cls-26 {
@@ -149,7 +149,7 @@ article {
 
 .cls-28, .cls-29, .cls-30 {
 	font-size: 48px;
-	font-family: EuphemiaUCAS-Bold, Euphemia UCAS;
+	font-family: EuphemiaUCAS-Bold, Euphemia UCAS, Arial, sans-serif;
 	font-weight: 700;
 }