Add improvements

public/master.css

@@ -1,47 +1,27 @@
-body {
-	font-family: Avenir, Helvetica, Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	background-color: #111;
-	background-attachment: fixed;
-	margin: 0;
-	min-height: 100vh;
-}
-
-body:not(.light-theme) {
+:root {
 	--colour-black: #24272d;
-	--colour-red: #dc6069;
+	--colour-blue: #57a5ed;
 	--colour-green: #8dbb6e;
 	--colour-orange: #e1b86f;
-	--colour-blue: #57a5ed;
+	--colour-red: #dc6069;
 
+	--button-text-colour: #f8f8f8;
 	--card-colour: #37393f;
 	--card-shadow-colour: #0005;
-	--text-colour: #f0f0f0;
 	--input-shadow-colour: #0005;
-	--button-text-colour: #f8f8f8;
-	--load-remaining-colour: #111;
 	--load-done-colour: #f0f0f0;
-
-	--dark-theme-invert: invert(1);
+	--load-remaining-colour: #111;
+	--text-colour: #f0f0f0;
 }
 
-body.light-theme {
-	--colour-black: #282c34;
-	--colour-red: #e06c75;
-	--colour-green: #98c379;
-	--colour-orange: #f1ac2c;
-	--colour-blue: #61afef;
-
-	--card-colour: #f0f0f0;
-	--card-shadow-colour: #0005;
-	--text-colour: #282c34;
-	--input-shadow-colour: #0005;
-	--button-text-colour: #f8f8f8;
-	--load-remaining-colour: #ccc;
-	--load-done-colour: #8dbb6e;
-
-	--dark-theme-invert: invert(0);
+body {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: #111;
+	background-attachment: fixed;
+	margin: 0;
+	min-height: 100vh;
 }
 
 * {

src/components/AddToCustomCard.vue

@@ -13,7 +13,7 @@
 	import { ContentCard } from "@/components"
 	import { ref } from "vue"
 	import { supportedServers } from "@/data"
-	import { useMainStore } from "@/stores/main"
+	import { useMainStore } from "@/stores"
 
 	const familyName = ref("")
 	const maxProfiles = 100

src/components/FooterCard.vue

@@ -1,12 +1,13 @@
 <template>
 	<ContentCard>
-		<a href="https://github.com/man90es/BDO-Leaderboards" target="_blank" :style="{ backgroundImage: assets.star }">Give BDO Leaderboards a star on GitHub!</a>
-		<a href="https://github.com/man90es/BDO-REST-API" target="_blank" :style="{ backgroundImage: assets.construction }">Curious about the API?</a>
-		<a href="https://www.hemlo.cc/finances" target="_blank" :style="{ backgroundImage: assets.donate }">Support the service</a>
+		<a href="https://github.com/man90es/BDO-Leaderboards" target="_blank" :style="{ backgroundImage: assets.star }">GitHub</a>
+		<a href="https://github.com/man90es/BDO-REST-API" target="_blank" :style="{ backgroundImage: assets.construction }">API</a>
+		<a href="https://www.hemlo.cc/finances" target="_blank" :style="{ backgroundImage: assets.donate }">Donate</a>
+		<a href="https://github.com/man90es" target="_blank">man90 © {{ (new Date()).getFullYear() }}</a>
 	</ContentCard>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 	import { ContentCard } from "@/components"
 
 	const assets = {
@@ -16,20 +17,18 @@
 	}
 </script>
 
-
 <style scoped>
-	.content-card > * {
-		grid-column: 1/3;
-	}
-
 	a {
-		color: var(--colour-black);
-		padding-left: 1.25em;
 		background-repeat: no-repeat;
 		background-size: contain;
-		grid-column: 1/3;
+		color: var(--colour-black);
+		filter: invert(1);
 		font-size: 0.9em;
-		filter: var(--dark-theme-invert);
+		padding-left: 1.5em;
 		transition: 0.2s;
+
+		&:last-child {
+			padding-left: 0;
+		}
 	}
 </style>

src/components/HeaderCard.vue

@@ -1,18 +1,13 @@
 <template>
 	<ContentCard>
 		<h1>BDO Leaderboards</h1>
-		<span>We have Black Desert Online leaderboards for your guild!</span>
-		<div id="embellishment" @click="store.toggleSiteTheme">
-			<img src="../../public/assets/spiral.svg">
-		</div>
+		<span>Your Black Desert Online guild's leaderboard is already here!</span>
+		<img id="embellishment" src="../../public/assets/spiral.svg">
 	</ContentCard>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 	import { ContentCard } from "@/components"
-	import { useMainStore } from "@/stores/main"
-
-	const store = useMainStore()
 </script>
 
 <style scoped>
@@ -32,25 +27,13 @@
 	#embellishment {
 		background-color: #111;
 		box-shadow: 0 0 0.5em #000f;
-		cursor: pointer;
 		height: 4em;
 		inset: -1.5em -3em auto auto;
 		padding: 0.2em;
+		pointer-events: none;
 		position: absolute;
 		transform: rotate3d(0.5, 0.5, 0.3, -45deg);
-		transition: 0.3s;
 		width: 4em;
-
-		&:hover {
-			height: 4.1em;
-			width: 4.1em;
-			transform: rotate3d(0.5, 0.5, 0.3, -30deg);
-			box-shadow: 0 0 1em #0008;
-		}
-	}
-
-	.light-theme #embellishment img {
-		filter: brightness(5);
 	}
 
 	.mobile-layout #embellishment,

src/components/LeaderboardLine.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 	import { computed } from "vue"
-	import { useMainStore } from "@/stores/main"
+	import { useMainStore } from "@/stores"
 
 	const xIcon = process.env.BASE_URL + "assets/highlight_off_black_24dp.svg"
 
@@ -113,10 +113,7 @@
 			"Scholar",
 		].indexOf(props.featuredCharacter?.class)
 
-		return [
-			"dark" === store.siteTheme ? "-1.98rem" : "-0.15rem",
-			-((5.5 / 3) * i + 0.3) + "rem",
-		].join(" ")
+		return `-1.98rem ${-((5.5 / 3) * i + 0.3)}rem`
 	})
 </script>
 

src/core/generateLeaderboardItems.js

@@ -1,19 +1,29 @@
-import { Participant } from "@/models"
+class Participant {
+	constructor(profile, featuredCharacter, score, displayScore) {
+		this.colour = 0
+		this.displayScore = displayScore
+		this.featuredCharacter = featuredCharacter
+		this.groupWPrev = false
+		this.place = 1
+		this.profile = profile
+		this.score = score
+	}
+}
 
-const PRIVATE_LEVEL   = 0b1
+const PRIVATE_LEVEL = 0b1
 const PRIVATE_CONTRIB = 0b100
-const PRIVATE_SPECS   = 0b1000
+const PRIVATE_SPECS = 0b1000
 
 function getNumericSpec(specText) {
 	const parts = specText.split(" ")
 	const offset = {
-		"Beginner":     0,
-		"Apprentice":   10,
-		"Skilled":      20,
+		"Beginner": 0,
+		"Apprentice": 10,
+		"Skilled": 20,
 		"Professional": 30,
-		"Artisan":      40,
-		"Master":       50,
-		"Guru":         80,
+		"Artisan": 40,
+		"Master": 50,
+		"Guru": 80,
 	}[parts[0]]
 
 	return offset + parseInt(parts[1])

src/data/index.ts

@@ -1,2 +1,2 @@
 export { default as siteName } from "./siteName"
-export { default as supportedServers } from "./supportedServers"
+export { default as supportedServers, RegionEnum } from "./supportedServers"

src/data/supportedServers.ts

@@ -1,33 +1,37 @@
-type RegionId =  "EU" | "NA" | "SA"
+export enum RegionEnum {
+  EU = "EU",
+  NA = "NA",
+  SA = "SA",
+}
 
-function composeGuildLink(subdomain: string, locale: string, guildName: string, region: RegionId) {
+function composeGuildLink(subdomain: string, locale: string, guildName: string, region: RegionEnum) {
     const query = new URLSearchParams({ guildName, region })
 
     return `https://www.${subdomain}.playblackdesert.com/${locale}/Adventure/Guild/GuildProfile?` + query
 }
 
 const supportedServers: Set<{
     colour: string
-    domain: RegionId
+    domain: RegionEnum
     getGuildLink: (arg0: string) => string
     name: string
 }> = new Set([
     {
         colour: "var(--colour-blue)",
-        domain: "EU",
-        getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, "EU"),
+        domain: RegionEnum.EU,
+        getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, RegionEnum.EU),
         name: "Europe",
     },
     {
         colour: "var(--colour-red)",
-        domain: "NA",
-        getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, "NA"),
+        domain: RegionEnum.NA,
+        getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, RegionEnum.NA),
         name: "North America",
     },
     {
         colour: "var(--colour-orange)",
-        domain: "SA",
-        getGuildLink: guildName => composeGuildLink("sa", "pt-BR", guildName, "SA"),
+        domain: RegionEnum.SA,
+        getGuildLink: guildName => composeGuildLink("sa", "pt-BR", guildName, RegionEnum.SA),
         name: "South America",
     },
 ])

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from "vue"
 import { createHead } from "@vueuse/head"
 import { createPinia } from "pinia"
-import App from "./App.vue"
+import { RouterView } from "vue-router"
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
 import router from "./router"
 
@@ -10,7 +10,7 @@ const head = createHead()
 const pinia = createPinia()
 	.use(piniaPluginPersistedstate)
 
-createApp(App)
+createApp(RouterView)
 	.use(head)
 	.use(pinia)
 	.use(router)

src/stores/index.ts

@@ -0,0 +1 @@
+export { default as useMainStore } from "./useMainStore"