Chat skeleton

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;
+				}
 			}
 		}
 

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);
 		}
 	},
 

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