feature: matchmaking lobbies (#70)

Author: lukepolo

components/PlayerDisplay.vue

@@ -1,28 +1,31 @@
 <script lang="ts" setup>
 import TimezoneFlag from "~/components/TimezoneFlag.vue";
-import { Ban, MicOff, MessageSquareOff } from "lucide-vue-next";
+import { Ban, MicOff, MessageSquareOff, UserPlus } from "lucide-vue-next";
 </script>
 <template>
   <div
     class="grid gap-2"
     @click="viewPlayer"
     :class="{
       'cursor-pointer': linkable,
-      'grid-cols-[52px]': !showName && !showSteamId && !showFlag,
       'grid-cols-[52px_1fr]': showName || showSteamId || showFlag,
     }"
   >
     <div class="flex flex-col items-center justify-center relative">
-      <Avatar shape="square">
-        <AvatarImage
-          :src="player.avatar_url"
-          :alt="player.name"
-          v-if="player.avatar_url"
-        />
-        <AvatarFallback>
-          {{ player.name.slice(0, 2) }}
-        </AvatarFallback>
-      </Avatar>
+      <slot name="avatar">
+        <Avatar shape="square">
+          <AvatarImage
+            :src="player.avatar_url"
+            :alt="player.name"
+            v-if="player?.avatar_url"
+          />
+          <AvatarFallback>
+            <slot name="avatar-fallback">
+              {{ player?.name.slice(0, 2) }}
+            </slot>
+          </AvatarFallback>
+        </Avatar>
+      </slot>
       <slot name="status">
         <template v-if="isOnline && showOnline">
           <span
@@ -99,17 +102,31 @@ import { Ban, MicOff, MessageSquareOff } from "lucide-vue-next";
               </div>
             </div>
             <slot name="name-postfix"></slot>
+            <TooltipProvider v-if="!isMe && showAddFriend && !isFriend">
+              <Tooltip>
+                <TooltipTrigger>
+                  <UserPlus
+                    class="w-4 h-4 cursor-pointer hover:text-primary"
+                    @click.stop="addAsFriend"
+                  />
+                </TooltipTrigger>
+                <TooltipContent>Add as friend</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
           <p class="text-muted-foreground" v-if="showSteamId">
             {{ player.steam_id }}
           </p>
         </div>
       </slot>
     </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
 <script lang="ts">
+import { typedGql } from "~/generated/zeus/typedDocumentNode";
+
 export default {
   props: {
     size: {
@@ -118,7 +135,7 @@ export default {
     },
     player: {
       type: Object,
-      required: true,
+      required: false,
     },
     showName: {
       type: Boolean,
@@ -144,20 +161,63 @@ export default {
       type: Boolean,
       default: false,
     },
+    showAddFriend: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
+    async addAsFriend() {
+      await this.$apollo.mutate({
+        mutation: typedGql("mutation")({
+          insert_my_friends_one: [
+            {
+              object: {
+                steam_id: this.player.steam_id,
+              },
+            },
+            {
+              steam_id: true,
+            },
+          ],
+        }),
+      });
+    },
     viewPlayer() {
-      if (this.linkable) {
+      if (this.linkable && this.player) {
         this.$router.push(`/players/${this.player.steam_id}`);
       }
     },
   },
   computed: {
+    me() {
+      return useAuthStore().me;
+    },
+    isMe() {
+      if (!this.player) {
+        return false;
+      }
+
+      return this.me?.steam_id === this.player.steam_id;
+    },
     isOnline() {
-      return useMatchMakingStore().onlinePlayerSteamIds.includes(
+      if (!this.player) {
+        return false;
+      }
+
+      return useMatchmakingStore().onlinePlayerSteamIds.includes(
         this.player.steam_id,
       );
     },
+    isFriend() {
+      if (!this.player) {
+        return false;
+      }
+
+      return useMatchmakingStore().friends.find((friend) => {
+        return friend.steam_id == this.player.steam_id;
+      });
+    },
   },
 };
 </script>

components/PlayerSearch.vue

@@ -104,8 +104,12 @@ export default {
     async searchPlayers(query?: string) {
       this.query = query || undefined;
 
+      const exclude = !this.canSelectSelf
+        ? this.exclude.concat(this.me.steam_id)
+        : this.exclude;
+
       if (this.onlineOnly) {
-        this.players = useSearchStore().search(query, this.exclude);
+        this.players = useSearchStore().search(query, exclude);
         return;
       }
 
@@ -114,7 +118,7 @@ export default {
         body: {
           query,
           teamId: this.teamId,
-          exclude: this.exclude,
+          exclude: exclude,
         },
       });
 

components/ServiceLogs.vue

@@ -211,7 +211,6 @@ export default {
   },
   unmounted() {
     this.logListener?.stop();
-    // TODO - send to stop sending to my socket...
   },
 };
 </script>

components/match/MatchLobbyChat.vue renamed to components/chat/ChatLobby.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
+import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
-import { FormControl, FormField, FormItem } from "~/components/ui/form";
 import { CornerDownLeft } from "lucide-vue-next";
-import { Badge } from "~/components/ui/badge";
-import MatchLobbyChatMessage from "~/components/match/MatchLobbyChatMessage.vue";
-import { ref } from "vue";
+import ChatMessage from "~/components/chat/ChatMessage.vue";
+import { FormControl, FormField, FormItem } from "~/components/ui/form";
 </script>
 
 <template>
@@ -14,17 +13,19 @@ import { ref } from "vue";
   >
     <div class="absolute right-3 top-3">
       <div class="flex">
-        <Badge variant="secondary"> Lobby Chat </Badge>
+        <Badge variant="secondary">
+          <slot name="chat-label">Lobby Chat</slot>
+        </Badge>
       </div>
     </div>
 
     <div class="flex-1 overflow-y-auto max-h-screen" ref="chatMessages">
-      <MatchLobbyChatMessage
+      <ChatMessage
         :message="message"
         :previous-message="messages[index - 1]"
         v-for="(message, index) in messages"
         :key="index"
-      ></MatchLobbyChatMessage>
+      ></ChatMessage>
     </div>
 
     <form
@@ -51,27 +52,34 @@ import { ref } from "vue";
   </div>
 </template>
 <script lang="ts">
-import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
 import * as z from "zod";
+import { useForm } from "vee-validate";
 import socket from "~/web-sockets/Socket";
+import { toTypedSchema } from "@vee-validate/zod";
+import type { Lobby } from "~/web-sockets/Socket";
 
 export default {
   props: {
-    matchId: {
+    instance: {
+      type: String,
       required: true,
+    },
+    lobbyId: {
       type: String,
+      required: true,
     },
-    messages: {
-      default: () => [],
-      type: Array as () => Array<Record<string, any>>,
+    type: {
+      type: String,
+      required: true,
     },
   },
   data() {
     return {
+      messages: [],
+      lobby: undefined as Lobby | undefined,
       lobbyListener: undefined as { stop: () => void } | undefined,
       chatMessages: undefined as HTMLElement | undefined,
-      isAtBottom: ref(true),
+      isAtBottom: false,
       form: useForm({
         validationSchema: toTypedSchema(
           z.object({
@@ -82,12 +90,22 @@ export default {
     };
   },
   watch: {
-    matchId: {
+    lobbyId: {
       immediate: true,
       handler() {
+        this.lobby?.leave();
+        this.lobby = socket.joinLobby(
+          this.instance,
+          this.type as "match" | "team" | "matchmaking",
+          this.lobbyId,
+        );
+
+        this.updateLobbyMessages(this.lobby.messages);
+        this.lobby.on("lobby:messages", this.updateLobbyMessages);
+
         this.lobbyListener = socket.listenChat(
-          "match",
-          this.matchId,
+          this.type,
+          this.lobbyId,
           (message) => {
             this.messages.push(message);
             this.$nextTick(() => {
@@ -106,6 +124,11 @@ export default {
     },
   },
   methods: {
+    updateLobbyMessages(messages: any) {
+      this.messages = messages.sort((a, b) => {
+        return a.timestamp - b.timestamp;
+      });
+    },
     checkIfAtBottom() {
       if (this.chatMessages) {
         const { scrollTop, scrollHeight, clientHeight } = this.chatMessages;
@@ -123,7 +146,11 @@ export default {
         return;
       }
 
-      socket.chat("match", this.matchId, message);
+      socket.chat(
+        this.type as "match" | "team" | "matchmaking",
+        this.lobbyId,
+        message,
+      );
 
       this.form.resetForm();
       this.$nextTick(() => {
@@ -138,6 +165,7 @@ export default {
     }
   },
   beforeUnmount() {
+    this.lobby?.leave();
     this.lobbyListener?.stop();
     if (this.chatMessages) {
       this.chatMessages.removeEventListener("scroll", this.checkIfAtBottom);

components/match/MatchLobbyChatMessage.vue renamed to components/chat/ChatMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Lock, Unlock } from "lucide-vue-next";
+import { Lock, Unlock, Send, Handshake } from "lucide-vue-next";
 import { e_lobby_access_enum } from "~/generated/zeus";
 import {
   Popover,
@@ -42,6 +42,7 @@ import ClipBoard from "~/components/ClipBoard.vue";
         <Button
           v-for="access in [
             e_lobby_access_enum.Open,
+            e_lobby_access_enum.Friends,
             e_lobby_access_enum.Invite,
             e_lobby_access_enum.Private,
           ]"
@@ -53,7 +54,9 @@ import ClipBoard from "~/components/ClipBoard.vue";
           size="sm"
           :class="{
             'rounded-r-none': access === e_lobby_access_enum.Open,
-            'rounded-none border-x-0': access === e_lobby_access_enum.Invite,
+            'rounded-none border-x-0':
+              access === e_lobby_access_enum.Invite ||
+              access === e_lobby_access_enum.Friends,
             'rounded-l-none': access === e_lobby_access_enum.Private,
           }"
         >
@@ -118,12 +121,13 @@ export default {
     getIcon(access: e_lobby_access_enum) {
       switch (access) {
         case e_lobby_access_enum.Private:
-        case e_lobby_access_enum.Invite:
           return Lock;
+        case e_lobby_access_enum.Invite:
+          return Send;
         case e_lobby_access_enum.Open:
           return Unlock;
-        default:
-          return Lock;
+        case e_lobby_access_enum.Friends:
+          return Handshake;
       }
     },
   },

components/match/MatchLobbyAccess.vue

@@ -28,7 +28,6 @@ import formatBits from "~/utilities/formatBits";
         >
       </div>
 
-      <!-- TODO - env variable url -->
       <div class="absolute top-3 right-3">
         <a
           target="_blank"

components/match/MatchMaps.vue

@@ -103,7 +103,7 @@ export default {
       return useMatchLobbyStore().lobbyChat[this.match.id];
     },
     isOnline() {
-      return useMatchMakingStore().onlinePlayerSteamIds.includes(
+      return useMatchmakingStore().onlinePlayerSteamIds.includes(
         this.member.player.steam_id,
       );
     },