diff --git a/app/src/ui/advice-view.ts b/app/src/ui/advice-view.ts index f200018..50b7e1a 100644 --- a/app/src/ui/advice-view.ts +++ b/app/src/ui/advice-view.ts @@ -124,7 +124,10 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView { element(sheet, "p", { id: "explain-phrase", className: "explain-phrase", - text: words.phrase, + // Le titre dit déjà le coup du maître : la phrase ne le répète pas. + text: words.phrase.startsWith(`${words.title}. `) + ? words.phrase.slice(words.title.length + 2) + : words.phrase, }); const body = element(sheet, "div", { className: "explain-body" }); @@ -337,18 +340,25 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView { } }; if (advice.kind === "move") { - const best = advice.best.equity; - const listed = advice.ranking.map((move, i) => ({ move, rank: i + 1 })); + // Les écarts du classement se lisent par rapport à son premier + // coup ; votre coup, s'il n'y figure pas, avec l'écart de + // l'analyse du coup joué. + const first = advice.ranking[0]?.equity ?? advice.best.equity; + const listed = advice.ranking.map((move, i) => ({ + move, + rank: i + 1, + loss: move.equity - first, + })); if (!advice.ranking.some((m) => m.notation === advice.played.notation)) { - listed.push({ move: advice.played, rank: advice.rank }); + listed.push({ move: advice.played, rank: advice.rank, loss: advice.equityLoss }); } - for (const { move, rank } of listed) { + for (const { move, rank, loss } of listed) { const mine = move.notation === advice.played.notation; row( [ String(rank), mine ? `${move.notation} ${ADVICE_TEXTS.you}` : move.notation, - formatEquity(move.equity - best), + formatEquity(loss), ], mine, ); diff --git a/web/app.css b/web/app.css index 2267b91..b1cd786 100644 --- a/web/app.css +++ b/web/app.css @@ -2742,9 +2742,12 @@ html.landscape .position-view.with-board .position-actions > * { /* En paysage : la feuille prend la hauteur de l'écran ; le plateau à * gauche, le texte à droite. */ +/* Le plateau tient dans la hauteur, sous le sélecteur et sa légende. */ html.landscape .explain-board { - width: 100%; - height: auto; + width: auto; + max-width: 100%; + height: calc(100vh - 140px); + height: calc(100dvh - 140px); aspect-ratio: 640 / 520; }