refactor: dynamic import

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

@@ -1,8 +1,6 @@
 import {useEffect, useState} from 'react';
 import {Outlet, useParams} from 'react-router-dom';
 
-import LocalClient from '@/net/client/local.js';
-import RemoteClient from '@/net/client/remote.js';
 import {decode, encode} from '@/packets/index.js';
 
 import styles from './play.module.css';
@@ -12,24 +10,27 @@ export default function Play() {
   const params = useParams();
   const [type] = params['*'].split('/');
   useEffect(() => {
-    let Client;
-    switch (type) {
-      case 'local':
-        Client = LocalClient;
-        break;
-      case 'remote':
-        Client = RemoteClient;
-        break;
-    }
-    class SilphiusClient extends Client {
-      accept(packed) {
-        super.accept(decode(packed));
+    async function loadClient() {
+      let Client;
+      switch (type) {
+        case 'local':
+          ({default: Client} = await import('@/net/client/local.js'));
+          break;
+        case 'remote':
+          ({default: Client} = await import('@/net/client/remote.js'));
+          break;
       }
-      transmit(packet) {
-        super.transmit(encode(packet));
+      class SilphiusClient extends Client {
+        accept(packed) {
+          super.accept(decode(packed));
+        }
+        transmit(packet) {
+          super.transmit(encode(packet));
+        }
       }
+      setClient(() => SilphiusClient);
     }
-    setClient(() => SilphiusClient);
+    loadClient();
   }, [type]);
   return (
     <div className={styles.play}>