fix: formatting of points on the canvas pages

Author: FreekBes

src/handlers/filters.ts

@@ -1,6 +1,6 @@
 import { Express } from 'express';
 import nunjucks from 'nunjucks';
-import { timeAgo, timeFromNow } from '../utils';
+import { formatThousands, timeAgo, timeFromNow } from '../utils';
 
 export const setupNunjucksFilters = function(app: Express): void {
 	const nunjucksEnv = nunjucks.configure('templates', {
@@ -15,7 +15,7 @@ export const setupNunjucksFilters = function(app: Express): void {
 
 	// Add formatting for numbers to thousands separator
 	nunjucksEnv.addFilter('thousands', (num: number | string) => {
-		return num.toString().replace(/\./, ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		return formatThousands(num);
 	});
 
 	// Add formatting filter for seconds to hh:mm format

src/routes/canvas.ts

@@ -1,7 +1,7 @@
 import { IntraCoalition, PrismaClient } from '@prisma/client';
 import { Express } from 'express';
 import { CanvasRenderingContext2D, createCanvas, loadImage, registerFont } from 'canvas';
-import { bonusPointsAwardingStarted, CoalitionScore, getBlocAtDate, getCoalitionScore, getCoalitionTopContributors, getRanking, SingleRanking, SMALL_CONTRIBUTION_TYPES, timeAgo } from '../utils';
+import { bonusPointsAwardingStarted, CoalitionScore, formatThousands, getBlocAtDate, getCoalitionScore, getCoalitionTopContributors, getRanking, SingleRanking, SMALL_CONTRIBUTION_TYPES, timeAgo } from '../utils';
 
 const CANVAS_WIDTH = 1920;
 const CANVAS_HEIGHT = 1080;
@@ -302,7 +302,7 @@ const drawInitialCanvas = async function(prisma: PrismaClient, ctx: CanvasRender
 		ctx.fillText(`${coalition.intra_coalition.name} `, textX, textY - entryHeight * 0.15);
 		const nameWidth = ctx.measureText(`${coalition.intra_coalition.name} `).width;
 		ctx.font = `bold ${Math.floor(entryHeight * 0.18)}px "Museo Sans"`;
-		ctx.fillText(`${score.score} pts.`, textX + nameWidth, textY - entryHeight * 0.15);
+		ctx.fillText(`${formatThousands(score.score)} pts.`, textX + nameWidth, textY - entryHeight * 0.15);
 
 		// Draw coalition logo
 		// TODO: make this work! The logos are SVG, which is not supported properly by canvas loadImage
@@ -323,7 +323,7 @@ const drawInitialCanvas = async function(prisma: PrismaClient, ctx: CanvasRender
 			ctx.fillText('TOP CONTRIBUTOR', profilePicX + profilePicSize + PADDING * 0.5, profilePicY + profilePicSize * 0.47);
 
 			// Draw login and score next to profile picture
-			ctx.font = `${Math.floor(entryHeight * 0.13)}px "Museo Sans"`;
+			ctx.font = `${Math.floor(entryHeight * 0.11)}px "Museo Sans"`;
 			ctx.textBaseline = 'middle';
 			ctx.fillText(`${(topContributor.user.login)}`, profilePicX + profilePicSize + PADDING * 0.5, profilePicY + profilePicSize * 0.62);
 		}
@@ -417,7 +417,7 @@ export const setupCanvasRoutes = function(app: Express, prisma: PrismaClient): v
 					// Draw user profile picture in the vertical center of the entry
 					await drawUserProfilePicture(ctx, rightX + PADDING + entryPadding, currentY + entryPadding, profilePicSize, topRanking.user.image || '');
 					// Draw login and score next to profile picture
-					ctx.fillText(`${topRanking.user.login} / ${topRanking.score} pts.`, entryTextX, entryTextY, entryTextMaxWidth);
+					ctx.fillText(`${topRanking.user.login} / ${formatThousands(topRanking.score)} pts.`, entryTextX, entryTextY, entryTextMaxWidth);
 				} else {
 					ctx.fillText('No data available', entryTextX, entryTextY, entryTextMaxWidth);
 				}
@@ -533,7 +533,7 @@ export const setupCanvasRoutes = function(app: Express, prisma: PrismaClient): v
 				ctx.fillStyle = '#FFFFFF';
 				ctx.textBaseline = 'bottom';
 				ctx.font = `bold ${Math.floor(entryInnerHeight * 0.21)}px "Museo Sans"`;
-				ctx.fillText(`${score.user.intra_user.login} / ${score.amount} pts. / ${timeAgo(score.created_at)}`, entryTextX, entryTextY, entryTextMaxWidth);
+				ctx.fillText(`${score.user.intra_user.login} / ${formatThousands(score.amount)} pts. / ${timeAgo(score.created_at)}`, entryTextX, entryTextY, entryTextMaxWidth);
 
 				// Draw user profile picture in the vertical center of the entry
 				await drawUserProfilePicture(ctx, rightX + PADDING + entryPadding, currentY + entryPadding, profilePicSize, score.user.intra_user.image || '');

src/utils.ts

@@ -271,6 +271,10 @@ export const timeFromNow = function(date: Date | null): string {
 	return `within a minute`; // don't specify: otherwise it's weird when the amount of seconds does not go down
 };
 
+export const formatThousands = function(num: number | string): string {
+	return num.toString().replace(/\./, ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+};
+
 const blocCache = new NodeCache({
 	stdTTL: 60 * 60, // 1 hour
 	checkperiod: 60 * 5, // 5 minutes