WIP - 9 - chat.

games-vue-client/src/App.vue

@@ -38,6 +38,7 @@
     <v-content>
       <router-view :key="$route.path" />
     </v-content>
+    <Chat />
     <v-footer
       fixed
       app
@@ -76,11 +77,12 @@ import store from "./store";
 import { mapState } from "vuex";
 import CookieLaw from 'vue-cookie-law'
 import SettingsView from "@/components/SettingsView";
+import Chat from "@/components/chat/Chat";
 
 export default {
   name: "App",
   store,
-  components: { CookieLaw, SettingsView },
+  components: { CookieLaw, SettingsView, Chat },
   methods: {
     logout() {
       Socket.disconnect();

games-vue-client/src/components/chat/Chat.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <v-card
+      v-if="display"
+      width="256"
+      class="chat"
+    >
+      <v-chip-group
+        active-class="active-chat"
+        column
+      >
+        <v-chip
+          v-for="chat in chats"
+          :key="chat.chatId"
+          close
+          close-icon="mdi-close"
+          @click:close="leaveChat(chat.chatId)"
+          @click="activeChat(chat.chatId)"
+        >
+          {{ chat.chatName }}
+        </v-chip>
+      </v-chip-group>
+
+      <v-divider />
+
+      <v-card-title>
+        <span class="title font-weight-light">Chat {{ currentChat.chatName }}</span>
+
+        <v-col class="text-right">
+          <v-icon @click="toggleDisplay">
+            mdi-close
+          </v-icon>
+        </v-col>
+      </v-card-title>
+
+      <v-card-text>
+        <div class="messages">
+          <div
+            ref="container"
+            class="messages-body"
+          >
+            <div
+              v-for="message in currentChat.messages"
+              :key="message.message + message.from + message.date"
+            >
+              <span class="from">{{ message.from }}</span>
+              <span class="message">
+                {{ message.message }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <v-textarea
+          v-model="newMessage"
+          label="Message"
+          rows="2"
+          counter
+          maxlength="100"
+          dense
+          full-width
+          autofocus
+          no-resize
+          hint="Please be respectful"
+          append-outer-icon="mdi-send"
+          @click:append-outer="sendMessage"
+          @keyup.enter="sendMessage"
+        />
+      </v-card-text>
+    </v-card>
+    <v-btn
+      v-else
+      elevation="2"
+      fab
+      class="open-chat"
+      @click="toggleDisplay"
+    >
+      Chat
+    </v-btn>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+
+export default {
+  name: "Chat",
+  props: [],
+  data() {
+    return {
+      display: true,
+      currentChat: {},
+      newMessage: '',
+      messages: [],
+    };
+  },
+  methods: {
+    scrollToEnd () {
+      var content = this.$refs.container;
+      content.scrollTop = content.scrollHeight;
+    },
+    toggleDisplay() {
+      this.display = !this.display;
+    },
+    sendMessage() {
+      if (this.newMessage.trim().length > 0) {
+        this.$store.dispatch("chat/message", { chat: { chatId: this.currentChat.chatId, message: this.newMessage.trim() } });
+        this.scrollToEnd();
+      }
+      this.newMessage = '';
+    },
+    activeChat(chatId) {
+      this.currentChat = this.chats[chatId];
+    },
+    leaveChat(chatId) {
+      this.$store.dispatch("chat/leave", { chat: { chatId } });
+    }
+  },
+  mounted() {
+    this.currentChat = this.chats.server;
+  },
+  computed: {
+    ...mapState("chat", {
+      chats(state) {
+        return state.chats;
+      },
+    }),
+  },
+}
+</script>
+<style>
+.open-chat {
+  position: fixed !important;
+  bottom: 33px;
+  right: 20px;
+}
+.chat {
+  position: fixed !important;
+  bottom: 33px;
+  right: 20px;
+
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+}
+
+.chat .v-card__title {
+  padding: 2px;
+}
+.chat .v-card__text {
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 2px;
+}
+.chat .active-chat {
+  font-weight: bold;
+}
+.chat h3 {
+  font-size: 30px;
+  text-align: center;
+}
+.chat .message {
+  font-size: 14px;
+}
+.chat .from {
+  color: teal;
+  font-weight: bold;
+}
+.chat .messages {
+  display: flex;
+  height: 40vh;
+}
+.chat .messages-body {
+  flex-direction: column;
+  width: 100%;
+  overflow-y: scroll;
+}
+</style>

games-vue-client/src/components/chat/chatStore.js

@@ -0,0 +1,90 @@
+import Vue from "vue";
+
+import Socket from "@/socket";
+
+const chatStore = {
+  namespaced: true,
+  state: {
+    chats: {
+      'server': {
+        chatId: 'server',
+        chatName: 'server',
+        users: [],
+        messages: [],
+      },
+    }
+  },
+  getters: {
+    chats: state => { return state.chats }
+  },
+  mutations: {
+    addChat(state, data) {
+      const { chatId, users } = data;
+      Vue.set(state.chats, chatId, {
+        chatId,
+        chatName: chatId.replace("game-", ""),
+        users,
+        messages: [],
+      });
+    },
+    removeChat(state, data) {
+      const { chatId } = data;
+      Vue.delete(state.chats, chatId);
+    },
+    addUserToChat(state, data) {
+      const { chatId, user } = data;
+      const chat = state.chats[chatId];
+      chat.users.push(user);
+    },
+    removeUserFromChat(state, data) {
+      const { chatId, user } = data;
+      const chat = state.chats[chatId];
+      chat.users = chat.users.filter(existingUser => existingUser.playerId !== user.playerId)
+    },
+    addMessageToChat(state, data) {
+      const { chatId, message, from, date } = data;
+      const chat = state.chats[chatId];
+      chat.messages.push({ message, from, date });
+    },
+  },
+  actions: {
+    join(context, data) {
+      const { chatId } = data.chat;
+      // context.commit("addChat", { chatId, users: [] });
+      Socket.route(`chat/${chatId}/join`, {});
+    },
+    leave(context, data) {
+      const { chatId } = data.chat;
+      // context.commit("removeChat", { chatId });
+      Socket.route(`chat/${chatId}/leave`, {});
+    },
+    message(context, data) {
+      const { chatId, message } = data.chat;
+      // context.commit("addMessageToChat", { chatId, from: 'Santa', message, date: Date.now() });
+      Socket.route(`chat/${chatId}/message`, { message });
+    },
+    onSocketMessage(context, data) {
+      if (data.type === "Chat") {
+        if (data.chat === "join") {
+          const { chatId, user, users } = data;
+          if (user) {
+            context.commit("addUserToChat", { chatId, user });
+          } else if (users) {
+            context.commit("addChat", { chatId, users });
+          }
+        }
+        if (data.chat === "leave") {
+          context.commit("removeChat", data);
+        }
+        if (data.chat === "left") {
+          context.commit("removeUserFromChat", data);
+        }
+        if (data.chat === "message") {
+          context.commit("addMessageToChat", data);
+        }
+      }
+    }
+  }
+};
+
+export default chatStore;

games-vue-client/src/components/lobby/LobbyGameType.vue

@@ -21,6 +21,12 @@
       >
         New Game
       </v-btn>
+      <v-btn
+        rounded
+        @click="joinChat(gameType)"
+      >
+        Chat
+      </v-btn>
     </v-toolbar>
     <v-card-title>
       Users
@@ -96,7 +102,10 @@ export default {
         },
         invite(gameType, playerId) {
             Socket.route("invites/invite", { gameType: gameType, invite: [playerId] });
-        }
+        },
+        joinChat(gameType) {
+          this.$store.dispatch("chat/join", { chat: { chatId: `game-${gameType}` } });
+        },
     },
     computed: {
         gameTypeCssName() {

games-vue-client/src/store.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import supportedGames from "@/supportedGames"
 import Socket from "@/socket";
 import lobbyStore from "./components/lobby/lobbyStore";
+import chatStore from "./components/chat/chatStore";
 import router from "@/router/index";
 import settingsStore from "./components/settings/settingsStore";
 
@@ -13,6 +14,7 @@ let titlePrefix = "Zomis' Games"
 const store = new Vuex.Store({
   modules: {
     lobby: lobbyStore,
+    chat: chatStore,
     settings: settingsStore,
     ...supportedGames.storeModules()
   },
@@ -97,6 +99,9 @@ const store = new Vuex.Store({
       if (data.type.startsWith("Invite") || data.type.startsWith("Lobby") || data.type === 'GameStarted') {
         context.dispatch("lobby/onSocketMessage", data);
       }
+      if (data.type === "Chat") {
+        context.dispatch("chat/onSocketMessage", data);
+      }
       if (data.gameType) {
         let game = supportedGames.games[data.gameType]
         if (game.dsl) {