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 (
-
+ connectionTuple[0]
+ ? (
+ server
+ ? (
+
+
+
+ )
+ : null
+ )
+ :
);
}
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 (
+
+
Silphius
+
+ - {
+ connectionTuple[1]('local')
+ }}
+ >
+ Local
+
+ - {
+ connectionTuple[1]('remote')
+ }}
+ >
+ Remote
+
+
+
+ )
+}
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));