studio-variable/world-game
3
1
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

play page : replace backgroundColor with backgroundImage, remove curves. closes #37
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
Details

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-26 15:07:30 +01:00
parent 3339528d9b
commit 1cce398ee4
3 changed files with 53 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

13
site/blueprints/pages/game.yml
View file

@ -79,13 +79,10 @@ tabs:
uploads:
template: image
help: Image affichée à droite de la description (sur ordinateur uniquement)
backgroundColor:
label: Couleur d'arrière plan
type: code-editor
language: css
size: custom-size
default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%)
translate: false
help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée
backgroundImage:
label: Image d'arrière-plan
type: files
multiple: false
layout: cards
seo: seo/page

2
site/templates/play.json.php
View file

@ -10,7 +10,7 @@ $specificData = [
'thumbnail' => $game->thumbnail()->toFile()?->url(),
'thumbnailSrcset' => $game->thumbnail()->toFile()?->srcset('thumbnail'),
'thumbnailWebp' => $game->thumbnail()->toFile()?->srcset('thumbnail-webp'),
'backgroundColor' => $game->backgroundColor()->value() ?: null,
'backgroundImage' => $game->backgroundImage()->toFile()?->url(),
'preview' => $game->preview()->toFile()?->url(),
'playLink' => $game->playLink()->value() ?: null,
];

120
src/views/Play.svelte
View file

@ -18,7 +18,7 @@
let slideDir = $state(1) // 1 = exit gauche, -1 = exit droite
// Bg crossfade
let prevBgColor = $state(null)
let prevBgImage = $state(null)
let bgFading = $state(false)
const displayedGame = $derived(games[displayedIndex] ?? null)
@ -59,7 +59,7 @@
clearTimeout(t3)
t1 = setTimeout(() => {
prevBgColor = displayedGame?.backgroundColor ?? null
prevBgImage = displayedGame?.backgroundImage ?? null
displayedIndex = i
currentIndex = i
phase = 'entering'
@ -165,67 +165,21 @@
<section
class="play golden-grid"
aria-label={t('play')}
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 bgFading && prevBgImage}
<div class="play-bg-fade" style="background-image: url({prevBgImage})" aria-hidden="true"></div>
{/if}
<!-- Image d'arrière-plan CMS -->
{#if displayedGame?.backgroundImage}
<div class="play-bg-cms" style="background-image: url({displayedGame.backgroundImage})" 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}
@ -287,6 +241,7 @@
!game.playLink ? 'coming-soon' : ''
]}
style:--status={!game.playLink ? '"' + t('coming_soon') + '"' : 'false'}
style:--name={'"' + game.title + '"'}
>
<button
aria-label={game.title}
@ -311,16 +266,20 @@
</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;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@keyframes bg-fade-out {
@ -328,6 +287,20 @@
to { opacity: 0; }
}
/* --- Image d'arrière-plan CMS --- */
.play-bg-cms {
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: 0;
}
/* --- Background SVG --- */
.play-bg {
background-image: url(/static/media/background-play.f8db5aa42e2983197126.svg);
@ -343,19 +316,6 @@
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 {
height: 100vh;
width: auto;
}
/* --- Animations partagées featured + preview --- */
/* slideDir = 1 (clic droite) → exit vers la gauche, entrée depuis la droite */
@ -463,7 +423,7 @@
transition: all 0.4s var(--ease-standard);
}
.play-carousel-item.coming-soon button::after {
.play-carousel-item.coming-soon button::before {
content: var(--status);
text-transform: uppercase;
font-family: "Danzza Bold", sans-serif;
@ -473,6 +433,16 @@
padding: .5rem .7rem;
border-radius: .5rem .5rem .5rem .5rem;
position: absolute;
z-index: 1;
}
.play-carousel-item button::after {
content: var(--name);
position: absolute;
bottom: 1.5vw;
font-family: "Danza", sans-serif;
color: #fff;
font-size: 1.7vw !important;
}
.play-carousel-item :global(img) {
@ -513,6 +483,10 @@
font-size: .5rem;
font-weight: 600;
}
.play-carousel-item button::after {
font-size: 2.5vw !important;
}
}
/* --- Mobile (≤ 700px) --- */