Improved handling of character avatars, added portraits

app/imports/api/creature/Creatures.js

@@ -47,6 +47,10 @@ let CreatureSchema = new SimpleSchema({
 		type: String,
 		optional: true
 	},
+  avatarPicture: {
+    type: String,
+    optional: true,
+  },
 
 	// Mechanics
 	deathSave: {
@@ -120,7 +124,7 @@ const updateCreature = new ValidatedMethod({
   validate({_id, path}){
 		if (!_id) return false;
 		// Allowed fields
-		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'settings'];
+		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'avatarPicture', 'settings'];
 		if (!allowedFields.includes(path[0])){
 			throw new Meteor.Error('Creatures.methods.update.denied',
       'This field can\'t be updated using this method');

app/imports/server/publications/characterList.js

@@ -20,13 +20,15 @@ Meteor.publish('characterList', function(){
       }, {
 				fields: {
 					name: 1,
+          initial: 1,
 					alignment: 1,
 					gender: 1,
 					readers: 1,
 					writers:1,
 					owner: 1,
 					color: 1,
-					picture: 1,
+          picture: 1,
+					avatarPicture: 1,
           public: 1,
 				}
 			}

app/imports/ui/creature/CreatureForm.vue

@@ -23,11 +23,20 @@
     />
     <text-field
       label="Picture URL"
+      hint="A link to a high resolution image"
       :value="model.picture"
       :error-messages="errors.picture"
       :debounce-time="debounceTime"
       @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
     />
+    <text-field
+      label="Avatar picture URL"
+      hint="A link to a smaller, square image to use as an avatar"
+      :value="model.avatarPicture"
+      :error-messages="errors.avatarPicture"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
+    />
     <!--
 		<form-sections>
 			<form-section name="settings">

app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue

@@ -7,6 +7,10 @@
           data-id="creature-summary"
           @click="showCharacterForm"
         >
+          <v-img
+            v-if="creature.picture"
+            :src="creature.picture"
+          />
           <v-card-title class="title">
             {{ creature.name }}
           </v-card-title>

app/imports/ui/layouts/Sidebar.vue

@@ -49,12 +49,24 @@
       </v-list-tile>
       <v-divider />
     </v-list>
-    <v-list dense>
+    <v-list
+      avatar
+    >
       <v-list-tile
         v-for="character in CreaturesWithNoParty"
         :key="character._id"
         :to="character.url"
       >
+        <v-list-tile-avatar :color="character.color || 'grey'">
+          <img
+            v-if="character.avatarPicture"
+            :src="character.avatarPicture"
+            :alt="character.name"
+          >
+          <template v-else>
+            {{ character.initial }}
+          </template>
+        </v-list-tile-avatar>
         <v-list-tile-title>
           {{ character.name }}
         </v-list-tile-title>
@@ -73,6 +85,16 @@
           :key="character._id"
           :to="character.url"
         >
+          <v-list-tile-avatar :color="character.color || 'grey'">
+            <img
+              v-if="character.avatarPicture"
+              :src="character.avatarPicture"
+              :alt="character.name"
+            >
+            <template v-else>
+              {{ character.initial }}
+            </template>
+          </v-list-tile-avatar>
           <v-list-tile-title>
             {{ character.name }}
           </v-list-tile-title>
@@ -127,6 +149,7 @@
             }
           ).map(char => {
             char.url = `/character/${char._id}/${char.urlName || '-'}`;
+            char.initial = char.name && char.name[0] || '?';
             return char;
           });
           return party;
@@ -144,6 +167,7 @@
           {sort: {name: 1}}
         ).map(char => {
           char.url = `/character/${char._id}/${char.urlName || '-'}`;
+          char.initial = char.name && char.name[0] || '?';
           return char;
         });
       },

app/imports/ui/pages/CharacterList.vue

@@ -7,11 +7,11 @@
           :key="character._id"
           :to="character.url"
         >
-          <v-list-tile-avatar :color="character.color">
+          <v-list-tile-avatar :color="character.color || 'grey'">
             <img
-              v-if="character.picture"
+              v-if="character.avatarPicture"
-              :src="character.picture"
+              :src="character.avatarPicture"
-              alt="character.name"
+              :alt="character.name"
             >
             <template v-else>
               {{ character.initial }}

app/imports/ui/styles/fitAvatars.css

@@ -0,0 +1,4 @@
+.v-avatar > img {
+  object-fit: cover;
+  object-position: top;
+}

app/imports/ui/styles/stylesIndex.js

@@ -2,3 +2,4 @@ import './speedDial.css';
 import './inheritBackgrounds.css';
 import './centeredInputs.css';
 import './largeFormatInputs.css';
+import './fitAvatars.css'