Genarrative/src/main.tsx

/* eslint-disable react-refresh/only-export-components */

import './index.css';

import {StrictMode, Suspense} from 'react';
import {createRoot} from 'react-dom/client';

import {stabilizeMobileViewportKeyboardFocus} from './mobileViewportKeyboardFocus';
import {lockMobileViewportZoom} from './mobileViewportZoomLock';
import {resolveAppRoute} from './routing/appRoutes';
import {RouteImageReadyGate} from './routing/RouteImageReadyGate';
import {RouteLoadingScreen} from './routing/RouteLoadingScreen';

type AppRoot = ReturnType<typeof createRoot>;

declare global {
  interface Window {
    __tavernRealmsRoot__?: AppRoot;
  }
}

const route = resolveAppRoute(window.location.pathname);
const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Missing #root container');
}

const root = window.__tavernRealmsRoot__ ??= createRoot(rootElement);
const RouteComponent = route.Component;

lockMobileViewportZoom();
stabilizeMobileViewportKeyboardFocus();

root.render(
  <StrictMode>
    <Suspense fallback={<RouteLoadingScreen eyebrow={route.loadingEyebrow} text={route.loadingText} />}>
      <RouteImageReadyGate
        eyebrow={route.loadingEyebrow}
        text={route.loadingText}
      >
        <RouteComponent {...(route.componentProps ?? {})} />
      </RouteImageReadyGate>
    </Suspense>
  </StrictMode>,
);