mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-06-01 21:42:27 +02:00
Refonte de l'affichage des statistiques
This commit is contained in:
parent
8bb4d7139d
commit
a168654292
|
@ -376,26 +376,79 @@ h1 {
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-area {
|
.stats-parties {
|
||||||
display: table;
|
display: flex;
|
||||||
padding-left: 0.5em;
|
padding: 0 0.5em;
|
||||||
|
width: calc(100% - 1em);
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-ligne {
|
.stats-ligne {
|
||||||
display: table-row;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-cellule {
|
.stats-label {
|
||||||
display: table-cell;
|
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;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-cellule:not(:first-child) {
|
.stats-numerique-case-label {
|
||||||
padding-left: 0.5em;
|
margin-top: auto;
|
||||||
text-align: left;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bouton-partage {
|
.bouton-partage {
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { LettreStatut } from "./entites/lettreStatut";
|
||||||
import InstanceConfiguration from "./instanceConfiguration";
|
import InstanceConfiguration from "./instanceConfiguration";
|
||||||
import PanelManager from "./panelManager";
|
import PanelManager from "./panelManager";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
|
import StatistiquesDisplayer from "./statistiquesDisplayer";
|
||||||
|
|
||||||
export default class FinDePartiePanel {
|
export default class FinDePartiePanel {
|
||||||
private readonly _datePartie: Date;
|
private readonly _datePartie: Date;
|
||||||
|
@ -140,26 +141,9 @@ export default class FinDePartiePanel {
|
||||||
|
|
||||||
let stats = Sauvegardeur.chargerSauvegardeStats();
|
let stats = Sauvegardeur.chargerSauvegardeStats();
|
||||||
if (stats) {
|
if (stats) {
|
||||||
contenu +=
|
const displayer = new StatistiquesDisplayer(stats);
|
||||||
'<p>Statistiques</p><div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
|
|
||||||
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
contenu += displayer.genererHtmlStats().outerHTML;
|
||||||
"</div>" +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
|
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">Moyenne :</div><div class="stats-cellule">${this.getMoyenne(stats.repartition)}</div></div>` +
|
|
||||||
'<div class="stats-ligne"><div class="stats-cellule">Lettres :</div>' +
|
|
||||||
'<div class="stats-cellule">' +
|
|
||||||
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
|
|
||||||
`${stats.lettresRepartitions.malPlace} 🟡 ` +
|
|
||||||
`${stats.lettresRepartitions.nonTrouve} 🟦` +
|
|
||||||
"</div>" +
|
|
||||||
"</div>" +
|
|
||||||
"</div>";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this._panelManager.setContenu(titre, contenu);
|
this._panelManager.setContenu(titre, contenu);
|
||||||
|
@ -167,11 +151,4 @@ export default class FinDePartiePanel {
|
||||||
if (this._partieEstFinie) this.attacherPartage();
|
if (this._partieEstFinie) this.attacherPartage();
|
||||||
this._panelManager.afficherPanel();
|
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 });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,7 @@ export default class Sauvegardeur {
|
||||||
stats.lettresRepartitions.bienPlace,
|
stats.lettresRepartitions.bienPlace,
|
||||||
stats.lettresRepartitions.malPlace,
|
stats.lettresRepartitions.malPlace,
|
||||||
stats.lettresRepartitions.nonTrouve,
|
stats.lettresRepartitions.nonTrouve,
|
||||||
stats.dernierePartie,
|
stats.dernierePartie ? stats.dernierePartie.toISOString : "null",
|
||||||
].join(",");
|
].join(",");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,7 +128,7 @@ export default class Sauvegardeur {
|
||||||
const LettresNonTrouve = parseInt(LettresNonTrouveString);
|
const LettresNonTrouve = parseInt(LettresNonTrouveString);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dernierePartie: new Date(dernierePartie),
|
dernierePartie: dernierePartie === "null" ? null : new Date(dernierePartie),
|
||||||
partiesJouees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups + Perdu,
|
partiesJouees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups + Perdu,
|
||||||
partiesGagnees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups,
|
partiesGagnees: UnCoup + DeuxCoups + TroisCoups + QuatreCoups + CinqCoups + SixCoups,
|
||||||
repartition: {
|
repartition: {
|
||||||
|
|
138
ts/statistiquesDisplayer.ts
Normal file
138
ts/statistiquesDisplayer.ts
Normal file
|
@ -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 +=
|
||||||
|
'<p>Statistiques</p><div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
|
||||||
|
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
||||||
|
"</div>" +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
|
||||||
|
`<div class="stats-ligne"><div class="stats-cellule">Moyenne :</div><div class="stats-cellule">${this.getMoyenne(stats.repartition)}</div></div>` +
|
||||||
|
'<div class="stats-ligne"><div class="stats-cellule">Lettres :</div>' +
|
||||||
|
'<div class="stats-cellule">' +
|
||||||
|
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
|
||||||
|
`${stats.lettresRepartitions.malPlace} 🟡 ` +
|
||||||
|
`${stats.lettresRepartitions.nonTrouve} 🟦` +
|
||||||
|
"</div>" +
|
||||||
|
"</div>" +
|
||||||
|
"</div>";
|
||||||
|
*/
|
||||||
|
|
||||||
|
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["-"])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue