feat: ✨ Catfishes know about other catfishes

client/src/components/ChatRoom.svelte

@@ -14,8 +14,10 @@
   export let lobbyCode: string;
   export let isStalker: boolean;
   export let isSpectator: boolean;
+  export let catfishes: string[]; // empty for cats or spectators | at least one for catfishes
   // variables
   let user = $authStore as User;
+  let partner: string | undefined = undefined;
   let partnerInfo: Player | undefined;
   let pairInfo: [Player, Player] | undefined;
   let chatRoomId: string | undefined = undefined;
@@ -51,7 +53,7 @@
           pairInfo = chatRoom.pair.map((uid) => lobby.players[lobby.uids.indexOf(uid)]) as [Player, Player];
         } else {
           // Get partnerInfo
-          const partner = chatRoom.pair.find((uid) => user.uid !== uid);
+          partner = chatRoom.pair.find((uid) => user.uid !== uid);
           if (partner !== undefined) {
             partnerInfo = lobby.players[lobby.uids.indexOf(partner)];
           }
@@ -116,7 +118,7 @@
     >
       <div slot="before-messages" class="matched-with mdc-typography--headline5">
         {#if partnerInfo !== undefined}
-          You matched with {partnerInfo.displayName}
+          You matched with <span class:catfish={catfishes.includes(partner ?? "")}>{partnerInfo.displayName}</span>
         {:else if pairInfo !== undefined}
           {pairInfo[0].displayName} matched with {pairInfo[1].displayName}
         {/if}

client/src/components/ReceiveRole.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import FullScreenTransition from "./FullScreenTransition.svelte";
-  import type { PrivatePlayer, Role } from "$lib/firebase/firestore-types/lobby";
+  import type { Lobby, PrivatePlayer, Role } from "$lib/firebase/firestore-types/lobby";
   import catImage from "$lib/images/role/cat.webp";
   import catfishImage from "$lib/images/role/catfish.webp";
 
   export let privatePlayer: PrivatePlayer;
+  export let catfishes: string[]; // empty for cats or spectators | at least 1 for catfishes
+  export let lobby: Lobby;
+
+  const formatter = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
 
   const ROLES: {
     [key in Role]: { name: string; imageSrc: string; description: string };
@@ -26,13 +30,25 @@
     },
   };
 
+  function getCatfishNames() {
+    const { uids, players } = lobby;
+
+    const catfishNames = catfishes.map((catfishId) => players[uids.indexOf(catfishId)].displayName);
+
+    return catfishNames;
+  }
+
   $: role = ROLES[privatePlayer.role];
 </script>
 
 <FullScreenTransition imageSrc={role.imageSrc} imageAlt="">
   <svelte:fragment slot="banner">Time to find your purrfect match!</svelte:fragment>
   <svelte:fragment slot="image-subtext">
-    You are a <span class={role.name.toLowerCase()}>{role.name}</span>
+    {#if catfishes.length < 2}
+      You are a <span class={role.name.toLowerCase()}>{role.name}</span>
+    {:else}
+      {formatter.format(getCatfishNames() ?? "")} are the <span class={role.name.toLowerCase()}>{role.name}</span>
+    {/if}
   </svelte:fragment>
   <svelte:fragment slot="description">{role.description}</svelte:fragment>
 </FullScreenTransition>
@@ -43,19 +59,4 @@
   .spectator {
     font-weight: bolder;
   }
-
-  .cat {
-    /* Material Blue 700 */
-    color: #1976d2;
-  }
-
-  .catfish {
-    /* Material Red 800 */
-    color: #d32f2f;
-  }
-
-  .spectator {
-    /* Material Blue Grey 500 */
-    color: #607d8b;
-  }
 </style>

client/src/components/Vote.svelte

@@ -10,6 +10,7 @@
 
   export let lobby: Lobby;
   export let lobbyCode: string;
+  export let catfishes: string[]; // empty for cats or spectators | at least one for catfishes
 
   let errorMessage: string = "";
 
@@ -60,7 +61,9 @@
           on:click={() => vote(lobby.uids[i])}
         >
           <AvatarImg {avatar} />
-          <span class="mdc-typography--subtitle1">{displayName ?? ""}</span>
+          <span class="mdc-typography--subtitle1" class:catfish={catfishes.includes(lobby.uids[i])}>
+            {displayName ?? ""}
+          </span>
           <div class="mdc-typography--caption">
             {#if alive}
               Answer: {promptAnswer ?? "no answer"}

client/src/routes/game/+page.svelte

@@ -11,7 +11,7 @@
   import Header from "$components/Header.svelte";
   import LobbySettings from "$components/LobbySettings.svelte";
 
-  import { onSnapshot, doc, getDoc, type Unsubscribe } from "firebase/firestore";
+  import { onSnapshot, doc, getDoc, type Unsubscribe, query, where, CollectionReference } from "firebase/firestore";
   import { onMount, onDestroy } from "svelte";
   import { getPrivatePlayerCollection, lobbyCollection } from "$lib/firebase/firestore-collections";
   import { GAME_STATE_DURATIONS_DEFAULT, type Lobby, type PrivatePlayer } from "$lib/firebase/firestore-types/lobby";
@@ -29,6 +29,11 @@
   let privatePlayer: PrivatePlayer | undefined = undefined;
   let unsubscribePrivatePlayer: Unsubscribe | undefined = undefined;
 
+  let privatePlayerCollection: CollectionReference<PrivatePlayer>;
+
+  let catfishes: string[] = []; // empty for cats or spectators | at least one for catfishes
+  let unsubscribeCatfishes: Unsubscribe | undefined = undefined;
+
   let countdown = GAME_STATE_DURATIONS_DEFAULT.WAIT;
   $: countdownVisible = lobby != undefined && DISPLAY_TIMERS[lobby.state] == true;
   let timer: ReturnType<typeof setInterval>;
@@ -72,7 +77,7 @@
       return;
     }
 
-    const privatePlayerCollection = getPrivatePlayerCollection(lobbyDocRef);
+    privatePlayerCollection = getPrivatePlayerCollection(lobbyDocRef);
     const privatePlayerDocRef = doc(privatePlayerCollection, $user.uid);
 
     updateCountdown();
@@ -115,6 +120,8 @@
     unsubscribeLobby?.();
     // unsub from privatePlayer
     unsubscribePrivatePlayer?.();
+    // unsub from catfishes query
+    unsubscribeCatfishes?.();
   });
 
   function errorToJoin(errorMessage: string) {
@@ -156,6 +163,34 @@
       }
     }
   }
+
+  $: privatePlayer, getCatfishes();
+  function getCatfishes() {
+    // if the current player is a catfish we want them to know all the other catfishes
+    if (privatePlayer !== undefined && privatePlayer.role == "CATFISH") {
+      const catfishQuery = query<PrivatePlayer>(privatePlayerCollection, where("role", "==", "CATFISH"));
+
+      // only allow subscribing during ROLE phase
+      if (lobby?.state == "ROLE") {
+        // unsubscribe if we have a current subscription
+        unsubscribeCatfishes?.();
+
+        unsubscribeCatfishes = onSnapshot(
+          catfishQuery,
+          (queryCollection) => {
+            catfishes = queryCollection.docs.map((doc) => doc.id);
+          },
+          (err) => {
+            console.error(err);
+            errorMessage = err instanceof Error ? err.message : String(err);
+          }
+        );
+      } else {
+        // otherwise unsubscribe
+        unsubscribeCatfishes?.();
+      }
+    }
+  }
 </script>
 
 <svelte:window on:beforeunload={onbeforeunload} />
@@ -204,7 +239,7 @@
         <CircularProgress indeterminate />
       </div>
     {:else if lobby.state === "ROLE"}
-      <Role {privatePlayer} />
+      <Role {lobby} {privatePlayer} {catfishes} />
     {:else if lobby.state === "PROMPT"}
       {#if lobby.alivePlayers.includes($user.uid)}
         <Prompt prompt={privatePlayer.prompt} uid={$user.uid} {lobbyCode} />
@@ -213,11 +248,12 @@
       <ChatRoom
         {lobby}
         {lobbyCode}
+        {catfishes}
         isStalker={privatePlayer.stalker}
         isSpectator={!lobby.alivePlayers.includes($user.uid)}
       />
     {:else if lobby.state === "VOTE"}
-      <Vote {lobby} {lobbyCode} />
+      <Vote {lobby} {lobbyCode} {catfishes} />
     {:else if lobby.state === "RESULT"}
       <Result {lobby} />
     {:else if lobby.state === "END"}

client/src/theme/dark/_smui-theme.scss

@@ -33,3 +33,18 @@ a:visited {
 .error {
   color: theme.$error;
 }
+
+.cat {
+  /* Material Blue 700 */
+  color: #1976d2;
+}
+
+.catfish {
+  /* Material Red 800 */
+  color: #d32f2f;
+}
+
+.spectator {
+  /* Material Blue Grey 500 */
+  color: #607d8b;
+}

client/src/theme/light/_smui-theme.scss

@@ -33,3 +33,18 @@ a:visited {
 .error {
   color: theme.$error;
 }
+
+.cat {
+  /* Material Blue 700 */
+  color: #1976d2;
+}
+
+.catfish {
+  /* Material Red 800 */
+  color: #d32f2f;
+}
+
+.spectator {
+  /* Material Blue Grey 500 */
+  color: #607d8b;
+}

firestore.rules

@@ -18,7 +18,17 @@ service cloud.firestore {
       }
 
       match /privatePlayers/{uid} {
+
+        function isCatfish(){
+          return get(/databases/$(database)/documents/lobbies/$(code)/privatePlayers/$(request.auth.uid)).data.role == "CATFISH";
+        }
+
+        function isCatfishResource(){
+          return resource.data.role == "CATFISH"
+        }
+
         allow get: if request.auth.uid == uid;
+        allow list: if isCatfish() && isCatfishResource();
       }
 
       match /promptAnswers/{uid} {