87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import {useEffect, useState} from 'react';
|
|
import {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() {
|
|
const [client, setClient] = useState();
|
|
const [disconnected, setDisconnected] = useState(false);
|
|
const params = useParams();
|
|
const [type, url] = 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));
|
|
}
|
|
transmit(packet) {
|
|
super.transmit(encode(packet));
|
|
}
|
|
}
|
|
const client = new SilphiusClient();
|
|
async function connect() {
|
|
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}>
|
|
<Ui disconnected={disconnected} />
|
|
</ClientContext.Provider>
|
|
</div>
|
|
);
|
|
}
|