2024-06-14 15:18:55 -05:00
|
|
|
import {json} from "@remix-run/node";
|
2024-06-14 12:27:07 -05:00
|
|
|
import {useEffect, useState} from 'react';
|
|
|
|
import {useOutletContext, useParams} from 'react-router-dom';
|
|
|
|
|
|
|
|
import ClientContext from '@/context/client.js';
|
2024-06-21 04:50:17 -05:00
|
|
|
import MainEntityContext from '@/context/main-entity.js';
|
|
|
|
|
2024-06-14 12:27:07 -05:00
|
|
|
import Ui from '@/react-components/ui.jsx';
|
2024-06-14 15:18:55 -05:00
|
|
|
import {juggleSession} from '@/session.server';
|
|
|
|
|
|
|
|
export async function loader({request}) {
|
|
|
|
await juggleSession(request);
|
|
|
|
return json({});
|
|
|
|
}
|
2024-06-14 12:27:07 -05:00
|
|
|
|
|
|
|
export default function PlaySpecific() {
|
|
|
|
const Client = useOutletContext();
|
|
|
|
const [client, setClient] = useState();
|
2024-06-21 04:50:17 -05:00
|
|
|
const mainEntityTuple = useState();
|
2024-06-14 12:27:07 -05:00
|
|
|
const [disconnected, setDisconnected] = useState(false);
|
|
|
|
const params = useParams();
|
2024-06-15 20:59:11 -05:00
|
|
|
const [type, url] = params['*'].split('/');
|
2024-06-14 12:27:07 -05:00
|
|
|
useEffect(() => {
|
|
|
|
if (!Client) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const client = new Client();
|
|
|
|
async function connect() {
|
|
|
|
await client.connect(url);
|
|
|
|
setClient(client);
|
|
|
|
}
|
|
|
|
connect();
|
|
|
|
return () => {
|
|
|
|
client.disconnect();
|
|
|
|
};
|
|
|
|
}, [Client, url]);
|
2024-06-15 20:59:11 -05:00
|
|
|
// Sneakily use beforeunload to snag some time to save.
|
|
|
|
useEffect(() => {
|
|
|
|
if ('local' !== type) {
|
|
|
|
return;
|
|
|
|
}
|
2024-06-21 04:43:32 -05:00
|
|
|
async function onBeforeUnload(event) {
|
2024-06-15 20:59:11 -05:00
|
|
|
client.disconnect();
|
2024-06-21 04:43:32 -05:00
|
|
|
function waitForSave() {
|
|
|
|
return new Promise((resolve) => setTimeout(resolve, 0));
|
|
|
|
}
|
|
|
|
while (client.worker) { await waitForSave(); }
|
2024-06-15 20:59:11 -05:00
|
|
|
}
|
|
|
|
addEventListener('beforeunload', onBeforeUnload);
|
|
|
|
return () => {
|
|
|
|
removeEventListener('beforeunload', onBeforeUnload);
|
|
|
|
};
|
|
|
|
});
|
2024-06-14 12:27:07 -05:00
|
|
|
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}>
|
2024-06-21 04:50:17 -05:00
|
|
|
<MainEntityContext.Provider value={mainEntityTuple}>
|
|
|
|
<Ui disconnected={disconnected} />
|
|
|
|
</MainEntityContext.Provider>
|
2024-06-14 12:27:07 -05:00
|
|
|
</ClientContext.Provider>
|
|
|
|
);
|
|
|
|
}
|