christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajoute un résumé modal à la fin du cube

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 20:09:44 +02:00
parent 9f98168934
commit 8eeb359a08
3 changed files with 252 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
app.js
View File

@@ -661,6 +661,22 @@ function initCubePage() {
closeHelpButton: document.querySelector("#closeCubeHelpButton"),
helpModal: document.querySelector("#cubeHelpModal"),
helpStatus: document.querySelector("#cubeHelpStatus"),
resultModal: document.querySelector("#cubeResultModal"),
closeResultButton: document.querySelector("#closeCubeResultButton"),
resultModalTitle: document.querySelector("#cubeResultModalTitle"),
resultSummary: document.querySelector("#cubeResultSummary"),
resultWinner: document.querySelector("#cubeResultWinner"),
resultOutcome: document.querySelector("#cubeResultOutcome"),
resultWhiteName: document.querySelector("#cubeResultWhiteName"),
resultBlackName: document.querySelector("#cubeResultBlackName"),
resultWhiteTime: document.querySelector("#cubeResultWhiteTime"),
resultBlackTime: document.querySelector("#cubeResultBlackTime"),
resultWhiteDetail: document.querySelector("#cubeResultWhiteDetail"),
resultBlackDetail: document.querySelector("#cubeResultBlackDetail"),
resultWhiteClock: document.querySelector("#cubeResultWhiteClock"),
resultBlackClock: document.querySelector("#cubeResultBlackClock"),
resultActionButton: document.querySelector("#cubeResultActionButton"),
resultDismissButton: document.querySelector("#cubeResultDismissButton"),
replayCubeButton: document.querySelector("#replayCubeButton"),
resetButton: document.querySelector("#cubeResetButton"),
};
@@ -669,9 +685,12 @@ function initCubePage() {
black: createCubeHoldIntent(),
};
let cubeHoldAnimationFrameId = null;
let resultModalKey = null;
const openModal = () => toggleModal(refs.helpModal, true);
const closeModal = () => toggleModal(refs.helpModal, false);
const openResultModal = () => toggleModal(refs.resultModal, true);
const closeResultModal = () => toggleModal(refs.resultModal, false);
refs.openHelpButton?.addEventListener("click", openModal);
refs.closeHelpButton?.addEventListener("click", closeModal);
@@ -681,6 +700,14 @@ function initCubePage() {
closeModal();
}
});
refs.closeResultButton?.addEventListener("click", closeResultModal);
refs.resultDismissButton?.addEventListener("click", closeResultModal);
refs.resultModal?.addEventListener("click", (event) => {
const target = event.target;
if (target instanceof HTMLElement && target.dataset.closeCubeResultModal === "true") {
closeResultModal();
}
});
bindCubeButton("white", refs.whiteButton);
bindCubeButton("black", refs.blackButton);
@@ -697,27 +724,47 @@ function initCubePage() {
}
if (match.cube.times.white !== null && match.cube.times.black !== null) {
if (match.config.mode === "twice" && match.cube.times.white === match.cube.times.black) {
replayCubePhase(match);
dirty = true;
render();
return;
}
applyCubeOutcome(match);
dirty = true;
persistMatch();
navigateTo("chrono.html");
openResultModal();
}
});
refs.resultActionButton?.addEventListener("click", () => {
if (!match || match.result || match.phase !== "cube") {
closeResultModal();
return;
}
if (match.cube.times.white === null || match.cube.times.black === null) {
closeResultModal();
return;
}
if (match.config.mode === "twice" && match.cube.times.white === match.cube.times.black) {
closeResultModal();
resultModalKey = null;
replayCubePhase(match);
dirty = true;
render();
return;
}
closeResultModal();
applyCubeOutcome(match);
dirty = true;
persistMatch();
navigateTo("chrono.html");
});
refs.replayCubeButton?.addEventListener("click", () => {
closeResultModal();
resultModalKey = null;
replayCubePhase(match);
dirty = true;
render();
});
refs.resetButton?.addEventListener("click", () => {
closeResultModal();
clearMatch();
replaceTo(SETUP_PAGE);
});
@@ -975,6 +1022,97 @@ function initCubePage() {
hint.textContent = "Maintenez la grande zone 2 secondes, puis relachez pour lancer votre chrono.";
}
function getCubeResultState() {
if (!match || match.phase !== "cube") {
return null;
}
const white = match.cube.times.white;
const black = match.cube.times.black;
if (white === null || black === null) {
return null;
}
const whiteName = playerName(match, "white");
const blackName = playerName(match, "black");
if (match.config.mode === "time") {
const preview = getTimeAdjustmentPreview(match, white, black);
if (!preview) {
return null;
}
return {
key: `time:${match.blockNumber}:${match.cube.round}:${white}:${black}`,
title: "Résumé du cube",
winner: preview.winner ? playerName(match, preview.winner) : "Egalite",
outcome:
preview.blockType === "minus" ? "Bloc - a appliquer" : "Bloc + a appliquer",
summary:
"Validez ce résumé pour appliquer les impacts chrono puis revenir à la page chrono.",
actionLabel: "Appliquer et ouvrir la page chrono",
whiteName,
blackName,
whiteTime: `Temps cube ${formatStopwatch(white)}`,
blackTime: `Temps cube ${formatStopwatch(black)}`,
whiteDetail: `Impact chrono ${formatSignedStopwatch(preview.whiteDelta)}`,
blackDetail: `Impact chrono ${formatSignedStopwatch(preview.blackDelta)}`,
whiteClock: `Chrono apres ${formatSignedClock(preview.whiteAfter)}`,
blackClock: `Chrono apres ${formatSignedClock(preview.blackAfter)}`,
};
}
const winner = white < black ? "white" : black < white ? "black" : null;
const isTie = winner === null;
return {
key: `twice:${match.blockNumber}:${match.cube.round}:${white}:${black}`,
title: isTie ? "Egalite parfaite" : "Résumé du cube",
winner: winner ? playerName(match, winner) : "Egalite parfaite",
outcome: isTie ? "Rejouer la phase cube" : `${playerName(match, winner)} ouvrira la partie suivante`,
summary: isTie
? "Le règlement Twice impose de rejouer immédiatement la phase cube."
: "Validez ce résultat pour préparer la partie suivante.",
actionLabel: isTie ? "Rejouer la phase cube" : "Appliquer et ouvrir la page chrono",
whiteName,
blackName,
whiteTime: `Temps cube ${formatStopwatch(white)}`,
blackTime: `Temps cube ${formatStopwatch(black)}`,
whiteDetail: winner === "white" ? "Gagne la phase cube" : isTie ? "Egalite parfaite" : "Ne gagne pas la phase cube",
blackDetail: winner === "black" ? "Gagne la phase cube" : isTie ? "Egalite parfaite" : "Ne gagne pas la phase cube",
whiteClock: "Aucun impact chrono en mode Twice",
blackClock: "Aucun impact chrono en mode Twice",
};
}
function renderResultModal() {
const resultState = getCubeResultState();
if (!resultState) {
closeResultModal();
resultModalKey = null;
return;
}
refs.resultModalTitle.textContent = resultState.title;
refs.resultSummary.textContent = resultState.summary;
refs.resultWinner.textContent = resultState.winner;
refs.resultOutcome.textContent = resultState.outcome;
refs.resultWhiteName.textContent = resultState.whiteName;
refs.resultBlackName.textContent = resultState.blackName;
refs.resultWhiteTime.textContent = resultState.whiteTime;
refs.resultBlackTime.textContent = resultState.blackTime;
refs.resultWhiteDetail.textContent = resultState.whiteDetail;
refs.resultBlackDetail.textContent = resultState.blackDetail;
refs.resultWhiteClock.textContent = resultState.whiteClock;
refs.resultBlackClock.textContent = resultState.blackClock;
refs.resultActionButton.textContent = resultState.actionLabel;
if (resultState.key !== resultModalKey) {
resultModalKey = resultState.key;
openResultModal();
}
}
function render() {
const blockHeading = formatBlockHeading(match, match.blockNumber);
const timePreview =
@@ -1009,7 +1147,7 @@ function initCubePage() {
refs.spineLabel.textContent = "Reglement";
refs.spineHeadline.textContent = "Rejouer la phase cube";
refs.spineText.textContent = "Le mode Twice impose de relancer immediatement la phase cube en cas d'egalite parfaite.";
refs.primaryButton.textContent = "Rejouer la phase cube";
refs.primaryButton.textContent = "Voir le résumé du cube";
refs.helpStatus.textContent = refs.spineText.textContent;
} else if (match.cube.times.white !== null && match.cube.times.black !== null) {
if (timePreview) {
@@ -1030,7 +1168,7 @@ function initCubePage() {
refs.spineHeadline.textContent = "Ouvrir la page chrono";
refs.spineText.textContent = "Appliquer le resultat du cube pour preparer la partie suivante.";
}
refs.primaryButton.textContent = "Appliquer et ouvrir la page chrono";
refs.primaryButton.textContent = "Voir le résumé du cube";
refs.helpStatus.textContent = refs.spineText.textContent;
} else if (match.cube.running) {
refs.centerLabel.textContent = "Etat";
@@ -1060,6 +1198,7 @@ function initCubePage() {
renderCubeZone("black");
renderCubeZone("white");
renderResultModal();
refs.primaryButton.disabled =
!match.result &&
!(