diff --git a/frontend/__tests__/utils/format.spec.ts b/frontend/__tests__/utils/format.spec.ts index a9f5e503b55e..396aeac1754e 100644 --- a/frontend/__tests__/utils/format.spec.ts +++ b/frontend/__tests__/utils/format.spec.ts @@ -94,6 +94,7 @@ describe("format.ts", () => { expect(format.typingSpeed(80.75, { rounding: Math.floor })).toEqual("80"); }); }); + describe("percentage", () => { it("should format with decimalPlaces from configuration", () => { //no decimals @@ -153,6 +154,25 @@ describe("format.ts", () => { expect(format.percentage(80.75, { rounding: Math.floor })).toEqual("80%"); }); }); + + describe("accuracy", () => { + it("should floor decimals by default", () => { + //no decimals + const noDecimals = getInstance({ alwaysShowDecimalPlaces: false }); + expect(noDecimals.accuracy(12.75)).toEqual("12%"); + //with decimals + const withDecimals = getInstance({ alwaysShowDecimalPlaces: true }); + expect(withDecimals.accuracy(12.75)).toEqual("12.75%"); + }); + + it("should format with rounding", () => { + const format = getInstance({ alwaysShowDecimalPlaces: false }); + expect(format.accuracy(80.5)).toEqual("80%"); + expect(format.accuracy(80.25, { rounding: Math.ceil })).toEqual("81%"); + expect(format.accuracy(80.75, { rounding: Math.floor })).toEqual("80%"); + }); + }); + describe("decimals", () => { it("should format with decimalPlaces from configuration", () => { //no decimals diff --git a/frontend/src/ts/account/pb-tables.ts b/frontend/src/ts/account/pb-tables.ts index e03f14d2729d..6bc228d88c97 100644 --- a/frontend/src/ts/account/pb-tables.ts +++ b/frontend/src/ts/account/pb-tables.ts @@ -154,9 +154,8 @@ function buildPbHtml(
${Format.typingSpeed(pbData.wpm, { showDecimalPlaces: false, })}
-
${Format.percentage(pbData.acc, { +
${Format.accuracy(pbData.acc, { showDecimalPlaces: false, - rounding: Math.floor, })}
@@ -165,13 +164,8 @@ function buildPbHtml( suffix: ` ${speedUnit}`, })}
${Format.typingSpeed(pbData.raw, { suffix: " raw" })}
-
${Format.percentage(pbData.acc, { - suffix: " acc", - rounding: Math.floor, - })}
-
${Format.percentage(pbData.consistency, { - suffix: " con", - })}
+
${Format.accuracy(pbData.acc, { suffix: " acc" })}
+
${Format.percentage(pbData.consistency, { suffix: " con" })}
${dateText}
`; } catch (e) { diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts index 5efda15ff318..31d45460b7cf 100644 --- a/frontend/src/ts/elements/modes-notice.ts +++ b/frontend/src/ts/elements/modes-notice.ts @@ -144,13 +144,8 @@ export async function update(): Promise { } if (Config.showAverage !== "off") { - let avgWPM = Last10Average.getWPM(); - let avgAcc = Last10Average.getAcc(); - - if (!Config.alwaysShowDecimalPlaces) { - avgWPM = Math.round(avgWPM); - avgAcc = Math.round(avgAcc); - } + const avgWPM = Last10Average.getWPM(); + const avgAcc = Last10Average.getAcc(); if (isAuthenticated() && avgWPM > 0) { const avgWPMText = ["speed", "both"].includes(Config.showAverage) @@ -158,7 +153,7 @@ export async function update(): Promise { : ""; const avgAccText = ["acc", "both"].includes(Config.showAverage) - ? Format.percentage(avgAcc, { suffix: " acc", rounding: Math.floor }) + ? Format.accuracy(avgAcc, { suffix: " acc" }) : ""; const text = `${avgWPMText} ${avgAccText}`.trim(); diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 7995aec4874d..c6eba49defe5 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -881,15 +881,9 @@ async function fillContent(): Promise { $(".pageAccount .highestWpm .mode").html(topMode); $(".pageAccount .testsTaken .val").text(testCount); - $(".pageAccount .highestAcc .val").text( - Format.percentage(topAcc, { rounding: Math.floor }) - ); - $(".pageAccount .avgAcc .val").text( - Format.percentage(totalAcc / testCount, { rounding: Math.floor }) - ); - $(".pageAccount .avgAcc10 .val").text( - Format.percentage(totalAcc10 / last10, { rounding: Math.floor }) - ); + $(".pageAccount .highestAcc .val").text(Format.accuracy(topAcc)); + $(".pageAccount .avgAcc .val").text(Format.accuracy(totalAcc / testCount)); + $(".pageAccount .avgAcc10 .val").text(Format.accuracy(totalAcc10 / last10)); if (totalCons === 0 || totalCons === undefined) { $(".pageAccount .avgCons .val").text("-"); diff --git a/frontend/src/ts/popups/pb-tables-popup.ts b/frontend/src/ts/popups/pb-tables-popup.ts index 088fb363cf22..5409fd5ece0c 100644 --- a/frontend/src/ts/popups/pb-tables-popup.ts +++ b/frontend/src/ts/popups/pb-tables-popup.ts @@ -63,9 +63,7 @@ function update(mode: SharedTypes.Config.Mode): void { ${Format.typingSpeed(pb.wpm)}
- ${Format.percentage(pb.acc, { - rounding: Math.floor, - })} + ${Format.accuracy(pb.acc)} ${Format.typingSpeed(pb.raw)} diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts index 293d2639e650..0259a803fe08 100644 --- a/frontend/src/ts/test/result.ts +++ b/frontend/src/ts/test/result.ts @@ -229,9 +229,7 @@ function updateWpmAndAcc(): void { } $("#result .stats .raw .bottom").text(Format.typingSpeed(result.rawWpm)); $("#result .stats .acc .bottom").text( - result.acc === 100 - ? "100%" - : Format.percentage(result.acc, { rounding: Math.floor }) + result.acc === 100 ? "100%" : Format.accuracy(result.acc) ); if (Config.alwaysShowDecimalPlaces) { diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts index ef6c8634fcb9..0fc217d29e7d 100644 --- a/frontend/src/ts/utils/format.ts +++ b/frontend/src/ts/utils/format.ts @@ -21,7 +21,7 @@ export class Formatting { typingSpeed( wpm: number | null | undefined, - formatOptions: FormatOptions = FORMAT_DEFAULT_OPTIONS + formatOptions: FormatOptions = {} ): string { const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions }; if (wpm === undefined || wpm === null) return options.fallback ?? ""; @@ -30,6 +30,7 @@ export class Formatting { return this.number(result, options); } + percentage( percentage: number | null | undefined, formatOptions: FormatOptions = {} @@ -40,6 +41,16 @@ export class Formatting { return this.number(percentage, options); } + accuracy( + accuracy: number | null | undefined, + formatOptions: FormatOptions = {} + ): string { + return this.percentage(accuracy, { + rounding: Math.floor, + ...formatOptions, + }); + } + decimals( value: number | null | undefined, formatOptions: FormatOptions = {} @@ -47,6 +58,7 @@ export class Formatting { const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions }; return this.number(value, options); } + private number( value: number | null | undefined, formatOptions: FormatOptions