world-game/src/lib/router.js

import navaid from "navaid";
import { pageStore } from "@stores/page";
import { navigationStore } from "@stores/navigation";
import { siteStore } from "@stores/site";
import { localeStore } from "@stores/locale";

export const router = navaid("/", () => {
  // Default handler
});

async function loadPage(path) {
  navigationStore.setLoading(true);
  pageStore.setLoading(true);

  try {
    // Fetch JSON data for this page
    const response = await fetch(`${path}.json`);

    if (!response.ok) {
      throw new Error(`Failed to load page: ${response.status}`);
    }

    const data = await response.json();

    // Update site store with site data (from genericData)
    if (data.site) {
      siteStore.set(data.site);
      localeStore.initialize(data.site.language, data.site.languages);
    }

    // Update page store with page data
    pageStore.set({
      data,
      template: data.template || "default",
      url: path,
      loading: false,
      error: null,
    });

    // Scroll to top
    window.scrollTo(0, 0);
  } catch (error) {
    console.error("Failed to load page:", error);
    pageStore.setError(error);
  } finally {
    navigationStore.setLoading(false);
  }
}

// Route handlers
router
  .on("/", () => loadPage("/home"))
  .on("/expertise", () => loadPage("/expertise"))
  .on("/portfolio", () => loadPage("/portfolio"))
  .on("/portfolio/:slug", ({ slug }) => loadPage(`/portfolio/${slug}`))
  .on("/jouer", () => loadPage("/jouer"))
  .on("/jouer/:slug", ({ slug }) => loadPage(`/jouer/${slug}`))
  .on("/a-propos", () => loadPage("/a-propos"))
  .on("/blog", () => loadPage("/blog"))
  .on("/blog/:slug", ({ slug }) => loadPage(`/blog/${slug}`))
  .on("*", (params) => {
    // Fallback for other routes
    loadPage(window.location.pathname);
  });

export function initRouter() {
  // Load initial page data
  loadPage(window.location.pathname);

  // Start listening to route changes
  router.listen();

  // Intercept internal link clicks
  document.addEventListener("click", (e) => {
    const link = e.target.closest("a");
    if (!link) return;

    const url = new URL(link.href, window.location.origin);

    // Only intercept same-origin links without target attribute
    if (
      url.origin === window.location.origin &&
      !link.target &&
      !link.hasAttribute("download")
    ) {
      e.preventDefault();
      navigateTo(url.pathname);
    }
  });

  // Handle browser back/forward
  window.addEventListener("popstate", () => {
    loadPage(window.location.pathname);
  });
}

export function navigateTo(path) {
  window.history.pushState({}, "", path);
  loadPage(path);
}