diff --git a/public/jeu.css b/public/jeu.css
index 0946620..54419ff 100644
--- a/public/jeu.css
+++ b/public/jeu.css
@@ -376,26 +376,79 @@ h1 {
text-align: end;
}
-.stats-area {
- display: table;
- padding-left: 0.5em;
+.stats-parties {
+ display: flex;
+ padding: 0 0.5em;
+ width: calc(100% - 1em);
+ flex-direction: column;
}
.stats-ligne {
- display: table-row;
+ display: flex;
+ align-items: center;
}
-.stats-cellule {
- display: table-cell;
+.stats-label {
+ width: 25px;
+ margin-right: 5px;
+ flex-grow: 1;
}
-.stats-cellule:first-child {
+.stats-bar-area {
+ flex-grow: 48;
+}
+
+.stats-bar {
+ border-radius: 3px;
+ height: 18px;
+ min-width: 10px;
+ background-color: var(--couleur-fond-grille);
+}
+
+.stats-bar.bar-max {
+ background-color: var(--couleur-bien-place);
+}
+
+.stats-valeur {
+ padding-left: 0.5em;
+ flex-grow: 1;
+}
+
+.stats-numeriques-area {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1em;
+}
+
+.stats-numerique-case {
+ display: flex;
+ flex-direction: column;
+ width: 75px;
+ height: 75px;
+ border-radius: 5px;
+ border: 1px solid var(--couleur-bordure);
+ padding: 5px;
+}
+
+.stats-numerique-case-valeur {
+ font-size: 28px;
+}
+
+.stats-numerique-case-secondaire {
+ font-size: 12px;
+}
+
+.stats-numerique-case-secondaire::before {
+ content: "/";
+}
+
+.stats-numerique-case-secondaire {
text-align: right;
}
-.stats-cellule:not(:first-child) {
- padding-left: 0.5em;
- text-align: left;
+.stats-numerique-case-label {
+ margin-top: auto;
+ font-size: 16px;
}
.bouton-partage {
diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts
index 204fbca..f6a7244 100644
--- a/ts/finDePartiePanel.ts
+++ b/ts/finDePartiePanel.ts
@@ -5,6 +5,7 @@ import { LettreStatut } from "./entites/lettreStatut";
import InstanceConfiguration from "./instanceConfiguration";
import PanelManager from "./panelManager";
import Sauvegardeur from "./sauvegardeur";
+import StatistiquesDisplayer from "./statistiquesDisplayer";
export default class FinDePartiePanel {
private readonly _datePartie: Date;
@@ -140,26 +141,9 @@ export default class FinDePartiePanel {
let stats = Sauvegardeur.chargerSauvegardeStats();
if (stats) {
- contenu +=
- '
Statistiques
Parties :
' +
- `
${stats.partiesGagnees}/${stats.partiesJouees}
` +
- "
" +
- `
1/6 :
${stats.repartition[1]}
` +
- `
2/6 :
${stats.repartition[2]}
` +
- `
3/6 :
${stats.repartition[3]}
` +
- `
4/6 :
${stats.repartition[4]}
` +
- `
5/6 :
${stats.repartition[5]}
` +
- `
6/6 :
${stats.repartition[6]}
` +
- `
-/6 :
${stats.repartition["-"]}
` +
- `
Moyenne :
${this.getMoyenne(stats.repartition)}
` +
- '
Lettres :
' +
- '
' +
- `${stats.lettresRepartitions.bienPlace} 🟥 ` +
- `${stats.lettresRepartitions.malPlace} 🟡 ` +
- `${stats.lettresRepartitions.nonTrouve} 🟦` +
- "
" +
- "
" +
- "
";
+ const displayer = new StatistiquesDisplayer(stats);
+
+ contenu += displayer.genererHtmlStats().outerHTML;
}
this._panelManager.setContenu(titre, contenu);
@@ -167,11 +151,4 @@ export default class FinDePartiePanel {
if (this._partieEstFinie) this.attacherPartage();
this._panelManager.afficherPanel();
}
-
- private getMoyenne(repartition: { 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; "-": number }): string {
- return (
- (repartition[1] * 1 + repartition[2] * 2 + repartition[3] * 3 + repartition[4] * 4 + repartition[5] * 5 + repartition[6] * 6 + repartition["-"] * 6) /
- (repartition[1] + repartition[2] + repartition[3] + repartition[4] + repartition[5] + repartition[6] + repartition["-"])
- ).toLocaleString("fr-FR", { maximumFractionDigits: 2 });
- }
}
diff --git a/ts/sauvegardeur.ts b/ts/sauvegardeur.ts
index 500673a..4b76915 100644
--- a/ts/sauvegardeur.ts
+++ b/ts/sauvegardeur.ts
@@ -97,7 +97,7 @@ export default class Sauvegardeur {
stats.lettresRepartitions.bienPlace,
stats.lettresRepartitions.malPlace,
stats.lettresRepartitions.nonTrouve,
- stats.dernierePartie,
+ stats.dernierePartie ? stats.dernierePartie.toISOString : "null",
].join(",");
}
@@ -128,7 +128,7 @@ export default class Sauvegardeur {
const LettresNonTrouve = parseInt(LettresNonTrouveString);
return {
- dernierePartie: new Date(dernierePartie),
+ dernierePartie: dernierePartie === "null" ? null : new Date(dernierePartie),
partiesJouees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups + Perdu,
partiesGagnees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups,
repartition: {
diff --git a/ts/statistiquesDisplayer.ts b/ts/statistiquesDisplayer.ts
new file mode 100644
index 0000000..2244cd0
--- /dev/null
+++ b/ts/statistiquesDisplayer.ts
@@ -0,0 +1,138 @@
+import SauvegardeStats from "./entites/sauvegardeStats";
+
+export default class StatistiquesDisplayer {
+ private readonly _stats: SauvegardeStats;
+
+ public constructor(statistiques: SauvegardeStats) {
+ this._stats = statistiques;
+ }
+
+ public genererHtmlStats(): HTMLElement {
+ /*
+contenu +=
+ 'Statistiques
Parties :
' +
+ `
${stats.partiesGagnees}/${stats.partiesJouees}
` +
+ "
" +
+ `
1/6 :
${stats.repartition[1]}
` +
+ `
2/6 :
${stats.repartition[2]}
` +
+ `
3/6 :
${stats.repartition[3]}
` +
+ `
4/6 :
${stats.repartition[4]}
` +
+ `
5/6 :
${stats.repartition[5]}
` +
+ `
6/6 :
${stats.repartition[6]}
` +
+ `
-/6 :
${stats.repartition["-"]}
` +
+ `
Moyenne :
${this.getMoyenne(stats.repartition)}
` +
+ '
Lettres :
' +
+ '
' +
+ `${stats.lettresRepartitions.bienPlace} 🟥 ` +
+ `${stats.lettresRepartitions.malPlace} 🟡 ` +
+ `${stats.lettresRepartitions.nonTrouve} 🟦` +
+ "
" +
+ "
" +
+ "
";
+ */
+
+ const statsArea = document.createElement("div");
+ statsArea.className = "stats-area";
+
+ const titre = document.createElement("h3");
+ titre.innerText = "Statistiques";
+ statsArea.appendChild(titre);
+
+ const statsParties = document.createElement("div");
+ statsParties.className = "stats-parties";
+
+ const max = Math.max(
+ this._stats.repartition[1],
+ this._stats.repartition[2],
+ this._stats.repartition[3],
+ this._stats.repartition[4],
+ this._stats.repartition[5],
+ this._stats.repartition[6],
+ this._stats.repartition["-"]
+ );
+
+ statsParties.appendChild(this.creerBar("1", this._stats.repartition[1], max));
+ statsParties.appendChild(this.creerBar("2", this._stats.repartition[2], max));
+ statsParties.appendChild(this.creerBar("3", this._stats.repartition[3], max));
+ statsParties.appendChild(this.creerBar("4", this._stats.repartition[4], max));
+ statsParties.appendChild(this.creerBar("5", this._stats.repartition[5], max));
+ statsParties.appendChild(this.creerBar("6", this._stats.repartition[6], max));
+ statsParties.appendChild(this.creerBar("-", this._stats.repartition["-"], max));
+
+ statsArea.appendChild(statsParties);
+
+ const statsNumeriques = document.createElement("div");
+ statsNumeriques.className = "stats-numeriques-area";
+
+ statsNumeriques.appendChild(this.creerStatNumerique("Victoires", this._stats.partiesGagnees, this._stats.partiesJouees));
+ statsNumeriques.appendChild(this.creerStatNumerique("Moyenne", this.getMoyenne(this._stats.repartition)));
+ statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟥", this._stats.lettresRepartitions.bienPlace));
+ statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟡", this._stats.lettresRepartitions.malPlace));
+ statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟦", this._stats.lettresRepartitions.nonTrouve));
+
+ statsArea.appendChild(statsNumeriques);
+
+ return statsArea;
+ }
+
+ private creerBar(label: string, valeur: number, max: number): HTMLElement {
+ const ligne = document.createElement("div");
+ ligne.className = "stats-ligne";
+
+ const labelDiv = document.createElement("div");
+ labelDiv.className = "stats-label";
+ labelDiv.innerText = label;
+ ligne.appendChild(labelDiv);
+
+ const barAreaDiv = document.createElement("div");
+ barAreaDiv.className = "stats-bar-area";
+
+ const barDiv = document.createElement("div");
+ barDiv.className = "stats-bar";
+
+ const longueurEnPourcent = Math.round((valeur / max) * 100);
+ if (valeur === max) barDiv.classList.add("bar-max");
+
+ barDiv.style.width = longueurEnPourcent === 0 ? "0px" : `calc(${longueurEnPourcent}% - 2px)`;
+ barAreaDiv.appendChild(barDiv);
+ ligne.appendChild(barAreaDiv);
+
+ const valeurDiv = document.createElement("div");
+ valeurDiv.className = "stats-valeur";
+ valeurDiv.innerText = valeur.toString();
+ ligne.appendChild(valeurDiv);
+
+ return ligne;
+ }
+
+ private creerStatNumerique(label: string, valeur: number, valeurSecondaire?: number): HTMLElement {
+ const caseDiv = document.createElement("div");
+ caseDiv.className = "stats-numerique-case";
+
+ const valeurDiv = document.createElement("div");
+ valeurDiv.className = "stats-numerique-case-valeur";
+ valeurDiv.innerText = valeur.toLocaleString("fr-FR", { maximumFractionDigits: 2 });
+ caseDiv.appendChild(valeurDiv);
+
+ if (valeurSecondaire !== undefined) {
+ const secondaireDiv = document.createElement("div");
+ secondaireDiv.className = "stats-numerique-case-secondaire";
+ secondaireDiv.innerText = valeurSecondaire.toLocaleString("fr-FR", { maximumFractionDigits: 2 });
+ caseDiv.appendChild(secondaireDiv);
+ }
+
+ const labelDiv = document.createElement("div");
+ labelDiv.className = "stats-numerique-case-label";
+ labelDiv.innerText = label;
+ caseDiv.appendChild(labelDiv);
+
+ return caseDiv;
+ }
+
+ private getMoyenne(repartition: { 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; "-": number }): number {
+ return (
+ (repartition[1] * 1 + repartition[2] * 2 + repartition[3] * 3 + repartition[4] * 4 + repartition[5] * 5 + repartition[6] * 6 + repartition["-"] * 6) /
+ (repartition[1] + repartition[2] + repartition[3] + repartition[4] + repartition[5] + repartition[6] + repartition["-"])
+ );
+ }
+}