Add improvements

public/master.css

@@ -21,7 +21,6 @@ body {
 	background-color: #111;
 	background-attachment: fixed;
 	margin: 0;
-	min-height: 100vh;
 }
 
 * {

src/components/LeaderboardLine.vue

@@ -4,7 +4,7 @@
 	</div>
 	<div class="family-name">
 		<a :href="profileLink" target="_blank">{{ profile.familyName }}</a>
-		<button @click="removeFromCustom" v-if="$route.name == 'customLeaderboard'">
+		<button @click="removeFromCustom" v-if="$route.name == routeNameEnum.CUSTOM_LEADERBOARD">
 			<img :src="xIcon" alt="x" />
 		</button>
 	</div>
@@ -16,6 +16,7 @@
 
 <script setup>
 	import { computed } from "vue"
+	import { routeNameEnum } from "@/router"
 	import { useMainStore } from "@/stores"
 
 	const xIcon = process.env.BASE_URL + "assets/highlight_off_black_24dp.svg"

src/components/NavCard.vue

@@ -0,0 +1,87 @@
+<template>
+	<ContentCard>
+		<h2 id="guild-link">
+			<a :href="guildLink" target="_blank" v-if="route.name !== routeNameEnum.CUSTOM_LEADERBOARD">
+				Guild: {{ guildName ?? route.params.guildName }}
+			</a>
+			<span v-else>Custom Leaderboard</span>
+		</h2>
+		<RouterLink to="/" class="select-guild-link">
+			Select another
+		</RouterLink>
+		<RouterLink to="./level">Character Level</RouterLink>
+		<RouterLink to="./contribution">Contribution Points</RouterLink>
+		<RouterLink to="./gathering">Gathering</RouterLink>
+		<RouterLink to="./fishing">Fishing</RouterLink>
+		<RouterLink to="./hunting">Hunting</RouterLink>
+		<RouterLink to="./cooking">Cooking</RouterLink>
+		<RouterLink to="./alchemy">Alchemy</RouterLink>
+		<RouterLink to="./processing">Processing</RouterLink>
+		<RouterLink to="./training">Training</RouterLink>
+		<RouterLink to="./trading">Trading</RouterLink>
+		<RouterLink to="./farming">Farming</RouterLink>
+		<RouterLink to="./sailing">Sailing</RouterLink>
+		<RouterLink to="./barter">Barter</RouterLink>
+		<RouterLink to="./combat">Combat Fame</RouterLink>
+		<RouterLink to="./life">Life Fame</RouterLink>
+		<RouterLink to="./characters">Family Size</RouterLink>
+		<RouterLink to="./age">Account Age</RouterLink>
+	</ContentCard>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue"
+	import { ContentCard } from "@/components"
+	import { routeNameEnum } from "@/router"
+	import { supportedServers } from "@/data"
+	import { useRoute } from "vue-router"
+
+	const props = defineProps({
+		guildName: { type: String },
+	})
+	const route = useRoute()
+
+	const guildLink = computed(() => {
+		const server = [...supportedServers.values()]
+			.find(s => route.params.region === s.domain)
+
+		// This normally shouldn't happen
+		if (!server) {
+			return undefined
+		}
+
+		const guildName = props.guildName ?? route.params.guildName
+		return server.getGuildLink(Array.isArray(guildName) ? guildName[0] : guildName)
+	})
+</script>
+
+<style scoped>
+	#guild-link {
+		grid-column: 1/3;
+		margin: 0;
+		text-align: center;
+
+		a {
+			opacity: 1;
+		}
+	}
+
+	.select-guild-link {
+		grid-column: 1/3;
+		margin-bottom: 1em;
+		text-align: center;
+	}
+
+	a {
+		opacity: 0.7;
+		text-decoration: none;
+
+		&:hover {
+			opacity: 1;
+		}
+
+		&.router-link-exact-active {
+			opacity: 1;
+		}
+	}
+</style>

src/components/index.ts

@@ -1,9 +1,9 @@
 export { default as AddToCustomCard } from "./AddToCustomCard.vue"
-export { default as CategoryLinks } from "./CategoryLinks.vue"
 export { default as ContentCard } from "./ContentCard.vue"
 export { default as FooterCard } from "./FooterCard.vue"
 export { default as HeaderCard } from "./HeaderCard.vue"
 export { default as LeaderboardHeaderLine } from "./LeaderboardHeaderLine.vue"
 export { default as LeaderboardLine } from "./LeaderboardLine.vue"
 export { default as LoadingCard } from "./LoadingCard.vue"
+export { default as NavCard } from "./NavCard.vue"
 export { default as SeparatorLine } from "./SeparatorLine.vue"

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useIsMobile } from "./useIsMobile"
+export { default as useNavigation } from "./useNavigation"

src/hooks/mobile.js → src/hooks/useIsMobile.ts

@@ -4,7 +4,7 @@ function isMobile() {
 	return window.innerWidth <= window.innerHeight
 }
 
-export default function() {
+export default function useIsMobile() {
 	const state = ref(isMobile())
 
 	window.onresize = () => state.value = isMobile()

src/hooks/useNavigation.ts

@@ -0,0 +1,30 @@
+import { RegionEnum } from "@/data"
+import { routeNameEnum } from "@/router"
+import { useRouter } from "vue-router"
+
+export default function useNavigation() {
+	const router = useRouter()
+
+	function navigateToCustomLeaderboard() {
+		router.push({
+			name: routeNameEnum.CUSTOM_LEADERBOARD,
+			params: { discipline: "level" }
+		})
+	}
+
+	function navigateToGuildLeaderboard(region: RegionEnum, guildName: string) {
+		router.push({
+			name: routeNameEnum.LEADERBOARD,
+			params: {
+				discipline: "level",
+				guildName,
+				region,
+			}
+		})
+	}
+
+	return {
+		navigateToCustomLeaderboard,
+		navigateToGuildLeaderboard,
+	}
+}

src/router.ts

@@ -1,5 +1,11 @@
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
 
+export enum routeNameEnum {
+	CUSTOM_LEADERBOARD = "customLeaderboard",
+	HOME = "home",
+	LEADERBOARD = "leaderboard",
+}
+
 const HomePage = () => import("@/views/HomePage.vue")
 const LeaderboardPage = () => import("@/views/LeaderboardPage.vue")
 
@@ -10,17 +16,17 @@ export default createRouter({
 	routes: [
 		{
 			component: HomePage,
-			name: "home",
+			name: routeNameEnum.HOME,
 			path: "/",
 		},
 		{
 			component: LeaderboardPage,
-			name: "customLeaderboard",
+			name: routeNameEnum.CUSTOM_LEADERBOARD,
 			path: "/custom/:discipline?",
 		},
 		{
 			component: LeaderboardPage,
-			name: "leaderboard",
+			name: routeNameEnum.LEADERBOARD,
 			path: "/:region/:guildName/:discipline?",
 		},
 	]

src/views/HomePage.vue

@@ -1,10 +1,10 @@
 <template>
-	<div id="home-page" :class="{ 'mobile-layout': mobile }">
+	<div id="home-page" :class="{ 'mobile-layout': isMobile }">
 		<HeaderCard />
 		<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 }}
+			<input autocapitalize="on" :class="{ highlighted: shouldHightlightNameInput }" placeholder="Enter the guild's name here" v-model="guildName" v-on:keyup.enter="() => navigateToLeaderboard(undefined)" />
+			<button :key="s.domain" :style="{ backgroundColor: s.colour }" @click="() => navigateToLeaderboard(s.domain)" v-for="s of supportedServers">
+				Look it up in {{ s.name }}
 			</button>
 			<SeparatorLine>OR</SeparatorLine>
 			<button :style="{ backgroundColor: 'var(--colour-green)' }" @click="navigateToCustomLeaderboard" class="wide-button">
@@ -15,37 +15,27 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 	import { ContentCard, FooterCard, HeaderCard, SeparatorLine } from "@/components"
 	import { ref } from "vue"
-	import { siteName, supportedServers } from "@/data"
+	import { RegionEnum, siteName, supportedServers } from "@/data"
 	import { useHead } from "@vueuse/head"
+	import { useIsMobile, useNavigation } from "@/hooks"
 	import { useMainStore } from "@/stores"
-	import { useRouter } from "vue-router"
-	import useMobile from "@/hooks/mobile"
 
-	const mobile = useMobile()
-	const router = useRouter()
+	const { navigateToCustomLeaderboard, navigateToGuildLeaderboard } = useNavigation()
+	const isMobile = useIsMobile()
 	const store = useMainStore()
 	useHead({ title: siteName })
 
 	const guildName = ref("")
 	const shouldHightlightNameInput = ref(false)
 
-	const defaultDiscipline = "level"
-
-	if (store.lastGuild.name !== null) {
+	if (store.lastGuild.name) {
 		guildName.value = store.lastGuild.name
 	}
 
-	function navigateToCustomLeaderboard() {
-		router.push({
-			name: "customLeaderboard",
-			params: { discipline: defaultDiscipline }
-		})
-	}
-
-	function navigateToLeaderboard(region) {
+	function navigateToLeaderboard(region?: RegionEnum) {
 		// If guild name input is empty, highlight it and exit
 		if (guildName.value.length < 1) {
 			shouldHightlightNameInput.value = true
@@ -68,25 +58,17 @@
 			region
 		}
 
-		// Navigate to the leaderboard
-		router.push({
-			name: "leaderboard",
-			params: {
-				region,
-				guildName: guildName.value,
-				discipline: defaultDiscipline,
-			}
-		})
+		navigateToGuildLeaderboard(region, guildName.value)
 	}
 </script>
 
 <style lang="scss" scoped>
 	#home-page {
-		display: flex;
 		align-items: center;
-		justify-content: center;
+		display: flex;
 		flex-direction: column;
 		gap: 0.5em;
+		justify-content: center;
 		min-height: 100vh;
 
 		&.mobile-layout {