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["-"]) + ); + } +}