feat: characters can have avatars

src/components/character/CharacterMetaForm.vue

@@ -4,6 +4,7 @@
       v-model="name"
       :label="$t('character.meta.name')"
     />
+    <AvatarSelector v-model="avatarURL" />
   </Column>
 </template>
 
@@ -12,10 +13,11 @@ import { computed, defineComponent } from 'vue'
 import { Character, useCharacters } from '@/state/characters'
 import Column from '../layout/Column.vue'
 import Textfield from '../form/Textfield.vue'
+import AvatarSelector from '../avatar/AvatarSelector.vue'
 
 export default defineComponent({
   name: 'CharacterMetaForm',
-  components: { Column, Textfield },
+  components: { Column, Textfield, AvatarSelector },
   props: {
     characterId: {
       type: String,
@@ -35,7 +37,16 @@ export default defineComponent({
       }
     })
 
-    return { character, name }
+    const avatarURL = computed({
+      get: () => {
+        return character.value.avatarURL
+      },
+      set: (value) => {
+        character.value.avatarURL = value
+      }
+    })
+
+    return { character, name, avatarURL }
   }
 })
 </script>

src/components/profile/characters/CharacterListCard.vue

@@ -5,6 +5,11 @@
         {{ character.name }}
       </router-link>
     </h3>
+    <div
+      v-if="character.avatarURL"
+      class="characterAvatar rise-1"
+      :style="`background-image: url(${character.avatarURL})`"
+    />
   </Card>
 </template>
 
@@ -33,4 +38,10 @@ export default defineComponent({
 <style lang="sass" scoped>
 .CharacterListCard.card+.CharacterListCard.card
   margin-top: 0
+.characterAvatar
+  height: 72px
+  width: 72px
+  border-radius: 50%
+  background-size: cover
+
 </style>

src/state/characters/Character.ts

@@ -39,6 +39,7 @@ export class Character {
   public stats: Map<string, number>
   private math = create(all)
   public characterSheetType: string
+  public avatarURL: string|undefined
 
   constructor (id?: string, data?:DocumentData) {
     this.id = id || ''
@@ -51,6 +52,7 @@ export class Character {
     if (data?.characterSheetType) {
       this.applyCharacterSheet(data?.characterSheetType as string)
     }
+    this.avatarURL = data?.avatarURL || undefined
   }
 
   private static parseStats (stats:{ [key: string]: number }): Map<string, number> {
@@ -145,7 +147,8 @@ export class Character {
       site: this.site,
       characterSheetType: this.characterSheetType,
       player: this.player,
-      stats: Object.fromEntries(this.stats.entries()) as { [key: string]: number|string|boolean }
+      stats: Object.fromEntries(this.stats.entries()) as { [key: string]: number|string|boolean },
+      avatarURL: this.avatarURL
     }
     Object.keys(dry).forEach(k => dry[k] === undefined ? delete dry[k] : null)
     return dry as { [x: string]: string|CharacterStat }