Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chat skeleton

Browse Source
This commit is contained in:
James Lyne 2020-12-31 22:29:43 +00:00
parent 30d0219535
commit 7dfaf76501
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Chat.vue
View File

@ -17,7 +17,8 @@
<template> <template>
<section class="chat"> <section class="chat">
<ul class="chat__messages"> <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> </ul>
</section> </section>
</template> </template>
@ -33,10 +34,10 @@
}, },
setup() { setup() {
const store = useStore(), const store = useStore(),
chat = computed(() => store.state.chat); messages = computed(() => store.state.chat.messages);
return { return {
chat, messages,
} }
} }
}) })
@ -67,10 +68,16 @@
.message { .message {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.9rem;
& + .message { & + .message {
margin-bottom: 0.5rem margin-bottom: 0.5rem
} }
&.message--skeleton {
font-style: italic;
color: #aaaaaa;
}
} }
} }

4
src/store/mutations.ts
View File

@ -241,10 +241,10 @@ export const mutations: MutationTree<State> & Mutations = {
//Adds chat messages from an update fetch to the chat history //Adds chat messages from an update fetch to the chat history
[MutationTypes.ADD_CHAT](state: State, chat: Array<DynmapChat>) { [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)) { if(state.components.chat && isFinite(state.components.chat.messageHistory)) {
state.chat.splice(state.components.chat.messageHistory); state.chat.messages.splice(state.components.chat.messageHistory);
} }
}, },

12
src/store/state.ts
View File

@ -34,7 +34,11 @@ export type State = {
maps: Map<string, DynmapWorldMap>; maps: Map<string, DynmapWorldMap>;
players: Map<string, DynmapPlayer>; players: Map<string, DynmapPlayer>;
markerSets: Map<string, DynmapMarkerSet>; markerSets: Map<string, DynmapMarkerSet>;
chat: DynmapChat[];
chat: {
unread: number;
messages: DynmapChat[];
};
pendingSetUpdates: Map<string, DynmapMarkerSetUpdates>; pendingSetUpdates: Map<string, DynmapMarkerSetUpdates>;
pendingTileUpdates: Array<DynmapTileUpdate>; pendingTileUpdates: Array<DynmapTileUpdate>;
@ -98,7 +102,11 @@ export const state: State = {
worlds: new Map(), //Defined (loaded) worlds with maps from configuration.json worlds: new Map(), //Defined (loaded) worlds with maps from configuration.json
maps: new Map(), //Defined maps from configuration.json maps: new Map(), //Defined maps from configuration.json
players: new Map(), //Online players from world.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. 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 pendingSetUpdates: new Map(), //Pending updates to markers/areas/etc for each marker set