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);
|
||||
}
|
||||
|
||||
+9
-1
@@ -39,10 +39,13 @@
|
||||
</header>
|
||||
|
||||
<main id="game" class="game">
|
||||
<!-- Dans un match : « Match en 5 points », et la partie Crawford. -->
|
||||
<p id="match-line" class="match-line overline" hidden></p>
|
||||
<div id="strip-computer" class="strip">
|
||||
<span class="mini mini-computer"></span>
|
||||
<span class="who"></span>
|
||||
<span class="lead"></span>
|
||||
<span class="match-score" hidden></span>
|
||||
<button type="button" class="count"></button>
|
||||
</div>
|
||||
<div class="board-box">
|
||||
@@ -57,6 +60,7 @@
|
||||
<span class="mini mini-player"></span>
|
||||
<span class="who"></span>
|
||||
<span class="lead"></span>
|
||||
<span class="match-score" hidden></span>
|
||||
<button type="button" class="count"></button>
|
||||
</div>
|
||||
<div class="infoline">
|
||||
@@ -89,6 +93,10 @@
|
||||
<section id="home" class="home page" hidden></section>
|
||||
<section id="tutorial" class="tutorial page" hidden></section>
|
||||
|
||||
<!-- Le choix d'une nouvelle partie (#/nouvelle-partie), construit par
|
||||
app/src/ui/new-game-view.ts. -->
|
||||
<section id="new-game" class="new-game page" hidden></section>
|
||||
|
||||
<!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
|
||||
<section id="help" class="help page" hidden>
|
||||
<a id="help-back" href="#/" class="button secondary"></a>
|
||||
@@ -122,7 +130,7 @@
|
||||
<h2 id="menu-title" class="sheet-title"></h2>
|
||||
<button id="menu-close" type="button" class="icon-button"></button>
|
||||
</div>
|
||||
<button id="menu-new-game" type="button" class="item"></button>
|
||||
<a id="menu-new-game" href="#/nouvelle-partie" class="item"></a>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user