600ce937a3
All checks were successful
Deploy / Deploy to Production (push) Successful in 17s
- Phase exiting (300ms) : featured + game-preview glissent/fondent dans slideDir - Phase entering (350ms) : nouvel contenu entre depuis la direction opposée - Swap currentIndex à 300ms : carousel grossit + bg crossfade simultanés - Ajout game-preview (image preview côté droit, grid-area 3/13) - Ajout preview dans le template JSON PHP - Masqué sur mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
404 lines
14 KiB
Svelte
404 lines
14 KiB
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 actif (carousel + bg)
|
|
let displayedIndex = $state(0) // index du contenu affiché
|
|
let phase = $state('idle') // 'idle' | 'exiting' | 'entering'
|
|
let slideDir = $state(1) // 1 = click droite (exit gauche), -1 = click gauche (exit droite)
|
|
|
|
// Bg crossfade
|
|
let prevBgColor = $state(null)
|
|
let bgFading = $state(false)
|
|
|
|
const displayedGame = $derived(games[displayedIndex] ?? null)
|
|
|
|
let t1 = null
|
|
let t2 = null
|
|
let t3 = null
|
|
|
|
function selectGame(i) {
|
|
if (i === currentIndex || phase !== 'idle' || !games.length) return
|
|
|
|
// slideDir = 1 → clic à droite → content sort par la gauche, entre par la droite
|
|
slideDir = i > currentIndex ? 1 : -1
|
|
phase = 'exiting'
|
|
|
|
clearTimeout(t1)
|
|
clearTimeout(t2)
|
|
clearTimeout(t3)
|
|
|
|
// Phase 2 (300ms) : swap contenu + carousel + bg simultanés
|
|
t1 = setTimeout(() => {
|
|
prevBgColor = displayedGame?.backgroundColor ?? null
|
|
displayedIndex = i
|
|
currentIndex = i
|
|
phase = 'entering'
|
|
bgFading = true
|
|
|
|
// Fin du bg fade
|
|
t3 = setTimeout(() => { bgFading = false }, 500)
|
|
|
|
// Fin de l'entrée
|
|
t2 = setTimeout(() => { phase = 'idle' }, 350)
|
|
}, 300)
|
|
}
|
|
|
|
// Réinitialisation quand on quitte la slide
|
|
$effect(() => {
|
|
if (!isActive) {
|
|
clearTimeout(t1)
|
|
clearTimeout(t2)
|
|
clearTimeout(t3)
|
|
currentIndex = 0
|
|
displayedIndex = 0
|
|
phase = 'idle'
|
|
bgFading = false
|
|
}
|
|
})
|
|
|
|
onMount(() => () => {
|
|
clearTimeout(t1)
|
|
clearTimeout(t2)
|
|
clearTimeout(t3)
|
|
})
|
|
</script>
|
|
|
|
<section
|
|
class="play golden-grid"
|
|
aria-label="Jouer"
|
|
style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
|
|
>
|
|
|
|
<!-- Ancien fond en fondu sortant (crossfade bg) -->
|
|
{#if bgFading && prevBgColor}
|
|
<div class="play-bg-fade" style="background: {prevBgColor}" aria-hidden="true"></div>
|
|
{/if}
|
|
|
|
<!-- Fond SVG + overlay -->
|
|
<div class="play-bg" aria-hidden="true"></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>
|
|
|
|
<!-- Preview image (côté droit, décoratif) -->
|
|
{#if displayedGame?.preview}
|
|
<div
|
|
class="game-preview"
|
|
class:exiting={phase === 'exiting'}
|
|
class:entering={phase === 'entering'}
|
|
style="--slide-dir: {slideDir}"
|
|
aria-hidden="true"
|
|
>
|
|
<img src={displayedGame.preview} alt="" />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Section principale : lettering + description + bouton -->
|
|
<div
|
|
class="play-featured"
|
|
class:exiting={phase === 'exiting'}
|
|
class:entering={phase === 'entering'}
|
|
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.playLink}
|
|
<a
|
|
href={displayedGame.playLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="button play-icon"
|
|
>Jouer</a>
|
|
{: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: var(--background-color);
|
|
}
|
|
|
|
/* --- Bg crossfade --- */
|
|
.play-bg-fade {
|
|
grid-area: 1/1 / span 20 / span 20;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
animation: bg-fade-out 0.5s ease forwards;
|
|
}
|
|
|
|
@keyframes bg-fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
/* --- Background SVG --- */
|
|
.play-bg {
|
|
background-image: url(/static/media/background-play.f8db5aa42e2983197126.svg);
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: 100%;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* --- 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%;
|
|
}
|
|
|
|
/* --- Animations partagées featured + preview --- */
|
|
|
|
/* slideDir = 1 (clic droite) → exit vers la gauche, entrée depuis la droite */
|
|
/* slideDir = -1 (clic gauche) → exit vers la droite, entrée depuis la gauche */
|
|
|
|
@keyframes content-exit {
|
|
from { opacity: 1; transform: translateX(0); }
|
|
to { opacity: 0; transform: translateX(calc(var(--slide-dir) * -40px)); }
|
|
}
|
|
|
|
@keyframes content-enter {
|
|
from { opacity: 0; transform: translateX(calc(var(--slide-dir) * 40px)); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.play-featured.exiting,
|
|
.game-preview.exiting {
|
|
animation: content-exit 0.3s ease forwards;
|
|
}
|
|
|
|
.play-featured.entering,
|
|
.game-preview.entering {
|
|
animation: content-enter 0.35s ease forwards;
|
|
}
|
|
|
|
/* --- Section principale --- */
|
|
.play-featured {
|
|
grid-area: 2/4 / span 12 / span 10;
|
|
z-index: var(--z-content);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.play-lettering {
|
|
width: clamp(180px, 18.77vw, 362px);
|
|
object-fit: contain;
|
|
object-position: left center;
|
|
}
|
|
|
|
.play-description {
|
|
font-family: Danzza, sans-serif;
|
|
font-size: var(--font-size-subtitle);
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
margin: 0 0 20px;
|
|
max-width: 600px;
|
|
opacity: .9;
|
|
text-shadow: 0 1px 15px rgba(0,0,0,.6);
|
|
text-align: left;
|
|
}
|
|
|
|
.play-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* --- Preview image (droite) --- */
|
|
.game-preview {
|
|
grid-area: 3/13 / span 14 / span 7;
|
|
z-index: var(--z-content);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
object-position: center;
|
|
}
|
|
|
|
/* --- 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);
|
|
gap: 0.5rem;
|
|
background: none;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: all 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: 4px solid var(--color-primary);
|
|
border-radius: 25%;
|
|
}
|
|
|
|
/* --- Mobile (≤ 700px) --- */
|
|
@media screen and (max-width: 700px) {
|
|
.game-preview {
|
|
display: none;
|
|
}
|
|
|
|
.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,
|
|
.game-preview,
|
|
.play-bg-fade,
|
|
.play-carousel-item button {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|