colors

inker · Jul 12, 2024 · 73baaf0 · 73baaf0
1 parent 17ad295
commit 73baaf0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/src/containers/LeagueStage/Matrix.tsx b/src/containers/LeagueStage/Matrix.tsx
@@ -4,6 +4,9 @@ import styled, { css, keyframes } from 'styled-components';
 import getCountryFlagUrl from '#utils/getCountryFlagUrl';
 import { type Country } from '#model/types';
 
+// eslint-disable-next-line no-sparse-arrays
+const angleByIndex = [, 0, 5, 3, 2, 6, 4, 1];
+
 const Table = styled.table<{
   $potSize: number;
 }>`
@@ -100,10 +103,6 @@ const TableCell = styled.td<{
     props.$isMatch &&
     css`
       animation: ${AppearLight} 1s ease-out normal forwards;
-
-      &::before {
-        content: '✕';
-      }
     `}
   ${props =>
     props.$noAnimation &&
@@ -142,11 +141,18 @@ interface Team {
 interface Props {
   allTeams: readonly Team[];
   pairings: (readonly [Team, Team])[];
+  schedule: readonly (readonly (readonly [Team, Team])[])[];
   potSize: number;
   noCellAnimation?: boolean;
 }
 
-function Matrix({ allTeams, pairings, potSize, noCellAnimation }: Props) {
+function Matrix({
+  allTeams,
+  pairings,
+  schedule,
+  potSize,
+  noCellAnimation,
+}: Props) {
   const [hoverColumn, setHoverColumn] = useState<string | undefined>(undefined);
 
   const pairingsMap = useMemo(() => {
@@ -157,6 +163,16 @@ function Matrix({ allTeams, pairings, potSize, noCellAnimation }: Props) {
     return o;
   }, [pairings]);
 
+  const scheduleMap = useMemo(() => {
+    const o: Record<`${string}:${string}`, number> = {};
+    for (const [mdIndex, md] of schedule.entries()) {
+      for (const m of md) {
+        o[`${m[0].id}:${m[1].id}`] = mdIndex;
+      }
+    }
+    return o;
+  }, [schedule]);
+
   const handleTableMouseOver = useCallback(
     (e: React.MouseEvent<HTMLTableElement>) => {
       const opponentId =
@@ -217,14 +233,34 @@ function Matrix({ allTeams, pairings, potSize, noCellAnimation }: Props) {
             </TeamCell>
             {allTeams.map(opponent => {
               const isMatch = pairingsMap[`${team.id}:${opponent.id}`];
+              const matchdayIndex = scheduleMap[`${team.id}:${opponent.id}`];
               return (
                 <TableCell
                   key={opponent.id}
                   data-opponent={opponent.id}
                   $isMatch={isMatch}
                   $noAnimation={noCellAnimation}
                   $hovered={opponent.id === hoverColumn}
-                />
+                >
+                  {matchdayIndex === undefined ? (
+                    isMatch ? (
+                      '✕'
+                    ) : (
+                      ''
+                    )
+                  ) : (
+                    <span
+                      style={{
+                        color:
+                          matchdayIndex === 0
+                            ? undefined
+                            : `lch(50% 100 ${((angleByIndex[matchdayIndex] ?? matchdayIndex) / (8 - 1)) * 360})`,
+                      }}
+                    >
+                      {matchdayIndex + 1}
+                    </span>
+                  )}
+                </TableCell>
               );
             })}
           </BodyRow>

diff --git a/src/containers/LeagueStage/index.tsx b/src/containers/LeagueStage/index.tsx
@@ -143,6 +143,7 @@ function LeagueStage({ season, pots: initialPots }: Props) {
           <Matrix
             allTeams={allTeams}
             pairings={pairings}
+            schedule={schedule}
             potSize={pots[0].length}
             noCellAnimation={isScheduleDone}
           />