From 2c3a1bbdb624512aa843d96990f9809f4c673e17 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sun, 26 May 2024 13:02:16 -0500
Subject: [PATCH] refactor: basic connection

---
 src/components/silphius.jsx     | 39 ++++++++++++++++++++++++++++++++-
 src/components/title.jsx        | 25 +++++++++++++++++++++
 src/components/title.module.css | 13 +++++++++++
 src/components/ui.module.css    |  1 +
 src/index.css                   |  2 +-
 src/index.js                    | 17 +-------------
 6 files changed, 79 insertions(+), 18 deletions(-)
 create mode 100644 src/components/title.jsx
 create mode 100644 src/components/title.module.css

diff --git a/src/components/silphius.jsx b/src/components/silphius.jsx
index 95d5e02..f65c34b 100644
--- a/src/components/silphius.jsx
+++ b/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 (
-    <Ui />
+    connectionTuple[0]
+      ? (
+        server
+          ? (
+            <ServerContext.Provider value={server}>
+              <Ui />
+            </ServerContext.Provider>
+          )
+          : null
+      )
+      : <Title connectionTuple={connectionTuple} />
   );
 }
 
diff --git a/src/components/title.jsx b/src/components/title.jsx
new file mode 100644
index 0000000..aa7eed5
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/title.module.css b/src/components/title.module.css
new file mode 100644
index 0000000..009583e
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/ui.module.css b/src/components/ui.module.css
index 98f56ab..dc46108 100644
--- a/src/components/ui.module.css
+++ b/src/components/ui.module.css
@@ -1,3 +1,4 @@
 .ui {
+  align-self: center;
   position: relative;
 }
diff --git a/src/index.css b/src/index.css
index b46673a..c0a51a7 100644
--- a/src/index.css
+++ b/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%;
 }
diff --git a/src/index.js b/src/index.js
index 3ef934c..f3cf467 100644
--- a/src/index.js
+++ b/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));