use bootstrap react, use navitems and tabs for UI

mpobrien · Mar 21, 2016 · 65f2a71 · 65f2a71
1 parent 401476a
commit 65f2a71
Show file tree

Hide file tree

Showing 5 changed files with 283 additions and 278 deletions.
diff --git a/package.json b/package.json
@@ -42,8 +42,13 @@
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
-    "webpack": "~1.12.9",
-    "sass-loader": "~3.1.2",
-    "node-sass": "~3.4.2"
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "less-loader": "^2.2.2",
+    "node-sass": "^3.4.2",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.0",
+    "teoria": "^2.2.0",
+    "webpack": "^1.12.14"
   }
 }
diff --git a/scale.js b/scale.js
@@ -1,4 +1,8 @@
 var _ = require("underscore")
+
+var sharp = '♯'
+var flat = '♭'
+
 exports.noteOnly = function(noteName){
   return noteName.split("/")[0]
 }
@@ -8,8 +12,8 @@ exports.octaveOnly = function(noteName){
 }
 
 exports.accidental = function(noteName){
-    var accidental = noteName.indexOf("#")
-    accidental = accidental < 0 ? noteName.indexOf("b") : accidental
+    var accidental = noteName.indexOf(sharp)
+    accidental = accidental < 0 ? noteName.indexOf(flat) : accidental
     if(accidental>=0){
       return noteName[accidental]
     }
@@ -37,13 +41,14 @@ exports.accidental = function(noteName){
 // I IV I V7 IV I
 // I IV vii° iii vi ii V I
 
-var notes = [ 'c', 'c#', 'd', 'eb', 'e', 'f', 'f#', 'g', 'g#', 'a', 'bb', 'b' ]
-var enharmonics = [["c#","db"], ["eb","d#"], ["f#", "gb"], ["g#", "ab"], ["bb", "a#"]]
+var notes = [ 'c', 'c♯', 'd', 'e♭', 'e', 'f', 'f♯', 'g', 'a♭', 'a', 'b♭', 'b' ]
+var enharmonics = [["c♯","d♭"], ["d♯", "e♭",], ["g♭", "f♯"], ["a♭", "g♯"], ["b♭", "a♯"]]
+var keySignatureType = [null, sharp, sharp, flat, sharp, flat, sharp, 
 exports.notes = notes
 exports.enharmonics = enharmonics
 
 var scaleMaps = {
-  'cMajor': [ 'C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'G#', 'A', 'Bb', 'B' ]
+  'cMajor': [ 'C', 'C♯', 'D', 'E♭', 'E', 'F', 'F♯', 'G', 'A♭', 'A', 'B♭', 'B' ]
 }
 exports.scaleMaps = scaleMaps
 var tones = scaleMaps.cMajor
@@ -70,7 +75,7 @@ var supportedChords = [
 	{ name: "m", fullname: "minor",
 	  gen: function(i) {
 		return [tones[i], tones[(i + 3) % 12], tones[(i + 7) % 12]]
-	  }
+	}
 	}, 
 	{ name: "dim", fullname: "diminished",
 	  gen: function(i) {
@@ -105,13 +110,27 @@ var chordTypeByName = function(name){
 	return _.find(supportedChords, function(x){return x.name == name})
 }                 
 exports.chordTypeByName = chordTypeByName
-var Steps= {
-	"Major" : [2, 2, 1, 2, 2, 2,1],
-	"Minor" : [2, 1, 2, 2, 1, 2, 2],
-	"Harmonic Minor": [2, 1, 2, 2, 1, 3, 1],
-	"Blues": [3, 2, 1, 1, 3],
+var Types = [
+	{name:"Major", steps:[2, 2, 1, 2, 2, 2, 1], signature:"major"},
+	{name:"Minor", steps:[2, 1, 2, 2, 1, 2, 2], signature:"minor"},
+	{name:"Harmonic Minor", steps: [2, 1, 2, 2, 1, 3, 1], signature:"minor"},
+	{name:"Blues", steps: [3, 2, 1, 1, 3], signature:"major"},
+  {name:"Dorian", steps: [2, 1, 2, 2, 2, 1, 2], signature:"major"},
+  {name:"Phrygian", steps: [1, 2, 2, 2, 1, 2, 2], signature:"major"},
+  {name:"Lydian", steps: [2, 2, 2, 1, 2, 2, 1], signature:"major"},
+  {name:"Mixolydian", steps: [2, 2, 1, 2, 2, 1, 2], signature:"major"},
+  {name:"Aeolian", steps: [2, 1, 2, 2, 1, 2, 2], signature:"major"},
+  {name:"Locrian", steps: [1, 2, 2, 1, 2, 2, 2], signature:"major"},
+  {name:"Lydian ♭7", steps: [2, 2, 2, 1, 2, 1, 1], signature:"major"},
+  {name:"Altered", steps: [1, 2, 1, 2, 2, 2, 1], signature:"major"},
+  {name:"Symmetrical Diminished", steps: [1, 2, 1, 2, 1, 2, 2], signature:"major"},
+]
+
+exports.Types = Types
+exports.TypeByName = function(name){
+  return _.find(Types, function(x){return x.name==name})
 }
-exports.Steps = Steps
+
 exports.intervals = {
 		"minor 2nd":1,
 		"major 2nd":2,

diff --git a/sightread.html b/sightread.html
@@ -2,79 +2,29 @@
 <html>
   <head>
     <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
-        <style>
-          .note {
-            color: red;
-          }
-          .current {
-            font-weight:bold;
-          }
-          .selected {
-            font-weight:bold;
-          }
-          .custom-select {
-            margin:10px;
-            vertical-align:middle;
-            font-size:1.5em;
-            position: relative;
-            display: inline-block;
-
-
-          }
-          .custom-select::before, .custom-select::after {
-              content: "";
-              position: absolute;
-              pointer-events: none;
-          }
-          body {
-            font-family: "Lato", "sans serif";
-          }
-          optgroup {
-            font-size:48px;
-          }
-          .chordBox{
-            text-align:center;
-            background-color: white;
-            color:black;
-            border:1px solid black;
-            padding:10px;
-            font-size:2em;
-            width:100px;
-          }
-          .chordBox.selected{
-            border:1px solid red;
-            background-color: #5bc0de;
-            color:black;
-            font-weight:bold;
-          }
-    </style>
+    <link href="public/style.css" rel="stylesheet" />
+    <link href="bootstrap.min.css" rel="stylesheet" />
     <script src="midijs2/midi.js/build/MIDI.min.js"></script>
     <script src="midijs2/midi.js/inc/shim/Base64.js"></script>
     <script src="midijs2/midi.js/inc/shim/Base64Binary.js"></script>
   </head>
   <body>
-    <div id="music">
-    </div>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-6">
+          <h1>Piano Trainer</h1>
+        </div>
+     </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <div id="music">
+          </div>
+        </div>
+      </div>
     <div id="example"></div>
     <script src="bundle.js"></script>
-    <!--
-    <script src='react.js'></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
-    <script src='jquery.min.js'></script>
-    <script src='underscore-min.js'></script>
-    <script src='WebMIDIAPI.min.js'></script>
-    <script src='vexflow-min.js'></script>
-    <script src='JSXTransformer.js'></script>
-    <script src='Base64binary.js'></script>
-    <script src='MIDI.min.js'></script>
-    <script src='scale.js' type="text/jsx"></script>
-    <script src='midiutils.js' type="text/jsx"></script>
-    -->
-    <!--<script src='sightread.js' type="text/jsx"></script>
-    <script src='sightread2.js' type="text/jsx"></script>
-    <script src='Flux.js' type="text/jsx"></script>
-  -->
+    </div>
   </body>
 </html>
- 
+