nise/nise-replay-viewer/src/interface/App.tsx

import {AboutDialog} from "./composites/about-dialog";
import {Navbar} from "./composites/Menu";
import {SongSlider} from "./composites/song-slider";
import {Helper} from "./composites/helper";
import {useEffect} from "react";
import {OsuRenderer} from "@/osu/OsuRenderer";
import {Stats} from "@/interface/composites/stats";
import {LoadingDialog} from "@/interface/composites/loading-dialog";

export function App() {

    const loadReplay = async (replayId: number) => {
        await OsuRenderer.loadReplayFromUrl(replayId);
    };

    const loadReplayPair = async (replayId1: number, replayId2: number) => {
        await OsuRenderer.loadReplayPairFromUrl(replayId1, replayId2);
    }

    useEffect(() => {
        // This pattern matches one or more digits followed by an optional slash and any characters (non-greedy)
        const pathRegex = /^\/(\d+)(?:\/(\d+))?/;
        const match = location.pathname.match(pathRegex);

        if (match) {
            // match[1] will contain the first ID, match[2] (if present) will contain the second ID
            const pathReplayId1 = Number.parseInt(match[1]);
            const pathReplayId2 = match[2] ? Number.parseInt(match[2]) : null;

            if(pathReplayId2 != null) {
                loadReplayPair(pathReplayId1, pathReplayId2);
            } else {
                loadReplay(pathReplayId1);
            }
        }
    }, [location.pathname]);

    return (
        <>
            <Navbar/>
            <AboutDialog/>
            <LoadingDialog/>
            <SongSlider/>
            <Stats/>
            <Helper/>
        </>
    );
}