Match looking initial

app/components/play/GroupCard.tsx

@@ -12,17 +12,19 @@ export function GroupCard({
   isCaptain = false,
   type,
   ranked,
+  lookingForMatch,
 }: {
   group: LookingLoaderDataGroup;
   isCaptain?: boolean;
   type?: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED";
   ranked?: boolean;
+  lookingForMatch: boolean;
 }) {
   const buttonText = () => {
     if (type === "LIKES_GIVEN") return "Undo";
     if (type === "NEUTRAL") return "Let's play?";
 
-    return "Group up";
+    return lookingForMatch ? "Match up" : "Group up";
   };
   const buttonValue = (): LookingActionSchema["_action"] => {
     if (type === "LIKES_GIVEN") return "UNLIKE";

app/routes/play/looking.tsx

@@ -89,12 +89,12 @@ export const action: ActionFunction = async ({ request, context }) => {
         ),
         unitedGroupIsRanked:
           // if one group is ranked and other is unranked
-          // the new group should use the ranked status of the
-          // target group
+          // the new group should use the ranked status of
+          // own group
           ownGroup.ranked === groupToUniteWith.ranked ||
-          typeof groupToUniteWith.ranked !== "boolean"
+          typeof ownGroup.ranked !== "boolean"
             ? undefined
-            : groupToUniteWith.ranked,
+            : ownGroup.ranked,
       });
 
       break;
@@ -165,7 +165,9 @@ export const loader: LoaderFunction = async ({ context }) => {
     ownGroup.ranked
   );
 
-  const lookingForMatch = ownGroup.members.length === LFG_GROUP_FULL_SIZE;
+  const lookingForMatch =
+    ownGroup.type === "VERSUS" &&
+    ownGroup.members.length === LFG_GROUP_FULL_SIZE;
   const likesGiven = ownGroup.likedGroups.reduce(
     (acc, lg) => acc.add(lg.targetId),
     new Set<string>()
@@ -188,12 +190,14 @@ export const loader: LoaderFunction = async ({ context }) => {
     type: ownGroup.type,
     userIsCaptain: isGroupAdmin({ group: ownGroup, user }),
     ...groups
-      .filter((group) =>
-        canUniteWithGroup({
-          ownGroupType: ownGroup.type,
-          ownGroupSize: ownGroup.members.length,
-          otherGroupSize: group.members.length,
-        })
+      .filter(
+        (group) =>
+          (lookingForMatch && group.members.length === LFG_GROUP_FULL_SIZE) ||
+          canUniteWithGroup({
+            ownGroupType: ownGroup.type,
+            ownGroupSize: ownGroup.members.length,
+            otherGroupSize: group.members.length,
+          })
       )
       .filter((group) => group.id !== ownGroup.id)
       .map((group) => ({
@@ -235,7 +239,7 @@ export default function LookingPage() {
     return (
       <div className="container">
         <div className="play-looking__waves">
-          <GroupCard group={data.ownGroup} />
+          <GroupCard group={data.ownGroup} lookingForMatch={false} />
           <div className="play-looking__waves-text">
             This is your group! You can reach out to them on{" "}
             <a href={DISCORD_URL}>our Discord</a> in the #groups-meetup channel.
@@ -260,9 +264,14 @@ export default function LookingPage() {
     );
   }
 
+  const lookingForMatch = data.ownGroup.members?.length === LFG_GROUP_FULL_SIZE;
   return (
     <div className="container">
-      <GroupCard group={data.ownGroup} ranked={data.ownGroup.ranked} />
+      <GroupCard
+        group={data.ownGroup}
+        ranked={data.ownGroup.ranked}
+        lookingForMatch={false}
+      />
       <hr className="my-4" />
       <div className="play-looking__columns">
         <div>
@@ -276,6 +285,7 @@ export default function LookingPage() {
                   isCaptain={data.userIsCaptain}
                   type="LIKES_GIVEN"
                   ranked={group.ranked}
+                  lookingForMatch={lookingForMatch}
                 />
               );
             })}
@@ -292,6 +302,7 @@ export default function LookingPage() {
                   isCaptain={data.userIsCaptain}
                   type="NEUTRAL"
                   ranked={group.ranked}
+                  lookingForMatch={lookingForMatch}
                 />
               );
             })}
@@ -308,6 +319,7 @@ export default function LookingPage() {
                   isCaptain={data.userIsCaptain}
                   type="LIKES_RECEIVED"
                   ranked={data.ownGroup.ranked}
+                  lookingForMatch={lookingForMatch}
                 />
               );
             })}

app/styles/play-looking.css

@@ -87,7 +87,8 @@
   background-color: var(--bg-darker);
   border-radius: var(--rounded);
   overflow-x: hidden;
-  padding-block: var(--s-2);
+  padding-block-end: var(--s-1);
+  padding-block-start: var(--s-2);
 }
 
 .play-looking__member-name {

app/utils/schemas.ts

@@ -14,6 +14,7 @@ export const SeedVariationsSchema = z.enum([
   "match",
   "tournament-start",
   "looking",
+  "looking-match",
 ]);
 
 export type LoggedInUser = NonNullable<

prisma/seed/script.ts

@@ -17,6 +17,7 @@ import invariant from "tiny-invariant";
 import { SeedVariations } from "~/utils/schemas";
 import { v4 as uuidv4 } from "uuid";
 import clone from "just-clone";
+import shuffle from "just-shuffle";
 const prisma = new PrismaClient();
 
 const mapListDE = `{"losers":[[{"id":4647,"name":"Kelp Dome","mode":"SZ"},{"id":4658,"name":"Blackbelly Skatepark","mode":"TC"},{"id":4645,"name":"Manta Maria","mode":"CB"}],[{"id":4624,"name":"Inkblot Art Academy","mode":"RM"},{"id":4707,"name":"Ancho-V Games","mode":"SZ"},{"id":4618,"name":"Humpback Pump Track","mode":"TC"}],[{"id":4692,"name":"Camp Triggerfish","mode":"SZ"},{"id":4665,"name":"MakoMart","mode":"CB"},{"id":4634,"name":"Moray Towers","mode":"RM"}],[{"id":4609,"name":"Musselforge Fitness","mode":"RM"},{"id":4647,"name":"Kelp Dome","mode":"SZ"},{"id":4678,"name":"Arowana Mall","mode":"TC"}],[{"id":4705,"name":"New Albacore Hotel","mode":"CB"},{"id":4644,"name":"Manta Maria","mode":"RM"},{"id":4707,"name":"Ancho-V Games","mode":"SZ"}],[{"id":4657,"name":"Blackbelly Skatepark","mode":"SZ"},{"id":4690,"name":"Piranha Pit","mode":"CB"},{"id":4682,"name":"Goby Arena","mode":"SZ"},{"id":4678,"name":"Arowana Mall","mode":"TC"},{"id":4624,"name":"Inkblot Art Academy","mode":"RM"}]],"winners":[[{"id":4677,"name":"Arowana Mall","mode":"SZ"},{"id":4665,"name":"MakoMart","mode":"CB"},{"id":4618,"name":"Humpback Pump Track","mode":"TC"}],[{"id":4624,"name":"Inkblot Art Academy","mode":"RM"},{"id":4683,"name":"Goby Arena","mode":"TC"},{"id":4692,"name":"Camp Triggerfish","mode":"SZ"}],[{"id":4647,"name":"Kelp Dome","mode":"SZ"},{"id":4634,"name":"Moray Towers","mode":"RM"},{"id":4707,"name":"Ancho-V Games","mode":"SZ"},{"id":4610,"name":"Musselforge Fitness","mode":"CB"},{"id":4658,"name":"Blackbelly Skatepark","mode":"TC"}],[{"id":4644,"name":"Manta Maria","mode":"RM"},{"id":4677,"name":"Arowana Mall","mode":"SZ"},{"id":4690,"name":"Piranha Pit","mode":"CB"},{"id":4682,"name":"Goby Arena","mode":"SZ"},{"id":4618,"name":"Humpback Pump Track","mode":"TC"}],[{"id":4624,"name":"Inkblot Art Academy","mode":"RM"},{"id":4707,"name":"Ancho-V Games","mode":"SZ"},{"id":4610,"name":"Musselforge Fitness","mode":"CB"},{"id":4657,"name":"Blackbelly Skatepark","mode":"SZ"},{"id":4693,"name":"Camp Triggerfish","mode":"TC"},{"id":4664,"name":"MakoMart","mode":"RM"},{"id":4647,"name":"Kelp Dome","mode":"SZ"}],[{"id":4617,"name":"Humpback Pump Track","mode":"SZ"},{"id":4635,"name":"Moray Towers","mode":"CB"},{"id":4682,"name":"Goby Arena","mode":"SZ"},{"id":4644,"name":"Manta Maria","mode":"RM"},{"id":4678,"name":"Arowana Mall","mode":"TC"},{"id":4692,"name":"Camp Triggerfish","mode":"SZ"},{"id":4705,"name":"New Albacore Hotel","mode":"CB"}]]}`;
@@ -69,7 +70,7 @@ export async function seed(variation?: SeedVariations) {
     const userIdsInTheSystem = (await prisma.user.findMany())
       .map((u) => u.id)
       .filter((id) => id !== ADMIN_TEST_UUID && id !== NZAP_TEST_UUID);
-    await lookingLfgGroups(userIdsInTheSystem);
+    const remainingUserIdsForGroups = await lfgGroups(userIdsInTheSystem);
 
     if (variation === "match" || variation === "tournament-start") {
       await tournamentRoundsCreate();
@@ -77,8 +78,8 @@ export async function seed(variation?: SeedVariations) {
     if (variation === "match") {
       await advanceRound();
     }
-    if (variation === "looking") {
-      await ownGroup();
+    if (variation === "looking" || variation === "looking-match") {
+      await ownGroup(variation === "looking-match", remainingUserIdsForGroups);
     }
 
     async function adminUser() {
@@ -371,7 +372,7 @@ export async function seed(variation?: SeedVariations) {
       return result;
     }
 
-    async function lookingLfgGroups(userIds: string[]) {
+    async function lfgGroups(userIds: string[]) {
       function randomIntFromInterval(min: number, max: number) {
         // min and max included
         return Math.floor(Math.random() * (max - min + 1) + min);
@@ -397,10 +398,46 @@ export async function seed(variation?: SeedVariations) {
           },
         });
       }
+
+      for (let i = 0; i < 24; i++) {
+        await prisma.lfgGroup.create({
+          data: {
+            looking: true,
+            active: true,
+            type: "VERSUS",
+            ranked: i < 12,
+            members: {
+              createMany: {
+                data: new Array(4).fill(null).map((_, i) => ({
+                  memberId: userIdsStack.shift()!,
+                  captain: i === 0,
+                })),
+              },
+            },
+          },
+        });
+      }
+
+      return userIdsStack;
     }
 
-    async function ownGroup() {
-      const groups = await prisma.lfgGroup.findMany({});
+    async function ownGroup(lookingMatch: boolean, userIds: string[]) {
+      const groups = shuffle(await prisma.lfgGroup.findMany());
+
+      const members = [
+        {
+          memberId: ADMIN_TEST_UUID,
+          captain: true,
+        },
+        { memberId: NZAP_TEST_UUID },
+      ];
+
+      if (lookingMatch) {
+        for (let i = 0; i < 2; i++) {
+          members.push({ memberId: userIds.shift()! });
+        }
+      }
+
       return prisma.lfgGroup.create({
         data: {
           looking: true,
@@ -409,18 +446,12 @@ export async function seed(variation?: SeedVariations) {
           ranked: true,
           members: {
             createMany: {
-              data: [
-                {
-                  memberId: ADMIN_TEST_UUID,
-                  captain: true,
-                },
-                { memberId: NZAP_TEST_UUID },
-              ],
+              data: members,
             },
           },
           likesReceived: {
             createMany: {
-              data: new Array(10).fill(null).map((_) => ({
+              data: new Array(20).fill(null).map((_) => ({
                 likerId: groups.shift()!.id,
               })),
             },