custom shape labels

Author: marciosouzajunior

public/index.html

@@ -27,9 +27,10 @@ <h2 class="mt-30 ml-100">PentaShapes</h2>
 
 		Scale:
 		<select id="scale-select">
+			<option value="">-- Choose a scale --</option>
 			<option value="roots">Roots</option>
 			<option value="chromatic">Chromatic</option>
-			<option value="penta_min" selected>Pentatonic Minor</option>
+			<option value="penta_min">Pentatonic Minor</option>
 			<option value="penta_maj">Pentatonic Major</option>
 			<option value="blues">Blues</option>
 			<option value="major" disabled>Major</option>
@@ -49,23 +50,23 @@ <h2 class="mt-30 ml-100">PentaShapes</h2>
 		<div class="mt-15">
 			<label class="custom-checkbox">
 			  <input type="checkbox" id="shape_1" value="shape_1" class="shape-checkbox" disabled onclick="shapeClick()">
-			  <span class="checkmark"></span> Shape 1
+			  <span class="checkmark"></span> <span name="shape_label">Shape 1</span>
 			</label>
 			<label class="custom-checkbox">
 			  <input type="checkbox" id="shape_2" value="shape_2" class="shape-checkbox" disabled onclick="shapeClick()">
-			  <span class="checkmark"></span> Shape 2
+			  <span class="checkmark"></span> <span name="shape_label">Shape 2</span>
 			</label>
 			<label class="custom-checkbox">
 			  <input type="checkbox" id="shape_3" value="shape_3" class="shape-checkbox" disabled onclick="shapeClick()">
-			  <span class="checkmark"></span> Shape 3
+			  <span class="checkmark"></span> <span name="shape_label">Shape 3</span>
 			</label>
 			<label class="custom-checkbox">
 			  <input type="checkbox" id="shape_4" value="shape_4" class="shape-checkbox" disabled onclick="shapeClick()">
-			  <span class="checkmark"></span> Shape 4
+			  <span class="checkmark"></span> <span name="shape_label">Shape 4</span>
 			</label>
 			<label class="custom-checkbox">
 			  <input type="checkbox" id="shape_5" value="shape_5" class="shape-checkbox" disabled onclick="shapeClick()">
-			  <span class="checkmark"></span> Shape 5
+			  <span class="checkmark"></span> <span name="shape_label">Shape 5</span>
 			</label>
 		</div>
 

public/js/main.js

@@ -19,8 +19,26 @@ for (var i = 0; i < notes.e_low.length; i++) {
 
 $('#scale-select').change(function() {
 	$('#reset-button').click();
+
+	// Set custom shape labels if available
+	var selectedScaleName = $(this).val();
+	var selectedScale = scales[selectedScaleName];	
+	if (selectedScale && selectedScale.shape_labels) {
+		$('span[name="shape_label"]').each(function(index) {			
+			$(this).parent().show();			
+			let shape_label = selectedScale.shape_labels[index];			
+			if (!shape_label) {
+				$(this).parent().hide();				
+				return;
+			}
+			$(this).text(shape_label);
+		});	
+	}
 });
 
+// Auto select penta_min
+$('#scale-select').val('penta_min').change();
+
 $('#reset-button').click(function() {
 	deactivateNotes();
 	showAllNotes();
@@ -98,7 +116,7 @@ function renderShapes(string, index) {
 
 	$("#root-note").removeClass('info-message');
 	$('#reset-button').removeAttr('disabled');
-	
+
 	deactivateNotes();
 	hideNotes();
 

public/js/scales.js

@@ -46,6 +46,13 @@ const scales = (() => {
 
     // https://www.jazz-guitar-licks.com/medias/images/minor-pentatonic-scale-guitar-shapes.png
     const penta_min = {
+        shape_labels: [
+            'Shape 1 (E)',
+            'Shape 2 (D)',
+            'Shape 3 (C)',
+            'Shape 4 (A)',
+            'Shape 5 (G)'
+        ],
         e_low: {
             shape_1: [
                 { string: 'e_high', offset: 0, label: '1' },
@@ -140,6 +147,13 @@ const scales = (() => {
 
     // https://www.jazz-guitar-licks.com/medias/images/major-pentatonic-scale-guitar-shapes.png
     const penta_maj = {
+        shape_labels: [
+            'Shape 1 (E)',
+            'Shape 2 (D)',
+            'Shape 3 (C)',
+            'Shape 4 (A)',
+            'Shape 5 (G)'
+        ],
         e_low: {
             shape_1: [
                 { string: 'e_high', offset: 2, label: '2' },
@@ -234,6 +248,11 @@ const scales = (() => {
 
     // https://www.guitartricks.com/assets/news_images/GT-Diagrams-BBKingBox_comparison.gif
     const blues = {
+        shape_labels: [
+            'Pattern 1',
+            'Albert King Box',
+            'BB King Box'
+        ],
         e_low: {
             shape_1: [
                 { string: 'e_high', offset: 3, label: '♭3' },