studio-variable/world-game
4
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

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

@ -1,85 +1,76 @@
title: Jeu title: Jeu
icon: play icon: play
# status: status:
# draft: draft:
# label: Brouillon label: Brouillon
# text: Le jeu n'est pas visible text: Le jeu n'est pas visible
# unlisted: unlisted:
# label: Non listé label: Non listé
# text: Le jeu est accessible mais pas dans la liste text: Le jeu est accessible mais pas dans la liste
# listed: listed:
# label: Publié label: Public
# text: Le jeu est visible publiquement text: Le jeu est visible publiquement
columns: columns:
# Colonne principale - width: 2/10
main: fields:
width: 2/3 thumbnail:
sections: label: Vignette
# Informations principales type: files
content: layout: cards
type: fields size: small
fields: max: 1
lettering: accept: image/*
label: Lettrage du jeu translate: false
type: files image:
layout: cardlets ratio: 1/1
size: small uploads:
max: 1 template: image
accept: image/* help: Pour le carousel de navigation parmi les jeux
translate: false - width: 2/10
image: fields:
ratio: 1/1 lettering:
uploads: label: Lettrage
template: image type: files
help: Image avec le lettrage du jeu multiple: false
description: translate: false
label: Description layout: cards
type: writer size: tiny
marks: uploads:
- bold template: image
- italic help: Affiché au-dessus de la description
- green width: 1/3
- pixel - width: 3/10
- underline fields:
- strike description:
- clear label: Description
- link type: writer
marks:
- bold
- italic
- green
- pixel
- underline
- strike
- clear
- link
playLinks:
label: Lien(s) pour jouer
help: Laissez vide pour afficher "à venir / coming soon"
type: url
# Sidebar - width: 3/10
sidebar:
width: 1/3
sections: sections:
meta: previewCol:
type: fields type: fields
fields: fields:
thumbnail: preview:
label: Vignette label: Aperçu
type: files type: files
layout: cards layout: cards
size: small multiple: false
max: 1
accept: image/*
translate: false translate: false
image:
ratio: 1/1
uploads: uploads:
template: image template: image
help: Petite image carrée représentant le jeu help: Image affichée à droite de la description (sur ordinateur uniquement)
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
type: url
width: 1/2

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

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

90
src/views/Play.svelte
View file

@ -71,12 +71,57 @@
<div class="play-bg-overlay"></div> <div class="play-bg-overlay"></div>
</div> </div>
<!-- Lignes verticales décoratives --> <!-- Lignes courbes décoratives (SVG) -->
<div class="vertical-line-start" aria-hidden="true"></div> <div class="play-curves" aria-hidden="true">
<div class="vertical-line vertical-line-col8" aria-hidden="true"></div> <svg viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
<div class="vertical-line-center" aria-hidden="true"></div> <g opacity="0.2">
<div class="vertical-line vertical-line-col14" aria-hidden="true"></div> <mask id="play-curves-mask" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="-16" width="1915" height="1086">
<div class="vertical-line-end" aria-hidden="true"></div> <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 --> <!-- Section principale : lettering + description + boutons de jeu -->
<div <div
@ -173,13 +218,17 @@
); );
} }
/* --- Lignes verticales --- */ /* --- Lignes courbes SVG --- */
.vertical-line-col8 { .play-curves {
grid-area: 1/8 / span 20 / span 1; grid-area: 1/1 / span 20 / span 20;
pointer-events: none;
z-index: 1;
overflow: hidden;
} }
.vertical-line-col14 { .play-curves svg {
grid-area: 1/14 / span 20 / span 1; width: 100%;
height: 100%;
} }
/* --- Section principale --- */ /* --- Section principale --- */
@ -199,8 +248,7 @@
} }
.play-lettering { .play-lettering {
max-height: 120px; width: clamp(180px,18.77vw,362px);
width: auto;
object-fit: contain; object-fit: contain;
object-position: left center; object-position: left center;
} }
@ -236,6 +284,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: clamp(140px,15.09vw,291px);
border-radius: 12px;
border: 2px solid transparent;
gap: 0.5rem; gap: 0.5rem;
background: none; background: none;
border: none; border: none;
@ -243,13 +294,13 @@
opacity: 0.5; opacity: 0.5;
transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard); 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 { .play-carousel-item button img {
width: 64px;
height: 64px;
object-fit: cover; object-fit: cover;
border-radius: 12px;
border: 2px solid transparent;
transition: border-color 0.4s var(--ease-standard); transition: border-color 0.4s var(--ease-standard);
} }
@ -259,11 +310,6 @@
text-align: center; text-align: center;
} }
.play-carousel-item.active button {
opacity: 1;
transform: scale(1.15) translateY(-4px);
}
.play-carousel-item.active button img { .play-carousel-item.active button img {
border-color: var(--color-primary); border-color: var(--color-primary);
} }