Navigare/passare da una schermata all'altra dell'UI

Per passare da una schermata all'altra dell'interfaccia utente (senza interrompere il canvas), è possibile utilizzare popup e finestre modali oppure navigare tra diversi percorsi/route URL.

Cosa sono i percorsi/route URL? I percorsi/route URL sono le parti dell'URL che seguono il dominio. Ad esempio, nell'URL https://example.com/path/to/page, la route è /path/to/page. In genere, in tutti i progetti web front-end (client), ogni percorso è collegato a una pagina web (schermata dell'interfaccia utente).

È possibile utilizzare un sistema di routing per gestire la navigazione tra percorsi/route URL. Ad esempio, puoi usare:

• React Router
• Vue Router
• Angular Router
• TanStack Router

import { Route, Routes } from "react-router-dom";
import LoadingScreen from "./screens/LoadingScreen";
import MainMenu from "./screens/MainMenu";
import NarrationElement from "./screens/NarrationElement";

export default function AppRoutes() {
    return (
        <Routes>
            <Route key={"main_menu"} path={"/"} element={<MainMenu />} />
            <Route key={"loading"} path={"/loading"} element={<LoadingScreen />} />
            <Route key={"narration"} path={"/narration"} element={<NarrationElement />} />
            <Route path='*' element={<MainMenu />} />
        </Routes>
    );
}

Come navigare tra le route?

Per navigare tra i percorsi, utilizza la funzione di navigazione fornita dal sistema di routing.

Nei progetti pixi-vn è molto comune dover navigare tra i percorsi durante la narrazione. Per abilitare questa funzione, la funzione di navigazione deve essere inclusa nell'interfaccia StepLabelProps.

import { narration } from '@drincs/pixi-vn'

declare module '@drincs/pixi-vn' {
    interface StepLabelProps {
        navigate: (route: string) => void,
    }
}

# navigate [route]

Quindi, quando si crea una nuova etichetta, è possibile utilizzare la funzione navigate per passare da un percorso all'altro:

export const startLabel = newLabel("start_label",
    [
        ({ navigate }) => { 
            navigate("/new-route") 
        }, 
    ]
)