Conseil du maître : ligne du maître, feuille d'explication, second moteur pour l'analyse
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
1330ee6df4
commit
5897925b33
+218
@@ -2549,3 +2549,221 @@ html.landscape .position-view.with-board .position-actions {
|
||||
html.landscape .position-view.with-board .position-actions > * {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------- Conseil du maître (1d) */
|
||||
|
||||
/* La ligne du maître : à la place du dernier coup, dans la ligne réservée
|
||||
* de 44 px (elle ne pousse rien). Pictogramme et mot en couleur
|
||||
* d'appréciation, phrase en italique tronquée, chevron. */
|
||||
.advice-line {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.advice-line.appear {
|
||||
animation: fade-in var(--duration-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.advice-line .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.advice-line .icon-chevron {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.advice-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.advice-word {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-verdict="good"] .icon:not(.icon-chevron),
|
||||
[data-verdict="good"] .advice-word { color: var(--verdict-good); }
|
||||
[data-verdict="doubtful"] .icon:not(.icon-chevron),
|
||||
[data-verdict="doubtful"] .advice-word { color: var(--verdict-doubtful); }
|
||||
[data-verdict="bad"] .icon:not(.icon-chevron),
|
||||
[data-verdict="bad"] .advice-word,
|
||||
[data-verdict="veryBad"] .icon:not(.icon-chevron),
|
||||
[data-verdict="veryBad"] .advice-word { color: var(--verdict-bad); }
|
||||
|
||||
/* Paysage : la pastille du mot, au début de la bande centrale. */
|
||||
.advice-chip-pill {
|
||||
fill: var(--surface);
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.advice-chip-icon {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.advice-chip-text {
|
||||
fill: currentColor;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.advice-chip.verdict-good { color: var(--verdict-good); }
|
||||
.advice-chip.verdict-doubtful { color: var(--verdict-doubtful); }
|
||||
.advice-chip.verdict-bad,
|
||||
.advice-chip.verdict-veryBad { color: var(--verdict-bad); }
|
||||
|
||||
/* La feuille d'explication : elle monte du bas, au-dessus du plateau
|
||||
* voilé. */
|
||||
.explain-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.explain-verdict {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.explain-verdict .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.explain-verdict[data-verdict="good"] { color: var(--verdict-good); }
|
||||
.explain-verdict[data-verdict="doubtful"] { color: var(--verdict-doubtful); }
|
||||
.explain-verdict[data-verdict="bad"],
|
||||
.explain-verdict[data-verdict="veryBad"] { color: var(--verdict-bad); }
|
||||
|
||||
.explain-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.explain-phrase {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.explain-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.explain-body .segment {
|
||||
min-height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Le coup montré : le vôtre en couleur du texte, celui du maître en
|
||||
* couleur du bon coup (charte 1d). */
|
||||
.explain-board[data-move="mine"] { --last-move: var(--text); }
|
||||
.explain-board[data-move="best"] { --last-move: var(--verdict-good); }
|
||||
|
||||
.explain-legend {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.explain-numbers {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.explain-numbers summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.explain-table {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 4px 12px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.explain-table .strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.explain-note {
|
||||
margin: var(--space-2) 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.explain-glossary {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.explain-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.explain-actions button {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* En paysage : la feuille prend la hauteur de l'écran ; le plateau à
|
||||
* gauche, le texte à droite. */
|
||||
html.landscape .explain-board {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 640 / 520;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-auto-flow: dense;
|
||||
column-gap: var(--space-4);
|
||||
align-content: start;
|
||||
width: min(100%, 60rem);
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet > .explain-body {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 8;
|
||||
}
|
||||
|
||||
@@ -63,8 +63,12 @@
|
||||
<span class="match-score" hidden></span>
|
||||
<button type="button" class="count"></button>
|
||||
</div>
|
||||
<!-- Ligne du maître ou du dernier coup : après une décision du joueur,
|
||||
le conseil du maître (un lien vers sa feuille d'explication) prend la
|
||||
place du texte du dernier coup. -->
|
||||
<div class="infoline">
|
||||
<p id="info" class="info" aria-live="polite"></p>
|
||||
<a id="advice-line" class="advice-line" href="#/" hidden></a>
|
||||
<button id="replay" type="button" class="icon-button replay" hidden></button>
|
||||
<button id="copy-link" type="button" class="icon-button copy-link" hidden></button>
|
||||
</div>
|
||||
@@ -143,12 +147,17 @@
|
||||
<a id="menu-help" href="#/aide" class="item"></a>
|
||||
<button id="menu-install" type="button" class="item"></button>
|
||||
<button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></span></button>
|
||||
<button id="menu-advice" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
|
||||
<button id="menu-vibrations" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
|
||||
<button id="menu-screen-on" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
|
||||
<button id="menu-update" type="button" class="item"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- L'explication du maître (#/explication/<événement>) : une feuille,
|
||||
construite par app/src/ui/advice-view.ts. -->
|
||||
<div id="explain-veil" class="veil sheet-veil" hidden></div>
|
||||
|
||||
<!-- La marche à suivre pour installer (#/installer) : une feuille. -->
|
||||
<div id="install-veil" class="veil sheet-veil" hidden>
|
||||
<div id="install-sheet" class="sheet" role="dialog" aria-modal="true" aria-labelledby="install-title">
|
||||
|
||||
Reference in New Issue
Block a user