Interface : écran Nouvelle partie, score du match et partie Crawford
Écran #/nouvelle-partie (type de partie, niveau, conseil du maître, choix gardés), score du match en portrait et en paysage, videau caché pendant la partie Crawford, « Partie suivante » ; test navigateur d'un match en 3 points jusqu'au bout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
339d699488
commit
85bdf4bb93
+245
@@ -2122,3 +2122,248 @@ html.landscape .welcome {
|
||||
padding-inline: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ Match */
|
||||
|
||||
/* « Match en 5 points » sous la barre haute (portrait), hauteur fixe. */
|
||||
.match-line {
|
||||
flex: none;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Le score de chaque camp, dans son bandeau, juste avant son compte de
|
||||
* points : une pastille carrée. */
|
||||
.strip .match-score {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 4px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
border: 2px solid var(--border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Paysage : le score dans la colonne de commandes, sous le menu. */
|
||||
.match-box-frame {
|
||||
fill: none;
|
||||
stroke: var(--point-number);
|
||||
stroke-opacity: 0.5;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.match-box-score {
|
||||
font-weight: 700;
|
||||
fill: var(--point-number);
|
||||
}
|
||||
|
||||
.match-box-of {
|
||||
fill: var(--point-number);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------- Nouvelle partie */
|
||||
|
||||
/* La page remplit l'écran : la barre d'action reste collée en bas, même
|
||||
* quand le contenu est plus court que l'écran. */
|
||||
.new-game {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: var(--page-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.new-game .new-game-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.new-game-head {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.new-game-head h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.new-game-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.new-game-body .overline {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* Sélecteur à deux segments : fond creusé, segment choisi en relief. */
|
||||
.segmented {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1);
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.segmented .segment {
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.segmented .segment[aria-checked="true"] {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
.new-game-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.lengths {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lengths .length {
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
border-color: var(--border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.lengths .length[aria-checked="true"] {
|
||||
color: var(--on-accent);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.new-game-rule {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Six barres de hauteur croissante ; celles jusqu'au niveau choisi sont en
|
||||
* brique, le niveau choisi porte l'anneau de focus. */
|
||||
.level-bars {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.level-bars .level {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
min-width: 44px;
|
||||
height: 84px;
|
||||
padding: 4px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.level-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.level-1 .level-bar { height: 18px; }
|
||||
.level-2 .level-bar { height: 28px; }
|
||||
.level-3 .level-bar { height: 38px; }
|
||||
.level-4 .level-bar { height: 50px; }
|
||||
.level-5 .level-bar { height: 62px; }
|
||||
.level-6 .level-bar { height: 76px; }
|
||||
|
||||
.level-bars .level.reached .level-bar {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.level-bars .level[aria-checked="true"] {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
.level-name {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.level-text {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.new-game-body .item {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.new-game-body .item-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.new-game-body .item small {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Barre d'action collée en bas : le seul bouton principal de l'écran. */
|
||||
.new-game-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
align-items: stretch;
|
||||
padding: var(--space-3) 0 var(--space-4);
|
||||
background: var(--background);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.new-game-kept {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user