pierre/Ustagammon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

« Demander à une IA » : bouton, feuille du prompt à son adresse, copie

Browse Source 
Le bouton, secondaire, dans la feuille du maître, sur le bilan, dans
l'analyse et sur la fiche ouverte du glossaire. Il ouvre la feuille du
prompt (…/ia, amendement de l'ADR 0013), où le texte se relit avant la
copie : navigator.clipboard, repli par sélection du texte, bandeau
« Prompt copié » (2 s). Gabarits copiés par make site (amendement de
l'ADR 0008), scénario « Demander à une IA », 1f marquée faite.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
2026-11-10 20:56:56 +01:00
co-authored by Claude Opus 5.5
parent 4f0611c24c
commit 2a1fe1b04c
27 changed files with 1593 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/domain/prompts/position.ts
+1 -1
View File
@@ -1,4 +1,4 @@
// La position que décrit un prompt (étape 1f) : ses identifiants de GNU
// La position que décrit un prompt, étape 1f : ses identifiants de GNU
// Backgammon, son plateau décodé par le moteur, le videau et le match ; et
// son diagramme texte.
//
app/src/domain/prompts/prompts.ts
+3 -7
View File
@@ -75,7 +75,7 @@ export const CUBE_ROW_WORDS = {
doublePass: "Double, passe",
} as const;
/** Les erreurs citées au plus dans un prompt (bilan, exercices). */
/** Les erreurs citées au plus dans un prompt : bilan, exercices. */
const MAX_ERRORS = 8;
const plural = (n: number, one: string, many: string) => `${n} ${n > 1 ? many : one}`;
@@ -322,9 +322,7 @@ export function summaryPrompt(
chance_mots: diceWords(phrases, player.luck.rating),
chance_ordinateur: formatEquity(computer.luck.perRoll),
erreurs:
listed.length === 0
? "- aucune : j'ai joué comme GNU Backgammon."
: listed.join("\n"),
listed.length === 0 ? "- aucune : j'ai joué comme GNU Backgammon." : listed.join("\n"),
position_titre:
toReview === null
? "Je n'ai fait ni imprécision ni erreur. Voici la position finale"
@@ -418,9 +416,7 @@ export async function exercisesPosition(
journals: readonly GameJournal[],
): Promise<PromptPosition | null> {
const worst = costliest(journals)[0];
return worst === undefined
? null
: positionBefore(engine, worst.journal, worst.advice.eventId);
return worst === undefined ? null : positionBefore(engine, worst.journal, worst.advice.eventId);
}
/** Ce que demande le prompt des exercices. */
app/src/main.ts
+10 -1
View File
@@ -5,7 +5,7 @@
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
import { analyseDecision } from "./domain/analysis/analyse.js";
import { ANALYSIS_PLY, analyseDecision } from "./domain/analysis/analyse.js";
import { runAnalysis } from "./domain/analysis/game-analysis.js";
import { Game } from "./domain/game/game.js";
import { linkOf, readPosition } from "./domain/game/position-link.js";
@@ -17,6 +17,8 @@ import {
shouldTake,
tutorialBoard,
} from "./domain/learning/tutorial.js";
import { positionBefore } from "./domain/prompts/position.js";
import { conceptExample, summaryPosition } from "./domain/prompts/prompts.js";
import { createWasmEngine } from "./engine/wasm-engine.js";
import { type EngineWorker, startEngineWorker } from "./engine/worker-run.js";
import { createGameSession } from "./storage/game-session.js";
@@ -164,6 +166,13 @@ startApp({
// Le bilan et l'analyse de partie (étape 1e) : les analyses qui
// manquent, une à une, sur le même moteur à part.
analyseGame: (journal, task) => runAnalysis(analysisEngine, journal, task),
// Les prompts pour une IA (étape 1f) : la position à décrire, lue par
// le moteur, et l'évaluation de la position d'exemple d'un concept.
prompts: {
before: (journal, eventId) => positionBefore(engine, journal, eventId),
summary: (journal) => summaryPosition(engine, journal),
concept: (journal) => conceptExample(engine, journal, ANALYSIS_PLY),
},
startUpdates: (onAvailable) =>
startUpdates(new URL("../sw.js", import.meta.url), worker.ready, onAvailable),
});
app/src/ui/advice-view.ts
+12 -2
View File
@@ -18,6 +18,7 @@ import {
} from "../domain/game/advice.js";
import type { Game } from "../domain/game/game.js";
import { ADVICE_TEXTS, CUBE_GLOSSARY, formatEquity } from "./advice-texts.js";
import { askAiLink } from "./ask-ai.js";
import { type IconName, icon } from "./icons.js";
import { boardSvg, createMovePlayer, drawSteps, type MovePlayer } from "./move-board.js";
import { routeHash } from "./router.js";
@@ -149,12 +150,21 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
});
link.href = routeHash({ screen: "glossary", term: entry.file });
}
closeButton();
closeButton(advice.eventId);
close.focus();
}
function closeButton(): void {
/** « Demander à une IA » (étape 1f), s'il y a un conseil, et
* « Fermer ». */
function closeButton(eventId: string | null = null): void {
const actions = element(sheet, "div", { className: "explain-actions" });
if (eventId !== null) {
askAiLink(
actions,
"explain-ask-ai",
routeHash({ screen: "explanation", event: eventId, ai: true }),
);
}
const done = element(actions, "button", {
id: "explain-done",
className: "secondary",
app/src/ui/analysis-view.ts
+6 -1
View File
@@ -31,6 +31,7 @@ import type { GameJournal } from "../domain/game/events.js";
import type { Game, MoveSteps } from "../domain/game/game.js";
import { formatHalfMoves } from "../domain/game/position.js";
import { VERDICT_ICONS } from "./advice-view.js";
import { askAiLink } from "./ask-ai.js";
import { icon } from "./icons.js";
import { MATCH_TEXTS } from "./match-texts.js";
import { boardSvg, createMovePlayer, drawSteps, type MovePlayer } from "./move-board.js";
@@ -212,9 +213,11 @@ export function createAnalysisView(options: AnalysisViewOptions): AnalysisView {
text: REVIEW_TEXTS.replayFromHere,
});
replayButton.type = "button";
// L'emplacement de « Demander à une IA » (étape 1f).
// « Demander à une IA » (étape 1f) : le prompt de la décision du joueur
// dans ce coup, s'il y en a une.
const slot = element(viewerActions, "div", { className: "ask-ai-slot" });
slot.dataset.slot = "ask-ai";
const askAi = askAiLink(slot, "analysis-ask-ai", "#/");
const replayHint = element(viewerText, "p", {
className: "viewer-legend",
text: REVIEW_TEXTS.replayHint,
@@ -412,6 +415,8 @@ export function createAnalysisView(options: AnalysisViewOptions): AnalysisView {
theirs?.eventId ?? "",
current.phrases !== null,
].join("|");
askAi.hidden = main === null;
askAi.href = routeHash({ screen: "analysis", game: current.id, turn: selected, ai: true });
replayButton.hidden = replayPoint(current.journal, turn) === null;
replayHint.hidden = replayButton.hidden;
replayButton.onclick = () => {
app/src/ui/app.ts
+139 -3
View File
@@ -21,7 +21,13 @@
// dessine l'écran que désigne l'adresse, au démarrage et à chaque
// changement. Les actions de jeu restent des boutons.
import { missingAnalyses, readyForSummary } from "../domain/analysis/game-analysis.js";
import {
gameTurns,
mainAdvice,
missingAnalyses,
readyForSummary,
summarizeAnalysis,
} from "../domain/analysis/game-analysis.js";
import {
type MasterPhrases,
masterLine,
@@ -41,6 +47,8 @@ import { ADVICE_TEXTS } from "./advice-texts.js";
import { type Analyse, createAdviceTracker } from "./advice-tracker.js";
import { createAdviceView, VERDICT_ICONS } from "./advice-view.js";
import { createAnalysisView } from "./analysis-view.js";
import { createPromptView, type PromptResult } from "./ask-ai.js";
import { ASK_AI_TEXTS } from "./ask-ai-texts.js";
import {
boardModel,
moveTargets,
@@ -76,8 +84,16 @@ import { installPlatform, startInstaller } from "./install.js";
import { MATCH_TEXTS } from "./match-texts.js";
import { replacingLink, startNavigation } from "./navigation.js";
import { createNewGameView } from "./new-game-view.js";
import { createPromptSource, type PromptsAccess } from "./prompt-source.js";
import { createReviewRunner, type RunAnalysis } from "./review-runner.js";
import { isHelpScreen, type Route, routeHash } from "./router.js";
import {
type AiRoute,
isAiRoute,
isHelpScreen,
type Route,
routeHash,
withoutAi,
} from "./router.js";
import {
chosenGame,
isFirstLaunch,
@@ -140,6 +156,8 @@ export interface AppOptions {
/** L'analyse d'une partie pour son bilan (étape 1e), une analyse à la
* fois, sur le même moteur à part. */
readonly analyseGame: RunAnalysis;
/** Les positions que décrivent les prompts pour une IA (étape 1f). */
readonly prompts: PromptsAccess;
}
/** La source des phrases du maître, copiée dans le site (make site). */
@@ -227,6 +245,8 @@ export function startApp(options: AppOptions): void {
adviceLine: byId<HTMLAnchorElement>("advice-line"),
explainVeil: byId("explain-veil"),
summaryVeil: byId("summary-veil"),
promptVeil: byId("prompt-veil"),
promptBanner: byId("prompt-banner"),
analysis: byId("analysis"),
menuAdvice: byId<HTMLButtonElement>("menu-advice"),
prompt: byId("prompt"),
@@ -1297,6 +1317,86 @@ export function startApp(options: AppOptions): void {
back: (link) => leavingLink(link, (route) => route.screen === "analysis"),
});
// ------------------------------------------- Demander à une IA (1f)
// La feuille du prompt, à l'adresse …/ia, au-dessus de l'écran d'où on le demande.
const promptSource = createPromptSource({
access: options.prompts,
phrases: () => phrasesLoading,
glossaryEntry: loadGlossaryEntry,
});
const promptView = createPromptView({
veil: ui.promptVeil,
banner: ui.promptBanner,
close: () => closePrompt(),
});
// L'adresse de la feuille ouverte (null : fermée).
let promptShown: string | null = null;
/** Ferme la feuille du prompt : retour à l'écran d'où on l'a ouverte. */
function closePrompt(): void {
const route = navigation.route;
promptView.hide();
promptShown = null;
navigation.leave(isAiRoute, isAiRoute(route) ? routeHash(withoutAi(route)) : "#/");
}
/** Ouvre (ou met à jour) la feuille du prompt de l'adresse route. */
function showPrompt(route: AiRoute): void {
promptShown = routeHash(route);
promptView.show(promptOf(route));
}
/** Le journal de la partie id, pour son bilan ou son analyse : celui de
* la partie à l'écran, ou celui du stockage. */
async function journalOf(id: string): Promise<GameJournal | null> {
const live = liveGame(id);
if (live !== null) {
return live.journal;
}
return reviewed?.id === id ? reviewed.journal : options.games.journal(id);
}
/** Le prompt de l'écran sous la feuille (route sans « /ia »). */
async function promptOf(route: AiRoute): Promise<PromptResult> {
await options.engineReady;
switch (route.screen) {
case "explanation": {
const advice = game?.advice[route.event];
return game === null || advice === undefined
? { message: ASK_AI_TEXTS.noAdvice }
: promptSource.decision(game.journal, advice);
}
case "summary": {
const journal = await journalOf(route.game);
if (journal === null) {
return { message: ASK_AI_TEXTS.missingGame };
}
return readyForSummary(journal)
? promptSource.summary(journal)
: { message: ASK_AI_TEXTS.notReady };
}
case "analysis": {
const journal = await journalOf(route.game);
if (journal === null) {
return { message: ASK_AI_TEXTS.missingGame };
}
// Le coup que montre l'analyse : celui de l'adresse, ou le
// coup à revoir (analysis-view.ts).
const turns = gameTurns(journal);
const fallback = summarizeAnalysis(journal).toReview?.turn ?? 1;
const n = Math.min(Math.max(1, route.turn ?? fallback), Math.max(1, turns.length));
const turn = turns[n - 1];
const advice = turn === undefined ? null : mainAdvice(journal, turn);
return advice === null
? { message: ASK_AI_TEXTS.noAdvice }
: promptSource.decision(journal, advice);
}
case "glossary":
return promptSource.concept(route.term ?? "", game?.journal ?? null);
}
}
/** La partie à l'écran, si c'est la partie id. */
function liveGame(id: string): Game | null {
return game !== null && options.games.shownId() === id ? game : null;
@@ -1363,6 +1463,10 @@ export function startApp(options: AppOptions): void {
if ((route.screen !== "summary" && route.screen !== "analysis") || route.game !== id) {
return;
}
// La feuille du prompt attendait l'analyse : elle se met à jour.
if (isAiRoute(route) && promptView.isOpen && !promptView.ready) {
showPrompt(route);
}
const live = liveGame(id);
const shown =
missing || reviewed?.id !== id
@@ -1711,6 +1815,8 @@ export function startApp(options: AppOptions): void {
let menuReturnFocus: HTMLElement | null = null;
// L'écran sous la feuille d'installation : le dernier écran affiché.
let underSheet: Route = { screen: "game" };
// L'événement de la feuille d'explication ouverte.
let explained: string | null = null;
/** Dessine l'écran que désigne l'adresse (ADR 0013, amendement). */
function applyRoute(route: Route): void {
@@ -1790,8 +1896,14 @@ export function startApp(options: AppOptions): void {
if (route.screen === "explanation") {
closeTransient();
ui.menuVeil.hidden = true;
void adviceView.show(route.event);
// Ouvrir ou fermer la feuille du prompt ne redessine pas
// l'explication dessous.
if (ui.explainVeil.hidden || explained !== route.event) {
explained = route.event;
void adviceView.show(route.event);
}
} else {
explained = null;
adviceView.hide();
}
// Le bilan et l'analyse d'une partie : son journal, lu dans le
@@ -1845,6 +1957,18 @@ export function startApp(options: AppOptions): void {
shownPosition = null;
}
// La feuille du prompt pour une IA, au-dessus de son écran.
if (isAiRoute(route)) {
closeTransient();
ui.menuVeil.hidden = true;
if (!promptView.isOpen || promptShown !== routeHash(route)) {
showPrompt(route);
}
} else if (promptView.isOpen) {
promptView.hide();
promptShown = null;
}
// Une adresse inconnue : la partie, avec un message, à l'adresse de
// la partie.
if (route.screen === "unknown") {
@@ -2282,6 +2406,15 @@ export function startApp(options: AppOptions): void {
if (event.altKey || event.metaKey || (event.ctrlKey && event.key.toLowerCase() !== "z")) {
return;
}
// La feuille du prompt ouverte : Échap la ferme, et rien d'autre ne
// répond (les flèches font défiler le texte).
if (promptView.isOpen) {
if (event.key === "Escape") {
event.preventDefault();
closePrompt();
}
return;
}
const onButton =
event.target instanceof HTMLButtonElement || event.target instanceof HTMLAnchorElement;
// L'écran d'analyse : les flèches passent d'un coup à l'autre.
@@ -2377,6 +2510,9 @@ export function startApp(options: AppOptions): void {
if (route.screen === "explanation") {
void adviceView.show(route.event);
}
if (isAiRoute(route)) {
showPrompt(route);
}
if (route.screen === "summary" || route.screen === "analysis") {
void openReview(route.game);
}
app/src/ui/ask-ai-texts.ts
+23
View File
@@ -0,0 +1,23 @@
// Les textes de l'interface de « Demander à une IA » (étape 1f). Les
// prompts eux-mêmes sont dans docs/prompts/ (une seule source, ADR 0008).
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
export const ASK_AI_TEXTS = {
button: "Demander à une IA",
title: "Demander à une IA",
lead: "Une question toute prête, avec la position et les chiffres de GNU Backgammon. Relisez-la, copiez-la, puis collez-la dans l'IA de votre choix : le moteur décide, l'IA explique.",
textLabel: "Le prompt, à relire avant de le copier",
copy: "Copier le prompt",
copied: "Prompt copié",
notCopied:
"Le navigateur refuse la copie : le texte est sélectionné, copiez-le avec le menu de votre téléphone.",
preparing: "Préparation du prompt…",
close: "Fermer",
failed: "Le prompt n'a pas pu être préparé.",
noAdvice: "Pas de prompt pour cette décision : le maître ne l'a pas encore analysée.",
notReady: "Le maître analyse encore la partie : le prompt sera prêt avec le bilan.",
missingGame: "Cette partie n'est plus sur ce téléphone.",
missingTerm: "Ce terme n'est pas dans le glossaire.",
} as const;
app/src/ui/ask-ai.ts
+246
View File
@@ -0,0 +1,246 @@
// « Demander à une IA » (étape 1f ; charte, ecrans-etape-1.md, « 1f ») :
// le bouton, secondaire, avec l'icône de copie ; et la feuille du prompt
// (…/ia, ADR 0013), où le texte se relit avant d'être copié. La copie passe
// par navigator.clipboard ; à défaut, le texte est sélectionné dans la
// feuille et copié par le navigateur, ou laissé sélectionné pour être
// copié à la main. Le bandeau « Prompt copié » le confirme.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
//
// L'application n'appelle aucune IA et n'envoie rien : elle copie un texte.
import { ASK_AI_TEXTS } from "./ask-ai-texts.js";
import { icon } from "./icons.js";
/** Durée du bandeau « Prompt copié » (charte : 2 s). */
export const COPIED_MS = 2000;
/** Ce que montre la feuille : le prompt, ou pourquoi il n'y en a pas. */
export type PromptResult = { readonly text: string } | { readonly message: string };
/** Le bouton « Demander à une IA » : un lien vers la feuille du prompt. */
export function askAiLink(parent: HTMLElement, id: string, href: string): HTMLAnchorElement {
const link = document.createElement("a");
link.id = id;
link.className = "button secondary ask-ai";
link.href = href;
link.append(icon("copy"), ASK_AI_TEXTS.button);
parent.append(link);
return link;
}
export interface PromptViewOptions {
/** Le voile de la feuille (index.html) ; la feuille est construite ici. */
readonly veil: HTMLElement;
/** Le bandeau « Prompt copié » (index.html). */
readonly banner: HTMLElement;
/** Fermer : quitter l'adresse de la feuille. */
readonly close: () => void;
}
export interface PromptView {
/** Ouvre la feuille (ou la met à jour) sur un prompt en préparation. */
show(prompt: Promise<PromptResult>): void;
hide(): void;
readonly isOpen: boolean;
/** Le prompt est affiché (pas un message). */
readonly ready: boolean;
}
function element<K extends keyof HTMLElementTagNameMap>(
parent: HTMLElement,
tag: K,
options: { id?: string; className?: string; text?: string } = {},
): HTMLElementTagNameMap[K] {
const child = document.createElement(tag);
if (options.id !== undefined) {
child.id = options.id;
}
if (options.className !== undefined) {
child.className = options.className;
}
if (options.text !== undefined) {
child.textContent = options.text;
}
parent.append(child);
return child;
}
export function createPromptView(options: PromptViewOptions): PromptView {
const { veil, banner } = options;
const sheet = element(veil, "div", { id: "prompt-sheet", className: "sheet prompt-sheet" });
sheet.setAttribute("role", "dialog");
sheet.setAttribute("aria-modal", "true");
sheet.setAttribute("aria-labelledby", "prompt-title");
const head = element(sheet, "div", { className: "sheet-head" });
element(head, "span", { className: "grip" }).setAttribute("aria-hidden", "true");
element(head, "h2", { id: "prompt-title", className: "sheet-title", text: ASK_AI_TEXTS.title });
const closeIcon = element(head, "button", { id: "prompt-close", className: "icon-button" });
closeIcon.type = "button";
closeIcon.append(icon("close"));
closeIcon.setAttribute("aria-label", ASK_AI_TEXTS.close);
closeIcon.onclick = () => options.close();
element(sheet, "p", { className: "prompt-lead", text: ASK_AI_TEXTS.lead });
const text = element(sheet, "pre", { id: "prompt-text", className: "prompt-text" });
text.tabIndex = 0;
text.setAttribute("aria-label", ASK_AI_TEXTS.textLabel);
const status = element(sheet, "p", { id: "prompt-status", className: "prompt-status" });
status.setAttribute("role", "status");
const actions = element(sheet, "div", { className: "prompt-actions" });
const done = element(actions, "button", {
id: "prompt-done",
className: "secondary",
text: ASK_AI_TEXTS.close,
});
done.type = "button";
done.onclick = () => options.close();
const copy = element(actions, "button", { id: "prompt-copy" });
copy.type = "button";
copy.append(icon("copy"), ASK_AI_TEXTS.copy);
veil.addEventListener("click", (event) => {
if (event.target === veil) {
options.close();
}
});
const bannerText = element(banner, "span", { text: ASK_AI_TEXTS.copied });
banner.prepend(icon("verdictGood"));
const timer = element(banner, "span", { className: "banner-timer prompt-timer" });
timer.setAttribute("aria-hidden", "true");
let bannerTimeout: ReturnType<typeof setTimeout> | null = null;
// Chaque ouverture a son numéro : un prompt qui arrive après une autre
// ouverture, ou après la fermeture, n'est pas montré.
let opened = 0;
let ready = false;
function showBanner(): void {
bannerText.textContent = ASK_AI_TEXTS.copied;
banner.hidden = false;
// La barre de temps repart de zéro (charte : 2 s).
timer.classList.remove("running");
void timer.offsetWidth;
timer.classList.add("running");
if (bannerTimeout !== null) {
clearTimeout(bannerTimeout);
}
bannerTimeout = setTimeout(hideBanner, COPIED_MS);
}
function hideBanner(): void {
banner.hidden = true;
timer.classList.remove("running");
if (bannerTimeout !== null) {
clearTimeout(bannerTimeout);
bannerTimeout = null;
}
}
/** Le texte de la feuille, sélectionné : le repli quand le
* presse-papiers n'est pas accessible. */
function selectText(): void {
const selection = window.getSelection();
if (selection === null) {
return;
}
const range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
async function copyText(): Promise<boolean> {
try {
await navigator.clipboard.writeText(text.textContent ?? "");
return true;
} catch {
// Hors contexte sûr (http sur le réseau local), ou refusé :
// repli ci-dessous.
}
selectText();
try {
return document.execCommand("copy");
} catch {
return false;
}
}
copy.onclick = async () => {
if (!ready) {
return;
}
const id = opened;
const copied = await copyText();
if (id !== opened) {
return;
}
if (copied) {
status.textContent = "";
showBanner();
} else {
selectText();
status.textContent = ASK_AI_TEXTS.notCopied;
}
};
return {
show(prompt) {
const id = ++opened;
const opening = veil.hidden;
veil.hidden = false;
if (opening) {
ready = false;
text.textContent = "";
text.hidden = true;
copy.disabled = true;
status.textContent = ASK_AI_TEXTS.preparing;
closeIcon.focus();
}
prompt.then(
(result) => {
if (id !== opened) {
return;
}
if ("text" in result) {
ready = true;
text.textContent = result.text;
text.hidden = false;
copy.disabled = false;
status.textContent = "";
sheet.dataset.ready = "true";
} else {
ready = false;
text.hidden = true;
copy.disabled = true;
status.textContent = result.message;
delete sheet.dataset.ready;
}
},
() => {
if (id === opened) {
ready = false;
copy.disabled = true;
status.textContent = ASK_AI_TEXTS.failed;
}
},
);
},
hide() {
opened++;
ready = false;
// Le bandeau « Prompt copié » finit ses 2 s, feuille fermée.
if (!veil.hidden) {
veil.hidden = true;
text.textContent = "";
delete sheet.dataset.ready;
}
},
get isOpen() {
return !veil.hidden;
},
get ready() {
return ready;
},
};
}
app/src/ui/help.ts
+16 -3
View File
@@ -13,6 +13,7 @@
// que dit la réponse, ne s'affichent pas
// (docs/identite/charte/accueil-tutoriel-aide.md, « Aide »).
import { askAiLink } from "./ask-ai.js";
import {
type GlossaryEntry,
type HelpFeature,
@@ -32,6 +33,7 @@ export const FEATURES = [
"docs/scenarios/jouer-un-match.feature",
"docs/scenarios/comprendre-mes-coups.feature",
"docs/scenarios/revoir-ma-partie.feature",
"docs/scenarios/demander-a-une-ia.feature",
"docs/scenarios/apprendre-les-regles.feature",
"docs/scenarios/mes-parties.feature",
"docs/scenarios/partager-une-position.feature",
@@ -124,7 +126,10 @@ export function createHelpView(container: HTMLElement, tabs: HTMLElement): HelpV
notice.className = "help-notice";
notice.setAttribute("role", "status");
const questions: Question[] = [];
const terms = new Map<string, { dt: HTMLElement; card: HTMLElement; entry: GlossaryCard }>();
const terms = new Map<
string,
{ dt: HTMLElement; card: HTMLElement; entry: GlossaryCard; askAi: HTMLAnchorElement }
>();
let loading: Promise<boolean> | null = null;
// La question ouverte au dernier affichage : refermée, elle reste en vue.
let lastOpen: Question | null = null;
@@ -213,7 +218,14 @@ export function createHelpView(container: HTMLElement, tabs: HTMLElement): HelpV
a.href = routeHash({ screen: "glossary", term: other.name });
});
}
terms.set(entry.name, { dt, card, entry });
// « Demander à une IA » (étape 1f), sur la fiche ouverte.
const askAi = askAiLink(
dd,
`glossary-ask-ai-${entry.name}`,
routeHash({ screen: "glossary", term: entry.name, ai: true }),
);
askAi.hidden = true;
terms.set(entry.name, { dt, card, entry, askAi });
}
search.addEventListener("input", () => {
let shown = 0;
@@ -307,7 +319,8 @@ export function createHelpView(container: HTMLElement, tabs: HTMLElement): HelpV
q.section.classList.toggle("open", open);
}
const term = route.screen === "glossary" ? route.term : null;
for (const [name, { dt, card }] of terms) {
for (const [name, { dt, card, askAi }] of terms) {
askAi.hidden = name !== term;
dt.classList.toggle("current", name === term);
card.classList.toggle("current", name === term);
if (name === term) {
app/src/ui/navigation.ts
+5 -4
View File
@@ -26,8 +26,9 @@ export interface Navigation {
replace(hash: string): void;
/** Quitte l'écran courant : revient à la dernière adresse de l'onglet
* qui ne vérifie pas stay, ou, s'il n'y en a pas (lien ouvert dans un
* nouvel onglet), remplace l'adresse par celle de la partie. */
leave(stay: (route: Route) => boolean): void;
* nouvel onglet), remplace l'adresse par fallback (celle de la partie,
* par défaut). */
leave(stay: (route: Route) => boolean, fallback?: string): void;
}
interface TrailState {
@@ -123,13 +124,13 @@ export function startNavigation(onChange: (route: Route) => void): Navigation {
},
go,
replace,
leave(stay) {
leave(stay, fallback = "#/") {
if (leaving !== null) {
return; // déjà en route
}
const steps = stepsBack(trail, stay);
if (steps === null) {
replace("#/");
replace(fallback);
return;
}
// Au cas où le navigateur ne reviendrait pas (historique
app/src/ui/prompt-source.ts
+132
View File
@@ -0,0 +1,132 @@
// Les prompts pour une IA tels que les demande l'interface (étape 1f) :
// les gabarits, lus dans la copie de docs/prompts/ faite par make site
// (ADR 0008), les phrases du maître, et les positions que le domaine lit
// avec le moteur (PromptsAccess, branché par main.ts). Le remplissage
// lui-même est dans le domaine (domain/prompts/prompts.ts).
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
import type { MasterPhrases } from "../domain/analysis/phrases.js";
import type { Advice } from "../domain/game/advice.js";
import type { GameJournal } from "../domain/game/events.js";
import type { PromptPosition } from "../domain/prompts/position.js";
import {
type ConceptExample,
conceptPrompt,
decisionPrompt,
summaryPrompt,
} from "../domain/prompts/prompts.js";
import {
PROMPT_FILES,
PROMPT_KINDS,
type PromptTemplates,
parsePromptTemplate,
} from "../domain/prompts/templates.js";
import type { PromptResult } from "./ask-ai.js";
import { ASK_AI_TEXTS } from "./ask-ai-texts.js";
import type { GlossaryEntry } from "./help-text.js";
/** La copie des gabarits dans le site (make site). */
const PROMPTS_DIR = "docs/prompts/";
/** Ce que les prompts demandent au domaine et au moteur : la position à
* décrire. */
export interface PromptsAccess {
/** La position d'avant une décision de la partie. */
readonly before: (journal: GameJournal, eventId: string) => Promise<PromptPosition>;
/** La position que montre le prompt du bilan (coup à revoir, ou
* position finale). */
readonly summary: (journal: GameJournal) => Promise<PromptPosition>;
/** La position d'exemple d'un concept et son évaluation. */
readonly concept: (journal: GameJournal | null) => Promise<ConceptExample>;
}
export interface PromptSourceOptions {
readonly access: PromptsAccess;
readonly phrases: () => Promise<MasterPhrases>;
/** Une fiche du glossaire, par son nom de fichier. */
readonly glossaryEntry: (file: string) => Promise<GlossaryEntry | null>;
}
export interface PromptSource {
/** Le prompt d'une décision du joueur (coup ou videau). */
decision(journal: GameJournal, advice: Advice): Promise<PromptResult>;
/** Le prompt du bilan d'une partie finie et analysée. */
summary(journal: GameJournal): Promise<PromptResult>;
/** Le prompt d'un terme du glossaire (nom de sa fiche, sans .md). */
concept(term: string, journal: GameJournal | null): Promise<PromptResult>;
}
async function fetchText(url: string): Promise<string> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`${url} : ${response.status}`);
}
return response.text();
}
export function createPromptSource(options: PromptSourceOptions): PromptSource {
let loading: Promise<PromptTemplates> | null = null;
/** Les gabarits, lus une fois (une nouvelle tentative après un
* échec). */
function templates(): Promise<PromptTemplates> {
loading ??= Promise.all(
PROMPT_KINDS.map(async (kind) =>
parsePromptTemplate(await fetchText(PROMPTS_DIR + PROMPT_FILES[kind])),
),
).then(
([move, cube, summary, concept, exercises]) => ({
move: move ?? "",
cube: cube ?? "",
summary: summary ?? "",
concept: concept ?? "",
exercises: exercises ?? "",
}),
(error: unknown) => {
loading = null;
throw error;
},
);
return loading;
}
return {
async decision(journal, advice) {
const [all, phrases, position] = await Promise.all([
templates(),
options.phrases(),
options.access.before(journal, advice.eventId),
]);
return { text: decisionPrompt(all, phrases, { journal, advice, position }) };
},
async summary(journal) {
const [all, phrases, position] = await Promise.all([
templates(),
options.phrases(),
options.access.summary(journal),
]);
return { text: summaryPrompt(all, phrases, { journal, position }) };
},
async concept(term, journal) {
const [all, entry, example] = await Promise.all([
templates(),
options.glossaryEntry(`${term}.md`).catch(() => null),
options.access.concept(journal),
]);
if (entry === null) {
return { message: ASK_AI_TEXTS.missingTerm };
}
return {
text: conceptPrompt(all, {
term: entry.term,
english: entry.english,
brief: entry.brief,
journal,
example,
}),
};
},
};
}
app/src/ui/router.ts
+58 -8
View File
@@ -14,8 +14,9 @@ export type Route =
| { readonly screen: "home" }
/** #/aide, et une question ouverte : #/aide/<identifiant>. */
| { readonly screen: "help"; readonly question: string | null }
/** #/glossaire, et un terme : #/glossaire/<fiche sans .md>. */
| { readonly screen: "glossary"; readonly term: string | null }
/** #/glossaire, et un terme : #/glossaire/<fiche sans .md> ; son
* prompt pour une IA : #/glossaire/<fiche>/ia. */
| { readonly screen: "glossary"; readonly term: string | null; readonly ai?: boolean }
/** #/a-propos. */
| { readonly screen: "about" }
/** #/tutoriel, une étape : #/tutoriel/<n>, et son écran « à vous » :
@@ -27,19 +28,27 @@ export type Route =
| { readonly screen: "install" }
/** #/parties, et une partie : #/parties/<identifiant>. */
| { readonly screen: "games"; readonly game: string | null }
/** #/parties/<identifiant>/bilan : le bilan de fin de partie (1e). */
| { readonly screen: "summary"; readonly game: string }
/** #/parties/<identifiant>/bilan : le bilan de fin de partie (1e) ;
* son prompt pour une IA : #/parties/<identifiant>/bilan/ia (1f). */
| { readonly screen: "summary"; readonly game: string; readonly ai?: boolean }
/** #/parties/<identifiant>/analyse/<coup> : l'écran d'analyse, placé
* sur un coup (un tour de la partie, à partir de 1) ; sans coup :
* #/parties/<identifiant>/analyse. */
| { readonly screen: "analysis"; readonly game: string; readonly turn: number | null }
* #/parties/<identifiant>/analyse ; le prompt du coup pour une IA :
* #/parties/<identifiant>/analyse/<coup>/ia (1f). */
| {
readonly screen: "analysis";
readonly game: string;
readonly turn: number | null;
readonly ai?: boolean;
}
/** #/menu. */
| { readonly screen: "menu" }
/** #/nouvelle-partie : le choix de la partie (type, niveau, conseil). */
| { readonly screen: "newGame" }
/** #/explication/<événement> : la feuille d'explication du maître sur
* une décision de la partie en cours (étape 1d). */
| { readonly screen: "explanation"; readonly event: string }
* une décision de la partie en cours (étape 1d) ; son prompt pour une
* IA : #/explication/<événement>/ia (1f). */
| { readonly screen: "explanation"; readonly event: string; readonly ai?: boolean }
/** #/position/<Position ID>/<Match ID> (Match ID facultatif). */
| { readonly screen: "position"; readonly position: string; readonly match: string | null }
/** Une adresse que l'application ne connaît pas. */
@@ -71,6 +80,11 @@ export function parseRoute(hash: string): Route {
if (rest.at(-1) === "") {
rest.pop();
}
// La feuille du prompt pour une IA (étape 1f) : « /ia » au bout de
// l'adresse de l'écran d'où on la demande.
if (rest.length > 1 && rest.at(-1) === "ia") {
return aiRoute(parseRoute(`#/${[head, ...rest.slice(0, -1)].join("/")}`)) ?? unknown;
}
if (head === "position") {
return positionRoute(rest.join("/")) ?? unknown;
}
@@ -113,6 +127,37 @@ export function parseRoute(hash: string): Route {
}
}
/** Les écrans qui ont une feuille de prompt pour une IA. */
export type AiRoute = Extract<
Route,
{ screen: "explanation" | "summary" | "analysis" | "glossary" }
>;
/** L'écran, avec sa feuille de prompt ouverte (null : écran sans prompt). */
function aiRoute(route: Route): AiRoute | null {
switch (route.screen) {
case "explanation":
case "summary":
case "analysis":
return route.ai === true ? null : { ...route, ai: true };
case "glossary":
return route.term === null || route.ai === true ? null : { ...route, ai: true };
default:
return null;
}
}
/** La feuille du prompt pour une IA est-elle ouverte ? */
export function isAiRoute(route: Route): route is AiRoute {
return "ai" in route && route.ai === true;
}
/** L'écran sous la feuille du prompt. */
export function withoutAi(route: AiRoute): AiRoute {
const { ai: _, ...below } = route;
return below;
}
/** #/parties/<id>/bilan, #/parties/<id>/analyse, #/parties/<id>/analyse/<n>. */
function gameReviewRoute(rest: readonly string[]): Route | null {
const [game = "", part, turn, ...more] = rest;
@@ -179,6 +224,11 @@ function positionRoute(text: string): Route | null {
/** Le fragment d'un écran, # compris. */
export function routeHash(route: Route): string {
const hash = screenHash(route);
return isAiRoute(route) ? `${hash}/ia` : hash;
}
function screenHash(route: Route): string {
switch (route.screen) {
case "game":
return "#/";
app/src/ui/summary-view.ts
+7 -1
View File
@@ -28,6 +28,7 @@ import type { GameJournal } from "../domain/game/events.js";
import type { Game } from "../domain/game/game.js";
import { COMPUTER_LEVELS } from "../domain/game/level.js";
import { VERDICT_ICONS } from "./advice-view.js";
import { askAiLink } from "./ask-ai.js";
import { icon } from "./icons.js";
import { MATCH_TEXTS } from "./match-texts.js";
import { boardSvg, drawSteps } from "./move-board.js";
@@ -299,9 +300,14 @@ export function createSummaryView(options: SummaryViewOptions): SummaryView {
text: REVIEW_TEXTS.reviewMove,
});
revisit.href = routeHash({ screen: "analysis", game: data.id, turn: reviewed.turn });
// L'emplacement de « Demander à une IA » (étape 1f).
// « Demander à une IA » (étape 1f) : le prompt du bilan.
const slot = element(links, "div", { className: "ask-ai-slot" });
slot.dataset.slot = "ask-ai";
askAiLink(
slot,
"summary-ask-ai",
routeHash({ screen: "summary", game: data.id, ai: true }),
);
}
function actions(data: SummaryData): void {