From 1cce398ee4163435c09389a1d4d74554b04ad843 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Thu, 26 Mar 2026 15:07:30 +0100 Subject: [PATCH] play page : replace backgroundColor with backgroundImage, remove curves. closes #37 Co-Authored-By: Claude Sonnet 4.6 --- site/blueprints/pages/game.yml | 13 ++-- site/templates/play.json.php | 2 +- src/views/Play.svelte | 120 +++++++++++++-------------------- 3 files changed, 53 insertions(+), 82 deletions(-) diff --git a/site/blueprints/pages/game.yml b/site/blueprints/pages/game.yml index 3394356..e14f39c 100644 --- a/site/blueprints/pages/game.yml +++ b/site/blueprints/pages/game.yml @@ -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 diff --git a/site/templates/play.json.php b/site/templates/play.json.php index 3cf86ec..8a3cf34 100644 --- a/site/templates/play.json.php +++ b/site/templates/play.json.php @@ -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, ]; diff --git a/src/views/Play.svelte b/src/views/Play.svelte index 17d6044..6e85070 100644 --- a/src/views/Play.svelte +++ b/src/views/Play.svelte @@ -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 @@
- {#if bgFading && prevBgColor} - + {#if bgFading && prevBgImage} + + {/if} + + + {#if displayedGame?.backgroundImage} + {/if} - - {#if displayedGame?.preview} @@ -287,6 +241,7 @@ !game.playLink ? 'coming-soon' : '' ]} style:--status={!game.playLink ? '"' + t('coming_soon') + '"' : 'false'} + style:--name={'"' + game.title + '"'} >