From 854bd03c4012efc07332b88d51a0112c269f1b0f Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Wed, 5 Mar 2025 12:59:09 +0100
Subject: [PATCH] feat: add unique key prop to `g`

---
 src/RaceChart.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/RaceChart.tsx b/src/RaceChart.tsx
index 402ef36..00f09db 100644
--- a/src/RaceChart.tsx
+++ b/src/RaceChart.tsx
@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { PlayerRanking } from "./types";
+import { useSession } from "./Session";
 
 interface RaceChartProps {
   players: PlayerRanking[];
@@ -34,13 +35,13 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
-  const fontSize = Math.min(barHeight - 1.5 * gap, width / 20);
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
 
   return (
-    <svg width={width} height={height}>
+    <svg width={width} height={height} id="RaceChartSVG">
       {players.map((player, index) => (
         <rect
-          key={index}
+          key={String(index)}
           x={0}
           y={index * barHeight + padding}
           width={(1 - player.rank / maxValue) * width}
@@ -50,7 +51,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       ))}
 
       {players.map((player, index) => (
-        <g>
+        <g key={"group" + index}>
           <text
             key={index + "_name"}
             x={4}