Maplist for LFG matches

app/models/LFGGroup.server.ts

@@ -1,4 +1,5 @@
 import type { LfgGroupType } from "@prisma/client";
+import { generateMapListForLfgMatch } from "~/core/play/mapList";
 import { db } from "~/utils/db.server";
 
 export function create({
@@ -101,7 +102,15 @@ export function uniteGroups({
 }
 
 export async function matchUp(groupIds: [string, string]) {
-  const match = await db.lfgGroupMatch.create({ data: {} });
+  const match = await db.lfgGroupMatch.create({
+    data: {
+      stages: {
+        createMany: {
+          data: generateMapListForLfgMatch(),
+        },
+      },
+    },
+  });
 
   return db.lfgGroup.updateMany({
     where: {

app/models/LFGMatch.server.ts

@@ -3,6 +3,18 @@ import { db } from "~/utils/db.server";
 export function findById(id: string) {
   return db.lfgGroupMatch.findUnique({
     where: { id },
-    select: { groups: { include: { members: { include: { user: true } } } } },
+    select: {
+      stages: {
+        select: {
+          stage: {
+            select: {
+              name: true,
+              mode: true,
+            },
+          },
+        },
+      },
+      groups: { include: { members: { include: { user: true } } } },
+    },
   });
 }

app/routes/play/match.$id.tsx

@@ -1,3 +1,4 @@
+import { Mode } from "@prisma/client";
 import {
   ActionFunction,
   Form,
@@ -21,6 +22,7 @@ import {
   getUser,
   listToUserReadableString,
   makeTitle,
+  modeToImageUrl,
   parseRequestFormData,
   requireUser,
   UserLean,
@@ -90,6 +92,10 @@ interface LFGMatchLoaderData {
   isOwnMatch: boolean;
   isRanked: boolean;
   groups: UserLean[][];
+  mapList: {
+    name: string;
+    mode: Mode;
+  }[];
 }
 
 export const loader: LoaderFunction = async ({ params, context }) => {
@@ -133,6 +139,7 @@ export const loader: LoaderFunction = async ({ params, context }) => {
           discordDiscriminator: g.user.discordDiscriminator,
         }));
       }),
+    mapList: match.stages.map(({ stage }) => stage),
   });
 };
 
@@ -188,6 +195,26 @@ export default function LFGMatchPage() {
           </Form>
         </div>
       )}
+      <ol className="play-match__stages">
+        <h2 className="play-match__map-list-header">Map list</h2>
+        <div className="play-match__best-of">Best of {data.mapList.length}</div>
+        {data.mapList.map((stage, i) => {
+          return (
+            <li
+              key={`${stage.name}-${stage.mode}`}
+              className="play-match__stage"
+            >
+              <img
+                className="play-match__mode"
+                src={modeToImageUrl(stage.mode)}
+              />
+              {i + 1}){" "}
+              <span className="play-match__stage-name">{stage.name}</span> (
+              {stage.mode})
+            </li>
+          );
+        })}
+      </ol>
     </div>
   );
 }

app/styles/play-match.css

@@ -51,3 +51,52 @@
   justify-content: center;
   margin-block-start: var(--s-4);
 }
+
+/* .play-match__stage {
+  background-image: var(--_tournament-bg-url);
+  background-position: center;
+  border-radius: var(--rounded);
+  max-width: 24rem;
+  margin: 0 auto;
+} */
+
+.play-match__stages {
+  max-width: max-content;
+  padding: var(--s-4);
+  margin: 0 auto;
+  background-color: var(--bg-lighter);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-sm);
+  margin-block-start: var(--s-4);
+}
+
+.play-match__map-list-header {
+  background-color: var(--bg-darker);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-sm);
+  font-weight: var(--semi-bold);
+  text-align: center;
+}
+
+.play-match__best-of {
+  color: var(--text-lighter);
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  text-align: center;
+}
+
+.play-match__mode {
+  width: 1.5rem;
+  margin-inline-end: var(--s-2);
+}
+
+.play-match__stage {
+  display: flex;
+  align-items: center;
+  padding: var(--s-1-5);
+}
+
+.play-match__stage-name {
+  font-weight: var(--bold);
+  margin-inline: 4px;
+}

prisma/seed/script.ts

@@ -52,6 +52,7 @@ export async function seed(variation?: SeedVariations) {
     await prisma.lfgGroup.deleteMany();
     await prisma.skill.deleteMany();
     await prisma.user.deleteMany();
+    await prisma.lfgGroupMatchStage.deleteMany();
     await prisma.stage.deleteMany();
 
     //