Merge pull request #30 from damassi/add-dev-script

Add dev script; fix clipped title

README.md

@@ -9,11 +9,9 @@ Guitar Dashboard is written in Typescript using VS Code. Make all code changes i
 
 1. Clone or fork-and-clone this repository.
 2. File -> Open folder at the root directory of the cloned repository.
-3. Build should just work (ctrl-shift-B).
-4. To run locally using lite-server:
-    - npm install 
-    - npm start
+4. To develop locally using lite-server:
+    - npm install
+    - npm dev
 5. Browse to http://localhost:10001/
 6. Edit the src/*.ts, index.html and gtr-cof.css files.
-7. Compile.
-8. Commit, push to GitHub and create a pull request :)
+8. Commit, push to GitHub and create a pull request :)

package.json

@@ -4,15 +4,17 @@
   "description": "gtr-cof",
   "scripts": {
     "lite": "lite-server --baseDir=\"docs\" --port 10001",
-    "start": "npm run lite"
+    "start": "npm run lite",
+    "dev": "concurrently --raw --kill-others 'npm start' 'tsc -w'"
   },
   "author": "Mike Hadlow",
   "license": "MIT",
   "devDependencies": {
-    "lite-server": "^1.3.1",
-    "typescript": "^2.3.4",
-    "d3": "^3.0.0",
     "@types/d3": "^3.0.0",
-    "@types/webmidi": "^2.0.2"
+    "@types/webmidi": "^2.0.2",
+    "concurrently": "4.0.1",
+    "d3": "^3.0.0",
+    "lite-server": "^1.3.1",
+    "typescript": "^2.3.4"
   }
 }

src/gtr-module.ts

@@ -99,9 +99,9 @@ namespace gtr {
         svg.append("text")
             .attr("class", "mode-text")
             .attr("x", 30)
-            .attr("y", 10)
-            .text(tuningInfo.tuning + " " 
-                + tuningInfo.description 
+            .attr("y", 11)
+            .text(tuningInfo.tuning + " "
+                + tuningInfo.description
                 + (isLeftHanded ? ", Left Handed" : "")
                 + (isNutFlipped ? ", Nut Flipped" : ""));
         let gtr = svg.append("g").attr("transform", "translate(0, 0) scale(1, 1)");
@@ -180,26 +180,26 @@ namespace gtr {
         let hasToggledNotes = stateChange.nodes.some(x => x.toggle);
 
         let fill = function (d: StringNote): string {
-            return d.node.toggle 
-                ? "white" 
-                : d.node.scaleNote.isScaleNote 
-                    ? d.node.scaleNote.noteNumber === 0 
-                        ? hasToggledNotes ? "white" : "yellow" 
-                        : "white" 
+            return d.node.toggle
+                ? "white"
+                : d.node.scaleNote.isScaleNote
+                    ? d.node.scaleNote.noteNumber === 0
+                        ? hasToggledNotes ? "white" : "yellow"
+                        : "white"
                     : "rgba(255, 255, 255, 0.01)";
         };
 
         let stroke = function (d: StringNote): string {
-            return d.node.midiToggle ? "OrangeRed" 
-                : d.node.toggle ? "#" + d.node.chordInterval.colour.toString(16) 
+            return d.node.midiToggle ? "OrangeRed"
+                : d.node.toggle ? "#" + d.node.chordInterval.colour.toString(16)
                 : hasToggledNotes ? "none"
                 : d.node.scaleNote.isScaleNote ? "grey" : "none";
         };
 
         let strokeWidth = function (d: StringNote): number {
-            return d.node.midiToggle ? 10 
-                : d.node.toggle ? 4 
-                : d.node.scaleNote.isScaleNote ? 2 
+            return d.node.midiToggle ? 10
+                : d.node.toggle ? 4
+                : d.node.scaleNote.isScaleNote ? 2
                 : 0;
         };
 
@@ -210,7 +210,7 @@ namespace gtr {
             .attr("fill", fill)
             .attr("stroke", stroke)
             .attr("stroke-width", strokeWidth);
-        
+
         noteLabels.data(data, indexer)
         setLabels();
         currentState = stateChange;