From b144b817af969603d7984eba0a05bbff179edb67 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sun, 6 Feb 2022 13:04:04 +0000
Subject: [PATCH] Re-fetch player images if the imageUrl changes

---
 src/App.vue                         | 4 ++++
 src/components/PlayerImage.vue      | 2 ++
 src/components/chat/ChatMessage.vue | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 9e1a35a..c1a4f28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,6 +55,7 @@ export default defineComponent({
 			configurationHash = computed(() => store.state.configurationHash),
 			chatBoxEnabled = computed(() => store.state.components.chatBox),
 			chatVisible = computed(() => store.state.ui.visibleElements.has('chat')),
+			playerImageUrl = computed(() => store.state.components.players.imageUrl),
 
 			loggedIn = computed(() => store.state.loggedIn), //Whether the user is currently logged in
 			loginRequired = computed(() => store.state.loginRequired), //Whether logging is required to view the current server
@@ -199,6 +200,9 @@ export default defineComponent({
 				store.commit(MutationTypes.HIDE_UI_MODAL, 'login');
 			}
 		});
+		watch(playerImageUrl, () => {
+			clearHeadCache();
+		});
 
 		handleUrl();
 		onResize();
diff --git a/src/components/PlayerImage.vue b/src/components/PlayerImage.vue
index e0c7bbd..855a17f 100644
--- a/src/components/PlayerImage.vue
+++ b/src/components/PlayerImage.vue
@@ -40,6 +40,7 @@ export default defineComponent({
 			image = ref(defaultImage),
 			name = computed(() => typeof props.player === 'string' ? props.player : props.player.name),
 			imagesEnabled = computed(() => store.state.components.players.showImages),
+			imageUrl = computed(() => store.state.components.players.imageUrl),
 
 			updatePlayerImage = async () => {
 				image.value = defaultImage;
@@ -54,6 +55,7 @@ export default defineComponent({
 			};
 
 		watch(name, () => updatePlayerImage());
+		watch(imageUrl, () => updatePlayerImage());
 		onMounted(() => updatePlayerImage());
 
 		return {
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index fa19a95..2981bb2 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -16,7 +16,7 @@
 
 <template>
 	<li :class="`message message--${message.type}`">
-		<PlayerImage v-if="showFace" :player="message.playerAccount" width="16" height="16" class="message__face" />
+		<PlayerImage v-if="showFace && message.playerAccount" :player="message.playerAccount" width="16" height="16" class="message__face" />
 		<span v-if="messageChannel" class="message__channel" v-html="messageChannel"></span>
 		<span v-if="showSender" class="message__sender" v-html="message.playerName"></span>
 		<span class="message__content" v-html="messageContent"></span>