refactor: basic connection

src/components/silphius.jsx

@@ -1,8 +1,45 @@
+import {useEffect, useState} from 'react';
+
+import ServerContext from '../context/server.js';
+import Title from './title';
 import Ui from './ui';
 
 export default function Silphius() {
+  const connectionTuple = useState();
+  const [server, setServer] = useState();
+  useEffect(() => {
+    if (!connectionTuple[0]) {
+      return;
+    }
+    async function connect() {
+      let Server;
+      switch (connectionTuple[0]) {
+        case 'local':
+          ({default: Server} = await import('../server/local.js'));
+          break;
+        case 'remote':
+          ({default: Server} = await import('../server/remote.js'));
+          break;
+      }
+      const server = new Server();
+      await server.connect();
+      server.send({type: 'connect'});
+      setServer(server);
+    }
+    connect();
+  }, [connectionTuple[0]]);
   return (
+    connectionTuple[0]
+      ? (
+        server
+          ? (
+            <ServerContext.Provider value={server}>
               <Ui />
+            </ServerContext.Provider>
+          )
+          : null
+      )
+      : <Title connectionTuple={connectionTuple} />
   );
 }
 

src/components/title.jsx

@@ -0,0 +1,25 @@
+import styles from './title.module.css';
+
+export default function Title({connectionTuple}) {
+  return (
+    <div className={styles.title}>
+      <h1>Silphius</h1>
+      <ul>
+        <li
+          onClick={() => {
+            connectionTuple[1]('local')
+          }}
+        >
+          Local
+        </li>
+        <li
+          onClick={() => {
+            connectionTuple[1]('remote')
+          }}
+        >
+          Remote
+        </li>
+      </ul>
+    </div>
+  )
+}

src/components/title.module.css

@@ -0,0 +1,13 @@
+.title h1 {
+  font-size: 10em;
+}
+
+.title ul {
+  padding-inline-start: 0;
+}
+
+.title li {
+  font-size: 4em;
+  list-style: none;
+  padding: 0.25em 0;
+}

src/components/ui.module.css

@@ -1,3 +1,4 @@
 .ui {
+  align-self: center;
   position: relative;
 }

src/index.css

@@ -8,9 +8,9 @@ html, body {
 }
 
 .silphius {
-  align-items: center;
   display: flex;
   height: 100%;
   justify-content: space-around;
+  line-height: 1;
   width: 100%;
 }

src/index.js

@@ -2,22 +2,7 @@ import {createElement} from 'react';
 import {createRoot} from 'react-dom/client';
 
 import Silphius from './components/silphius.jsx';
-import ServerContext from './context/server.js';
-
-// Setup server connection.
-import Server from './server/local.js';
-// import Server from './server/remote.js';
-
-const server = new Server();
-await server.connect();
-server.send({type: 'connect'});
 
 // Setup DOM.
 createRoot(document.querySelector('.silphius'))
-  .render(
-    createElement(
-      ServerContext.Provider,
-      {value: server},
-      [createElement(Silphius, {key: 'silphius'})],
-    ),
-  );
+  .render(createElement(Silphius));