158 lines
4.3 KiB
JavaScript
158 lines
4.3 KiB
JavaScript
import {json} from "@remix-run/node";
|
|
import {useEffect, useState} from 'react';
|
|
import {useOutletContext, useParams} from 'react-router-dom';
|
|
|
|
import AssetsContext from '@/context/assets.js';
|
|
import ClientContext from '@/context/client.js';
|
|
import DebugContext from '@/context/debug.js';
|
|
import EcsContext from '@/context/ecs.js';
|
|
import MainEntityContext from '@/context/main-entity.js';
|
|
import Ecs from '@/ecs/ecs.js';
|
|
import Components from '@/ecs-components/index.js';
|
|
import Systems from '@/ecs-systems/index.js';
|
|
import Ui from '@/react-components/ui.jsx';
|
|
import {juggleSession} from '@/session.server';
|
|
|
|
import {LRUCache} from 'lru-cache';
|
|
|
|
export const cache = new LRUCache({
|
|
max: 128,
|
|
});
|
|
|
|
class ClientEcs extends Ecs {
|
|
readAsset(uri) {
|
|
if (!cache.has(uri)) {
|
|
let promise, resolve, reject;
|
|
promise = new Promise((res, rej) => {
|
|
resolve = res;
|
|
reject = rej;
|
|
});
|
|
cache.set(uri, promise);
|
|
fetch(new URL(uri, window.location.origin))
|
|
.then(async (response) => {
|
|
resolve(response.ok ? response.arrayBuffer() : new ArrayBuffer(0));
|
|
})
|
|
.catch(reject);
|
|
}
|
|
return cache.get(uri);
|
|
}
|
|
}
|
|
|
|
export async function loader({request}) {
|
|
await juggleSession(request);
|
|
return json({});
|
|
}
|
|
|
|
export default function PlaySpecific() {
|
|
const Client = useOutletContext();
|
|
const assetsTuple = useState({});
|
|
const [client, setClient] = useState();
|
|
const mainEntityTuple = useState();
|
|
const debugTuple = useState(false);
|
|
const ecsTuple = useState(new ClientEcs({Components, Systems}));
|
|
const [disconnected, setDisconnected] = useState(false);
|
|
const params = useParams();
|
|
const [type, 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]);
|
|
// Sneakily use beforeunload to snag some time to save.
|
|
useEffect(() => {
|
|
if ('local' !== type) {
|
|
return;
|
|
}
|
|
async function onBeforeUnload() {
|
|
client.disconnect();
|
|
function waitForSave() {
|
|
return new Promise((resolve) => setTimeout(resolve, 0));
|
|
}
|
|
while (client.worker) { await waitForSave(); }
|
|
}
|
|
addEventListener('beforeunload', onBeforeUnload);
|
|
return () => {
|
|
removeEventListener('beforeunload', onBeforeUnload);
|
|
};
|
|
});
|
|
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]);
|
|
useEffect(() => {
|
|
let source = true;
|
|
async function play() {
|
|
const ctx = new AudioContext();
|
|
const response = await fetch(new URL('/assets/yuff.wav', window.location.origin));
|
|
const buffer = await ctx.decodeAudioData(await response.arrayBuffer());
|
|
if (!source) {
|
|
return;
|
|
}
|
|
source = ctx.createBufferSource();
|
|
source.buffer = buffer;
|
|
source.connect(ctx.destination);
|
|
source.loop = true;
|
|
source.start();
|
|
}
|
|
setTimeout(play, 1000);
|
|
return () => {
|
|
if (true !== source) {
|
|
source.stop();
|
|
}
|
|
source = false;
|
|
};
|
|
}, [])
|
|
return (
|
|
<ClientContext.Provider value={client}>
|
|
<MainEntityContext.Provider value={mainEntityTuple}>
|
|
<EcsContext.Provider value={ecsTuple}>
|
|
<DebugContext.Provider value={debugTuple}>
|
|
<AssetsContext.Provider value={assetsTuple}>
|
|
<Ui disconnected={disconnected} />
|
|
</AssetsContext.Provider>
|
|
</DebugContext.Provider>
|
|
</EcsContext.Provider>
|
|
</MainEntityContext.Provider>
|
|
</ClientContext.Provider>
|
|
);
|
|
}
|