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

import {json} from "@remix-run/node";
import {useEffect, useState} from 'react';
import {useOutletContext, useParams} from 'react-router-dom';

import ClientContext from '@/context/client.js';
import Ui from '@/react-components/ui.jsx';
import {juggleSession} from '@/session.server';

export async function loader({request}) {
  await juggleSession(request);
  return json({});
}

export default function PlaySpecific() {
  const Client = useOutletContext();
  const [client, setClient] = useState();
  const [disconnected, setDisconnected] = useState(false);
  const params = useParams();
  const [, 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]);
  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}>
      <Ui disconnected={disconnected} />
    </ClientContext.Provider>
  );
}