import SauvegardeStats from "./entites/sauvegardeStats";
export default class StatistiquesDisplayer {
private readonly _stats: SauvegardeStats;
public constructor(statistiques: SauvegardeStats) {
this._stats = statistiques;
}
public genererHtmlStats(): HTMLElement {
/*
contenu +=
'
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["-"])
);
}
}