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 @@ @@ -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 & Mutations = { //Adds chat messages from an update fetch to the chat history [MutationTypes.ADD_CHAT](state: State, chat: Array) { - 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; players: Map; markerSets: Map; - chat: DynmapChat[]; + + chat: { + unread: number; + messages: DynmapChat[]; + }; pendingSetUpdates: Map; pendingTileUpdates: Array; @@ -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