From 7dfaf765019ab9dbcfb90c8e64b53e852a40054d Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 31 Dec 2020 22:29:43 +0000
Subject: [PATCH] Chat skeleton

---
 src/components/Chat.vue | 13 ++++++++++---
 src/store/mutations.ts  |  4 ++--
 src/store/state.ts      | 12 ++++++++++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index d233711..9ed092c 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -17,7 +17,8 @@
 <template>
 	<section class="chat">
 		<ul class="chat__messages">
-			<ChatMessage v-for="message in chat" :key="message.timestamp" :message="message"></ChatMessage>
+			<ChatMessage v-for="message in messages" :key="message.timestamp" :message="message"></ChatMessage>
+			<li v-if="!messages.length" class="message message--skeleton">No chat messages yet...</li>
 		</ul>
 	</section>
 </template>
@@ -33,10 +34,10 @@
 		},
 		setup() {
 			const store = useStore(),
-				chat = computed(() => store.state.chat);
+				messages = computed(() => store.state.chat.messages);
 
 			return {
-				chat,
+				messages,
 			}
 		}
 	})
@@ -67,10 +68,16 @@
 
 			.message {
 				font-size: 1.6rem;
+				line-height: 1.9rem;
 
 				& + .message {
 					margin-bottom: 0.5rem
 				}
+
+				&.message--skeleton {
+					font-style: italic;
+					color: #aaaaaa;
+				}
 			}
 		}
 
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 600f74c..797eced 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -241,10 +241,10 @@ export const mutations: MutationTree<State> & Mutations = {
 
 	//Adds chat messages from an update fetch to the chat history
 	[MutationTypes.ADD_CHAT](state: State, chat: Array<DynmapChat>) {
-		state.chat.unshift(...chat);
+		state.chat.messages.unshift(...chat);
 
 		if(state.components.chat && isFinite(state.components.chat.messageHistory)) {
-			state.chat.splice(state.components.chat.messageHistory);
+			state.chat.messages.splice(state.components.chat.messageHistory);
 		}
 	},
 
diff --git a/src/store/state.ts b/src/store/state.ts
index f6c8e65..6f402f0 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -34,7 +34,11 @@ export type State = {
 	maps: Map<string, DynmapWorldMap>;
 	players: Map<string, DynmapPlayer>;
 	markerSets: Map<string, DynmapMarkerSet>;
-	chat: DynmapChat[];
+
+	chat: {
+		unread: number;
+		messages: DynmapChat[];
+	};
 
 	pendingSetUpdates: Map<string, DynmapMarkerSetUpdates>;
 	pendingTileUpdates: Array<DynmapTileUpdate>;
@@ -98,7 +102,11 @@ export const state: State = {
 	worlds: new Map(), //Defined (loaded) worlds with maps from configuration.json
 	maps: new Map(), //Defined maps from configuration.json
 	players: new Map(), //Online players from world.json
-	chat: [],
+
+	chat: {
+		unread: 0,
+		messages: [],
+	},
 
 	markerSets: new Map(), //Markers from world_markers.json. Contents of each set isn't reactive for performance reasons.
 	pendingSetUpdates: new Map(), //Pending updates to markers/areas/etc for each marker set