world-game/src/App.svelte

<script>
  import { onMount } from 'svelte'
  import { slides } from '@state/slides.svelte'
  import { slideTo } from '@router'

  import Header from '@components/layout/Header.svelte'
  import Cursor from '@components/layout/Cursor.svelte'
  import LanguageSwitcher from '@components/ui/LanguageSwitcher.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 Play from '@views/Play.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,
    play: Play,
    game: Game,
    blog: Blog,
    article: Article,
    default: Default
  }

  const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
  const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)

  let isReady    = $state(false)
  let isResizing = $state(false)
  let resizeTimer = null

  // Active la transition seulement après le premier paint à la bonne position.
  // Double rAF : le premier laisse passer un paint avec le bon translateX,
  // le second active is-animated — évite l'animation parasite au chargement.
  $effect(() => {
    if (slides.all.length > 0 && !isReady) {
      requestAnimationFrame(() => requestAnimationFrame(() => { isReady = true }))
    }
  })

  onMount(() => {
    const handleResize = () => {
      isResizing = true
      clearTimeout(resizeTimer)
      resizeTimer = setTimeout(() => { isResizing = false }, 150)
    }
    window.addEventListener('resize', handleResize)

    const handleKeydown = (e) => {
      if (e.key === 'ArrowRight') {
        const next = slides.all[slides.activeIndex + 1]
        if (next) slideTo(next.path)
      } else if (e.key === 'ArrowLeft') {
        const prev = slides.all[slides.activeIndex - 1]
        if (prev) slideTo(prev.path)
      }
    }
    window.addEventListener('keydown', handleKeydown)
    return () => {
      window.removeEventListener('resize', handleResize)
      window.removeEventListener('keydown', handleKeydown)
      clearTimeout(resizeTimer)
    }
  })
</script>

<Cursor />
<Header />
<div class="bg-fixed"></div>

<main class="main">
  <div
    class="slides-wrapper"
    class:is-animated={isReady && !isResizing}
    style="width: {wrapperWidth}; transform: {wrapperTransform}"
  >
    {#each slides.all as slide, i}
      <section class="slide" class:active={i === slides.activeIndex} data-slide={slide.id}>
        {#if slide.loaded}
          <svelte:component
            this={templates[slide.template] ?? Default}
            data={slide.data}
          />
        {/if}
      </section>
    {/each}
  </div>
</main>
<LanguageSwitcher />

<style>
  :global(#app) {
    height: 100vh;
  }

  :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: hidden;
  }

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

  :global(img) {
    max-width: 100%;
    height: auto;
  }

  .main {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }

  .slides-wrapper {
    display: flex;
    height: 100%;
  }

  .slides-wrapper.is-animated {
    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  .slide {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
  }

  .bg-fixed {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('/assets/img/BACKGROUND2.52010fb6a490a17ef475.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>