basic browser routing

src/App.tsx

@@ -1,12 +1,81 @@
+import { BrowserRouter, Link, Outlet, Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { reaction } from 'mobx';
 import { ThreeView } from './components/ThreeView';
-import './App.scss';
 import { Toolbar } from './components/Toolbar';
+import { state } from './state';
+import './App.scss';
+
+function StateToUrlSync() {
+    const navigate = useNavigate();
+    useEffect(() => reaction(
+        () => ({
+            isGame: state.isGamePlaying,
+            selectedId: state.worldEditor.selectedObjectId,
+        }),
+        ({ isGame, selectedId }) => {
+            if (isGame) navigate('/game');
+            else if (selectedId) navigate(`/editor/object/${selectedId}`);
+            else navigate('/editor');
+        },
+    ), []);
+    return null;
+}
+
+function EditorRoute() {
+    useEffect(() => {
+        if (state.isGamePlaying) state.stopGame();
+        state.worldEditor.resetSelectedObject();
+    }, []);
+    return null;
+}
+
+function EditorObjectRoute() {
+    const { id } = useParams<{ id: string }>();
+    useEffect(() => {
+        if (!id) return;
+        if (state.isGamePlaying) state.stopGame();
+        const mode = state.worldEditor.selectedObjectId === id
+            ? state.worldEditor.selectedObjectMode ?? 'translate'
+            : 'translate';
+        state.worldEditor.setSelectedObject(id, mode);
+    }, [id]);
+    return null;
+}
+
+function GameRoute() {
+    useEffect(() => {
+        if (!state.isGamePlaying) state.startGame();
+    }, []);
+    return null;
+}
+
+function HomePage() {
+    return <Link to="/editor">Open Editor</Link>;
+}
+
+function EditorLayout() {
+    return (
+        <>
+            <Outlet />
+            <ThreeView />
+            <Toolbar />
+        </>
+    );
+}
 
 export const App = function () {
-  return (
-    <>
-      <ThreeView />
-      <Toolbar />
-    </>
-  )
-}
+    return (
+        <BrowserRouter>
+            <StateToUrlSync />
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route element={<EditorLayout />}>
+                    <Route path="/editor" element={<EditorRoute />} />
+                    <Route path="/editor/object/:id" element={<EditorObjectRoute />} />
+                    <Route path="/game" element={<GameRoute />} />
+                </Route>
+            </Routes>
+        </BrowserRouter>
+    );
+};