Added layout template.

frontend/src/index.css

@@ -6,7 +6,7 @@
 
 body {
     margin: 0;
-    padding: 1em;
+    padding: 0;
     font-family: sans-serif;
     background-color: #FCC5A2;
 }

frontend/src/index.js

@@ -1,7 +1,8 @@
+import registerServiceWorker from './registerServiceWorker';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import registerServiceWorker from './registerServiceWorker';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
 
 import './index.css';
 import './range.css';
@@ -19,19 +20,26 @@ import getSimulatorProps from './controller/simulator';
 
 registerServiceWorker();
 
-const render = () => ReactDOM.render(router(), document.getElementById('root'));
-
 let clientProps, adminProps, simulatorProps;
 
+const render = () => ReactDOM.render(router(), document.getElementById('root'));
+
+let routeSwitch = (
+    <Switch>
+        <Route path="/" exact render={() => <Redirect to="/client" />} />
+        <Route path="/client" render={(routeProps) => <Client {...routeProps} {...clientProps || (clientProps = getClientProps(render))} />} />
+        <Route path="/admin" render={(routeProps) => <Admin {...routeProps} {...adminProps || (adminProps = getAdminProps(render))} />} />
+        <Route path="/simulator" render={(routeProps) => <Simulator {...routeProps} {...simulatorProps || (simulatorProps = getSimulatorProps(render))} />} />
+    </Switch>
+);
+
 const router = () => {
-    return <HashRouter>
-        <Switch>
-            <Route path="/" exact component={App} />
-            <Route path="/client" render={(routeProps) => <Client {...routeProps} {...clientProps || (clientProps = getClientProps(render))} />} />
-            <Route path="/admin" render={(routeProps) => <Admin {...routeProps} {...adminProps || (adminProps = getAdminProps(render))} />} />
-            <Route path="/simulator" render={(routeProps) => <Simulator {...routeProps} {...simulatorProps || (simulatorProps = getSimulatorProps(render))} />} />
-        </Switch>
-    </HashRouter>
+    return (
+        <HashRouter>
+            <App routeSwitch={routeSwitch} />
+        </HashRouter>
+    );
 };
 
 render();
+

frontend/src/view/admin.js

@@ -73,6 +73,10 @@ class Admin extends React.Component {
             }
         });
     }
+    componentWillUnmount() {
+        this.ws.onclose = () => {};
+        this.ws.close();
+    }
     doHello() {
         this.ws.send(JSON.stringify({type: 'hello_admin', password: this.state.password }));
     }

frontend/src/view/app.css

@@ -0,0 +1,28 @@
+nav ul {
+    display: flex;
+    background-color: #023756;
+}
+
+nav li {
+    list-style-type: none;
+    border: 1px solid #F17A6B;
+    border-radius: 1em 1em 0 0;
+    border-bottom: none;
+    background-color: #FCC5A2;
+}
+
+nav li a {
+    padding: 1em 1em .5em;
+    display: block;
+    width: 100%;
+    height: 100%;
+    outline: none;
+}
+
+nav li a[aria-current="false"] {
+    border-bottom: 1px solid #F17A6B;
+}
+
+main {
+    padding: 1em;
+}

frontend/src/view/app.js

@@ -1,21 +1,30 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink, Link } from 'react-router-dom';
+
+import './app.css';
 
 class App extends React.Component {
     render() {
         return (
             <div>
-                <ul>
-                    <li>
-                        <Link to="/admin">Admin</Link>
-                    </li>
-                    <li>
-                        <Link to="/client">Client</Link>
-                    </li>
-                    <li>
-                        <Link to="/simulator">Simulator</Link>
-                    </li>
-                </ul>
+                <header>
+                    <nav>
+                        <ul>
+                            <li>
+                                <NavLink to="/admin">Admin</NavLink>
+                            </li>
+                            <li>
+                                <NavLink to="/client">Client</NavLink>
+                            </li>
+                            <li>
+                                <NavLink to="/simulator">Simulator</NavLink>
+                            </li>
+                        </ul>
+                    </nav>
+                </header>
+                <main>
+                    {this.props.routeSwitch}
+                </main>
             </div>
         );
     }

package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "debug": "npm-run-all --parallel frontend debug-server",
+    "debug": "npm-run-all --parallel debug-frontend debug-server",
     "debug-server": "nodemon --inspect-brk=0.0.0.0:9229 ./index.js",
     "debug-frontend": "cd ./frontend && yarn install && yarn run start",
     "start": "npm-run-all --parallel frontend server",