Make the interface look kinda nice

3 files changed, 185 insertions, 39 deletions

diff --git a/web/source/custom.css b/web/source/custom.css
index 3794f85..8652983 100644
--- a/web/source/custom.css
+++ b/web/source/custom.css
@@ -1,17 +1,15 @@
+body {
+    font-size:1em;
+    font-family: sans-serif;
+    margin: 0px;
+    background-color: black;
+}
+
 #network {
-    width: 78%;
+    width: 79%;
     height: 800px;
-    border-right: 2px solid black;
     float:left;
-}
-
-#sidebar {
-    width: 20%;
-    float:right;
-}
-
-h1 {
-    margin-top: 0;
+    border-top: 1px solid #232200;
 }
 
 #node-overlay, #edge-overlay {
@@ -31,5 +29,123 @@ h1 {
 }
 
 .smallin {
-    width: 3em;
+    width: 3rem;
+}
+
+#sidebar {
+    width: 20%;
+    float:right;
+    color: white;
+    background-color: black;
+    box-shadow: -1px -2px 3px #111;
+}
+
+#sidebar > * {
+    width: 100%;
+    border-top: 1px solid #232200;
+    color: white;
+    padding-left: 0px;
+    padding-right: 0px;
+    margin: 0;
+    display: inline-block;
+}
+
+#sidebar *:nth-child(odd) {
+    background-color: #111;
+}
+
+#sidebar ::placeholder {
+    color:#aaa;
+}
+
+#sidebar *:nth-child(even) {
+    background-color: #000;
+}
+
+#sidebar button:hover, #sidebar input:hover, #sidebar .custom-file:hover {
+    background-color: #563d7c;
+}
+
+#sidebar h1 {
+    font-size: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    text-align: center;
+}
+
+#sidebar h2 {
+    font-size: 1.2rem;
+    padding-top: 0.9rem;
+    padding-bottom: 0.9rem;
+    text-align: center;
+}
+
+#sidebar button {
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    color: white;
+    height: 3rem;
+    font-size: 1.2rem;
+    margin:0;
+    padding:0;
+}
+
+#sidebar input[type="number"] {
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    height: 3rem;
+    text-align: center;
+    font-size: 1.2rem;
+}
+
+.custom-file {
+    top:0;
+    right:0;
+    position: relative;
+    display: inline-block;
+    height: 3rem;
+}
+
+
+.custom-file input[type="file"] {
+    position: relative;
+    top:0;
+    left:0;
+    right:0;
+    z-index:0;
+    opacity: 0;
+    width: 100%;
+    height: 100% !important;
+    margin:0;
+    padding:0;
+}
+
+.custom-file span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    width: 100%;
+    height: 3rem;
+    pointer-events: none;
+    background-color: transparent !important;
+    text-align: center;
+    font-size: 1.2rem;
+    line-height: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+}
+
+.file-action .custom-file {
+    width: 50% !important;
+    float: left;
+}
+
+.file-action button {
+    width: 50% !important;
+    float: right;
+    border: none;
 }
diff --git a/web/source/index.html b/web/source/index.html
index 2cc8907..1460c98 100644
--- a/web/source/index.html
+++ b/web/source/index.html
@@ -13,23 +13,19 @@
         <div id="network"></div>
         <div id="sidebar">
             <h1>likely music</h1>
-            <p><ul id="errors"></ul></p>
-            <p>
-                <label for="hop-count">Maximum interpretation length</label>
-                <input type="number" min="0" id="hop-count" class="smallin" value="100">
-            </p>
-            <p>
-                <input type="button" value="Set starting node" id="set-starting-node">
-                <input type="button" value="Show current starting node" id="show-starting-node">
-            </p>
-                <input type="button" value="Generate MIDI interpretation" id="gen-midi">
-                <input type="button" value="Generate WAV interpretation" id="gen-wav">
-            </p>
-            <p>
-                <input type="button" value="Download Likely Score" id="gen-score"><br>
+            <input type="number" min="0" id="hop-count" placeholder="Max. song length (in notes)">
+            <h2>General Settings</h2>
+            <button id="set-starting-node">Set starting node</button>
+            <button id="show-starting-node">Show starting node</button>
+            <h2>Generate an interpretation</h2>
+            <button id="gen-midi">MIDI interpretation</button>
+            <button id="gen-wav">WAV interpretation</button>
+            <h2>Load or Save Work</h2>
+            <button id="gen-score">Save</button>
+            <label for="upload-score" class="custom-file">
                 <input type="file" id="upload-score" >
-                <input type="button" id="import-score" value="Upload Likely Score">
-            </p>
+                <span>Load</span>
+            </label>
         </div>
         <div id="edge-overlay" class="hidden">
             <h2><span id="edge-operation"></span> edge</h2>
diff --git a/web/source/main.js b/web/source/main.js
index ff46e67..78e4755 100644
--- a/web/source/main.js
+++ b/web/source/main.js
@@ -53,7 +53,13 @@ class Music {
     }
 
     toString() {
-        return `${displayPitch(this.pitch)}${this.octave} (${this.dur.toString()})`;
+        if(this.pitch === 'Rest') {
+            return `${displayPitch(this.pitch)} for
+${this.dur.toString()}`;
+        } else {
+            return `${this.octave}${displayPitch(this.pitch)} for
+${this.dur.toString()}`;
+        }
     }
 
     static fromObject(obj) {
@@ -243,16 +249,16 @@ function hideOverlay(id) {
 function handleImport() {
     var files = document.getElementById('upload-score').files;
     if(files.length === 0) {
-        alert("Select a file first!");
+        alert('Select a file first!');
     } else {
         var file = files[0];
         var reader = new FileReader();
-        reader.addEventListener("loadend", function() {
+        reader.addEventListener('loadend', function() {
             var parsed = JSON.parse(this.result);
             if(parsed === undefined) {
-                alert("Could not parse likely score");
+                alert('Could not parse likely score');
             } else {
-                var confirmation = window.confirm("Proceeding will overwrite the current graph. Are you sure?");
+                var confirmation = window.confirm('Proceeding will overwrite the current graph. Are you sure?');
                 if(confirmation) {
                     try {
                         importGraphData(parsed);
@@ -267,19 +273,19 @@ function handleImport() {
 }
 
 function showStartingNode() {
-    if(typeof starting_node_id === "string") {
+    if(typeof starting_node_id === 'string') {
         network.selectNodes([starting_node_id], false);
     } else {
-        alert("No starting node selected yet!");
+        alert('No starting node selected yet!');
     }
 }
 
 function setStartingNode() {
     var selected = network.getSelectedNodes();
     if(selected.length > 1) {
-        alert("Only select one node!");
+        alert('Only select one node!');
     } else if(selected.length === 0) {
-        alert("Select a node first!");
+        alert('Select a node first!');
     } else {
         starting_node_id = selected[0];
     }
@@ -351,11 +357,39 @@ function main() {
                 }
             },
             deleteNode: true,
-            deleteEdge: true
+            deleteEdge: true,
+            controlNodeStyle: {
+            }
+        },
+        nodes: {
+            borderWidth: 0,
+            color: {
+                background: '#563d7c',
+                hover: {
+                    background: '#8f14ff'
+                },
+                highlight: {
+                    background: '#8f14ff'
+                }
+            },
+            chosen: true,
+            font: {
+                color: 'white'
+            },
+            shape: 'circle',
         },
         edges: {
             arrows: {
                 to: { enabled: true }
+            },
+            color: {
+                color: '#563d7c',
+                hover: '#563d7c',
+                highlight: '#563d7c',
+            },
+            font: {
+                color: '#ffffff',
+                strokeWidth: 0
             }
         }
     };
@@ -375,7 +409,7 @@ function main() {
         downloadFile('application/json', 'score.likely.json',
             JSON.stringify(collectGraphData(nodeData, edgeData)));
 
-    document.getElementById('import-score').onclick = handleImport;
+    document.getElementById('upload-score').addEventListener('change',handleImport);
 
     document.getElementById('show-starting-node').onclick = showStartingNode;
     document.getElementById('set-starting-node').onclick = setStartingNode;