From 11f2ef1a2c54344abb31c4fc3064744993425534 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 14 Jan 2022 09:40:17 +0200
Subject: [PATCH] Match link styles

---
 .stylelintrc.json                             |   3 +-
 .../tournament/EliminationBracketMatch.tsx    | 110 +++++++++++-------
 app/styles/tournament-bracket.css             |  12 +-
 3 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 1d4b251d9..8f6775560 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -12,6 +12,7 @@
         "ignorePseudoClasses": ["global"]
       }
     ],
-    "selector-class-pattern": ["[a-z-_]+"]
+    "selector-class-pattern": ["[a-z-_]+"],
+    "custom-property-pattern": "(?<=_?)"
   }
 }
diff --git a/app/components/tournament/EliminationBracketMatch.tsx b/app/components/tournament/EliminationBracketMatch.tsx
index 54a22a755..10928a85f 100644
--- a/app/components/tournament/EliminationBracketMatch.tsx
+++ b/app/components/tournament/EliminationBracketMatch.tsx
@@ -1,4 +1,6 @@
 import clsx from "clsx";
+import * as React from "react";
+import { Link } from "remix";
 import type { BracketModified } from "~/services/bracket";
 import { Unpacked } from "~/utils";
 
@@ -25,53 +27,73 @@ export function EliminationBracketMatch({
     return null;
   };
 
+  const Container = ({ children }: { children: React.ReactNode }) => {
+    const hasBothParticipants =
+      (match.participants?.filter(Boolean).length ?? 0) > 1;
+
+    if (hasBothParticipants)
+      return (
+        <Link className="tournament-bracket__match__link" to="/">
+          {children}
+        </Link>
+      );
+
+    return <>{children}</>;
+  };
+
   return (
-    <div className={clsx("tournament-bracket__elim__match", { hidden })}>
-      <div className="tournament-bracket__elim__roundNumber">
-        {match.number}
-      </div>
-      <div
-        className={clsx(
-          "tournament-bracket__elim__team",
-          "tournament-bracket__elim__teamOne",
-          {
-            own:
-              !isOver && ownTeamName && ownTeamName === match.participants?.[0],
-            defeated:
-              isOver && (match.score?.[0] ?? 0) < (match.score?.[1] ?? 0),
-          }
-        )}
-      >
-        {cellText(0)}
-        <span
-          className={clsx("tournament-bracket__elim__score", {
-            invisible: typeof match.score?.[0] !== "number",
-          })}
+    <Container>
+      <div className={clsx("tournament-bracket__elim__match", { hidden })}>
+        <div className="tournament-bracket__elim__roundNumber">
+          {match.number}
+        </div>
+        <div
+          className={clsx(
+            "tournament-bracket__elim__team",
+            "tournament-bracket__elim__teamOne",
+            {
+              own:
+                !isOver &&
+                ownTeamName &&
+                ownTeamName === match.participants?.[0],
+              defeated:
+                isOver && (match.score?.[0] ?? 0) < (match.score?.[1] ?? 0),
+            }
+          )}
         >
-          {match.score?.[0] ?? 0}
-        </span>
-      </div>
-      <div
-        className={clsx(
-          "tournament-bracket__elim__team",
-          "tournament-bracket__elim__teamTwo",
-          {
-            own:
-              !isOver && ownTeamName && ownTeamName === match.participants?.[1],
-            defeated:
-              isOver && (match.score?.[1] ?? 0) < (match.score?.[0] ?? 0),
-          }
-        )}
-      >
-        {cellText(1)}{" "}
-        <span
-          className={clsx("tournament-bracket__elim__score", {
-            invisible: typeof match.score?.[0] !== "number",
-          })}
+          {cellText(0)}
+          <span
+            className={clsx("tournament-bracket__elim__score", {
+              invisible: typeof match.score?.[0] !== "number",
+            })}
+          >
+            {match.score?.[0] ?? 0}
+          </span>
+        </div>
+        <div
+          className={clsx(
+            "tournament-bracket__elim__team",
+            "tournament-bracket__elim__teamTwo",
+            {
+              own:
+                !isOver &&
+                ownTeamName &&
+                ownTeamName === match.participants?.[1],
+              defeated:
+                isOver && (match.score?.[1] ?? 0) < (match.score?.[0] ?? 0),
+            }
+          )}
         >
-          {match.score?.[1] ?? 0}
-        </span>
+          {cellText(1)}{" "}
+          <span
+            className={clsx("tournament-bracket__elim__score", {
+              invisible: typeof match.score?.[0] !== "number",
+            })}
+          >
+            {match.score?.[1] ?? 0}
+          </span>
+        </div>
       </div>
-    </div>
+    </Container>
   );
 }
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index 7f348fc0d..85228fa3a 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -245,6 +245,15 @@
   font-size: var(--fonts-xs);
 }
 
+.tournament-bracket__match__link {
+  all: unset;
+  cursor: pointer;
+}
+
+.tournament-bracket__match__link:hover {
+  --_tournaments-match-bg-color: var(--bg-lighter-transparent);
+}
+
 .tournament-bracket__elim__match {
   display: grid;
   margin: 1rem 0;
@@ -271,9 +280,10 @@
   width: 200px;
   justify-content: space-between;
   padding: 0.25rem 0.75rem;
-  background-color: var(--bg-lighter);
+  background-color: var(--_tournaments-match-bg-color, var(--bg-lighter));
   font-size: var(--fonts-sm);
   place-self: flex-start;
+  transition: background-color 100ms ease-out;
 }
 
 .tournament-bracket__elim__team.own {