diff --git a/src/App.vue b/src/App.vue
index b1fa256..bbd8ad2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,11 +17,11 @@
-
+
\ No newline at end of file
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 50434ce..cb91f07 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -24,7 +24,7 @@
-
+
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
new file mode 100644
index 0000000..ca93caf
--- /dev/null
+++ b/src/components/chat/ChatMessage.vue
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/dynmap.d.ts b/src/dynmap.d.ts
index 3a4a0d8..10441a7 100644
--- a/src/dynmap.d.ts
+++ b/src/dynmap.d.ts
@@ -298,7 +298,8 @@ interface DynmapParsedUrl {
interface DynmapChat {
type: 'chat' | 'playerjoin' | 'playerleave';
- account: string;
+ playerAccount: string;
+ playerName: string;
channel?: string;
message?: string;
// source?: string;
diff --git a/src/leaflet/control/ChatControl.ts b/src/leaflet/control/ChatControl.ts
index dc6825b..32180c3 100644
--- a/src/leaflet/control/ChatControl.ts
+++ b/src/leaflet/control/ChatControl.ts
@@ -16,6 +16,9 @@
import {Control, ControlOptions, DomUtil, Map} from 'leaflet';
import chat from '@/assets/icons/chat.svg';
+import {useStore} from "@/store";
+import {MutationTypes} from "@/store/mutation-types";
+import {watch} from "@vue/runtime-core";
export class ChatControl extends Control {
// @ts-ignore
@@ -35,6 +38,16 @@ export class ChatControl extends Control {
`;
+ chatButton.addEventListener('click', e => {
+ useStore().commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'chat');
+ e.stopPropagation();
+ e.preventDefault();
+ });
+
+ watch(useStore().state.ui.visibleElements, (newValue) => {
+ chatButton.classList.toggle('active', newValue.has('chat'));
+ });
+
return chatButton;
}
}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 9568b43..6444ac3 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -396,31 +396,7 @@ button {
* Chat
*/
-.chat {
- @extend %panel;
- position: absolute;
- bottom: 7rem;
- left: 7rem;
- width: 50rem;
- max-width: calc(100% - 8rem);
- max-height: 20rem;
- display: flex;
- box-sizing: border-box;
- .chat__messages {
- display: flex;
- flex-direction: column-reverse;
- list-style: none;
- overflow: auto;
- margin: 0;
- padding: 0;
-
- .message {
- font-size: 1.6rem;
- margin-bottom: 0.5rem
- }
- }
-}
.chatinput {