feat: playing with colours

src/RaceChart.tsx

@@ -14,12 +14,10 @@ const determineNiceWidth = (width: number) => {
 };
 
 const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
-  // State to store window's width and height
   const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
   //const [height, setHeight] = useState(window.innerHeight);
   const height = players.length * 40;
 
-  // Update state on  resize
   useEffect(() => {
     const handleResize = () => {
       setWidth(determineNiceWidth(window.innerWidth));
@@ -41,11 +39,14 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       {players.map((player, index) => (
         <rect
           key={String(index)}
-          x={0}
+          x={4}
           y={index * barHeight + padding}
           width={(1 - player.rank / maxValue) * width}
           height={barHeight - gap} // subtract 2 for some spacing between bars
           fill="#36c"
+          stroke="aliceblue"
+          strokeWidth={4}
+          paintOrder={"stroke fill"}
         />
       ))}
 
@@ -53,7 +54,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
         <g key={"group" + index}>
           <text
             key={index + "_name"}
-            x={4}
+            x={8}
             y={index * barHeight + barHeight / 2 + padding + gap / 2}
             width={(1 - player.rank / maxValue) * width}
             height={barHeight - 8} // subtract 2 for some spacing between bars
@@ -71,7 +72,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
           <text
             key={index + "_value"}
             x={
-              4 +
+              8 +
               (4 + Math.max(...players.map((p, _) => p.name.length))) *
                 fontSize *
                 0.66