character rules

src/characters/CharacterLabel.vue

@@ -4,14 +4,17 @@ import {Character} from "./chartacters.ts";
 
 interface Props {
   character: Character;
+  size?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  size: 32
+})
 </script>
 
 <template>
   <div class="flex">
-    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=32`" />
+    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=${size}`" />
     <span>{{ character.name }}</span>
   </div>
 </template>

src/characters/chartacters.ts

@@ -8,9 +8,11 @@ export type Character = CharacterResponse
 export const useCharactersStore = defineStore('characters', () => {
     const characters = ref<Character[]>([]);
 
+    const findById = (characterId: number): Character | undefined => characters.value.find(c => c.characterId === characterId);
+
     const refresh = () => characterControllerApi.getCharacters().then(response => characters.value = response.data);
 
     refresh();
 
-    return {characters, refresh};
+    return {characters, findById, refresh};
 })