feat: add season progress bar to home

Author: FreekBes

src/handlers/filters.ts

@@ -51,6 +51,16 @@ export const setupNunjucksFilters = function(app: Express): void {
 		return date.toISOString().split('T')[0];
 	});
 
+	// Add formatting to get a percentage based on two numbers
+	nunjucksEnv.addFilter('perc', (num: number, total: number) => {
+		return +((num / total) * 100).toFixed(2); // + in front changes to string to a number again
+	});
+
+	// Add formatting to get a percentage based on three numbers
+	nunjucksEnv.addFilter('perc3', (value: number, min: number, max: number) => {
+		return +(((value - min) / (max - min) * 100).toFixed(2)); // + in front changes to string to a number again
+	});
+
 	// Add filter to replace hex color with RGBA color
 	nunjucksEnv.addFilter('rgba', (hex: string, alpha: number) => {
 		if (!hex || !hex.startsWith('#')) {

src/routes/home.ts

@@ -44,6 +44,13 @@ export const setupHomeRoutes = function(app: Express, prisma: PrismaClient): voi
 		// Sort the coalitions by score
 		const sortedCoalitionScores = Object.entries(coalitionScores).sort((a, b) => b[1].score - a[1].score);
 
+		// Get current bloc deadline
+		const currentBlocDeadline = await prisma.intraBlocDeadline.findFirst({
+			orderBy: {
+				end_at: 'desc',
+			},
+		});
+
 		// Get the coalition of the current user
 		const my_coalition = await prisma.intraCoalitionUser.findFirst({
 			where: {
@@ -86,10 +93,15 @@ export const setupHomeRoutes = function(app: Express, prisma: PrismaClient): voi
 		// Check if quiz is currently available
 		const quiz_available = await isQuizAvailable(user, prisma);
 
+		// Current datetime
+		const now = new Date();
+
 		return res.render('home.njk', {
 			coalitions,
 			coalitionsObject,
 			my_coalition,
+			now,
+			currentBlocDeadline,
 			quiz_available,
 			sortedCoalitionScores,
 			rankingTypes,

templates/home.njk

@@ -39,7 +39,13 @@
 				</div>
 			</div>
 			<div class="card-body">
-				<canvas height="300" class="codam-chart" data-url="/charts/coalitions/scores/history" id="coalition-score-history"></canvas>
+				<div class="mb-4">
+					<canvas height="300" class="codam-chart" data-url="/charts/coalitions/scores/history" id="coalition-score-history"></canvas>
+				</div>
+				<div class="progress mb-2" role="progressbar" aria-label="Progress of the current season" aria-valuenow="{{ now | timestamp }}" aria-valuemin="{{ currentBlocDeadline.begin_at | timestamp }}" aria-valuemax="{{ currentBlocDeadline.end_at | timestamp }}">
+					<div class="progress-bar" style="width: {{ now | timestamp | perc3(currentBlocDeadline.begin_at | timestamp, currentBlocDeadline.end_at | timestamp) }}%;"></div>
+				</div>
+				<p style="text-align: center;">The current season <b title="{{ currentBlocDeadline.end_at }}">ends {{ currentBlocDeadline.end_at | timeFromNow }}</b>!</p>
 			</div>
 		</div>