refactor: play specific

app/root.css

@@ -5,4 +5,7 @@ html, body {
   line-height: 0;
   margin: 0;
   width: 100%;
+  * {
+    line-height: 1;
+  }
 }

app/routes/_main-menu.play.$.$/route.jsx

@@ -0,0 +1,66 @@
+import {useEffect, useState} from 'react';
+import {useOutletContext, useParams} from 'react-router-dom';
+
+import ClientContext from '@/context/client.js';
+import Ui from '@/react-components/ui.jsx';
+
+export default function PlaySpecific() {
+  const Client = useOutletContext();
+  const [client, setClient] = useState();
+  const [disconnected, setDisconnected] = useState(false);
+  const params = useParams();
+  const [, url] = params['*'].split('/');
+  useEffect(() => {
+    if (!Client) {
+      return;
+    }
+    const client = new Client();
+    async function connect() {
+      await client.connect(url);
+      setClient(client);
+    }
+    connect();
+    return () => {
+      client.disconnect();
+    };
+  }, [Client, url]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    function onConnectionStatus(status) {
+      switch (status) {
+        case 'aborted': {
+          setDisconnected(true);
+          break;
+        }
+        case 'connected': {
+          setDisconnected(false);
+          break;
+        }
+      }
+    }
+    client.addPacketListener('ConnectionStatus', onConnectionStatus);
+    return () => {
+      client.removePacketListener('ConnectionStatus', onConnectionStatus);
+    };
+  }, [client]);
+  useEffect(() => {
+    if (!disconnected) {
+      return;
+    }
+    async function reconnect() {
+      await client.connect(url);
+    }
+    reconnect();
+    const handle = setInterval(reconnect, 1000);
+    return () => {
+      clearInterval(handle);
+    };
+  }, [client, disconnected, url]);
+  return (
+    <ClientContext.Provider value={client}>
+      <Ui disconnected={disconnected} />
+    </ClientContext.Provider>
+  );
+}

app/routes/_main-menu.play.$/route.jsx

@@ -1,19 +1,16 @@
 import {useEffect, useState} from 'react';
-import {useParams} from 'react-router-dom';
+import {Outlet, useParams} from 'react-router-dom';
 
-import ClientContext from '@/context/client.js';
 import LocalClient from '@/net/client/local.js';
 import RemoteClient from '@/net/client/remote.js';
 import {decode, encode} from '@/packets/index.js';
-import Ui from '@/react-components/ui.jsx';
 
 import styles from './play.module.css';
 
-export default function Index() {
+export default function Play() {
-  const [client, setClient] = useState();
+  const [Client, setClient] = useState();
-  const [disconnected, setDisconnected] = useState(false);
   const params = useParams();
-  const [type, url] = params['*'].split('/');
+  const [type] = params['*'].split('/');
   useEffect(() => {
     let Client;
     switch (type) {
@@ -32,55 +29,11 @@ export default function Index() {
         super.transmit(encode(packet));
       }
     }
-    const client = new SilphiusClient();
+    setClient(() => SilphiusClient);
-    async function connect() {
+  }, [type]);
-      await client.connect(url);
-      setClient(client);
-    }
-    connect();
-    return () => {
-      client.disconnect();
-    };
-  }, [type, url]);
-  useEffect(() => {
-    if (!client) {
-      return;
-    }
-    function onConnectionStatus(status) {
-      switch (status) {
-        case 'aborted': {
-          setDisconnected(true);
-          break;
-        }
-        case 'connected': {
-          setDisconnected(false);
-          break;
-        }
-      }
-    }
-    client.addPacketListener('ConnectionStatus', onConnectionStatus);
-    return () => {
-      client.removePacketListener('ConnectionStatus', onConnectionStatus);
-    };
-  }, [client]);
-  useEffect(() => {
-    if (!disconnected) {
-      return;
-    }
-    async function reconnect() {
-      await client.connect(url);
-    }
-    reconnect();
-    const handle = setInterval(reconnect, 1000);
-    return () => {
-      clearInterval(handle);
-    };
-  }, [client, disconnected, url]);
   return (
     <div className={styles.play}>
-      <ClientContext.Provider value={client}>
+      <Outlet context={Client} />
-        <Ui disconnected={disconnected} />
-      </ClientContext.Provider>
     </div>
   );
 }