Bug fixes and updates to Chords experiment

Use Poppins instead of Roboto, remove chord label, fixes for iOS tapper, decrease time between chords
mshook · Feb 22, 2018 · 3f9e5cd · 3f9e5cd
1 parent 8297462
commit 3f9e5cd
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 35 deletions.
diff --git a/chords/app/Main.js b/chords/app/Main.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-require(["domready", "main.scss", "interface/Piano", "sound/Arp", "interface/ChordLabel", 
+require(["domready", "main.scss", "interface/Piano", "sound/Arp",
 	"interface/Toggle", "StartiOS", "Translation"], 
-	function(domready, mainStyle, Piano, Arp, ChordLabel, Toggle, StartiOS, Translation){
+	function(domready, mainStyle, Piano, Arp, Toggle, StartiOS, Translation){
 
 	//get the origin
 
@@ -37,8 +37,6 @@ require(["domready", "main.scss", "interface/Piano", "sound/Arp", "interface/Cho
 			var lowestNote = "C3";
 			var highestNote = "C5";
 
-			var label = new ChordLabel(container);
-
 			//the piano
 			var piano = new Piano(container, lowestNote, highestNote);
 
@@ -56,7 +54,6 @@ require(["domready", "main.scss", "interface/Piano", "sound/Arp", "interface/Cho
 			piano.onNotes = function(notes, root, mode){
 				chordSelected = true;
 				arp.play(notes);
-				label.setChord(root, mode);
 			};
 
 			toggle.onChange = function(mode){

diff --git a/chords/app/StartiOS.js b/chords/app/StartiOS.js
@@ -17,24 +17,20 @@
 define(["StartAudioContext", "Tone/core/Tone"], function (StartAudioContext, Tone) {
 
 	return function(){
-		//send the ready message to the parent
+		// send the ready message to the parent
 		var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+		var isAndroid = /Android/.test(navigator.userAgent) && !window.MSStream;
 
-		//full screen button on iOS
-		if (isIOS){
-			//make a full screen element and put it in front
+		// full screen button on iOS
+		if (isIOS || isAndroid) {
+			// make a full screen element and put it in front
 			var iOSTapper = document.createElement("div");
 			iOSTapper.id = "iOSTap";
-			iOSTapper.addEventListener("touchstart", function(e){
-				e.preventDefault();
-			});
 			document.body.appendChild(iOSTapper);
-			StartAudioContext.setContext(Tone.context);
-			StartAudioContext.on(iOSTapper);
-			StartAudioContext.onStarted(function(){
-				iOSTapper.remove();
-				window.parent.postMessage('ready','*');
-			});
+      new StartAudioContext(Tone.context, iOSTapper).then(function() {
+        iOSTapper.remove();
+        window.parent.postMessage('ready','*');
+      });
 		} else {
 			window.parent.postMessage('ready','*');
 		}

diff --git a/chords/app/Translation.js b/chords/app/Translation.js
@@ -18,6 +18,13 @@ define(function () {
 
 	var languageText = null;
 
+	function capitalize(str){
+		return str.charAt(0).toUpperCase() + str.substr(1);
+	}
+
+	//the number of attempts to get the translation
+	var tries = 0;
+
 	/**
 	 * localize the given word into the desired language
 	 * @param  {String} word
@@ -34,10 +41,13 @@ define(function () {
 						languageText = json;
 						callback();
 					} else {
-						console.log('Error: ' + xhr.status); // An error occurred during the request.
+						if (tries < 3){
+							tries++;
+							this.load("en", callback);
+						}
 					}
 				}
-			};
+			}.bind(this);
 			xhr.send(null);
 		},
 		localize : function(phrase){
@@ -52,11 +62,11 @@ define(function () {
 			}
 		},
 		localizeChord : function(key, mode){
-			if (languageText){
-				// return languageText.Chords_UI_Major_Chords.message;
-				return key + " " + " " + mode + " chord";
+			var transKey = key+"_"+capitalize(mode)+"_Chord";
+			if (languageText && languageText[transKey]){				
+				return languageText[transKey].message;
 			} else {
-				return note;
+				return key + " " + " " + mode + " chord";
 			}
 		}
 	};

diff --git a/chords/app/interface/Piano.js b/chords/app/interface/Piano.js
@@ -73,7 +73,7 @@ function (PianoComp, pianoStyle, teoria, Tone) {
 	 * the delay time between sequential notes
 	 * @type {Number}
 	 */
-	Piano.prototype.delayTime = 0.2;
+	Piano.prototype.delayTime = 0.05;
 
 	Piano.prototype.clicked = function(midiNote){
 		this.setChord(midiNote);

diff --git a/chords/index.html b/chords/index.html
@@ -3,7 +3,7 @@
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<title>Chords</title>
-	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
+	<link href='https://fonts.googleapis.com/css?family=Poppins:400,300' rel='stylesheet' type='text/css'>
 	<script type="text/javascript" src="build/Main.js"></script>
 </head>
 <body>

diff --git a/chords/package.json b/chords/package.json
@@ -24,6 +24,6 @@
     "teoria": "^2.1.1",
     "url-loader": "*",
     "webfontloader": "^1.6.10",
-    "webpack": "*"
+    "webpack": "^1.12.11"
   }
 }
diff --git a/chords/style/box.scss b/chords/style/box.scss
@@ -1,12 +1,12 @@
 @import "common.scss";
 
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);
+@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,100);
 
 body {
 	width: 100%;
 	height: 100%;
 	margin: 0px;
-	font-family: "Roboto", sans-serif;
+	font-family: "Poppins", sans-serif;
 	font-weight: 400;
 }
 

diff --git a/chords/style/chordlabel.scss b/chords/style/chordlabel.scss
@@ -17,7 +17,7 @@ $labelSize : 25px;
 		height: $labelSize;
 		font-size: $labelSize;
 		line-height: $labelSize;
-		font-family: "Roboto", sans-serif;
+		font-family: "Poppins", sans-serif;
 		font-weight: 300;
 		color: $darkGrey;
 	}

diff --git a/chords/style/main.scss b/chords/style/main.scss
@@ -11,6 +11,10 @@ body, html, #Container{
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 
 	#Container {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
 		position: absolute;
 	}
 

diff --git a/chords/style/piano.scss b/chords/style/piano.scss
@@ -4,11 +4,8 @@ $pianoWidth: 390px;
 
 #Piano {
 	position: relative;
-	left: 0px;
 	width: 100%;
 	min-width: 300px;
 	max-width: 400px;
 	height: $pianoHeight;
-	left: 50%;
-	transform: translate(-50%, 0px);
 }
diff --git a/chords/style/toggle.scss b/chords/style/toggle.scss
@@ -8,7 +8,7 @@ $HandleSize : 30px;
 $transitionTime: 0.2s;
 
 #ToggleContainer {
-	height: $toggleHeight;
+	margin-top: 20vh;
 	position: relative;
 
 	.Label {

diff --git a/chords/style/toggleswitch.scss b/chords/style/toggleswitch.scss
@@ -29,7 +29,7 @@ $blue: rgb(30, 170, 241);
 		cursor: pointer;
 		position: absolute;
 		top: 50%;
-		font-family: "Roboto", sans-serif;
+		font-family: "Poppins", sans-serif;
 		font-weight: 300;
 		color: $grey;
 		font-size: $railHeight;