2024-06-13 02:47:28 -05:00
|
|
|
import {useEffect, useState} from 'react';
|
2024-06-14 12:27:07 -05:00
|
|
|
import {Outlet, useParams} from 'react-router-dom';
|
2024-06-13 02:47:28 -05:00
|
|
|
|
2024-07-20 21:26:00 -05:00
|
|
|
import {decode, encode} from '@/net/packets/index.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
2024-06-13 02:47:28 -05:00
|
|
|
import styles from './play.module.css';
|
|
|
|
|
2024-06-14 12:27:07 -05:00
|
|
|
export default function Play() {
|
|
|
|
const [Client, setClient] = useState();
|
2024-06-13 02:47:28 -05:00
|
|
|
const params = useParams();
|
2024-06-14 12:27:07 -05:00
|
|
|
const [type] = params['*'].split('/');
|
2024-06-13 02:47:28 -05:00
|
|
|
useEffect(() => {
|
2024-07-05 21:40:49 -05:00
|
|
|
async function loadClient() {
|
|
|
|
let Client;
|
|
|
|
switch (type) {
|
|
|
|
case 'local':
|
2024-07-21 02:57:29 -05:00
|
|
|
({default: Client} = await import('@/client/local.js'));
|
2024-07-05 21:40:49 -05:00
|
|
|
break;
|
|
|
|
case 'remote':
|
2024-07-21 02:57:29 -05:00
|
|
|
({default: Client} = await import('@/client/remote.js'));
|
2024-07-05 21:40:49 -05:00
|
|
|
break;
|
2024-06-13 02:47:28 -05:00
|
|
|
}
|
2024-07-05 21:40:49 -05:00
|
|
|
class SilphiusClient extends Client {
|
|
|
|
accept(packed) {
|
|
|
|
super.accept(decode(packed));
|
|
|
|
}
|
|
|
|
transmit(packet) {
|
|
|
|
super.transmit(encode(packet));
|
|
|
|
}
|
2024-06-13 02:47:28 -05:00
|
|
|
}
|
2024-07-05 21:40:49 -05:00
|
|
|
setClient(() => SilphiusClient);
|
2024-06-13 02:47:28 -05:00
|
|
|
}
|
2024-07-05 21:40:49 -05:00
|
|
|
loadClient();
|
2024-06-14 12:27:07 -05:00
|
|
|
}, [type]);
|
2024-06-10 22:42:30 -05:00
|
|
|
return (
|
2024-06-13 02:47:28 -05:00
|
|
|
<div className={styles.play}>
|
2024-06-14 12:27:07 -05:00
|
|
|
<Outlet context={Client} />
|
2024-06-13 02:47:28 -05:00
|
|
|
</div>
|
2024-06-10 22:42:30 -05:00
|
|
|
);
|
|
|
|
}
|