U: texts

src/assets/main.css

@@ -2,5 +2,6 @@
 
 body {
     background: #f1f5f9;
+    font-family: DM Sans, Avenir, Helvetica, Arial, sans-serif;
 }
 

src/views/base/NotFoundView.vue

@@ -40,7 +40,7 @@ function goToHome() {
       >
         404
       </h1>
-      <p class="mx-auto">Pokepage not found...</p>
+      <p class="mx-auto">Poképage not found...</p>
       <button
         class="
           mx-auto

src/views/pages/Team/TeamDeatilsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { usePokemonStore } from "@/stores/pokemon.ts"
@@ -8,11 +9,20 @@ import NavBar from "@/components/NavBar.vue";
 
 const route = useRoute()
 
+const pokemonIsValid: boolean = ref(false)
+
 const pokemonStore = usePokemonStore()
 
-pokemonStore.getPokemon(route.params.id)
-pokemonStore.getPokemonSpecies(route.params.id)
-setTimeout(() => pokemonStore.getEvolutionChain(pokemonStore.pokemonSpecies.evolution_chain.url), 500)
+function checkPokemon(){
+  pokemonIsValid.value = pokemonStore.myPokemonTeam.find(pokemon => pokemon.id == route.params.id)
+}
+
+checkPokemon()
+if (pokemonIsValid.value) {
+  pokemonStore.getPokemon(route.params.id)
+  pokemonStore.getPokemonSpecies(route.params.id)
+  setTimeout(() => pokemonStore.getEvolutionChain(pokemonStore.pokemonSpecies.evolution_chain.url), 500)
+}
 </script>
 
 <template>
@@ -22,6 +32,7 @@ setTimeout(() => pokemonStore.getEvolutionChain(pokemonStore.pokemonSpecies.evol
       :pokemon-count="pokemonStore.myPokemonTeam.length"
     />
     <div
+      v-if="pokemonIsValid"
       class="
         mx-5
         mt-5
@@ -34,6 +45,46 @@ setTimeout(() => pokemonStore.getEvolutionChain(pokemonStore.pokemonSpecies.evol
         :evolution-chain-data="pokemonStore.evolutionChain"
       />
     </div>
+    <div
+      v-else
+      class="
+        mx-5
+        mt-5
+      "
+    >
+      <section
+        class="
+        flex
+        flex-col
+        bg-slate-300
+        h-screen
+        w-full
+        shadow
+        rounded-lg
+        text-gray-500
+        text-3xl
+        font-semibold
+      "
+      >
+        <img
+          class="
+          mt-auto
+          mx-auto
+          w-[150px]
+        "
+          src="@/assets/icons/pokeball.svg"
+          alt="pokeball"
+        />
+        <div
+          class="
+          mb-auto
+          mx-auto
+        "
+        >
+          This Pokémon is not currently part of your team
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 

src/views/pages/home/HomeView.vue

@@ -119,7 +119,7 @@
       >
         <SimpleCard
           buttonText="Add to team"
-          button-text-disabled="Team is Full!"
+          button-text-disabled="Your team is already full!"
           :button-action="() => { pokemonStore.addPokemonToTeam(pokemon.entry_number) }"
           :image-url="`${pokemonSpriteBaseUrl}${pokemon.entry_number}.png`"
           :title="`#${pokemon.entry_number} ${pokemon.pokemon_species.name}`"