55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { AnimatedBackground } from '@/mainview/components/AnimatedBackground';
|
|
import { createFileRoute, useBlocker, useRouter } from '@tanstack/react-router';
|
|
import DotsLoading from '../components/backgrounds/dots';
|
|
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/shortcuts';
|
|
import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
|
import Shortcuts, { FloatingShortcuts } from '../components/Shortcuts';
|
|
import { useJobStatus } from '../scripts/utils';
|
|
|
|
export const Route = createFileRoute('/launcher/$source/$id')({
|
|
component: RouteComponent,
|
|
staticData: {
|
|
enterSound: 'launch'
|
|
},
|
|
});
|
|
|
|
function RouteComponent ()
|
|
{
|
|
const router = useRouter();
|
|
function HandleGoBack ()
|
|
{
|
|
if (router.history.canGoBack())
|
|
{
|
|
router.history.back();
|
|
} else
|
|
{
|
|
router.navigate({ to: '/game/$source/$id', viewTransition: { types: ['zoom-out'] }, params: { source, id }, replace: true });
|
|
}
|
|
}
|
|
|
|
const { source, id } = Route.useParams();
|
|
const { ref, focusKey } = useFocusable({ focusKey: `launching-${source}-${id}` });
|
|
|
|
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
|
|
|
|
const { data } = useJobStatus('launch-game', {
|
|
onEnded (data)
|
|
{
|
|
HandleGoBack();
|
|
},
|
|
onWaiting ()
|
|
{
|
|
HandleGoBack();
|
|
},
|
|
});
|
|
|
|
useBlocker({ shouldBlockFn: () => !!data });
|
|
|
|
return <AnimatedBackground ref={ref} backgroundKey='game-details'>
|
|
<div className='flex shadow-2xs shadow-black flex-col absolute w-screen h-screen overflow-hidden justify-center items-center gap-4'>
|
|
<DotsLoading />
|
|
<h1 className='font-semibold'>Launching {data?.name} ...</h1>
|
|
</div>
|
|
<FloatingShortcuts />
|
|
</AnimatedBackground>;
|
|
}
|