From 92985f56d0cf5b6a6f06cabdf672fcc264c0af88 Mon Sep 17 00:00:00 2001 From: JonathanMM Date: Fri, 19 May 2023 13:48:44 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20r=C3=A9sum=C3=A9=20textuel=20pou?= =?UTF-8?q?r=20partager=20ses=20stats?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/jeu.css | 16 +++++ ts/finDePartiePanel.ts | 22 +++---- ts/statistiquesDisplayer.ts | 114 ++++++++++++++++++++---------------- 3 files changed, 91 insertions(+), 61 deletions(-) diff --git a/public/jeu.css b/public/jeu.css index 54419ff..e0d886b 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -469,6 +469,22 @@ h1 { padding-left: 0.5em; } +.fin-de-partie-panel h3 { + text-align: start; +} + +#fin-de-partie-panel-resume-bouton, +#fin-de-partie-panel-stats-bouton { + font-size: 1rem; + margin-left: 1rem; + position: relative; +} + +.bouton-partage-texte { + bottom: 4px; + position: absolute; +} + #config-sauvegarde-area { text-align: start; } diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts index f6a7244..0e7feb5 100644 --- a/ts/finDePartiePanel.ts +++ b/ts/finDePartiePanel.ts @@ -2,6 +2,7 @@ import CopieHelper from "./copieHelper"; import Configuration from "./entites/configuration"; import LettreResultat from "./entites/lettreResultat"; import { LettreStatut } from "./entites/lettreStatut"; +import SauvegardeStats from "./entites/sauvegardeStats"; import InstanceConfiguration from "./instanceConfiguration"; import PanelManager from "./panelManager"; import Sauvegardeur from "./sauvegardeur"; @@ -130,25 +131,26 @@ export default class FinDePartiePanel { Peut-être feras-tu mieux demain ? \

"; } - contenu += "

Résumé de ta partie − "; - contenu += CopieHelper.creerBoutonPartage("fin-de-partie-panel-resume-bouton", "Partager").outerHTML; - contenu += - '

\ - 
' +
-        this._resumeTexteLegacy +
-        "
"; + contenu += StatistiquesDisplayer.genererResumeTexte(this._resumeTexteLegacy).outerHTML; } let stats = Sauvegardeur.chargerSauvegardeStats(); if (stats) { - const displayer = new StatistiquesDisplayer(stats); - - contenu += displayer.genererHtmlStats().outerHTML; + contenu += StatistiquesDisplayer.genererHtmlStats(stats).outerHTML; } this._panelManager.setContenu(titre, contenu); this._panelManager.setClasses(["fin-de-partie-panel"]); if (this._partieEstFinie) this.attacherPartage(); + if (stats) this.attacherPartageStats(stats); this._panelManager.afficherPanel(); } + + private attacherPartageStats(stats: SauvegardeStats): void { + const resumeBouton = document.getElementById("fin-de-partie-panel-stats-bouton") as HTMLElement; + + let resumeTexte = StatistiquesDisplayer.genererResumeTexteStatistiques(stats); + + CopieHelper.attacheBoutonCopieLien(resumeBouton, resumeTexte + "\n\nhttps://sutom.nocle.fr", "Résumé copié dans le presse papier."); + } } diff --git a/ts/statistiquesDisplayer.ts b/ts/statistiquesDisplayer.ts index 2244cd0..89ef9c4 100644 --- a/ts/statistiquesDisplayer.ts +++ b/ts/statistiquesDisplayer.ts @@ -1,81 +1,63 @@ +import CopieHelper from "./copieHelper"; import SauvegardeStats from "./entites/sauvegardeStats"; export default class StatistiquesDisplayer { - private readonly _stats: SauvegardeStats; + public static genererResumeTexte(texte: string): HTMLElement { + const area = document.createElement("div"); - public constructor(statistiques: SauvegardeStats) { - this._stats = statistiques; + const titre = document.createElement("h3"); + titre.innerText = "Résumé de la partie"; + + titre.appendChild(CopieHelper.creerBoutonPartage("fin-de-partie-panel-resume-bouton", "Partager")); + area.appendChild(titre); + + const resumeArea = document.createElement("pre"); + resumeArea.id = "fin-de-partie-panel-resume"; + resumeArea.innerHTML = texte; + area.appendChild(resumeArea); + + return area; } - 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} 🟦` + - "
" + - "
" + - "
"; - */ - + public static genererHtmlStats(stats: SauvegardeStats): HTMLElement { const statsArea = document.createElement("div"); statsArea.className = "stats-area"; const titre = document.createElement("h3"); titre.innerText = "Statistiques"; + titre.appendChild(CopieHelper.creerBoutonPartage("fin-de-partie-panel-stats-bouton", "Partager")); 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["-"] - ); + const max = this.getMax(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)); + statsParties.appendChild(this.creerBar("1", stats.repartition[1], max)); + statsParties.appendChild(this.creerBar("2", stats.repartition[2], max)); + statsParties.appendChild(this.creerBar("3", stats.repartition[3], max)); + statsParties.appendChild(this.creerBar("4", stats.repartition[4], max)); + statsParties.appendChild(this.creerBar("5", stats.repartition[5], max)); + statsParties.appendChild(this.creerBar("6", stats.repartition[6], max)); + statsParties.appendChild(this.creerBar("-", 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)); + statsNumeriques.appendChild(this.creerStatNumerique("Victoires", stats.partiesGagnees, stats.partiesJouees)); + statsNumeriques.appendChild(this.creerStatNumerique("Moyenne", this.getMoyenne(stats.repartition))); + statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟥", stats.lettresRepartitions.bienPlace)); + statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟡", stats.lettresRepartitions.malPlace)); + statsNumeriques.appendChild(this.creerStatNumerique("Lettres 🟦", stats.lettresRepartitions.nonTrouve)); statsArea.appendChild(statsNumeriques); return statsArea; } - private creerBar(label: string, valeur: number, max: number): HTMLElement { + private static creerBar(label: string, valeur: number, max: number): HTMLElement { const ligne = document.createElement("div"); ligne.className = "stats-ligne"; @@ -105,7 +87,7 @@ contenu += return ligne; } - private creerStatNumerique(label: string, valeur: number, valeurSecondaire?: number): HTMLElement { + private static creerStatNumerique(label: string, valeur: number, valeurSecondaire?: number): HTMLElement { const caseDiv = document.createElement("div"); caseDiv.className = "stats-numerique-case"; @@ -129,10 +111,40 @@ contenu += return caseDiv; } - private getMoyenne(repartition: { 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; "-": number }): number { + private static getMax(repartition: { 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; "-": number }): number { + return Math.max(repartition[1], repartition[2], repartition[3], repartition[4], repartition[5], repartition[6], repartition["-"]); + } + + private static 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["-"]) ); } + + public static genererResumeTexteStatistiques(stats: SauvegardeStats): string { + const max = this.getMax(stats.repartition); + + return `🟡 Statistiques de #SUTOM 🟡 + +1/6 - ${this.genererBarTexte(stats.repartition[1], max)} ${stats.repartition[1]} +2/6 - ${this.genererBarTexte(stats.repartition[2], max)} ${stats.repartition[2]} +3/6 - ${this.genererBarTexte(stats.repartition[3], max)} ${stats.repartition[3]} +4/6 - ${this.genererBarTexte(stats.repartition[4], max)} ${stats.repartition[4]} +5/6 - ${this.genererBarTexte(stats.repartition[5], max)} ${stats.repartition[5]} +6/6 - ${this.genererBarTexte(stats.repartition[6], max)} ${stats.repartition[6]} +-/6 - ${this.genererBarTexte(stats.repartition["-"], max)} ${stats.repartition["-"]} + +Moy. : ${this.getMoyenne(stats.repartition).toLocaleString("fr-FR", { maximumFractionDigits: 2 })} +${stats.lettresRepartitions.bienPlace}🟥- ${stats.lettresRepartitions.malPlace}🟡- ${stats.lettresRepartitions.nonTrouve}🟦`; + } + + private static genererBarTexte(valeur: number, max: number): string { + if (valeur === 0) return ""; + + const caractere = valeur === max ? "🟥" : "🟦"; + const longueurEnNbChars = Math.round((valeur / max) * 8); + + return longueurEnNbChars === 0 ? caractere : caractere.repeat(longueurEnNbChars); + } }