Implement displaying all characters if not enough are owned

src/hooks/strings.ts

@@ -5,8 +5,6 @@ export function useStrings() {
 		characterScreenInstruction: "To start creating your winning team, import or manually select the characters you own. Once you're done, switch to the parties or tier list tab to see the recommendations based on selected characters. Don't worry if you need to make changes later on: you can always return to this step and update your characters.",
 		pressStart: "Press start to select your characters.",
 		teamsScreenNoCharacters: "Yikes! Looks like we're missing a crucial element in creating your custom team. Please head over to the characters tab and select at least five characters. This will enable us to provide you with personalised recommendations on building a winning team.",
-		tiersScreenNoCharacters: "Yikes! Looks like we're missing a crucial element in creating your custom tier list. Please head over to the characters tab and select at least five characters. This will enable us to provide you with personalised recommendations.",
-		tierList: "Here's a special leaderboard just for you! It was generated from the list of characters you selected earlier.",
 		welcome1: "Welcome to an AI-assisted team creation tool for Genshin Impact that helps players assemble well-rounded teams by analysing characters' elements, constellation levels, weapon types, potential elemental reactions, preferred roles, community ratings, and more. The tool is designed for beginners and experienced players alike, enabling them to maximise their characters' strengths and synergies.",
 	})
 

src/hooks/tierList.ts

@@ -12,14 +12,22 @@ export function useTierList(tiers: number = 5, includeUnowned: Ref<Boolean>) {
 	const userData = useUserDataStore()
 
 	const list = computed(() => {
+		const notEnoughOwned = !userData.enoughCharacters
 		const chars = Object.entries(jsonData.characters)
-			// Not interested in characters that are not owned
-			.filter(([id]) => includeUnowned.value ? true : id in userData.ownedCharacters)
+			.filter(([id]) => {
+				// Include unowned characters if requested or if not enough are owned
+				if (includeUnowned.value || notEnoughOwned) {
+					return true
+				}
+
+				// Include characters that are owned
+				return id in userData.ownedCharacters
+			})
 			// Get scores for current constellation levels
 			.map(([id, character]) => ({
 				...character,
-				owned: id in userData.ownedCharacters,
 				id,
+				owned: id in userData.ownedCharacters || notEnoughOwned,
 				score: character.score[userData.ownedCharacters[id]?.constellation || 0]
 			}))
 			// Order by score

src/views/TierListView.vue

@@ -1,31 +1,27 @@
 <template>
 	<main>
 		<template v-if="userData.enoughCharacters">
-			<p>{{ strings.tierList }}</p>
+			<p>Here's a special leaderboard just for you! It was generated from the list of characters you selected earlier.</p>
 			<div class="options-wrapper">
-				Display unowned characters?
+				Display with unowned characters?
 				<SelectButton v-model="displayUnowned" />
 			</div>
-			<TierLine
-				:characters="l.characters"
-				:key="l.tier"
-				:tier="l.tier"
-				v-for="l of list"
-			/>
 		</template>
-		<p v-else>{{ strings.tiersScreenNoCharacters }}</p>
+		<p v-else>
+			Here's a global tier list of Genshin Impact characters. To generate a personalised tier list, please head over to the characters tab and select at least five characters.
+		</p>
+		<TierLine :characters="l.characters" :key="l.tier" :tier="l.tier" v-for="l of list" />
 	</main>
 </template>
 
 <script setup>
 	import { ref } from "vue"
 	import { SelectButton, TierLine } from "@/components"
-	import { useStrings, useTierList } from "@/hooks"
+	import { useTierList } from "@/hooks"
 	import { useUserDataStore } from "@/stores"
 
 	const displayUnowned = ref(false)
 
-	const strings = useStrings()
 	const userData = useUserDataStore()
 	const list = useTierList(5, displayUnowned)
 </script>