world-game/src/App.svelte

<script>
  import { pageStore } from '@stores/page'

  import Header from '@components/layout/Header.svelte'
  import Footer from '@components/layout/Footer.svelte'
  import Cursor from '@components/layout/Cursor.svelte'

  import Home from '@views/Home.svelte'
  import About from '@views/About.svelte'
  import Expertise from '@views/Expertise.svelte'
  import Portfolio from '@views/Portfolio.svelte'
  import Project from '@views/Project.svelte'
  import Jouer from '@views/Jouer.svelte'
  import Game from '@views/Game.svelte'
  import Blog from '@views/Blog.svelte'
  import Article from '@views/Article.svelte'
  import Default from '@views/Default.svelte'

  const templates = {
    'home': Home,
    'about': About,
    'expertise': Expertise,
    'portfolio': Portfolio,
    'project': Project,
    'jouer': Jouer,
    'game': Game,
    'blog': Blog,
    'article': Article,
    'default': Default
  }

  const template = $derived($pageStore.template || 'default')
  const component = $derived(templates[template] || Default)
  const data = $derived($pageStore.data)
  const showFooter = $derived(template !== 'home')
</script>

<div class="app">
  <Cursor />
  <Header />

  <main class="main">
    {#if data && component}
      {@const Component = component}
      <Component {data} />
    {/if}
  </main>

  {#if showFooter}
    <Footer />
  {/if}
</div>

<style>
  :global(*) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :global(body) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
  }

  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .main {
    flex: 1;
  }

  :global(a) {
    color: inherit;
    text-decoration: none;
  }

  :global(img) {
    max-width: 100%;
    height: auto;
  }
</style>