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 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 wrapperWidth = $derived(`${slides.all.length * 100}vw`)
  const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)

  onMount(() => {
    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('keydown', handleKeydown)
  })
</script>

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

  <main class="main">
    <div
      class="slides-wrapper"
      style="width: {wrapperWidth}; transform: {wrapperTransform}"
    >
      {#each slides.all as slide}
        <div class="slide" data-slide={slide.id}>
          {#if slide.loaded}
            <svelte:component
              this={templates[slide.template] ?? Default}
              data={slide.data}
            />
          {/if}
        </div>
      {/each}
    </div>
  </main>
</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: hidden;
  }

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

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

  .app {
    height: 100vh;
  }

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

  .slides-wrapper {
    display: flex;
    height: 100%;
    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  .slide {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
  }
</style>