From d0fb368b2e9f8de2464e7b15730b0fa02a1a0b02 Mon Sep 17 00:00:00 2001
From: man90 <man90@tuta.io>
Date: Tue, 26 Dec 2023 19:33:55 +0100
Subject: [PATCH] Add improvements

---
 public/master.css                    | 48 +++++++---------------
 src/App.vue                          |  9 ----
 src/components/AddToCustomCard.vue   |  2 +-
 src/components/FooterCard.vue        | 25 ++++++------
 src/components/HeaderCard.vue        | 25 ++----------
 src/components/LeaderboardLine.vue   |  7 +---
 src/core/generateLeaderboardItems.js | 28 +++++++++----
 src/data/index.ts                    |  2 +-
 src/data/supportedServers.ts         | 22 ++++++----
 src/hooks/updateTheme.js             | 17 --------
 src/main.ts                          |  4 +-
 src/models/index.js                  |  9 ----
 src/stores/index.ts                  |  1 +
 src/stores/main.js                   | 61 ----------------------------
 src/stores/useMainStore.ts           | 43 ++++++++++++++++++++
 src/views/HomePage.vue               |  5 ++-
 src/views/LeaderboardPage.vue        |  2 +-
 17 files changed, 116 insertions(+), 194 deletions(-)
 delete mode 100644 src/App.vue
 delete mode 100644 src/hooks/updateTheme.js
 delete mode 100644 src/models/index.js
 create mode 100644 src/stores/index.ts
 delete mode 100644 src/stores/main.js
 create mode 100644 src/stores/useMainStore.ts

diff --git a/public/master.css b/public/master.css
index fa09ac1..22cecdb 100644
--- a/public/master.css
+++ b/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;
 }
 
 * {
diff --git a/src/App.vue b/src/App.vue
deleted file mode 100644
index 6b3082d..0000000
--- a/src/App.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-	<RouterView />
-</template>
-
-<script lang="ts" setup>
-	import useUpdateTheme from "@/hooks/updateTheme.js"
-
-	useUpdateTheme()
-</script>
diff --git a/src/components/AddToCustomCard.vue b/src/components/AddToCustomCard.vue
index f168dd6..64a01c4 100644
--- a/src/components/AddToCustomCard.vue
+++ b/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
diff --git a/src/components/FooterCard.vue b/src/components/FooterCard.vue
index b2277a7..fbb3aaa 100644
--- a/src/components/FooterCard.vue
+++ b/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>
diff --git a/src/components/HeaderCard.vue b/src/components/HeaderCard.vue
index 34c7b83..13f1bd1 100644
--- a/src/components/HeaderCard.vue
+++ b/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,
diff --git a/src/components/LeaderboardLine.vue b/src/components/LeaderboardLine.vue
index 4999063..295c803 100644
--- a/src/components/LeaderboardLine.vue
+++ b/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>
 
diff --git a/src/core/generateLeaderboardItems.js b/src/core/generateLeaderboardItems.js
index f0bebe6..fa23a5a 100644
--- a/src/core/generateLeaderboardItems.js
+++ b/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])
diff --git a/src/data/index.ts b/src/data/index.ts
index 804115c..f38a895 100644
--- a/src/data/index.ts
+++ b/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"
diff --git a/src/data/supportedServers.ts b/src/data/supportedServers.ts
index ca83cb9..cd6db4e 100644
--- a/src/data/supportedServers.ts
+++ b/src/data/supportedServers.ts
@@ -1,6 +1,10 @@
-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
@@ -8,26 +12,26 @@ function composeGuildLink(subdomain: string, locale: string, guildName: string,
 
 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",
     },
 ])
diff --git a/src/hooks/updateTheme.js b/src/hooks/updateTheme.js
deleted file mode 100644
index 73c653c..0000000
--- a/src/hooks/updateTheme.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useMainStore } from "@/stores/main"
-
-export default function() {
-	const store = useMainStore()
-
-	function setTheme(name) {
-		document.body.className = `${name}-theme`
-	}
-
-	store.$subscribe((mutation) => {
-		if (undefined !== mutation.payload?.siteTheme) {
-			setTheme(mutation.payload.siteTheme)
-		}
-	})
-
-	setTheme(store.siteTheme)
-}
diff --git a/src/main.ts b/src/main.ts
index cb7b93e..e2ca6f1 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/models/index.js b/src/models/index.js
deleted file mode 100644
index 2accedd..0000000
--- a/src/models/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function Participant(profile, featuredCharacter, score, displayScore) {
-	this.profile = profile
-	this.featuredCharacter = featuredCharacter
-	this.score = score
-	this.displayScore = displayScore
-	this.place = 1
-	this.colour = 0
-	this.groupWPrev = false
-}
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..022141e
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1 @@
+export { default as useMainStore } from "./useMainStore"
diff --git a/src/stores/main.js b/src/stores/main.js
deleted file mode 100644
index 7a00b5f..0000000
--- a/src/stores/main.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { defineStore } from "pinia"
-
-export const useMainStore = defineStore("main", {
-	state: () => ({
-		customList: [],
-		lastGuild: {
-			name: null,
-			region: null,
-		},
-		siteTheme: "dark",
-	}),
-	actions: {
-		addToCustomList(profileTarget, region) {
-			const found = this.customList.find((onList) => (
-				onList.profileTarget === profileTarget && onList.region === region
-			))
-
-			if (!found) {
-				this.customList.push({
-					profileTarget,
-					region,
-				})
-			}
-		},
-
-		removeFromCustomList(profileTarget, region) {
-			this.customList = this.customList.filter((onList) => (
-				!(onList.profileTarget === profileTarget && onList.region === region)
-			))
-		},
-
-		toggleSiteTheme() {
-			this.$patch({
-				siteTheme: this.siteTheme === "light" ? "dark" : "light"
-			})
-		},
-	},
-	persist: {
-		key: "leaderboards-vuex",
-		serializer: {
-			serialize: JSON.stringify,
-			deserialize: (string) => {
-				const parsed = JSON.parse(string)
-
-				// Detect and restore from legacy format used before July 2022
-				if (parsed.customList?.length && "string" === typeof parsed.customList[0]) {
-					return {
-						...parsed,
-						customList: parsed.customList
-							.map(profileTarget => ({
-								profileTarget: decodeURIComponent(profileTarget),
-								region: "EU",
-							}))
-					}
-				}
-
-				return parsed
-			}
-		}
-	},
-})
diff --git a/src/stores/useMainStore.ts b/src/stores/useMainStore.ts
new file mode 100644
index 0000000..c05ba95
--- /dev/null
+++ b/src/stores/useMainStore.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia"
+import { RegionEnum } from "@/data"
+
+const useMainStore = defineStore("main", {
+	state: (): {
+		customList: Array<{
+			profileTarget: string
+			region: RegionEnum
+		}>
+		lastGuild: {
+			name?: string
+			region?: RegionEnum
+		}
+	} => ({
+		customList: [],
+		lastGuild: {
+			name: undefined,
+			region: undefined,
+		},
+	}),
+	actions: {
+		addToCustomList(profileTarget: string, region: RegionEnum) {
+			const found = this.customList.find((onList) => (
+				onList.profileTarget === profileTarget && onList.region === region
+			))
+
+			if (!found) {
+				this.customList.push({
+					profileTarget,
+					region,
+				})
+			}
+		},
+		removeFromCustomList(profileTarget: string, region: RegionEnum) {
+			this.customList = this.customList.filter((onList) => (
+				!(onList.profileTarget === profileTarget && onList.region === region)
+			))
+		},
+	},
+	persist: { key: "leaderboards-vuex" },
+})
+
+export default useMainStore
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index c521270..e478ad2 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -4,7 +4,7 @@
 		<ContentCard>
 			<input autocapitalize="on" type="text" :class="{ highlighted: shouldHightlightNameInput }" placeholder="Enter the guild's name here" v-model="guildName" v-on:keyup.enter="() => navigateToLeaderboard()" />
 			<button :key="server.domain" :style="{ backgroundColor: server.colour }" @click="() => navigateToLeaderboard(server.domain)" v-for="server of supportedServers">
-				Look it up in {{server.name}}
+				Look it up in {{ server.name }}
 			</button>
 			<SeparatorLine>OR</SeparatorLine>
 			<button :style="{ backgroundColor: 'var(--colour-green)' }" @click="navigateToCustomLeaderboard" class="wide-button">
@@ -20,7 +20,7 @@
 	import { ref } from "vue"
 	import { siteName, supportedServers } from "@/data"
 	import { useHead } from "@vueuse/head"
-	import { useMainStore } from "@/stores/main"
+	import { useMainStore } from "@/stores"
 	import { useRouter } from "vue-router"
 	import useMobile from "@/hooks/mobile"
 
@@ -126,5 +126,6 @@
 
 	input.highlighted {
 		box-shadow: 0 0 0.5em var(--colour-red) !important;
+		outline: 1px solid var(--colour-red);
 	}
 </style>
diff --git a/src/views/LeaderboardPage.vue b/src/views/LeaderboardPage.vue
index f4ef879..dae55df 100644
--- a/src/views/LeaderboardPage.vue
+++ b/src/views/LeaderboardPage.vue
@@ -34,7 +34,7 @@
 	import { computed } from "vue"
 	import { siteName, supportedServers } from "@/data"
 	import { useHead } from "@vueuse/head"
-	import { useMainStore } from "@/stores/main"
+	import { useMainStore } from "@/stores"
 	import { useRoute } from "vue-router"
 	import generateLeaderboardItems from "@/core/generateLeaderboardItems"
 	import useGuild from "@/hooks/API"