Merge pull request #158 from Prodeko/main

Merge bug fixes to production
Prodeko · Dec 10, 2023 · 9ecfeb8 · 9ecfeb8
2 parents 49fdd43 + 9abcf29
commit 9ecfeb8
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
diff --git a/app/components/Homepage/AddGame/AddGameModal/CloseButton.tsx b/app/components/Homepage/AddGame/AddGameModal/CloseButton.tsx
@@ -15,7 +15,7 @@ const CloseButton = ({ onClose }: Props) => {
         onClose()
       }}
     >
-      <Image src="/images/close-cross.svg" alt="close icon" />
+      <img src="/images/close-cross.svg" alt="close icon" />
     </button>
   )
 }

diff --git a/app/components/Homepage/AddGame/AddGameModal/Content/GameCreation/index.tsx b/app/components/Homepage/AddGame/AddGameModal/Content/GameCreation/index.tsx
@@ -41,7 +41,7 @@ const GameCreation = ({ setGames, onClose }: Props) => {
           elo: seasonal ? data.loser.seasonElo ?? 400 : data.loser.elo,
         },
         {
-          ...data.loser,
+          ...data.winner,
           elo: seasonal ? data.loser.seasonElo ?? 400 : data.loser.elo,
         },
       ])

diff --git a/app/components/ui/Sidebar/index.tsx b/app/components/ui/Sidebar/index.tsx
@@ -24,7 +24,7 @@ const Sidebar = ({ currentSeason }: Props) => {
       </nav>
       <div className={styles.bottomContainer}>
         {currentSeason && <SeasonToggle />}
-        <p className={styles.versioning}>Version 1.3.1 - Rööki 🚬</p>
+        <p className={styles.versioning}>Version 1.3.2 - Rööki 🚬</p>
       </div>
     </aside>
   )

diff --git a/app/components/ui/Table/Games.tsx b/app/components/ui/Table/Games.tsx
@@ -1,14 +1,17 @@
 import { round } from 'lodash'
+import Link from 'next/link'
 import { FiChevronRight } from 'react-icons/fi'
 
 import type { RecentGame } from '@common/types'
 import { createColumnHelper } from '@tanstack/react-table'
 
+import styles from './Table.module.scss'
+
 export interface TableGame {
   time: string
-  winner: string
+  winner: JSX.Element
   winnerFargo: JSX.Element
-  loser: string
+  loser: JSX.Element
   loserFargo: JSX.Element
 }
 
@@ -20,13 +23,21 @@ export interface TableGame {
 export const prepareGamesData = (data: RecentGame[]): TableGame[] => {
   return data.map((game, _index) => ({
     time: game.formattedTimeString,
-    winner: game.winner,
+    winner: (
+      <Link className={styles['cell--link']} href={`/player/${game.winnerId}`}>
+        {game.winner}
+      </Link>
+    ),
     winnerFargo: (
       <>
         {round(game.winnerEloBefore)} <FiChevronRight /> {round(game.winnerEloAfter)}
       </>
     ),
-    loser: game.loser,
+    loser: (
+      <Link className={styles['cell--link']} href={`/player/${game.loserId}`}>
+        {game.loser}
+      </Link>
+    ),
     loserFargo: (
       <>
         {round(game.loserEloBefore)} <FiChevronRight /> {round(game.loserEloAfter)}&nbsp;&nbsp;

diff --git a/app/components/ui/Table/Table.module.scss b/app/components/ui/Table/Table.module.scss
@@ -58,8 +58,22 @@
   }
 }
 
-.cell {
+%cell {
   align-items: center;
   display: flex;
   min-height: 100%;
-}
+}
+
+.cell {
+  @extend %cell;
+
+  &--link {
+    @extend %cell;
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: $spacing-4;
+    }
+  }
+}
+
diff --git a/app/components/ui/TimeSeriesChart/TimeSeriesChart.tsx b/app/components/ui/TimeSeriesChart/TimeSeriesChart.tsx
@@ -2,6 +2,7 @@
 
 import { ApexOptions } from 'apexcharts'
 import ApexCharts from 'react-apexcharts'
+import { renderToString } from 'react-dom/server'
 
 import type { TimeSeriesGame } from '@common/types'
 
@@ -125,7 +126,7 @@ const TimeSeriesChart = ({ gameData, dataName, chartTitle, height }: Props) => {
     // Rendering custom tooltips: https://github.com/apexcharts/react-apexcharts/issues/65
     tooltip: {
       custom: function ({ dataPointIndex }) {
-        return <Tooltip gameData={gameData} dataPointIndex={dataPointIndex} />
+        return renderToString(<Tooltip gameData={gameData} dataPointIndex={dataPointIndex} />)
       },
     },