From acb9dc342a4641dd2101f2ffbaef0d69b5d64610 Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Sat, 16 May 2020 13:40:54 +0200
Subject: [PATCH] Improved handling of character avatars, added portraits

---
 app/imports/api/creature/Creatures.js         |  6 ++++-
 .../server/publications/characterList.js      |  4 ++-
 app/imports/ui/creature/CreatureForm.vue      |  9 +++++++
 .../characterSheetTabs/PersonaTab.vue         |  4 +++
 app/imports/ui/layouts/Sidebar.vue            | 26 ++++++++++++++++++-
 app/imports/ui/pages/CharacterList.vue        |  8 +++---
 app/imports/ui/styles/fitAvatars.css          |  4 +++
 app/imports/ui/styles/stylesIndex.js          |  1 +
 8 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 app/imports/ui/styles/fitAvatars.css

diff --git a/app/imports/api/creature/Creatures.js b/app/imports/api/creature/Creatures.js
index 08cdaeef..8ca02be9 100644
--- a/app/imports/api/creature/Creatures.js
+++ b/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');
diff --git a/app/imports/server/publications/characterList.js b/app/imports/server/publications/characterList.js
index 1526c9e5..221d554e 100644
--- a/app/imports/server/publications/characterList.js
+++ b/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,
 				}
 			}
diff --git a/app/imports/ui/creature/CreatureForm.vue b/app/imports/ui/creature/CreatureForm.vue
index 2a6cd860..72129184 100644
--- a/app/imports/ui/creature/CreatureForm.vue
+++ b/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">
diff --git a/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue b/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue
index 32071434..f2da564a 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue
+++ b/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>
diff --git a/app/imports/ui/layouts/Sidebar.vue b/app/imports/ui/layouts/Sidebar.vue
index 375f3332..25d05571 100644
--- a/app/imports/ui/layouts/Sidebar.vue
+++ b/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;
         });
       },
diff --git a/app/imports/ui/pages/CharacterList.vue b/app/imports/ui/pages/CharacterList.vue
index dd3a0b78..ef6af7ca 100644
--- a/app/imports/ui/pages/CharacterList.vue
+++ b/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"
-              :src="character.picture"
-              alt="character.name"
+              v-if="character.avatarPicture"
+              :src="character.avatarPicture"
+              :alt="character.name"
             >
             <template v-else>
               {{ character.initial }}
diff --git a/app/imports/ui/styles/fitAvatars.css b/app/imports/ui/styles/fitAvatars.css
new file mode 100644
index 00000000..dfa5cab5
--- /dev/null
+++ b/app/imports/ui/styles/fitAvatars.css
@@ -0,0 +1,4 @@
+.v-avatar > img {
+  object-fit: cover;
+  object-position: top;
+}
diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js
index 6b55d439..047251f4 100644
--- a/app/imports/ui/styles/stylesIndex.js
+++ b/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'