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

Feat: lignes courbes SVG sur Play + refonte blueprint game

Browse source 
- Play.svelte : ajout overlay SVG (background-play), suppression des vertical-line
- game.yml : restructuration du blueprint
- Header.svelte : modifications mineures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-09 14:18:38 +01:00
parent 69859cc60f
commit 3cafcf3167
3 changed files with 130 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,58 +1,19 @@
title: Jeu
icon: play
# status:
# draft:
# label: Brouillon
# text: Le jeu n'est pas visible
# unlisted:
# label: Non listé
# text: Le jeu est accessible mais pas dans la liste
# listed:
# label: Publié
# text: Le jeu est visible publiquement
status:
draft:
label: Brouillon
text: Le jeu n'est pas visible
unlisted:
label: Non listé
text: Le jeu est accessible mais pas dans la liste
listed:
label: Public
text: Le jeu est visible publiquement
columns:
# Colonne principale
main:
width: 2/3
sections:
# Informations principales
content:
type: fields
fields:
lettering:
label: Lettrage du jeu
type: files
layout: cardlets
size: small
max: 1
accept: image/*
translate: false
image:
ratio: 1/1
uploads:
template: image
help: Image avec le lettrage du jeu
description:
label: Description
type: writer
marks:
- bold
- italic
- green
- pixel
- underline
- strike
- clear
- link
# Sidebar
sidebar:
width: 1/3
sections:
meta:
type: fields
- width: 2/10
fields:
thumbnail:
label: Vignette
@ -66,20 +27,50 @@ columns:
ratio: 1/1
uploads:
template: image
help: Petite image carrée représentant le jeu
help: Pour le carousel de navigation parmi les jeux
- width: 2/10
fields:
lettering:
label: Lettrage
type: files
multiple: false
translate: false
layout: cards
size: tiny
uploads:
template: image
help: Affiché au-dessus de la description
width: 1/3
- width: 3/10
fields:
description:
label: Description
type: writer
marks:
- bold
- italic
- green
- pixel
- underline
- strike
- clear
- link
playLinks:
label: Lien(s) pour jouer
help: Sans lien renseigner, le jeu aura une étiquette "coming soon" et ne sera pas jouable.
type: structure
fields:
label:
label: Nom du bouton
required: true
type: text
width: 1/2
placeholder: "Ex: App Store, Site web..."
url:
label: URL
required: true
help: Laissez vide pour afficher "à venir / coming soon"
type: url
width: 1/2
- width: 3/10
sections:
previewCol:
type: fields
fields:
preview:
label: Aperçu
type: files
layout: cards
multiple: false
translate: false
uploads:
template: image
help: Image affichée à droite de la description (sur ordinateur uniquement)

3
src/components/layout/Header.svelte
View file

@ -71,9 +71,6 @@
text-align: center;
text-transform: uppercase;
padding: 2vh 0;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
transition: 0.3s;
}
/* Logo */

90
src/views/Play.svelte
View file

@ -71,12 +71,57 @@
<div class="play-bg-overlay"></div>
</div>
<!-- Lignes verticales décoratives -->
<div class="vertical-line-start" aria-hidden="true"></div>
<div class="vertical-line vertical-line-col8" aria-hidden="true"></div>
<div class="vertical-line-center" aria-hidden="true"></div>
<div class="vertical-line vertical-line-col14" aria-hidden="true"></div>
<div class="vertical-line-end" 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>
<!-- Section principale : lettering + description + boutons de jeu -->
<div
@ -173,13 +218,17 @@
);
}
/* --- Lignes verticales --- */
.vertical-line-col8 {
grid-area: 1/8 / span 20 / span 1;
/* --- Lignes courbes SVG --- */
.play-curves {
grid-area: 1/1 / span 20 / span 20;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.vertical-line-col14 {
grid-area: 1/14 / span 20 / span 1;
.play-curves svg {
width: 100%;
height: 100%;
}
/* --- Section principale --- */
@ -199,8 +248,7 @@
}
.play-lettering {
max-height: 120px;
width: auto;
width: clamp(180px,18.77vw,362px);
object-fit: contain;
object-position: left center;
}
@ -236,6 +284,9 @@
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;
@ -243,13 +294,13 @@
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 {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 12px;
border: 2px solid transparent;
transition: border-color 0.4s var(--ease-standard);
}
@ -259,11 +310,6 @@
text-align: center;
}
.play-carousel-item.active button {
opacity: 1;
transform: scale(1.15) translateY(-4px);
}
.play-carousel-item.active button img {
border-color: var(--color-primary);
}