Replace "Private" text with lock icon

man90es · Nov 1, 2024 · 8cd1377 · 8cd1377
1 parent 219b2a3
commit 8cd1377
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 41 deletions.
diff --git a/public/assets/highlight_off_black_24dp.svg b/public/assets/highlight_off_black_24dp.svg
diff --git a/src/pages/leaderboard/components/LeaderboardLine.vue b/src/pages/leaderboard/components/LeaderboardLine.vue
@@ -3,39 +3,31 @@
 		<span v-if="!groupWPrev">#{{ place }}</span>
 	</div>
 	<div :class="['family-name', colourClass]">
-		<a
-			:href="profileLink"
-			class="bs-link"
-			target="_blank"
-		>
+		<a :href="profileLink" class="bs-link" target="_blank">
 			{{ profile.familyName }}
 		</a>
-		<button
-			@click="removeFromCustom"
-			v-if="$route.name == routeNameEnum.CUSTOM_LEADERBOARD"
-		>
-			<img
-				:src="xIcon"
-				alt="x"
-			/>
+		<button @click="removeFromCustom" v-if="$route.name == routeNameEnum.CUSTOM_LEADERBOARD">
+			<DeleteOutlined />
 		</button>
 	</div>
-	<div
-		:class="['character-name', colourClass]"
-		:title="featuredCharacter?.class"
-	>
+	<div :class="['character-name', colourClass]" :title="featuredCharacter?.class">
 		{{ featuredCharacter?.name }}
 	</div>
-	<div :class="['score', colourClass]">{{ displayScore || score }}</div>
+	<div :class="['score', colourClass]">
+		<template v-if="score !== -1">
+			{{ displayScore || score }}
+		</template>
+		<LockOutlined v-else />
+	</div>
 </template>
 
 <script setup>
 	import { computed } from "vue"
+	import { DeleteOutlined } from "@ant-design/icons-vue"
+	import { LockOutlined } from "@ant-design/icons-vue"
 	import { routeNameEnum } from "@/router"
 	import { useMainStore } from "@/stores"
 
-	const xIcon = process.env.BASE_URL + "assets/highlight_off_black_24dp.svg"
-
 	const store = useMainStore()
 	const props = defineProps({
 		profile: {

diff --git a/src/pages/leaderboard/logic/generateLeaderboardItems.ts b/src/pages/leaderboard/logic/generateLeaderboardItems.ts
@@ -1,3 +1,4 @@
+import { differenceInCalendarMonths } from "date-fns"
 import { getNumericSpec } from "./getNumericSpec"
 import { PrivacyLevelEnum } from "@/data"
 import type { Player } from "@/types"
@@ -11,7 +12,7 @@ class Participant {
 		public profile: any,
 		public featuredCharacter: any,
 		public score: number,
-		public displayScore: string
+		public displayScore?: string,
 	) {
 		this.colour = 0
 		this.groupWPrev = false
@@ -26,32 +27,29 @@ export default function generateLeaderboardItems(discipline: string, players: Pl
 			(member.privacy & PrivacyLevelEnum.LEVEL && ["level", "combat"].includes(discipline)) ||
 			(member.privacy & PrivacyLevelEnum.SPECS && !["contribution", "level", "combat", "characters", "age"].includes(discipline))
 		) {
-			return new Participant(member, null, -1, "Private")
+			return new Participant(member, null, -1)
 		}
 
 		switch (discipline) {
 			case "contribution": {
-				return new Participant(member, null, member.contributionPoints || 0, "")
+				return new Participant(member, null, member.contributionPoints || 0)
 			}
 
 			case "characters": {
-				return new Participant(member, null, member.characters.length, "")
+				return new Participant(member, null, member.characters.length)
 			}
 
 			case "age": {
-				const age = (+new Date() - +new Date(member.createdOn))
-				const months = Math.floor(age / 2.628e9)
-				let shouldPluralise = true
-
-				if (months === 0) {
-					return new Participant(member, null, months, "<1 month")
-				}
-
-				if (`${months}`.charAt(-1) === "1" && months !== 11) {
-					shouldPluralise = false
-				}
-
-				return new Participant(member, null, months, `${months} month${shouldPluralise ? "s" : ""}`)
+				const months = differenceInCalendarMonths(new Date(), member.createdOn)
+
+				return new Participant(
+					member,
+					null,
+					months,
+					months === 0
+						? "<1 month"
+						: `${months} month${months === 1 ? "" : "s"}`,
+				)
 			}
 
 			case "level": {
@@ -61,15 +59,15 @@ export default function generateLeaderboardItems(discipline: string, players: Pl
 						characterA.level > characterB.level ? -1 : 1
 					))[0]
 
-				return new Participant(member, memberRep, memberRep.level, "")
+				return new Participant(member, memberRep, memberRep.level)
 			}
 
 			case "combat": {
-				return new Participant(member, null, member.combatFame, "")
+				return new Participant(member, null, member.combatFame)
 			}
 
 			case "life": {
-				return new Participant(member, null, member.lifeFame, "")
+				return new Participant(member, null, member.lifeFame)
 			}
 
 			default: {