Fusion de main (leçons, 1g) dans plateau-soigne
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
Claude Opus 5.5
+256
-22
@@ -1268,6 +1268,13 @@ html.landscape.page-open body {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Hors de l'écran de jeu, la barre haute (Aide, Plein écran, Menu) reste
|
||||
* en paysage : seul le plateau en paysage s'en passe. Les écrans qui ont
|
||||
* leur propre en-tête (bare) la masquent toujours. */
|
||||
html.landscape.page-open:not(.bare) .topbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Repli du plein écran : le paysage ne peut pas être verrouillé, l'écran
|
||||
* entier tourne d'un quart de tour dans le portrait. Les touchers suivent
|
||||
* la rotation ; le plateau et les fenêtres sont posés dans #screen. */
|
||||
@@ -1916,6 +1923,194 @@ html.bare .topbar {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Leçons (1g) : la liste (#/lecons) et la carte « prochaine leçon » de
|
||||
* l'accueil (docs/identite/charte/ecrans-etape-1.md, « 1g. Leçons »). */
|
||||
.lessons {
|
||||
max-width: var(--page-width);
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.lessons-intro {
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.lessons-intro h2 {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.lessons-intro p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lessons-rules {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
min-height: 44px;
|
||||
margin-top: var(--space-2);
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.lessons-rules span {
|
||||
margin-left: var(--space-1);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#lessons-status:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lesson-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin: var(--space-2) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.lesson-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.lesson-card.current {
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.lesson-card-top {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lesson-card-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.lesson-card-title {
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lesson-card-state {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.lesson-card-state.done {
|
||||
color: var(--verdict-good);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* La pastille ronde au numéro : contour pour une leçon à commencer, brique
|
||||
* pour la leçon proposée, verte une fois terminée. */
|
||||
.lesson-badge {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
border: 2px solid var(--border-strong);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.lesson-badge.current {
|
||||
color: var(--on-accent);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.lesson-badge.done {
|
||||
color: var(--on-accent);
|
||||
background: var(--verdict-good);
|
||||
border-color: var(--verdict-good);
|
||||
}
|
||||
|
||||
/* La barre de progression : un segment par exercice. */
|
||||
.lesson-progress {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.lesson-progress .segment {
|
||||
display: block;
|
||||
height: 6px;
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.lesson-progress .segment.done {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.lesson-card-action {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.home-lesson {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.home-lesson-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.home-lesson-info .muted {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.home-lesson-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-lesson-actions .button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.home-lessons-link {
|
||||
display: inline-flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Feuille d'installation. */
|
||||
.sheet-head .install-symbol {
|
||||
width: 40px;
|
||||
@@ -1976,7 +2171,8 @@ html.bare .topbar {
|
||||
.tutorial-progress {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
@@ -2017,8 +2213,28 @@ html.bare .topbar {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tutorial-title {
|
||||
/* En portrait, l'écran tient au moins la hauteur de l'écran : « Retour »
|
||||
* et « Continuer » restent en bas, sous le pouce. */
|
||||
.tutorial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* Le titre, et « Revoir » sur sa ligne, à droite. */
|
||||
.tutorial-title-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
margin: var(--space-1) 0 var(--space-3);
|
||||
}
|
||||
|
||||
.tutorial-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
@@ -2033,16 +2249,13 @@ html.bare .topbar {
|
||||
}
|
||||
}
|
||||
|
||||
#tutorial-replay {
|
||||
position: absolute;
|
||||
right: var(--space-1);
|
||||
bottom: calc(-44px - var(--space-1));
|
||||
.tutorial-replay {
|
||||
flex: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tutorial-text {
|
||||
margin-top: var(--space-3);
|
||||
padding-right: 52px;
|
||||
}
|
||||
|
||||
.tutorial-text p {
|
||||
@@ -2095,7 +2308,8 @@ html.bare .topbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-6);
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
.tutorial-nav .button {
|
||||
@@ -2162,16 +2376,46 @@ html.landscape .tutorial-head {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
html.landscape .tutorial-title {
|
||||
html.landscape .tutorial-title-row {
|
||||
grid-row: 2;
|
||||
margin: 0 0 var(--space-1);
|
||||
padding-right: calc(44px + var(--space-4));
|
||||
padding-right: calc(var(--space-2) + env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
html.landscape .tutorial-title {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
/* La boîte du plateau s'efface : le plateau et « Revoir » se placent
|
||||
* eux-mêmes dans la grille. */
|
||||
/* Une leçon garde en paysage sa ligne « Leçon 1 · 1 sur 4 · à vous »
|
||||
* au-dessus du titre (recette 1g) : une rangée de plus dans la grille. */
|
||||
html.landscape #lesson {
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
html.landscape #lesson .overline {
|
||||
display: block;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
html.landscape #lesson .tutorial-title-row {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
html.landscape #lesson .tutorial-body {
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
html.landscape #lesson .tutorial-cube {
|
||||
grid-row: 5;
|
||||
}
|
||||
|
||||
html.landscape #lesson .tutorial-nav {
|
||||
grid-row: 6;
|
||||
}
|
||||
|
||||
/* La boîte du plateau s'efface : le plateau se place lui-même dans la
|
||||
* grille. */
|
||||
html.landscape .tutorial-board-box {
|
||||
display: contents;
|
||||
}
|
||||
@@ -2186,16 +2430,6 @@ html.landscape .tutorial-board {
|
||||
background: var(--frame);
|
||||
}
|
||||
|
||||
html.landscape #tutorial-replay {
|
||||
position: static;
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
align-self: start;
|
||||
margin: -9px calc(var(--space-2) + env(safe-area-inset-right)) 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html.landscape .tutorial-body {
|
||||
grid-row: 3;
|
||||
min-height: 0;
|
||||
|
||||
@@ -96,6 +96,11 @@
|
||||
est construit par app/src/ui/home-view.ts et tutorial-view.ts. -->
|
||||
<section id="home" class="home page" hidden></section>
|
||||
<section id="tutorial" class="tutorial page" hidden></section>
|
||||
<!-- Les leçons (#/lecons, #/lecons/<n>/...) : la liste, construite par
|
||||
app/src/ui/lessons-view.ts, et les écrans d'une leçon, construits par
|
||||
tutorial-view.ts comme ceux du tutoriel. -->
|
||||
<section id="lessons" class="lessons page" hidden></section>
|
||||
<section id="lesson" class="tutorial page" hidden></section>
|
||||
|
||||
<!-- Le choix d'une nouvelle partie (#/nouvelle-partie), construit par
|
||||
app/src/ui/new-game-view.ts. -->
|
||||
@@ -146,6 +151,7 @@
|
||||
<a id="menu-games" href="#/parties" class="item"></a>
|
||||
<a id="menu-home" href="#/accueil" class="item"></a>
|
||||
<a id="menu-tutorial" href="#/tutoriel/1" class="item"></a>
|
||||
<a id="menu-lessons" href="#/lecons" class="item"></a>
|
||||
<button id="menu-copy-link" type="button" class="item"></button>
|
||||
<button id="menu-fullscreen" type="button" class="item"></button>
|
||||
<a id="menu-help" href="#/aide" class="item"></a>
|
||||
|
||||
Reference in New Issue
Block a user