Merge pull request #37 from PokeRogue-Projects/feature/better-ivchart

Feature/better ivchart
PokeRogue-Projects · Jul 19, 2024 · 6401e33 · 6401e33
2 parents e6404cf + fd4c9c4
commit 6401e33
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 40 deletions.
diff --git a/src/components/IvChart.tsx b/src/components/IvChart.tsx
@@ -1,5 +1,5 @@
 import { Ivs } from "@/types";
-import { toEnumValue } from "@/utils/enumUtils";
+import { getStatIv, Stat, stats, statToDisplayString } from "@/utils/stat";
 import * as React from "react";
 import {
   PolarAngleAxis,
@@ -14,14 +14,14 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "./ui/chart";
-import { getStatIv, Stat, stats, statToDisplayString } from "@/utils/stat";
+import { MAX_IV } from "@/utils/constants";
 
 type CustomTickProps = React.SVGProps<SVGTextElement> & {
   payload: {
     readonly coordinate: number;
     readonly index: number;
     readonly offset: number;
-    readonly value: Stat;
+    readonly value: string;
   };
 };
 
@@ -36,7 +36,7 @@ type IvChartProps = React.HTMLAttributes<HTMLDivElement> & {
   readonly statDecreased: Stat;
 };
 
-const getChartLabelFill = (
+const getStatNameFill = (
   stat: Stat,
   statIncreased: Stat,
   statDecreased: Stat,
@@ -47,6 +47,9 @@ const getChartLabelFill = (
       ? "hsl(var(--stat-decrease))"
       : "hsl(var(--stat-neutral))";
 
+const getStatValueFill = (value: string) =>
+  value === MAX_IV.toString() ? "hsl(var(--stat-max))" : "hsl(var(--stat-neutral))";
+
 const chartConfig = {
   value: {
     label: "IV",
@@ -55,21 +58,24 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 const PokemonChartLabel: React.FC<PokemonChartLabelProps> = ({
-  payload: { value: stat },
+  payload: { value: labelData },
   x,
   y,
   textAnchor,
   statIncreased,
   statDecreased,
 }) => {
+  const [stat, value] = labelData.split(",");
+  // Recharts only let us send string or number values to label
+
   return (
-    <text
-      x={x}
-      y={y}
-      textAnchor={textAnchor}
-      fill={getChartLabelFill(stat, statIncreased, statDecreased)}
-    >
-      {statToDisplayString(stat)}
+    <text className="text-2xs xs:text-xs md:max-lg:text-2xs" x={x} y={y} textAnchor={textAnchor}>
+      <tspan fill={getStatNameFill(stat as Stat, statIncreased, statDecreased)}>
+        {statToDisplayString(stat as Stat)}
+      </tspan>
+      <tspan dx={5} fill={getStatValueFill(value)}>
+        ({value})
+      </tspan>
     </text>
   );
 };
@@ -79,30 +85,33 @@ const IvChart: React.FC<IvChartProps> = ({
   statIncreased,
   statDecreased,
   className,
-}) => (
-  <ChartContainer config={chartConfig} className={className}>
-    <RadarChart
-      data={stats.map((stat: Stat) => ({
-        stat: stat,
-        value: getStatIv(stat, ivs),
-      }))}
-    >
-      <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-      <PolarAngleAxis
-        dataKey="stat"
-        tick={(props: CustomTickProps) => (
-          <PokemonChartLabel
-            {...props}
-            statIncreased={statIncreased}
-            statDecreased={statDecreased}
-          />
-        )}
-      />
-      <PolarRadiusAxis className="hidden" domain={[0, 31]} />
-      <PolarGrid />
-      <Radar dataKey="value" fill="hsl(var(--primary))" fillOpacity={0.7} />
-    </RadarChart>
-  </ChartContainer>
-);
+}) => {
+  return (
+    <ChartContainer config={chartConfig} className={className}>
+      <RadarChart
+        data={stats.map((stat: Stat) => ({
+          labelData: `${stat},${getStatIv(stat, ivs)}`,
+          value: getStatIv(stat, ivs),
+        }))}
+        outerRadius="60%"
+      >
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarAngleAxis
+          dataKey="labelData"
+          tick={(props: CustomTickProps) => (
+            <PokemonChartLabel
+              {...props}
+              statIncreased={statIncreased}
+              statDecreased={statDecreased}
+            />
+          )}
+        />
+        <PolarRadiusAxis className="hidden" domain={[0, MAX_IV]} />
+        <PolarGrid />
+        <Radar dataKey="value" fill="hsl(var(--primary))" fillOpacity={0.7} />
+      </RadarChart>
+    </ChartContainer>
+  );
+};
 
 export default IvChart;
diff --git a/src/components/PokemonCard.tsx b/src/components/PokemonCard.tsx
@@ -65,17 +65,17 @@ const PokemonCard: React.FC<{
       </CardHeader>
       <CardContent>
         <div className="flex flex-col space-y-6">
-          <div className="flex flex-row items-center md:items-start space-y-4 justify-around md:space-y-0">
+          <div className="flex flex-row items-center md:items-start space-y-4 justify-between md:space-y-0">
             <img
               src={`https://wiki.pokerogue.net/_media/starters:sprites:${pokemon.id}.png`}
               alt={pokemon.name}
-              className="w-1/5 object-contain self-center"
+              className="w-1/5 ml-[5%] object-contain self-center"
             />
             <IvChart
               ivs={pokemon.ivs}
               statIncreased={statIncreased}
               statDecreased={statDecreased}
-              className="w-3/5 min-h-32"
+              className="w-[70%]"
             />
           </div>
 

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -32,6 +32,7 @@
     --stat-neutral: 222.2 47.4% 11.2%;
     --stat-increase: 335 26% 56%;
     --stat-decrease: 190 51% 65%;
+    --stat-max: 60 58.6% 58.26%;
   }
 
   .dark {
@@ -62,6 +63,7 @@
     --stat-neutral: 210 40% 98%;
     --stat-increase: 335 26% 56%;
     --stat-decrease: 190 51% 65%;
+    --stat-max: 60 70% 40%;
   }
 }
 

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1 +1,3 @@
 export const WAVE_GROUP_SIZE = 10;
+
+export const MAX_IV = 31;
diff --git a/src/utils/styleUtils.ts b/src/utils/styleUtils.ts
@@ -7,3 +7,12 @@ export const determineStyle = (content: string) => {
   }
   return style;
 };
+
+
+export const TAILWIND_RESPONSIVE_MIN_WIDTH = {
+  SM: 640,
+  MD: 768,
+  LG: 1024,
+  XL: 1280,
+  TWO_XL: 1536,
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,6 +17,9 @@ module.exports = {
       },
     },
     extend: {
+      screens: {
+        xs: "400px",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -57,6 +60,10 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontSize: {
+        "2xs": "0.625rem" /* 10px */,
+        "3xs": "0.5rem" /* 8px */,
+      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		export const WAVE_GROUP_SIZE = 10;

		export const MAX_IV = 31;