world-game/src/views/Play.svelte

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

  let { data } = $props()

  // --- Derived ---
  const isActive = $derived(slides.active?.id === 'jouer')
  const games    = $derived(data?.games ?? [])

  // --- State ---
  let currentIndex    = $state(0)  // index de la sélection (mis à jour immédiatement)
  let displayedIndex  = $state(0)  // index affiché (mis à jour au milieu de la transition)
  let isOut           = $state(false)
  let isTransitioning = $state(false)
  let slideDir        = $state(1)   // -1 : vers la droite, 1 : vers la gauche

  const displayedGame = $derived(games[displayedIndex] ?? null)

  let t1 = null
  let t2 = null

  function selectGame(i) {
    if (i === currentIndex || isTransitioning || !games.length) return

    slideDir     = i > currentIndex ? -1 : 1
    currentIndex = i
    isOut        = true
    isTransitioning = true

    clearTimeout(t1)
    clearTimeout(t2)

    // Milieu : swap du contenu affiché et du fond (éléments invisibles à ce moment)
    t1 = setTimeout(() => {
      displayedIndex = i
      isOut          = false
    }, 300)

    // Fin de transition
    t2 = setTimeout(() => {
      isTransitioning = false
    }, 600)
  }

  // Réinitialisation quand on quitte la slide
  $effect(() => {
    if (!isActive) {
      clearTimeout(t1)
      clearTimeout(t2)
      currentIndex    = 0
      displayedIndex  = 0
      isOut           = false
      isTransitioning = false
    }
  })

  onMount(() => () => {
    clearTimeout(t1)
    clearTimeout(t2)
  })
</script>

<section class="play golden-grid slide" aria-label="Jouer">

  <!-- Fond : image + overlay, crossfade au changement de jeu -->
  <div class="play-bg" class:is-out={isOut} aria-hidden="true">
    {#if displayedGame?.backgroundImage}
      <img class="play-bg-img" src={displayedGame.backgroundImage} alt="" />
    {/if}
    <div class="play-bg-overlay"></div>
  </div>

  <!-- Lignes courbes décoratives (SVG) -->
  <div class="play-curves" aria-hidden="true">
    <svg viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.2">
        <mask id="play-curves-mask" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="-16" width="1915" height="1086">
          <path d="M1919.57 -15.1654H5.50122V1069.95H1919.57V-15.1654Z" fill="white"/>
        </mask>
        <g mask="url(#play-curves-mask)">
          <path d="M-183.792 913.715L2331.66 833.813" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 836.732L2331.66 692.277" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 759.749L2331.66 550.74" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 682.765L2331.66 409.204" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 605.782L2331.66 267.633" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 528.799L2331.66 126.096" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 451.816L2331.66 -15.4402" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 374.867L2331.66 -156.977" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 297.884L2331.66 -298.513" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 220.901L2331.66 -440.05" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 143.917L2331.66 -581.621" stroke="white" stroke-miterlimit="10"/>
          <path d="M-183.792 66.9339L2331.66 -723.157" stroke="white" stroke-miterlimit="10"/>
          <path d="M-1449.15 1070.43L-398.072 931.399C-15.9165 865.61 39.8245 286.038 39.8245 286.038L96.3206 -98.8099" stroke="white" stroke-width="0.78" stroke-miterlimit="10"/>
          <path d="M-1319.96 1070.91L-246.878 926.111C143.275 857.609 200.183 253.967 200.183 253.967L257.846 -146.847" stroke="white" stroke-width="0.8" stroke-miterlimit="10"/>
          <path d="M-1190.77 1071.39L-95.6497 920.823C302.501 849.574 360.576 221.896 360.576 221.896L419.406 -194.885" stroke="white" stroke-width="0.82" stroke-miterlimit="10"/>
          <path d="M-1061.54 1071.87L55.5788 915.535C461.726 841.574 520.968 189.826 520.968 189.826L581 -242.922" stroke="white" stroke-width="0.85" stroke-miterlimit="10"/>
          <path d="M-932.349 1072.35L206.773 910.247C620.918 833.539 681.361 157.755 681.361 157.755L742.559 -290.959" stroke="white" stroke-width="0.87" stroke-miterlimit="10"/>
          <path d="M-803.156 1072.8L357.967 904.925C780.144 825.504 841.72 125.65 841.72 125.65L904.119 -339.031" stroke="white" stroke-width="0.9" stroke-miterlimit="10"/>
          <path d="M-673.963 1073.28L509.161 899.637C939.335 817.469 1002.08 93.5794 1002.08 93.5794L1065.64 -387.068" stroke="white" stroke-width="0.92" stroke-miterlimit="10"/>
          <path d="M-544.736 1073.76L660.424 894.35C1098.6 809.469 1162.51 61.5431 1162.51 61.5431L1227.27 -435.071" stroke="white" stroke-width="0.94" stroke-miterlimit="10"/>
          <path d="M-415.543 1074.24L811.618 889.062C1257.79 801.434 1322.86 29.4725 1322.86 29.4725L1388.8 -483.108" stroke="white" stroke-width="0.97" stroke-miterlimit="10"/>
          <path d="M-286.35 1074.72L962.812 883.774C1416.98 793.433 1483.22 -2.59817 1483.22 -2.59817L1550.36 -531.146" stroke="white" stroke-width="0.99" stroke-miterlimit="10"/>
          <path d="M-157.157 1075.2L1114.01 878.486C1576.17 785.398 1643.58 -34.6688 1643.58 -34.6688L1711.88 -579.183" stroke="white" stroke-width="1.01" stroke-miterlimit="10"/>
          <path d="M-27.9639 1075.65L1265.2 873.163C1735.36 777.364 1803.97 -66.7738 1803.97 -66.7738L1873.48 -627.254" stroke="white" stroke-width="1.04" stroke-miterlimit="10"/>
          <path d="M101.263 1076.13L1416.46 867.876C1894.62 769.329 1964.4 -98.8443 1964.4 -98.8443L2035.07 -675.292" stroke="white" stroke-width="1.06" stroke-miterlimit="10"/>
          <path d="M230.456 1076.61L1567.66 862.588C2053.85 761.328 2124.76 -130.915 2124.76 -130.915L2196.6 -723.329" stroke="white" stroke-width="1.09" stroke-miterlimit="10"/>
          <path d="M359.649 1077.09L1718.85 857.3C2213.04 753.293 2285.12 -162.986 2285.12 -162.986L2358.16 -771.366" stroke="white" stroke-width="1.11" stroke-miterlimit="10"/>
          <path d="M488.842 1077.57L1870.05 852.012C2372.23 745.293 2445.48 -195.056 2445.48 -195.056L2519.68 -819.403" stroke="white" stroke-width="1.13" stroke-miterlimit="10"/>
          <path d="M618.035 1078.05L2021.24 846.724C2531.42 737.258 2605.83 -227.127 2605.83 -227.127L2681.24 -867.441" stroke="white" stroke-width="1.16" stroke-miterlimit="10"/>
          <path d="M747.262 1078.5L2172.47 841.402C2690.65 729.223 2766.23 -259.197 2766.23 -259.197L2842.8 -915.478" stroke="white" stroke-width="1.18" stroke-miterlimit="10"/>
          <path d="M876.455 1078.98L2323.7 836.114C2849.87 721.189 2926.62 -291.268 2926.62 -291.268L3004.4 -963.515" stroke="white" stroke-width="1.2" stroke-miterlimit="10"/>
          <path d="M1005.65 1079.46L2474.89 830.827C3009.06 713.188 3087.01 -323.339 3087.01 -323.339L3165.96 -1011.55" stroke="white" stroke-width="1.23" stroke-miterlimit="10"/>
          <path d="M1134.84 1079.94L2626.08 825.538C3168.26 705.153 3247.37 -355.409 3247.37 -355.409L3327.52 -1059.62" stroke="white" stroke-width="1.25" stroke-miterlimit="10"/>
          <path d="M1264.07 1080.42L2777.31 820.25C3327.48 697.153 3407.76 -387.48 3407.76 -387.48L3489.08 -1107.66" stroke="white" stroke-width="1.28" stroke-miterlimit="10"/>
          <path d="M1393.26 1080.9L2928.51 814.963C3486.71 689.118 3568.12 -419.551 3568.12 -419.551L3650.64 -1155.7" stroke="white" stroke-width="1.3" stroke-miterlimit="10"/>
          <path d="M1522.45 1081.35L3079.74 809.64C3645.93 681.083 3728.52 -451.656 3728.52 -451.656L3812.2 -1203.77" stroke="white" stroke-width="1.32" stroke-miterlimit="10"/>
          <path d="M1651.65 1081.83L3230.93 804.353C3805.12 673.048 3888.87 -483.726 3888.87 -483.726L3973.72 -1251.81" stroke="white" stroke-width="1.35" stroke-miterlimit="10"/>
          <path d="M1780.84 1082.31L3382.12 799.065C3964.32 665.048 4049.23 -515.797 4049.23 -515.797L4135.31 -1299.84" stroke="white" stroke-width="1.37" stroke-miterlimit="10"/>
        </g>
      </g>
    </svg>
  </div>


  <!-- Section principale : lettering + description + boutons de jeu -->
  <div
    class="play-featured"
    class:is-out={isOut}
    style="--slide-dir: {slideDir}"
    aria-live="polite"
  >
    {#if displayedGame}
      {#if displayedGame.lettering}
        <img
          class="play-lettering"
          src={displayedGame.lettering}
          alt={displayedGame.title}
        />
      {/if}

      {#if displayedGame.description}
        <div class="play-description">{@html displayedGame.description}</div>
      {/if}

      <div class="play-actions">
        {#if displayedGame.playLinks?.length}
          {#each displayedGame.playLinks as link}
            <a
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              class="button"
            >{link.label}</a>
          {/each}
        {:else}
          <button class="button" disabled>Coming soon</button>
        {/if}
      </div>
    {/if}
  </div>

  <!-- Carrousel de sélection des jeux -->
  <nav class="play-carousel" aria-label="Choisir un jeu">
    <ul role="list">
      {#each games as game, i}
        <li class="play-carousel-item" class:active={i === currentIndex}>
          <button
            aria-label={game.title}
            aria-current={i === currentIndex ? 'true' : undefined}
            onclick={() => selectGame(i)}
          >
            {#if game.thumbnail}
              <img src={game.thumbnail} alt="" />
            {/if}
            <span class="play-carousel-title">{game.title}</span>
          </button>
        </li>
      {/each}
    </ul>
  </nav>

</section>

<style>
  .play {
    background: #000;
  }

  /* --- Background --- */
  .play-bg {
    grid-area: 1/1 / span 20 / span 20;
    position: relative;
    overflow: hidden;
    transition: opacity 0.4s ease;
  }

  .play-bg.is-out {
    opacity: 0;
  }

  .play-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .play-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.35) 60%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }

  /* --- Lignes courbes SVG --- */
  .play-curves {
    grid-area: 1/1 / span 20 / span 20;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .play-curves svg {
    width: 100%;
    height: 100%;
  }

  /* --- Section principale --- */
  .play-featured {
    grid-area: 4/4 / span 12 / span 10;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .play-featured.is-out {
    opacity: 0;
    transform: translateX(calc(var(--slide-dir) * 40px));
  }

  .play-lettering {
    width: clamp(180px,18.77vw,362px);
    object-fit: contain;
    object-position: left center;
  }

  .play-description {
    font-size: var(--font-size-paragraph);
    color: var(--color-text);
    line-height: 1.5;
    max-width: 42ch;
  }

  .play-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* --- Carrousel --- */
  .play-carousel {
    grid-area: 16/4 / span 3 / span 14;
    z-index: var(--z-content);
  }

  .play-carousel ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    height: 100%;
  }

  .play-carousel-item button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(140px,15.09vw,291px);
    border-radius: 12px;
    border: 2px solid transparent;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard);
  }
  .play-carousel-item.active button {
    opacity: 1;
    width: clamp(170px,18.41vw,355px);
  }

  .play-carousel-item button img {
    object-fit: cover;
    transition: border-color 0.4s var(--ease-standard);
  }

  .play-carousel-title {
    font-size: var(--font-size-caption);
    color: var(--color-text);
    text-align: center;
  }

  .play-carousel-item.active button img {
    border-color: var(--color-primary);
  }

  /* --- Mobile (≤ 700px) --- */
  @media screen and (max-width: 700px) {
    .play-bg-overlay {
      background: rgba(0, 0, 0, 0.6);
    }

    .play-featured {
      grid-area: 3/2 / span 12 / span 18;
    }

    .play-carousel {
      grid-area: 16/2 / span 3 / span 18;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .play-featured,
    .play-bg,
    .play-carousel-item button {
      transition: none;
    }
  }
</style>