From 6bec013dddc62ac1c17922d63b9b49e28cc38770 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Wed, 23 Mar 2022 15:47:24 -0500
Subject: [PATCH] refactor: YAGNI

---
 package.json                                  |   1 -
 packages/app/package.json                     |   9 +-
 packages/app/src/components/app/index.jsx     |  97 ++++++++---
 .../{title/index.scss => index.module.scss}   |  16 +-
 .../app/src/components/app/login/index.jsx    |  19 ++-
 .../components/app/login/index.module.scss    |  67 ++++++++
 .../components/app}/overview/cave-mouth.jpg   | Bin
 .../src/components/app}/overview/index.jsx    |  73 +++------
 .../app/overview/index.module.scss}           |  26 ++-
 .../app/src/components/app/play/index.jsx     |  23 +++
 .../components/app/play/index.module.scss}    |   0
 .../components/app}/play/renderable/index.jsx |   3 +-
 .../app}/play/renderable/index.scss           |   0
 .../components/app}/play/ui/hotbar/index.jsx  |   0
 .../components/app}/play/ui/hotbar/index.scss |   2 +-
 .../src/components/app}/play/ui/index.jsx     |  18 +-
 .../src/components/app/play/ui}/index.scss    |   0
 .../app}/play/ui/item-slot/index.jsx          |   0
 .../app}/play/ui/item-slot/index.scss         |   2 +-
 .../src/components/app/{title => }/rooted.jpg | Bin
 .../app/{ => scss}/fonts/Lato-Light.eot       | Bin
 .../app/{ => scss}/fonts/Lato-Light.ttf       | Bin
 .../app/{ => scss}/fonts/Lato-Light.woff      | Bin
 .../app/{ => scss}/fonts/Lato-Regular.eot     | Bin
 .../app/{ => scss}/fonts/Lato-Regular.ttf     | Bin
 .../app/{ => scss}/fonts/Lato-Regular.woff    | Bin
 .../app/{ => scss}/fonts/Rooted.eot           | Bin
 .../app/{ => scss}/fonts/Rooted.ttf           | Bin
 .../app/{ => scss}/fonts/Rooted.woff          | Bin
 .../app/{ => scss}/fonts/dialogue.ttf         | Bin
 .../{ => scss}/fonts/joystix-monospace.ttf    | Bin
 .../src/components/app/scss}/graphics.scss    |   0
 .../src/components/app/{ => scss}/index.scss  | 155 +-----------------
 .../src/components/app/scss}/reset.scss       |   0
 .../app/src/components/app/title/index.jsx    |  24 ---
 packages/app/src/hooks/index.js               |   1 -
 packages/app/src/hooks/use-is-native.js       |   3 -
 packages/app/src/index.js                     |   5 +-
 packages/core/package.json                    |   1 -
 packages/scss/.gitignore                      | 116 -------------
 packages/scss/build/fleck.neutrinorc.js       |  32 ----
 packages/scss/package.json                    |  36 ----
 packages/scss/src/colors.scss                 |   4 -
 packages/scss/src/index.js                    |   1 -
 packages/universe/package.json                |   8 -
 packages/universe/src/components/index.jsx    |  50 ------
 .../universe/src/components/title/index.jsx   |  17 --
 .../src/components/title/local/index.jsx      |  32 ----
 .../src/components/title/local/index.scss     |  23 ---
 .../src/components/title/remote/index.jsx     |  32 ----
 .../src/components/title/remote/index.scss    |  23 ---
 .../src/components/title/universes/index.jsx  |  24 ---
 .../title/universes/universe/index.jsx        |  45 -----
 .../title/universes/universe/index.scss       |  27 ---
 packages/universe/src/index.js                |   4 -
 55 files changed, 251 insertions(+), 768 deletions(-)
 rename packages/app/src/components/app/{title/index.scss => index.module.scss} (86%)
 create mode 100644 packages/app/src/components/app/login/index.module.scss
 rename packages/{universe/src/components => app/src/components/app}/overview/cave-mouth.jpg (100%)
 rename packages/{universe/src/components => app/src/components/app}/overview/index.jsx (52%)
 rename packages/{universe/src/components/overview/index.scss => app/src/components/app/overview/index.module.scss} (70%)
 create mode 100644 packages/app/src/components/app/play/index.jsx
 rename packages/{universe/src/components/play/ui/index.scss => app/src/components/app/play/index.module.scss} (100%)
 rename packages/{universe/src/components => app/src/components/app}/play/renderable/index.jsx (97%)
 rename packages/{universe/src/components => app/src/components/app}/play/renderable/index.scss (100%)
 rename packages/{universe/src/components => app/src/components/app}/play/ui/hotbar/index.jsx (100%)
 rename packages/{universe/src/components => app/src/components/app}/play/ui/hotbar/index.scss (94%)
 rename packages/{universe/src/components => app/src/components/app}/play/ui/index.jsx (93%)
 rename packages/{universe/src/components/title/universes => app/src/components/app/play/ui}/index.scss (100%)
 rename packages/{universe/src/components => app/src/components/app}/play/ui/item-slot/index.jsx (100%)
 rename packages/{universe/src/components => app/src/components/app}/play/ui/item-slot/index.scss (96%)
 rename packages/app/src/components/app/{title => }/rooted.jpg (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Light.eot (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Light.ttf (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Light.woff (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Regular.eot (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Regular.ttf (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Lato-Regular.woff (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Rooted.eot (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Rooted.ttf (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/Rooted.woff (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/dialogue.ttf (100%)
 rename packages/app/src/components/app/{ => scss}/fonts/joystix-monospace.ttf (100%)
 rename packages/{scss/src => app/src/components/app/scss}/graphics.scss (100%)
 rename packages/app/src/components/app/{ => scss}/index.scss (51%)
 rename packages/{scss/src => app/src/components/app/scss}/reset.scss (100%)
 delete mode 100644 packages/app/src/components/app/title/index.jsx
 delete mode 100644 packages/app/src/hooks/use-is-native.js
 delete mode 100644 packages/scss/.gitignore
 delete mode 100644 packages/scss/build/fleck.neutrinorc.js
 delete mode 100644 packages/scss/package.json
 delete mode 100644 packages/scss/src/colors.scss
 delete mode 100644 packages/scss/src/index.js
 delete mode 100644 packages/universe/src/components/index.jsx
 delete mode 100644 packages/universe/src/components/title/index.jsx
 delete mode 100644 packages/universe/src/components/title/local/index.jsx
 delete mode 100644 packages/universe/src/components/title/local/index.scss
 delete mode 100644 packages/universe/src/components/title/remote/index.jsx
 delete mode 100644 packages/universe/src/components/title/remote/index.scss
 delete mode 100644 packages/universe/src/components/title/universes/index.jsx
 delete mode 100644 packages/universe/src/components/title/universes/universe/index.jsx
 delete mode 100644 packages/universe/src/components/title/universes/universe/index.scss

diff --git a/package.json b/package.json
index 51770ce..da5e2f7 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "@humus/core": "^2.0.0",
     "@humus/farm": "^2.0.0",
     "@humus/inventory": "^2.0.0",
-    "@humus/scss": "^2.0.0",
     "@humus/universe": "^2.0.0",
     "@inlet/react-pixi": "^6.0.7",
     "pg": "^8.7.3",
diff --git a/packages/app/package.json b/packages/app/package.json
index e569672..272fe95 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -27,13 +27,18 @@
     "test.js.map"
   ],
   "dependencies": {
+    "@avocado/graphics": "^3.0.0",
+    "@avocado/input": "^3.0.0",
+    "@avocado/math": "^3.0.0",
+    "@avocado/react": "^3.0.0",
+    "@avocado/timing": "^3.0.0",
+    "@avocado/topdown": "^3.0.0",
     "@flecks/core": "^1.4.1",
     "@flecks/react": "^1.4.1",
     "@flecks/redux": "^1.4.1",
     "@flecks/socket": "^1.4.1",
     "@flecks/user": "^1.4.1",
-    "@humus/scss": "^2.0.0",
-    "is-electron": "^2.2.0"
+    "@humus/inventory": "^2.0.0"
   },
   "devDependencies": {
     "@flecks/fleck": "^1.4.1"
diff --git a/packages/app/src/components/app/index.jsx b/packages/app/src/components/app/index.jsx
index 8f2c596..4d3d9ac 100644
--- a/packages/app/src/components/app/index.jsx
+++ b/packages/app/src/components/app/index.jsx
@@ -1,41 +1,86 @@
-import './index.scss';
-
 import {
+  classnames,
   hot,
-  PropTypes,
   React,
 } from '@flecks/react';
 import {
-  Navigate,
+  Link,
   Outlet,
-  Routes,
+  Routes as ReactRouterRoutes,
   Route,
 } from '@flecks/react/router';
+import {useSelector} from '@flecks/redux';
+import {userIdSelector} from '@flecks/user';
 
 import Ui from '../valent-ui';
+import Login from './login';
+import Overview from './overview';
+import Play from './play';
 
-import Title from './title';
+import './scss/index.scss';
+import styles from './index.module.scss';
 
-const UiWrapped = () => (
-  <Ui><Outlet /></Ui>
-);
-
-const Humus = ({Components}) => (
-  <div className="humus">
-    <Routes>
-      <Route path="/title" element={<UiWrapped />}>
-        <Route index element={<Title />} />
+const Persea = () => {
+  const userId = useSelector(userIdSelector);
+  return (
+    <ReactRouterRoutes>
+      <Route
+        element={(
+          <Ui>
+            <Outlet />
+          </Ui>
+        )}
+      >
+        <Route
+          element={(
+            <div className={styles.title}>
+              <div className={styles.muted}>
+                <Link to="/"><h1 className={styles.heading}>Humus</h1></Link>
+                <ul className={styles.actions}><Outlet /></ul>
+              </div>
+            </div>
+          )}
+        >
+          <Route
+            path="/"
+            element={(
+              <>
+                {
+                  userId === 0
+                    ? (
+                      <li className={styles.action}>
+                        <Link to="/login" className={classnames('button', styles.button)}>
+                          Log in
+                        </Link>
+                      </li>
+                    )
+                    : (
+                      <li className={styles.action}>
+                        <Link to="/overview" className={classnames('button', styles.button)}>
+                          Play
+                        </Link>
+                      </li>
+                    )
+                }
+              </>
+            )}
+          />
+          <Route
+            path="/login"
+            element={<li><Login /></li>}
+          />
+        </Route>
+        <Route
+          path="/overview"
+          element={<Overview />}
+        />
+        <Route
+          path="/play"
+          element={<Play />}
+        />
       </Route>
-      <Route path="/title/*" element={<></>} />
-      <Route path="/universe/*" element={<></>} />
-      <Route path="*" element={<Navigate to="/title" />} />
-    </Routes>
-    {Components}
-  </div>
-);
-
-Humus.propTypes = {
-  Components: PropTypes.arrayOf(PropTypes.node).isRequired,
+    </ReactRouterRoutes>
+  );
 };
 
-export default hot(module)(Humus);
+export default hot(module)(Persea);
diff --git a/packages/app/src/components/app/title/index.scss b/packages/app/src/components/app/index.module.scss
similarity index 86%
rename from packages/app/src/components/app/title/index.scss
rename to packages/app/src/components/app/index.module.scss
index a1811c4..4bb5146 100644
--- a/packages/app/src/components/app/title/index.scss
+++ b/packages/app/src/components/app/index.module.scss
@@ -6,14 +6,15 @@
   width: 100%;
 }
 
-.title__muted {
-  background-color: rgba(0, 0, 0, 0.5);
+.muted {
+  background-color: rgba(0, 0, 0, 0.6);
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
-.title__title {
+.heading {
+  color: white;
   font-family: var(--rooted-font-family);
   font-size: 12em;
   left: 25%;
@@ -31,19 +32,20 @@
   width: 50%;
 }
 
-.title__actions {
+.actions {
   font-family: var(--thick-title-font-family);
   position: absolute;
-  top: 66%;
+  top: 55%;
   transform: translate(-50%, -50%);
   left: 50%;
+  width: 30%;
 }
 
-.title__action {
+.action {
   margin: 2em 0;
 }
 
-.title__button {
+.button[class] {
   display: block;
   font-size: 3em;
   padding: 0.5em 1.5em;
diff --git a/packages/app/src/components/app/login/index.jsx b/packages/app/src/components/app/login/index.jsx
index 06270e6..49030c0 100644
--- a/packages/app/src/components/app/login/index.jsx
+++ b/packages/app/src/components/app/login/index.jsx
@@ -1,9 +1,20 @@
 import {React} from '@flecks/react';
-
 import {UserLocalLogin} from '@flecks/user/local/client';
 
-const Login = () => (
-  <UserLocalLogin />
-);
+import styles from './index.module.scss';
+
+function Login() {
+  return (
+    <div className={styles.login}>
+      <UserLocalLogin />
+    </div>
+  );
+}
+
+Login.defaultProps = {};
+
+Login.displayName = 'Login';
+
+Login.propTypes = {};
 
 export default Login;
diff --git a/packages/app/src/components/app/login/index.module.scss b/packages/app/src/components/app/login/index.module.scss
new file mode 100644
index 0000000..5a08592
--- /dev/null
+++ b/packages/app/src/components/app/login/index.module.scss
@@ -0,0 +1,67 @@
+.login {
+  font-size: 1.5em;
+  margin: auto;
+  position: relative;
+  top: 2em;
+
+  form {
+    background-color: rgba(0, 0, 0, 0.5);
+    border: 1px solid #555;
+    border-radius: 10px;
+    padding: 0.75rem 0.5rem;
+
+    input {
+      border-radius: 5px;
+    }
+
+    input[type="password"],
+    input[type="text"] {
+      width: 100%;
+    }
+
+    input[type="submit"] {
+      background-color: var(--color-active);
+      font-size: 1em;
+      width: 100%;
+    }
+
+    label {
+      display: block;
+    }
+
+    label > span {
+      display: block;
+      margin-bottom: 1em;
+    }
+
+    div {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      [type="checkbox"] {
+        margin-right: 0.5em;
+        position: relative;
+        top: -2px;
+        vertical-align: bottom;
+      }
+
+      label {
+        display: inline-flex;
+        flex-direction: row;
+        width: auto;
+
+        input, span {
+          margin: 0;
+        }
+      }
+
+      a {
+        padding: 1em;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/universe/src/components/overview/cave-mouth.jpg b/packages/app/src/components/app/overview/cave-mouth.jpg
similarity index 100%
rename from packages/universe/src/components/overview/cave-mouth.jpg
rename to packages/app/src/components/app/overview/cave-mouth.jpg
diff --git a/packages/universe/src/components/overview/index.jsx b/packages/app/src/components/app/overview/index.jsx
similarity index 52%
rename from packages/universe/src/components/overview/index.jsx
rename to packages/app/src/components/app/overview/index.jsx
index 37f1cce..0e5d3cf 100644
--- a/packages/universe/src/components/overview/index.jsx
+++ b/packages/app/src/components/app/overview/index.jsx
@@ -1,49 +1,23 @@
-import './index.scss';
+import {classnames, React} from '@flecks/react';
+import {Link} from '@flecks/react/router';
 
-import {useIsNative} from '@humus/app';
-import {React} from '@flecks/react';
-import {
-  Link,
-  Redirect,
-  push,
-  useLocation,
-  useParams,
-} from '@flecks/react/router';
-import {useDispatch, useSelector} from '@flecks/redux';
+import styles from './index.module.scss';
 
-import {universesByLocalitySelector, universesSelector} from '../../state';
-
-const Universe = () => {
-  const {uuid} = useParams();
-  const dispatch = useDispatch();
-  const isNative = useIsNative();
-  const {pathname} = useLocation();
-  const universes = useSelector(universesSelector);
-  const remoteUniverses = useSelector((state) => universesByLocalitySelector(state, false));
-  const uuids = Object.keys(remoteUniverses);
-  if (!uuid && uuids.length === 0) {
-    return <Redirect to="/" />;
-  }
-  const universe = uuid ? universes[uuid] : universes[uuids.pop()];
-  if (!universe) {
-    return <Redirect to="/" />;
-  }
+function Universe() {
   return (
-    <div className="universe">
-      <div className="universe__muted">
-        {isNative && (
-          <Link
-            className="back"
-            to={universe.address ? '/title/remote' : '/title/local'}
-          >
-            <span className="back__arrow">&lt;-</span>
-            {' '}
-            Back
-          </Link>
-        )}
-        <h2 className="universe__title">{universe.title}</h2>
-        <span className="universe__online">5 / 10</span>
-        <div className="universe__motd">
+    <div className={styles.universe}>
+      <div className={styles.muted}>
+        <Link
+          className={styles.back}
+          to="/"
+        >
+          <span className={styles.arrow}>&lt;-</span>
+          {' '}
+          Back to title
+        </Link>
+        <h2 className={styles.title}>[UNIVERSE TITLE]</h2>
+        <span className={styles.online}>5 / 10</span>
+        <div className={styles.motd}>
           <p>
             This is placeholder text and will be replaced when the website goes live. This is
             placeholder text. This text is here to test that text can be displayed correctly on the
@@ -68,19 +42,16 @@ const Universe = () => {
             Have fun! &lt;3
           </p>
         </div>
-        <button
-          className="button universe__play"
-          onClick={async () => {
-            dispatch(push(`${pathname}/play`));
-          }}
-          type="button"
+        <Link
+          className={classnames('button', styles.play)}
+          to="/play"
         >
           Play
-        </button>
+        </Link>
       </div>
     </div>
   );
-};
+}
 
 Universe.propTypes = {};
 
diff --git a/packages/universe/src/components/overview/index.scss b/packages/app/src/components/app/overview/index.module.scss
similarity index 70%
rename from packages/universe/src/components/overview/index.scss
rename to packages/app/src/components/app/overview/index.module.scss
index 5a028bd..82c334f 100644
--- a/packages/universe/src/components/overview/index.scss
+++ b/packages/app/src/components/app/overview/index.module.scss
@@ -6,20 +6,36 @@
   width: 100%;
 }
 
-.universe__muted {
+.muted {
   background-color: rgba(0, 0, 0, 0.5);
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
-.universe__title {
+.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;
+}
+
+.arrow {
+  letter-spacing: -0.25em;
+  margin-right: 0.25em;
+}
+
+.title {
   font-family: var(--thick-title-font-family);
   font-size: 4em;
   margin: 2em 1em 0.5em;
 }
 
-.universe__motd {
+.motd {
   font-size: 1.5em;
   margin: auto;
   width: 90%;
@@ -28,7 +44,7 @@
   }
 }
 
-.universe__online {
+.online {
   bottom: 5rem;
   left: 5rem;
   font-size: 2em;
@@ -39,7 +55,7 @@
   }
 }
 
-.universe__play {
+.play[class] {
   background-color: rgba(0, 0, 0, 0.5);
   bottom: 4rem;
   font-family: var(--thick-title-font-family);
diff --git a/packages/app/src/components/app/play/index.jsx b/packages/app/src/components/app/play/index.jsx
new file mode 100644
index 0000000..fc4779b
--- /dev/null
+++ b/packages/app/src/components/app/play/index.jsx
@@ -0,0 +1,23 @@
+import {React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+import Renderable from './renderable';
+import Ui from './ui';
+
+function Play() {
+  return (
+    <div className={styles.play}>
+      <Renderable />
+      <Ui />
+    </div>
+  );
+}
+
+Play.defaultProps = {};
+
+Play.displayName = 'Play';
+
+Play.propTypes = {};
+
+export default Play;
diff --git a/packages/universe/src/components/play/ui/index.scss b/packages/app/src/components/app/play/index.module.scss
similarity index 100%
rename from packages/universe/src/components/play/ui/index.scss
rename to packages/app/src/components/app/play/index.module.scss
diff --git a/packages/universe/src/components/play/renderable/index.jsx b/packages/app/src/components/app/play/renderable/index.jsx
similarity index 97%
rename from packages/universe/src/components/play/renderable/index.jsx
rename to packages/app/src/components/app/play/renderable/index.jsx
index a920d48..af7c8d3 100644
--- a/packages/universe/src/components/play/renderable/index.jsx
+++ b/packages/app/src/components/app/play/renderable/index.jsx
@@ -10,7 +10,8 @@ import {
 import {Container, Renderer, Stage} from '@avocado/graphics';
 import {Vector} from '@avocado/math';
 import {createLoop, destroyLoop} from '@avocado/timing';
-import {useRoom, useSelfEntity} from '@humus/app';
+
+import {useRoom, useSelfEntity} from '../../../../hooks';
 
 const renderer = new Renderer();
 
diff --git a/packages/universe/src/components/play/renderable/index.scss b/packages/app/src/components/app/play/renderable/index.scss
similarity index 100%
rename from packages/universe/src/components/play/renderable/index.scss
rename to packages/app/src/components/app/play/renderable/index.scss
diff --git a/packages/universe/src/components/play/ui/hotbar/index.jsx b/packages/app/src/components/app/play/ui/hotbar/index.jsx
similarity index 100%
rename from packages/universe/src/components/play/ui/hotbar/index.jsx
rename to packages/app/src/components/app/play/ui/hotbar/index.jsx
diff --git a/packages/universe/src/components/play/ui/hotbar/index.scss b/packages/app/src/components/app/play/ui/hotbar/index.scss
similarity index 94%
rename from packages/universe/src/components/play/ui/hotbar/index.scss
rename to packages/app/src/components/app/play/ui/hotbar/index.scss
index a581130..855c695 100644
--- a/packages/universe/src/components/play/ui/hotbar/index.scss
+++ b/packages/app/src/components/app/play/ui/hotbar/index.scss
@@ -1,4 +1,4 @@
-@import '@humus/scss/graphics.scss';
+@import '../../../scss/graphics.scss';
 
 .hotbar {
   position: absolute;
diff --git a/packages/universe/src/components/play/ui/index.jsx b/packages/app/src/components/app/play/ui/index.jsx
similarity index 93%
rename from packages/universe/src/components/play/ui/index.jsx
rename to packages/app/src/components/app/play/ui/index.jsx
index 9cf0aa3..5995d21 100644
--- a/packages/universe/src/components/play/ui/index.jsx
+++ b/packages/app/src/components/app/play/ui/index.jsx
@@ -3,11 +3,6 @@ import './index.scss';
 import {InputNormalizer} from '@avocado/input/client';
 import {Vector} from '@avocado/math';
 import {Room} from '@avocado/topdown';
-import {
-  setSelfEntity,
-  useRoom,
-  useSelfEntity,
-} from '@humus/app';
 import {
   React,
   useEffect,
@@ -15,16 +10,21 @@ import {
   useRef,
   useState,
 } from '@flecks/react';
-import {useParams} from '@flecks/react/router';
 import {useDispatch} from '@flecks/redux';
 import {useSocket} from '@flecks/socket';
 
+import {
+  useRoom,
+  useSelfEntity,
+} from '../../../../hooks';
+import {
+  setSelfEntity,
+} from '../../../../state';
 import Hotbar from './hotbar';
 
 const PlayUi = () => {
   const dispatch = useDispatch();
   const flecks = useFlecks();
-  const {uuid} = useParams();
   const ref = useRef();
   const room = useRoom();
   const selfEntity = useSelfEntity();
@@ -55,14 +55,14 @@ const PlayUi = () => {
   }, [flecks, room, selfEntity]);
   useEffect(() => {
     const join = async () => {
-      dispatch(setSelfEntity(await socket.send(['Join', uuid])));
+      dispatch(setSelfEntity(await socket.send(['Join'])));
     };
     join();
     socket.on('reconnect', join);
     return () => {
       socket.off('reconnect', join);
     };
-  }, [dispatch, socket, uuid]);
+  }, [dispatch, socket]);
   useEffect(() => {
     if (!ref.current || !selfEntity) {
       return undefined;
diff --git a/packages/universe/src/components/title/universes/index.scss b/packages/app/src/components/app/play/ui/index.scss
similarity index 100%
rename from packages/universe/src/components/title/universes/index.scss
rename to packages/app/src/components/app/play/ui/index.scss
diff --git a/packages/universe/src/components/play/ui/item-slot/index.jsx b/packages/app/src/components/app/play/ui/item-slot/index.jsx
similarity index 100%
rename from packages/universe/src/components/play/ui/item-slot/index.jsx
rename to packages/app/src/components/app/play/ui/item-slot/index.jsx
diff --git a/packages/universe/src/components/play/ui/item-slot/index.scss b/packages/app/src/components/app/play/ui/item-slot/index.scss
similarity index 96%
rename from packages/universe/src/components/play/ui/item-slot/index.scss
rename to packages/app/src/components/app/play/ui/item-slot/index.scss
index 766bbd9..aeef8ff 100644
--- a/packages/universe/src/components/play/ui/item-slot/index.scss
+++ b/packages/app/src/components/app/play/ui/item-slot/index.scss
@@ -1,4 +1,4 @@
-@import '@humus/scss/graphics.scss';
+@import '../../../scss/graphics.scss';
 
 .item-slot {
   border: 4px dashed rgba(0, 0, 0, 0.5);
diff --git a/packages/app/src/components/app/title/rooted.jpg b/packages/app/src/components/app/rooted.jpg
similarity index 100%
rename from packages/app/src/components/app/title/rooted.jpg
rename to packages/app/src/components/app/rooted.jpg
diff --git a/packages/app/src/components/app/fonts/Lato-Light.eot b/packages/app/src/components/app/scss/fonts/Lato-Light.eot
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Light.eot
rename to packages/app/src/components/app/scss/fonts/Lato-Light.eot
diff --git a/packages/app/src/components/app/fonts/Lato-Light.ttf b/packages/app/src/components/app/scss/fonts/Lato-Light.ttf
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Light.ttf
rename to packages/app/src/components/app/scss/fonts/Lato-Light.ttf
diff --git a/packages/app/src/components/app/fonts/Lato-Light.woff b/packages/app/src/components/app/scss/fonts/Lato-Light.woff
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Light.woff
rename to packages/app/src/components/app/scss/fonts/Lato-Light.woff
diff --git a/packages/app/src/components/app/fonts/Lato-Regular.eot b/packages/app/src/components/app/scss/fonts/Lato-Regular.eot
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Regular.eot
rename to packages/app/src/components/app/scss/fonts/Lato-Regular.eot
diff --git a/packages/app/src/components/app/fonts/Lato-Regular.ttf b/packages/app/src/components/app/scss/fonts/Lato-Regular.ttf
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Regular.ttf
rename to packages/app/src/components/app/scss/fonts/Lato-Regular.ttf
diff --git a/packages/app/src/components/app/fonts/Lato-Regular.woff b/packages/app/src/components/app/scss/fonts/Lato-Regular.woff
similarity index 100%
rename from packages/app/src/components/app/fonts/Lato-Regular.woff
rename to packages/app/src/components/app/scss/fonts/Lato-Regular.woff
diff --git a/packages/app/src/components/app/fonts/Rooted.eot b/packages/app/src/components/app/scss/fonts/Rooted.eot
similarity index 100%
rename from packages/app/src/components/app/fonts/Rooted.eot
rename to packages/app/src/components/app/scss/fonts/Rooted.eot
diff --git a/packages/app/src/components/app/fonts/Rooted.ttf b/packages/app/src/components/app/scss/fonts/Rooted.ttf
similarity index 100%
rename from packages/app/src/components/app/fonts/Rooted.ttf
rename to packages/app/src/components/app/scss/fonts/Rooted.ttf
diff --git a/packages/app/src/components/app/fonts/Rooted.woff b/packages/app/src/components/app/scss/fonts/Rooted.woff
similarity index 100%
rename from packages/app/src/components/app/fonts/Rooted.woff
rename to packages/app/src/components/app/scss/fonts/Rooted.woff
diff --git a/packages/app/src/components/app/fonts/dialogue.ttf b/packages/app/src/components/app/scss/fonts/dialogue.ttf
similarity index 100%
rename from packages/app/src/components/app/fonts/dialogue.ttf
rename to packages/app/src/components/app/scss/fonts/dialogue.ttf
diff --git a/packages/app/src/components/app/fonts/joystix-monospace.ttf b/packages/app/src/components/app/scss/fonts/joystix-monospace.ttf
similarity index 100%
rename from packages/app/src/components/app/fonts/joystix-monospace.ttf
rename to packages/app/src/components/app/scss/fonts/joystix-monospace.ttf
diff --git a/packages/scss/src/graphics.scss b/packages/app/src/components/app/scss/graphics.scss
similarity index 100%
rename from packages/scss/src/graphics.scss
rename to packages/app/src/components/app/scss/graphics.scss
diff --git a/packages/app/src/components/app/index.scss b/packages/app/src/components/app/scss/index.scss
similarity index 51%
rename from packages/app/src/components/app/index.scss
rename to packages/app/src/components/app/scss/index.scss
index fa4abfe..2dd844f 100644
--- a/packages/app/src/components/app/index.scss
+++ b/packages/app/src/components/app/scss/index.scss
@@ -1,9 +1,9 @@
-@import '~@humus/scss/colors.scss';
-@import '~@humus/scss/reset.scss';
+@import './reset.scss';
 
 html {
   background-color: #212121;
   color: #FFFFFF;
+  --color-active: rgb(0, 99, 112);
   --message-font-family: verdana, arial, helvetica, sans-serif;
   --rooted-font-family: Rooted, Ubuntu, "Droid Sans", sans-serif;
   --title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
@@ -14,25 +14,8 @@ body {
   scrollbar-width: thin;
   scrollbar-color: #777 #333;
 }
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-::-webkit-scrollbar-track {
-  background: #333;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #777;
-  border-radius: 20px;
-  border: 3px solid #333;
-}
-
-code {
-  font-family: monospace;
-}
 
 label {
-  background-color: rgba(255, 255, 255, 0.025);
   color: #ffffff;
   display: flex;
   flex-direction: column;
@@ -49,18 +32,10 @@ label {
   }
 }
 
-label:nth-of-type(2n+1) {
-  background-color: rgba(0, 0, 0, 0.025);
-}
-
 [contenteditable] {
   cursor: text;
 }
 
-a {
-  color: lighten($color-active, 20%);
-}
-
 input {
   background: #333;
 	border: 1px solid rgba(255, 255, 255, 0.1);
@@ -92,116 +67,6 @@ button, .button {
   }
 }
 
-button, input[type="checkbox"], input[type="checkbox"] + label {
-  cursor: pointer;
-}
-
-select {
-  background: #222222;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 0.75em;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  padding: 0.5em;
-}
-
-*:focus {
-  box-shadow: 0 0 2px 0 $color-active;
-  outline: none;
-  z-index: 1;
-}
-
-.react-tabs {
-  width: 100%;
-  height: 100%;
-}
-
-.react-tabs__tab-list {
-  background-color: #272727;
-  font-family: var(--title-font-family);
-  font-size: 0.9em;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  white-space: nowrap;
-  width: 100%;
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: #2e1d1d;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #777;
-    border-radius: 0;
-    border-width: 1px;
-  }
-}
-
-.react-tabs__tab {
-  background-color: #2d2d2d;
-  color: #aaaaaa;
-  cursor: pointer;
-  display: inline-block;
-  height: 3em;
-  &:not(:last-of-type) {
-    border-right: 1px solid #282828;
-  }
-  &:hover {
-    color: #ddd;
-  }
-  .wrapper {
-    align-content: space-between;
-    align-items: center;
-    display: flex;
-    height: 100%;
-    padding: 0 0.5em;
-    justify-content: space-evenly;
-    .text {
-      height: 1.25em;
-      padding: 0 0.5em;
-    }
-  }
-  .icon {
-    padding: 0 0.25em 0 0.5em;
-  }
-  .close {
-    background-color: transparent;
-    border: none;
-    color: #999999;
-    padding: 0.25em;
-    visibility: hidden;
-    &:hover {
-      color: #ffffff;
-    }
-  }
-  &:hover .close {
-    visibility: visible;
-  }
-}
-
-.react-tabs__tab--selected[class] {
-  background-color: #1e1e1e;
-  color: #ffffff;
-}
-
-.react-tabs__tab-panel {
-  display: none;
-  overflow-y: auto;
-  height: calc(100% - 2.7em);
-  width: 100%;
-}
-
-.react-tabs__tab-panel--selected {
-  display: block;
-}
-
-.muted {
-  color: $color-muted;
-}
-
 .humus {
   height: 100vh;
   overflow: hidden;
@@ -209,22 +74,6 @@ select {
   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');
diff --git a/packages/scss/src/reset.scss b/packages/app/src/components/app/scss/reset.scss
similarity index 100%
rename from packages/scss/src/reset.scss
rename to packages/app/src/components/app/scss/reset.scss
diff --git a/packages/app/src/components/app/title/index.jsx b/packages/app/src/components/app/title/index.jsx
deleted file mode 100644
index 6aeb760..0000000
--- a/packages/app/src/components/app/title/index.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import './index.scss';
-
-import {
-  gatherComponents,
-  React,
-  useFlecks,
-} from '@flecks/react';
-
-const Title = () => {
-  const flecks = useFlecks();
-  const Items = gatherComponents(flecks.invoke('@humus/app.title'));
-  return (
-    <div className="title">
-      <div className="title__muted">
-        <h1 className="title__title">Humus</h1>
-        <ul className="title__actions">
-          {Items}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default Title;
diff --git a/packages/app/src/hooks/index.js b/packages/app/src/hooks/index.js
index 69ceb70..566e5c0 100644
--- a/packages/app/src/hooks/index.js
+++ b/packages/app/src/hooks/index.js
@@ -1,3 +1,2 @@
-export {default as useIsNative} from './use-is-native';
 export {default as useRoom} from './use-room';
 export {default as useSelfEntity} from './use-self-entity';
diff --git a/packages/app/src/hooks/use-is-native.js b/packages/app/src/hooks/use-is-native.js
deleted file mode 100644
index 7eead5a..0000000
--- a/packages/app/src/hooks/use-is-native.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import isElectron from 'is-electron';
-
-export default () => true || isElectron();
diff --git a/packages/app/src/index.js b/packages/app/src/index.js
index b378e70..54e285b 100644
--- a/packages/app/src/index.js
+++ b/packages/app/src/index.js
@@ -1,5 +1,4 @@
 import {Hooks} from '@flecks/core';
-import {gatherComponents} from '@flecks/react';
 
 import App from './components/app';
 import {selfEntity} from './state';
@@ -15,9 +14,7 @@ export default {
     '@flecks/core.config': () => ({
       resolution: [1600, 900],
     }),
-    '@flecks/react.roots': (req, flecks) => (
-      [App, {Components: gatherComponents(flecks.invoke('@humus/app.components'))}]
-    ),
+    '@flecks/react.roots': () => App,
     '@flecks/react.providers': async (req, flecks) => [
       Context.Provider,
       {value: flecks.get('@humus/app.resolution')},
diff --git a/packages/core/package.json b/packages/core/package.json
index fdca4a9..8c20c25 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -43,7 +43,6 @@
     "@flecks/redux": "^1.4.1",
     "@flecks/socket": "^1.4.1",
     "@flecks/user": "^1.4.1",
-    "@humus/scss": "^2.0.0",
     "debug": "4.3.1"
   },
   "devDependencies": {
diff --git a/packages/scss/.gitignore b/packages/scss/.gitignore
deleted file mode 100644
index 1f22b9c..0000000
--- a/packages/scss/.gitignore
+++ /dev/null
@@ -1,116 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
diff --git a/packages/scss/build/fleck.neutrinorc.js b/packages/scss/build/fleck.neutrinorc.js
deleted file mode 100644
index 6d4dc5a..0000000
--- a/packages/scss/build/fleck.neutrinorc.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const copy = require('@neutrinojs/copy');
-
-module.exports = async (flecks) => {
-  // eslint-disable-next-line import/no-extraneous-dependencies, global-require
-  const config = await require('@flecks/fleck/server/build/fleck.neutrinorc')(flecks);
-  config.use.push(({config}) => {
-    config.entryPoints.delete('colors');
-    config.entryPoints.delete('graphics');
-    config.entryPoints.delete('reset');
-  });
-  config.use.push(
-    copy({
-      copyUnmodified: true,
-      patterns: [
-        {
-          from: 'src/colors.scss',
-          to: 'colors.scss',
-        },
-        {
-          from: 'src/graphics.scss',
-          to: 'graphics.scss',
-        },
-        {
-          from: 'src/reset.scss',
-          to: 'reset.scss',
-        },
-      ],
-    }),
-  );
-  return config;
-};
diff --git a/packages/scss/package.json b/packages/scss/package.json
deleted file mode 100644
index 5f09795..0000000
--- a/packages/scss/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "@humus/scss",
-  "version": "2.0.0",
-  "repository": {
-    "type": "git",
-    "url": "https://git.hq.cha0s.io/cha0s/humus.git",
-    "directory": "packages/scss"
-  },
-  "main": "index.js",
-  "scripts": {
-    "build": "flecks build",
-    "clean": "flecks clean",
-    "lint": "flecks lint",
-    "postversion": "cp package.json dist",
-    "test": "flecks test"
-  },
-  "files": [
-    "build",
-    "colors.scss",
-    "graphics.scss",
-    "index.js",
-    "index.js.map",
-    "reset.scss",
-    "src",
-    "test",
-    "test.js",
-    "test.js.map"
-  ],
-  "dependencies": {
-    "@flecks/core": "^1.4.1"
-  },
-  "devDependencies": {
-    "@flecks/fleck": "^1.4.1",
-    "@neutrinojs/copy": "^9.5.0"
-  }
-}
diff --git a/packages/scss/src/colors.scss b/packages/scss/src/colors.scss
deleted file mode 100644
index 5a732d9..0000000
--- a/packages/scss/src/colors.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color-active: rgb(0, 99, 112);
-$color-muted: #bbbbbb;
-$color-owner: #d65130;
-$color-unread: rgb(180, 0, 0);
diff --git a/packages/scss/src/index.js b/packages/scss/src/index.js
deleted file mode 100644
index c15f26f..0000000
--- a/packages/scss/src/index.js
+++ /dev/null
@@ -1 +0,0 @@
-// ...
diff --git a/packages/universe/package.json b/packages/universe/package.json
index d5e4ccd..089b65a 100644
--- a/packages/universe/package.json
+++ b/packages/universe/package.json
@@ -33,22 +33,14 @@
     "test.js.map"
   ],
   "dependencies": {
-    "@avocado/graphics": "^3.0.0",
-    "@avocado/input": "^3.0.0",
-    "@avocado/math": "^3.0.0",
-    "@avocado/react": "^3.0.0",
     "@avocado/resource": "^3.0.0",
     "@avocado/s13n": "^3.0.0",
-    "@avocado/timing": "^3.0.0",
-    "@avocado/topdown": "^3.0.0",
     "@avocado/traits": "^3.0.0",
     "@flecks/core": "^1.4.1",
     "@flecks/react": "^1.4.1",
     "@flecks/redux": "^1.4.1",
     "@flecks/socket": "^1.4.1",
     "@humus/app": "^2.0.0",
-    "@humus/inventory": "^2.0.0",
-    "@humus/scss": "^2.0.0",
     "debug": "4.3.1",
     "express": "^4.17.1",
     "glob": "^7.1.6"
diff --git a/packages/universe/src/components/index.jsx b/packages/universe/src/components/index.jsx
deleted file mode 100644
index 91480ad..0000000
--- a/packages/universe/src/components/index.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {Ui, useIsNative} from '@humus/app';
-import {React} from '@flecks/react';
-import {
-  // Redirect,
-  Route,
-  Routes,
-  // Switch,
-} from '@flecks/react/router';
-
-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 = () => {
-  // eslint-disable-next-line no-unused-vars
-  const isNative = useIsNative();
-  return (
-    <Routes>
-      <Route exact path="/title/local" element={<Local />} />
-      <Route exact path="/title/remote" element={<Remote />} />
-      <Route path="*" element={<></>} />
-      {/* {!isNative && <Redirect to="/universe" />} */}
-      <Route path="/universe">
-        <Route
-          path=":uuid/play"
-          element={(
-            <Ui>
-              <PlayRenderable />
-              <PlayUi />
-            </Ui>
-          )}
-        />
-        <Route
-          path=":uuid"
-          element={(
-            <Ui>
-              <Overview />
-            </Ui>
-          )}
-        />
-      </Route>
-    </Routes>
-  );
-};
-
-Universe.propTypes = {};
-
-export default Universe;
diff --git a/packages/universe/src/components/title/index.jsx b/packages/universe/src/components/title/index.jsx
deleted file mode 100644
index c04dee8..0000000
--- a/packages/universe/src/components/title/index.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  React,
-} from '@flecks/react';
-import {Link} from '@flecks/react/router';
-
-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;
diff --git a/packages/universe/src/components/title/local/index.jsx b/packages/universe/src/components/title/local/index.jsx
deleted file mode 100644
index 0dd9697..0000000
--- a/packages/universe/src/components/title/local/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import './index.scss';
-
-import {Ui} from '@humus/app';
-import {React} from '@flecks/react';
-import {Link} from '@flecks/react/router';
-
-import Universes from '../universes';
-
-const Local = () => (
-  <Ui>
-    <div className="local">
-      <Link
-        className="back"
-        to="/title"
-      >
-        <span className="back__arrow">&lt;-</span>
-        {' '}
-        Back
-      </Link>
-      <h2 className="local__title">Local universes</h2>
-      <Link
-        className="local__create"
-        to="/title/local/create"
-      >
-        + Create a new universe
-      </Link>
-      <Universes isLocal />
-    </div>
-  </Ui>
-);
-
-export default Local;
diff --git a/packages/universe/src/components/title/local/index.scss b/packages/universe/src/components/title/local/index.scss
deleted file mode 100644
index 65a75e2..0000000
--- a/packages/universe/src/components/title/local/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.local__title {
-  font-family: var(--thick-title-font-family);
-  font-size: 4em;
-  margin-left: 1em;
-  margin-top: 2em;
-}
-
-.local__create {
-  color: white;
-  display: inline-block;
-  font-family: var(--title-font-family);
-  font-size: 1.5em;
-  margin-top: 1em;
-  margin-left: 2.75em;
-  padding: 0.5em;
-  padding-left: 1em;
-  text-decoration: none;
-}
-
-.local > .universes {
-  margin: 4em;
-  margin-top: 2em;
-}
diff --git a/packages/universe/src/components/title/remote/index.jsx b/packages/universe/src/components/title/remote/index.jsx
deleted file mode 100644
index 2074493..0000000
--- a/packages/universe/src/components/title/remote/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import './index.scss';
-
-import {Ui} from '@humus/app';
-import {React} from '@flecks/react';
-import {Link} from '@flecks/react/router';
-
-import Universes from '../universes';
-
-const Remote = () => (
-  <Ui>
-    <div className="remote">
-      <Link
-        className="back"
-        to="/title"
-      >
-        <span className="back__arrow">&lt;-</span>
-        {' '}
-        Back
-      </Link>
-      <h2 className="remote__title">Remote universes</h2>
-      <Link
-        className="remote__connect"
-        to="/title/remote/connect"
-      >
-        + Connect to a new universe
-      </Link>
-      <Universes isLocal={false} />
-    </div>
-  </Ui>
-);
-
-export default Remote;
diff --git a/packages/universe/src/components/title/remote/index.scss b/packages/universe/src/components/title/remote/index.scss
deleted file mode 100644
index eee9ef0..0000000
--- a/packages/universe/src/components/title/remote/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.remote__title {
-  font-family: var(--thick-title-font-family);
-  font-size: 4em;
-  margin-left: 1em;
-  margin-top: 2em;
-}
-
-.remote__connect {
-  color: white;
-  display: inline-block;
-  font-family: var(--title-font-family);
-  font-size: 1.5em;
-  margin-top: 1em;
-  margin-left: 2.75em;
-  padding: 0.5em;
-  padding-left: 1em;
-  text-decoration: none;
-}
-
-.remote > .universes {
-  margin: 4em;
-  margin-top: 2em;
-}
diff --git a/packages/universe/src/components/title/universes/index.jsx b/packages/universe/src/components/title/universes/index.jsx
deleted file mode 100644
index 88bb9dc..0000000
--- a/packages/universe/src/components/title/universes/index.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import './index.scss';
-
-import {useSelector} from '@flecks/redux';
-import {PropTypes, React} from '@flecks/react';
-
-import {universesByLocalitySelector} from '../../../state';
-import Universe from './universe';
-
-const Universes = ({isLocal}) => {
-  const universes = useSelector((state) => universesByLocalitySelector(state, isLocal));
-  return (
-    <div className="universes">
-      {Object.entries(universes).map(([uuid, universe]) => (
-        <Universe key={uuid} universe={{...universe, uuid}} />
-      ))}
-    </div>
-  );
-};
-
-Universes.propTypes = {
-  isLocal: PropTypes.bool.isRequired,
-};
-
-export default Universes;
diff --git a/packages/universe/src/components/title/universes/universe/index.jsx b/packages/universe/src/components/title/universes/universe/index.jsx
deleted file mode 100644
index 5a5fa4e..0000000
--- a/packages/universe/src/components/title/universes/universe/index.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import './index.scss';
-
-import {PropTypes, React} from '@flecks/react';
-import {Link} from '@flecks/react/router';
-
-const Universe = ({
-  universe: {
-    address,
-    isOnline,
-    title,
-    uuid,
-  },
-}) => {
-  const [host, port] = address.split(':');
-  return (
-    <Link className="button universes-universe" to={`/universe/${uuid}`}>
-      <h3>{title}</h3>
-      {address && (
-        <span className="universes-universe__address">
-          [
-          <span className="universes-universe__host">{host}</span>
-          {port && (
-            <span className="universes-universe__port">
-              :
-              {port}
-            </span>
-          )}
-          ]
-        </span>
-      )}
-      <span>{isOnline ? '✔️' : '❌'}</span>
-    </Link>
-  );
-};
-
-Universe.propTypes = {
-  universe: PropTypes.shape({
-    address: PropTypes.string,
-    isOnline: PropTypes.bool,
-    title: PropTypes.string,
-    uuid: PropTypes.string,
-  }).isRequired,
-};
-
-export default Universe;
diff --git a/packages/universe/src/components/title/universes/universe/index.scss b/packages/universe/src/components/title/universes/universe/index.scss
deleted file mode 100644
index 7457be3..0000000
--- a/packages/universe/src/components/title/universes/universe/index.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '@humus/scss/colors.scss';
-
-.universes-universe {
-  align-items: baseline;
-  color: lighten($color-active, 20%);
-  display: flex;
-  font-family: var(--thick-title-font-family);
-  justify-content: space-between;
-  margin-bottom: 1em;
-  padding: 2em;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.75);
-  }
-}
-
-.universes-universe__address {
-  color: #fff;
-  font-family: monospace;
-  font-size: 1.5em;
-  margin-right: auto;
-  margin-left: 0.5em;
-  opacity: 0.7;
-}
-
-.universes-universe__port {
-  opacity: 0.7;
-}
diff --git a/packages/universe/src/index.js b/packages/universe/src/index.js
index 2626e6c..6fcfc23 100644
--- a/packages/universe/src/index.js
+++ b/packages/universe/src/index.js
@@ -1,7 +1,5 @@
 import {Hooks, Flecks} from '@flecks/core';
 
-import Universe from './components';
-import Title from './components/title';
 import {universes} from './state';
 
 export * from './state';
@@ -17,7 +15,5 @@ export default {
     '@flecks/redux.slices': () => ({
       universes,
     }),
-    '@humus/app.components': () => Universe,
-    '@humus/app.title': () => Title,
   },
 };