refactor: App/Humus

packages/http/src/components/app/index.jsx

@@ -1,14 +1,57 @@
 import '@humus/scss/reset.scss';
 import './index.scss';
 
-import {React} from '@latus/react';
+import {hot} from 'react-hot-loader';
 
-import Humus from '../humus';
+import {PropTypes, React} from '@latus/react';
+import {ConnectedRouter} from 'connected-react-router';
+import {
+  Redirect,
+  Route,
+  Switch,
+} from 'react-router-dom';
+
+import useIsNative from '../../hooks/use-is-native';
+
+import Login from '../login';
+import Play from '../play';
+import Renderer from '../renderer';
+import Title from '../title';
+import Ui from '../ui';
+import Universe from '../universe';
 
 import history from './history';
 
-export default () => (
+const WIDTH = 1600;
-  <>
+const HEIGHT = 900;
-    <Humus history={history} />
+
-  </>
+const isLoggedIn = true;
-);
+
+const Humus = () => {
+  const isNative = useIsNative();
+  return (
+    <div className="humus">
+      <ConnectedRouter history={history}>
+        <Renderer />
+        <Ui width={WIDTH} height={HEIGHT}>
+          <Switch>
+            <Route path="/login">
+              {isLoggedIn ? <Redirect to="/title" /> : Login}
+            </Route>
+            <Route path="/universe/:uuid/play" component={Play} />
+            <Route path={['/universe/:uuid', '/universe']} component={Universe} />
+            {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
+          </Switch>
+        </Ui>
+        <Route exact path="/">
+          <Redirect to="/title" />
+        </Route>
+        {!isLoggedIn && <Redirect to="/login" />}
+      </ConnectedRouter>
+    </div>
+  );
+};
+
+Humus.propTypes = {};
+
+export default hot(module)(Humus);

packages/http/src/components/app/index.scss

@@ -9,6 +9,7 @@ html {
   --thick-title-font-family: LatoRegular, Ubuntu, "Droid Sans", sans-serif;
 }
 body {
+  margin: 0;
   scrollbar-width: thin;
   scrollbar-color: #777 #333;
 }
@@ -200,6 +201,29 @@ select {
   color: $color-muted;
 }
 
+.humus {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  width: 100vw;
+}
+
+.back {
+  color: white;
+  font-family: var(--thick-title-font-family);
+  font-size: 1.5em;
+  position: absolute;
+  left: 3em;
+  text-decoration: none;
+  top: 3em;
+  -webkit-text-stroke: 0.25px black;
+}
+
+.back__arrow {
+  letter-spacing: -0.25em;
+  margin-right: 0.25em;
+}
+
 @font-face {
   font-family: 'LatoLight';
   src: url('./fonts/Lato-Light.eot');

packages/http/src/components/humus.jsx

@@ -1,56 +0,0 @@
-import './humus.scss';
-
-import {hot} from 'react-hot-loader';
-
-import {PropTypes, React} from '@latus/react';
-import {ConnectedRouter} from 'connected-react-router';
-import {
-  Redirect,
-  Route,
-  Switch,
-} from 'react-router-dom';
-
-import useIsNative from '../hooks/use-is-native';
-
-import Login from './login';
-import Play from './play';
-import Renderer from './renderer';
-import Title from './title';
-import Ui from './ui';
-import Universe from './universe';
-
-const WIDTH = 1600;
-const HEIGHT = 900;
-
-const isLoggedIn = true;
-
-const Humus = ({history}) => {
-  const isNative = useIsNative();
-  return (
-    <div className="humus">
-      <ConnectedRouter history={history}>
-        <Renderer />
-        <Ui width={WIDTH} height={HEIGHT}>
-          <Switch>
-            <Route path="/login">
-              {isLoggedIn ? <Redirect to="/title" /> : Login}
-            </Route>
-            <Route path="/universe/:uuid/play" component={Play} />
-            <Route path={['/universe/:uuid', '/universe']} component={Universe} />
-            {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
-          </Switch>
-        </Ui>
-        <Route exact path="/">
-          <Redirect to="/title" />
-        </Route>
-        {!isLoggedIn && <Redirect to="/login" />}
-      </ConnectedRouter>
-    </div>
-  );
-};
-
-Humus.propTypes = {
-  history: PropTypes.shape({}).isRequired,
-};
-
-export default hot(module)(Humus);

packages/http/src/components/humus.scss

@@ -1,26 +0,0 @@
-body {
-  margin: 0;
-}
-
-.humus {
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-  width: 100vw;
-}
-
-.back {
-  color: white;
-  font-family: var(--thick-title-font-family);
-  font-size: 1.5em;
-  position: absolute;
-  left: 3em;
-  text-decoration: none;
-  top: 3em;
-  -webkit-text-stroke: 0.25px black;
-}
-
-.back__arrow {
-  letter-spacing: -0.25em;
-  margin-right: 0.25em;
-}