Added partial README. Interesting color scheme. Better

Draggables.

README.md

@@ -0,0 +1,11 @@
+web-audio-stream-sync
+=====================
+
+Takes multiple OGG files, and allows remotely playing them with different pan and gain settings on different clients.
+
+
+
+Prerequisites
+---------------------------
+
+

frontend/package.json

@@ -7,6 +7,7 @@
     "react": "^16.3.2",
     "react-canvas-knob": "^0.5.0",
     "react-dom": "^16.3.2",
+    "react-draggable": "^3.0.5",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4",

frontend/src/admin.js

@@ -223,7 +223,7 @@ class Admin extends React.Component {
                                         )}
                                     </ul>
                                 </li>
-                            ) : <li><h2><strong>No clients connected! Open up another browser to the homepage and click the Client link.</strong></h2></li>}
+                            ) : <li><h2><strong>No clients connected! Open up another browser to the homepage and click the Client link, or create virtual clients in the Simulator.</strong></h2></li>}
                         </ul>
                     </div>
                     )

frontend/src/index.css

@@ -5,9 +5,14 @@
 }
 
 body {
-  margin: 0;
+    margin: 0;
-  padding: 1em;
+    padding: 1em;
-  font-family: sans-serif;
+    font-family: sans-serif;
+    background-color: #FCC5A2;
+}
+
+body, button {
+    color: #00173D;
 }
 
 input[type="range"] {
@@ -20,5 +25,7 @@ button {
     height: 75px;
     margin: .5em;
     border-radius: .5em;
+    background-color: #F0957D;
+    border-color: #F17A6B;
 }
 

frontend/src/index.js

@@ -83,10 +83,6 @@ const getProps = () => {
         let context = new AudioContext();
 
         const createClient = () => {
-            let clickedX = 0;
-            let clickedY = 0;
-            let down = false;
-
             let mixerNode = null;
 
             let options = {
@@ -145,23 +141,9 @@ const getProps = () => {
                 clientId: 0,
                 x: 0,
                 y: 0,
-                onMouseDown: (evt) => {
+                onDrag: (evt, data) => {
-                    down = true;
+                    updateX(data.x);
-                    clickedX = evt.clientX;
+                    updateY(data.y);
-                    clickedY = evt.clientY;
-                },
-                onMouseUp: () => {
-                    down = false;
-                },
-                onMouseMove: (evt) => {
-                    if(down) {
-                        updateX(client.x + evt.clientX - clickedX);
-                        updateY(client.y + evt.clientY - clickedY);
-                        
-                        clickedX = evt.clientX;
-                        clickedY = evt.clientY;
-                    }
-                    
                     render();
                 },
                 onChangeName: (name) => {
@@ -197,37 +179,19 @@ const getProps = () => {
             context.listener.positionZ.value = 250 - newY;
         }
 
-        let clickedX = 0;
-        let clickedY = 0;
-        let down = false;
-        
         let simulator = {
             clients: clients,
             passwordSubmitted: false,
             password: '',
             listenerX: 250,
             listenerY: 250,
-            onNewMixerNode: () => {
+            onDrag: (evt, data) => {
-                clients.push(createClient());
+                updateX(data.x);
+                updateY(data.y);
                 render();
             },
-            onMouseDown: (evt) => {
+            onNewMixerNode: () => {
-                down = true;
+                clients.push(createClient());
-                clickedX = evt.clientX;
-                clickedY = evt.clientY;
-            },
-            onMouseUp: () => {
-                down = false;
-            },
-            onMouseMove: (evt) => {
-                if(down) {
-                    updateX(simulator.listenerX + evt.clientX - clickedX);
-                    updateY(simulator.listenerY + evt.clientY - clickedY);
-            
-                    clickedX = evt.clientX;
-                    clickedY = evt.clientY;
-                }
-            
                 render();
             },
             onSubmitPassword: (password) => doHello(password),

frontend/src/simulator.css

@@ -1,10 +1,11 @@
-.grid {
+.room {
     position: relative;
     width: 500px;
     height: 500px;
-    background-color: #bbb;
+    background-color: #023756;
     border-radius: 1em;
-    z-index: -2;
+    border: 2px solid #00173D;
+    z-index: 0;
 }
 
 .speaker::before {
@@ -30,27 +31,28 @@
     border-radius: 3em;
     vertical-align: bottom;
     text-align: center;
+    z-index: 2;
 }
 
-.head::before {
+.listener::before {
     content: "";
     mask-image: url('../node_modules/material-design-icons/av/svg/design/ic_hearing_24px.svg');
     mask-repeat: none;
     mask-size: contain;
-    background-color: #fb9;
+    background-color: #F17A6B;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
+    z-index: -1;
 }
 
-.head {
+.listener {
     position: absolute;
-    top: 250px;
-    left: 250px;
     width: 3em;
     height: 3em;
-    background-color: #f00;
+    background-color: #A2F9FC;
     border-radius: 1.5em;
+    z-index: 2;
 }

frontend/src/simulator.js

@@ -1,6 +1,7 @@
 import BufferClient from './buffer-client.js';
 import BufferClientBackend from './buffer-client-backend.js';
 import React from 'react';
+import Draggable from 'react-draggable';
 
 import './simulator.css';
 import 'material-design-icons/sprites/svg-sprite/svg-sprite-hardware.css';
@@ -15,6 +16,11 @@ class Simulator extends React.Component {
                 <h1>
                     Simulator
                 </h1>
+                <p>
+                    Add virtual clients here, and go to the admin page to control them. Moving them around
+                    the room will allow you to change how they would sound to the listener (you). The listener's
+                    location is represented by the ear icon, and can also be moved around the room.
+                </p>
                 <button onClick={ () => this.props.onNewMixerNode() }>
                     Create new client
                 </button>
@@ -25,12 +31,17 @@ class Simulator extends React.Component {
                             Submit
                         </button>
                     </div> : null}
-                <div className="grid">
+                <h2>Virtual Room</h2>
-                    <div className="head" style={{ top: this.props.listenerY, left: this.props.listenerX }} onMouseMove={this.props.onMouseMove} onMouseUp={this.props.onMouseUp} onMouseDown={this.props.onMouseDown} />
+                <div className="room">
+                    <Draggable position={{ x: this.props.listenerX, y: this.props.listenerY }} onDrag={this.props.onDrag}>
+                        <div className="listener" />
+                    </Draggable>
                     {this.props.clients.map(client => 
-                        <div key={client.clientId} onMouseOut={client.onMouseMove} onMouseMove={client.onMouseMove} onMouseDown={client.onMouseDown} onMouseUp={client.onMouseUp} className="speaker" style={{ top: client.y , left: client.x }}>
+                        <Draggable position={{ x: client.x, y: client.y }} key={client.clientId} onDrag={client.onDrag}>
-                            {client.name || client.clientId}
+                            <div className="speaker">
-                        </div>
+                                {client.name || client.clientId}
+                            </div>
+                        </Draggable>
                     )}
                 </div>
                 <div className="clients">

frontend/yarn.lock

@@ -1425,6 +1425,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
@@ -5591,6 +5595,13 @@ react-dom@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-draggable@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.0.5.tgz#c031e0ed4313531f9409d6cd84c8ebcec0ddfe2d"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"