From 6d82d99b186e8b76c616e73ea33fd8927fca7e77 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 27 Feb 2022 11:06:14 +0200
Subject: [PATCH] Link to old user profiles on match page

---
 app/components/play/GroupMembers.tsx |  3 ++-
 app/routes/play/match.$id.tsx        | 21 +++++++++++++++------
 app/styles/play-match.css            |  1 +
 app/utils/urls.ts                    |  3 +++
 4 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 app/utils/urls.ts

diff --git a/app/components/play/GroupMembers.tsx b/app/components/play/GroupMembers.tsx
index dea895f46..9acbf7423 100644
--- a/app/components/play/GroupMembers.tsx
+++ b/app/components/play/GroupMembers.tsx
@@ -1,5 +1,6 @@
 import type { LookingLoaderDataGroup } from "~/routes/play/looking";
 import { layoutIcon } from "~/utils";
+import { oldSendouInkUserProfile } from "~/utils/urls";
 import { Avatar } from "../Avatar";
 import { WeaponImage } from "../WeaponImage";
 
@@ -37,7 +38,7 @@ function Contents({ members }: { members: LookingLoaderDataGroup["members"] }) {
         return (
           <div key={member.id} className="play-looking__member-card">
             <a
-              href={`https://sendou.ink/u/${member.discordId}`}
+              href={oldSendouInkUserProfile({ discordId: member.discordId })}
               target="_blank"
               rel="noopener noreferrer"
               className="play-looking__member-link"
diff --git a/app/routes/play/match.$id.tsx b/app/routes/play/match.$id.tsx
index 468721ff9..1b497f658 100644
--- a/app/routes/play/match.$id.tsx
+++ b/app/routes/play/match.$id.tsx
@@ -39,6 +39,7 @@ import {
   UserLean,
   validate,
 } from "~/utils";
+import { oldSendouInkUserProfile } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -263,12 +264,20 @@ export default function LFGMatchPage() {
                 className="play-match__waves-section play-match__team-info"
               >
                 {g.members.map((user) => (
-                  <div key={user.id} className="play-match__player">
-                    <Avatar user={user} />
-                    <span className="play-match__player-name">
-                      {user.discordName}
-                    </span>
-                  </div>
+                  <a
+                    href={oldSendouInkUserProfile({
+                      discordId: user.discordId,
+                    })}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div key={user.id} className="play-match__player">
+                      <Avatar user={user} />
+                      <span className="play-match__player-name">
+                        {user.discordName}
+                      </span>
+                    </div>
+                  </a>
                 ))}
                 {data.scores && (
                   <div
diff --git a/app/styles/play-match.css b/app/styles/play-match.css
index d3c19a817..781f1e9c5 100644
--- a/app/styles/play-match.css
+++ b/app/styles/play-match.css
@@ -88,6 +88,7 @@
   flex-direction: column;
   align-items: center;
   font-size: var(--fonts-xs);
+  color: var(--text);
 }
 
 .play-match__score {
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
new file mode 100644
index 000000000..d6947a68f
--- /dev/null
+++ b/app/utils/urls.ts
@@ -0,0 +1,3 @@
+export function oldSendouInkUserProfile({ discordId }: { discordId: string }) {
+  return `https://sendou.ink/u/${discordId}`;
+}