refactor: hooks

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

@@ -3,9 +3,9 @@ import './index.scss';
 
 import {hot} from 'react-hot-loader';
 
-// import {Universe} from '@humus/universe';
 import {
   React,
+  useLatus,
 } from '@latus/react';
 import {ConnectedRouter} from 'connected-react-router';
 import {
@@ -14,7 +14,6 @@ import {
   Switch,
 } from 'react-router-dom';
 
-import useIsNative from '../../hooks/use-is-native';
 import Ui from '../valent-ui';
 
 import Login from './login';
@@ -25,7 +24,11 @@ import history from './history';
 const isLoggedIn = true;
 
 const Humus = () => {
-  const isNative = useIsNative();
+  const latus = useLatus();
+  const Components = Object.entries(latus.invoke('@humus/core/components'))
+    .map(([path, Component]) => (
+      <Component key={path} />
+    ));
   return (
     <div className="humus">
       <ConnectedRouter history={history}>
@@ -33,14 +36,19 @@ const Humus = () => {
           <Route path="/login">
             {isLoggedIn ? <Redirect to="/title" /> : Login}
           </Route>
-          {/* <Universe width={WIDTH} height={HEIGHT} /> */}
           <Ui>
-            {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
+            <Route exact path="/title">
+              <Title />
+            </Route>
           </Ui>
         </Switch>
+        {Components}
         <Route exact path="/">
           <Redirect to="/title" />
         </Route>
+        <Route path="/title">
+          <Redirect to="/title" />
+        </Route>
         {!isLoggedIn && <Redirect to="/login" />}
       </ConnectedRouter>
     </div>

packages/core/src/components/app/title/index.jsx

@@ -1,36 +1,26 @@
 import './index.scss';
 
-import {React} from '@latus/react';
-
 import {
-  Redirect,
-  Route,
-  Switch,
-} from 'react-router-dom';
+  React,
+  useLatus,
+} from '@latus/react';
 
-// import Local from './local';
-import Main from './main';
-// import Remote from './remote';
-
-const Title = () => (
-  <div className="title">
-    <div className="title__muted">
-      <Switch>
-        <Route path="/title/main">
-          <Main />
-        </Route>
-        {/* <Route path="/title/local">
-          <Local />
-        </Route>
-        <Route path="/title/remote">
-          <Remote />
-        </Route> */}
-        <Route path={['/title', '/title/*']}>
-          <Redirect to="/title/main" />
-        </Route>
-      </Switch>
+const Title = () => {
+  const latus = useLatus();
+  const Items = Object.entries(latus.invoke('@humus/core/title'))
+    .map(([path, Component]) => (
+      <Component key={path} />
+    ));
+  return (
+    <div className="title">
+      <div className="title__muted">
+        <h1 className="title__title">{latus.get('@latus/http.title')}</h1>
+        <ul className="title__actions">
+          {Items}
+        </ul>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Title;

packages/core/src/components/app/title/index.scss

@@ -12,3 +12,42 @@
   position: absolute;
   width: 100%;
 }
+
+.title__title {
+  font-family: var(--rooted-font-family);
+  font-size: 12em;
+  left: 25%;
+  letter-spacing: 0.5rem;
+  position: absolute;
+  text-align: center;
+  --shadow-color: brown;
+  text-shadow:
+    0px -1px 0px var(--shadow-color),
+    1px 0px 0px var(--shadow-color),
+    0px 1px 0px var(--shadow-color),
+    -1px 0px 0px var(--shadow-color);
+  top: 7.5rem;
+  -webkit-text-stroke: 0.25px black;
+  width: 50%;
+}
+
+.title__actions {
+  font-family: var(--thick-title-font-family);
+  position: absolute;
+  top: 66%;
+  transform: translate(-50%, -50%);
+  left: 50%;
+}
+
+.title__action {
+  margin: 2em 0;
+}
+
+.title__button {
+  display: block;
+  font-size: 3em;
+  padding: 0.5em 1.5em;
+  width: 100%;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}

packages/core/src/components/app/title/main/index.jsx

@@ -1,28 +0,0 @@
-import './index.scss';
-
-import {
-  React,
-  useLatus,
-} from '@latus/react';
-import {
-  Link,
-} from 'react-router-dom';
-
-const Main = () => {
-  const latus = useLatus();
-  return (
-    <div className="title-main">
-      <h1 className="title-main__title">{latus.get('@latus/http.title')}</h1>
-      <ul className="title-main__actions">
-        <li className="title-main__action">
-          <Link to="/title/local" className="button title-main__button">Local play</Link>
-        </li>
-        <li className="title-main__action">
-          <Link to="/title/remote" className="button title-main__button">Remote play</Link>
-        </li>
-      </ul>
-    </div>
-  );
-};
-
-export default Main;

packages/core/src/components/app/title/main/index.scss

@@ -1,38 +0,0 @@
-.title-main__title {
-  font-family: var(--rooted-font-family);
-  font-size: 12em;
-  left: 25%;
-  letter-spacing: 0.5rem;
-  position: absolute;
-  text-align: center;
-  --shadow-color: brown;
-  text-shadow:
-    0px -1px 0px var(--shadow-color),
-    1px 0px 0px var(--shadow-color),
-    0px 1px 0px var(--shadow-color),
-    -1px 0px 0px var(--shadow-color);
-  top: 7.5rem;
-  -webkit-text-stroke: 0.25px black;
-  width: 50%;
-}
-
-.title-main__actions {
-  font-family: var(--thick-title-font-family);
-  position: absolute;
-  top: 66%;
-  transform: translate(-50%, -50%);
-  left: 50%;
-}
-
-.title-main__action {
-  margin: 2em 0;
-}
-
-.title-main__button {
-  display: block;
-  font-size: 3em;
-  padding: 0.5em 1.5em;
-  width: 100%;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.5);
-}

packages/universe/src/client/index.js

@@ -1,9 +1,13 @@
 import {gatherWithLatus} from '@latus/core';
 
 import Receiver from './receiver';
+import Universe from '../components';
+import Title from '../components/title';
 
 export default {
   hooks: {
+    '@humus/core/components': () => Universe,
+    '@humus/core/title': () => Title,
     '@latus/http/client/up': (latus) => {
       window.latus = latus;
       const Synchronizer = Receiver(latus);

packages/universe/src/components/index.jsx

@@ -1,6 +1,7 @@
-import {Ui} from '@humus/core';
+import {Ui, useIsNative} from '@humus/core';
 import {React} from '@latus/react';
 import {
+  Redirect,
   Route,
   Switch,
 } from 'react-router-dom';
@@ -8,20 +9,30 @@ import {
 import Overview from './overview';
 import PlayRenderable from './play/renderable';
 import PlayUi from './play/ui';
+import Local from './title/local';
+import Remote from './title/remote';
 
-const Universe = () => (
-  <Route path="/universe">
-    <Switch>
-      <Route path="/universe/:uuid/play" component={PlayRenderable} />
-    </Switch>
-    <Ui>
-      <Switch>
-        <Route path="/universe/:uuid/play" component={PlayUi} />
-        <Route path={['/universe/:uuid', '/universe']} component={Overview} />
-      </Switch>
-    </Ui>
-  </Route>
-);
+const Universe = () => {
+  const isNative = useIsNative();
+  return (
+    <>
+      <Route exact path="/title/local" component={Local} />
+      <Route exact path="/title/remote" component={Remote} />
+      {!isNative && <Redirect to="/universe" />}
+      <Route path="/universe">
+        <Switch>
+          <Route path="/universe/:uuid/play" component={PlayRenderable} />
+        </Switch>
+        <Ui>
+          <Switch>
+            <Route path="/universe/:uuid/play" component={PlayUi} />
+            <Route path={['/universe/:uuid', '/universe']} component={Overview} />
+          </Switch>
+        </Ui>
+      </Route>
+    </>
+  );
+};
 
 Universe.propTypes = {};
 

packages/universe/src/components/title/index.jsx

@@ -0,0 +1,19 @@
+import {
+  React,
+} from '@latus/react';
+import {
+  Link,
+} from 'react-router-dom';
+
+const Title = () => (
+  <>
+    <li className="title__action">
+      <Link to="/title/local" className="button title__button">Local play</Link>
+    </li>
+    <li className="title__action">
+      <Link to="/title/remote" className="button title__button">Remote play</Link>
+    </li>
+  </>
+);
+
+export default Title;

packages/universe/src/components/title/local/index.jsx

@@ -11,7 +11,7 @@ const Local = () => (
   <div className="local">
     <Link
       className="back"
-      to="/title/main"
+      to="/title"
     >
       <span className="back__arrow">&lt;-</span>
       {' '}

packages/universe/src/components/title/remote/index.jsx

@@ -11,7 +11,7 @@ const Remote = () => (
   <div className="remote">
     <Link
       className="back"
-      to="/title/main"
+      to="/title"
     >
       <span className="back__arrow">&lt;-</span>
       {' '}

packages/universe/src/components/title/universes/index.jsx

@@ -1,9 +1,9 @@
 import './index.scss';
 
-import {universesByLocalitySelector} from '@humus/universe';
 import {useSelector} from '@latus/redux';
 import {PropTypes, React} from '@latus/react';
 
+import {universesByLocalitySelector} from '../../../state';
 import Universe from './universe';
 
 const Universes = ({isLocal}) => {

packages/universe/src/index.js

@@ -2,8 +2,6 @@ import {gatherWithLatus} from '@latus/core';
 
 import {universes} from './state';
 
-export {default as Universe} from './components';
-
 export * from './state';
 
 export default {