From ff53604e66e61c3a6100463f94a8a9458436438d Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 6 Feb 2022 17:21:47 +0200
Subject: [PATCH] Maplist for LFG matches

---
 app/models/LFGGroup.server.ts | 11 +++++++-
 app/models/LFGMatch.server.ts | 14 +++++++++-
 app/routes/play/match.$id.tsx | 27 +++++++++++++++++++
 app/styles/play-match.css     | 49 +++++++++++++++++++++++++++++++++++
 prisma/seed/script.ts         |  1 +
 5 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/app/models/LFGGroup.server.ts b/app/models/LFGGroup.server.ts
index c07d91758..f445af6aa 100644
--- a/app/models/LFGGroup.server.ts
+++ b/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: {
diff --git a/app/models/LFGMatch.server.ts b/app/models/LFGMatch.server.ts
index 350b36c28..6cc0c0322 100644
--- a/app/models/LFGMatch.server.ts
+++ b/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 } } } },
+    },
   });
 }
diff --git a/app/routes/play/match.$id.tsx b/app/routes/play/match.$id.tsx
index 91782b695..9329468e2 100644
--- a/app/routes/play/match.$id.tsx
+++ b/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>
   );
 }
diff --git a/app/styles/play-match.css b/app/styles/play-match.css
index 5122ba244..4fd58d525 100644
--- a/app/styles/play-match.css
+++ b/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;
+}
diff --git a/prisma/seed/script.ts b/prisma/seed/script.ts
index 4f019a514..1749ad690 100644
--- a/prisma/seed/script.ts
+++ b/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();
 
     //