Initial commit

apps/frontend/src/App.tsx

@@ -0,0 +1,81 @@
+import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
+import { OverviewPage } from "./pages/Overview";
+import { MatchPage } from "./pages/MatchDetails";
+import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
+
+function Layout(props: ParentProps) {
+  return (
+    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
+      {props.children}
+    </div>
+  );
+}
+
+function App() {
+  const [path, setPath] = createSignal(window.location.pathname);
+
+  // Die zentrale Navigations-Funktion
+  const navigate = (to) => {
+    if (window.location.pathname === to) return;
+
+    // Hier steuerst du die Transition BEVOR die URL oder das Signal angefasst wird
+    if (document.startViewTransition) {
+      document.startViewTransition(() => {
+        window.history.pushState({}, "", to);
+        setPath(to);
+      });
+    } else {
+      window.history.pushState({}, "", to);
+      setPath(to);
+    }
+  };
+
+  const handlePopstate = () => {
+    if (document.startViewTransition) {
+      document.documentElement.classList.add("back-navigation");
+      // Der Browser hat die URL bei BACK schon geändert,
+      // wir triggern die Transition und updaten das Signal synchron
+      const transition = document.startViewTransition(() => {
+        setPath(window.location.pathname);
+      });
+      transition.finished.then(() => {
+        document.documentElement.classList.remove("back-navigation");
+      });
+    } else {
+      setPath(window.location.pathname);
+    }
+  };
+
+  const handleLinks = (e) => {
+    const a = e.target.closest("a");
+    if (a) {
+      const href = a.getAttribute("href");
+      if (href.startsWith("/")) {
+        e.preventDefault();
+        navigate(href);
+      }
+    }
+  };
+  // Hier fixen wir das Back-Button-Problem ein für alle Mal sauber!
+  onMount(() => {
+    window.addEventListener("click", handleLinks);
+    window.addEventListener("popstate", handlePopstate);
+  });
+  onCleanup(() => {
+    window.removeEventListener("click", handleLinks);
+    window.removeEventListener("popstate", handlePopstate);
+  });
+
+  return (
+    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
+      <Show when={path() === "/"}>
+        <OverviewPage />
+      </Show>
+      <Show when={path().startsWith("/match/")}>
+        <MatchPage />
+      </Show>
+    </div>
+  );
+}
+
+export default App;