allow recurring colors

BoringBoredom · Mar 3, 2024 · c7b7f69 · c7b7f69
1 parent 8108c82
commit c7b7f69
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -99,9 +99,30 @@ export default function App() {
     localStorage.setItem("sortBy", sortBy);
   }, [sortBy]);
 
+  const [colorRepeat, setColorRepeat] = React.useState<number>(() => {
+    const colorRepeatValue = localStorage.getItem("colorRepeat");
+
+    let colorRepeat = 0;
+    if (colorRepeatValue) {
+      colorRepeat = parseInt(colorRepeatValue, 10);
+    }
+
+    return colorRepeat;
+  });
+
+  React.useEffect(() => {
+    localStorage.setItem("colorRepeat", colorRepeat.toString());
+  }, [colorRepeat]);
+
   return (
     <>
-      <Buttons data={data} setData={setData} sortBy={sortBy} colors={colors} />
+      <Buttons
+        data={data}
+        setData={setData}
+        sortBy={sortBy}
+        colors={colors}
+        colorRepeat={colorRepeat}
+      />
       {data.benches.length < 1 ? (
         <Group
           align="start"
@@ -116,6 +137,8 @@ export default function App() {
             setChartsPerRow={setChartsPerRow}
             sortBy={sortBy}
             setSortBy={setSortBy}
+            colorRepeat={colorRepeat}
+            setColorRepeat={setColorRepeat}
           />
           <ReadMe />
         </Group>

diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx
@@ -41,11 +41,13 @@ export default function Buttons({
   setData,
   sortBy,
   colors,
+  colorRepeat,
 }: {
   data: Data;
   setData: React.Dispatch<React.SetStateAction<Data>>;
   sortBy: (typeof sortOptions)[number];
   colors: typeof initialColors;
+  colorRepeat: number;
 }) {
   const resetRef = React.useRef<() => void>(null);
 
@@ -56,11 +58,19 @@ export default function Buttons({
         multiple
         accept=".csv,.json"
         onChange={(files) => {
-          void handleUpload(files, data, setData, sortBy, resetRef, colors);
+          void handleUpload(
+            files,
+            data,
+            setData,
+            sortBy,
+            resetRef,
+            colors,
+            colorRepeat
+          );
         }}
       >
         {(props) => (
-          <Tooltip label="Upload files (max. 14)">
+          <Tooltip label="Upload files">
             <ActionIcon size="2rem" variant="subtle" color="gray" {...props}>
               <IconUpload size="2rem" />
             </ActionIcon>

diff --git a/src/components/Misc/Misc.tsx b/src/components/Misc/Misc.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   FileButton,
   Text,
+  NumberInput,
 } from "@mantine/core";
 import { IconTrash, IconUpload } from "@tabler/icons-react";
 import s from "./Misc.module.css";
@@ -67,11 +68,15 @@ export default function Misc({
   setChartsPerRow,
   sortBy,
   setSortBy,
+  colorRepeat,
+  setColorRepeat,
 }: {
   chartsPerRow: number;
   setChartsPerRow: React.Dispatch<React.SetStateAction<number>>;
   sortBy: (typeof sortOptions)[number];
   setSortBy: React.Dispatch<React.SetStateAction<(typeof sortOptions)[number]>>;
+  colorRepeat: number;
+  setColorRepeat: React.Dispatch<React.SetStateAction<number>>;
 }) {
   const resetRef = React.useRef<() => void>(null);
 
@@ -97,6 +102,22 @@ export default function Misc({
           setSortBy(ev.target.value as (typeof sortOptions)[number]);
         }}
       />
+      <NumberInput
+        label="Repeat each color __ times"
+        value={colorRepeat}
+        onChange={(value) => {
+          if (typeof value === "number") {
+            setColorRepeat(value);
+          }
+        }}
+        min={0}
+        max={100}
+        clampBehavior="strict"
+        allowNegative={false}
+        allowDecimal={false}
+        stepHoldDelay={250}
+        stepHoldInterval={1}
+      />
       <Button
         leftSection={<IconTrash />}
         color="red"

diff --git a/src/components/ReadMe/ReadMe.tsx b/src/components/ReadMe/ReadMe.tsx
@@ -19,8 +19,7 @@ export default function ReadMe() {
       </Text>
       <Divider />
       <Text>
-        Press the Upload button in the upper-right corner to upload benchmarks
-        (max. 14).
+        Press the Upload button in the upper-right corner to upload benchmarks.
       </Text>
       <Text>
         After you upload files, you can export a screenshot of the whole page

diff --git a/src/components/scripts.ts b/src/components/scripts.ts
@@ -67,7 +67,8 @@ function calculateMetrics(
 function processCfxJson(
   name: string,
   bench: Cfx,
-  colors: typeof initialColors
+  colors: typeof initialColors,
+  colorRepeat: number
 ): Bench {
   let unsortedMs: number[] = [];
   const chartFormatMs: { x: number; y: number }[] = [];
@@ -113,7 +114,7 @@ function processCfxJson(
   return {
     name,
     uploaded: Date.now().toString(),
-    color: colors[benchIndex++],
+    color: colors[Math.floor(benchIndex++ / (colorRepeat + 1))],
     duration,
     frames: unsortedMs.length,
     ...(dropped.length !== 0 && {
@@ -157,7 +158,8 @@ function processCsv(
   lowerCaseSplitRow: string[],
   indicator: "msbetweenpresents" | "frametime" | "fps",
   transformFunc: (arg0: number) => number,
-  colors: typeof initialColors
+  colors: typeof initialColors,
+  colorRepeat: number
 ): Bench {
   const unsortedMs: number[] = [];
   const chartFormatMs: { x: number; y: number }[] = [];
@@ -222,7 +224,7 @@ function processCsv(
   return {
     name,
     uploaded: Date.now().toString(),
-    color: colors[benchIndex++],
+    color: colors[Math.floor(benchIndex++ / (colorRepeat + 1))],
     duration,
     frames: unsortedMs.length,
     ...(droppedIndex !== -1 && { dropped }),
@@ -248,12 +250,13 @@ export async function handleUpload(
   setData: React.Dispatch<React.SetStateAction<Data>>,
   sortBy: (typeof sortOptions)[number],
   resetRef: React.RefObject<() => void>,
-  colors: typeof initialColors
+  colors: typeof initialColors,
+  colorRepeat: number
 ) {
   const newBenches: Bench[] = [];
 
   for (const file of files) {
-    if (data.benches.length + newBenches.length >= 14) {
+    if (data.benches.length + newBenches.length >= 14 * (colorRepeat + 1)) {
       break;
     }
 
@@ -273,7 +276,8 @@ export async function handleUpload(
               lowerCaseSplitRow,
               "msbetweenpresents",
               (value) => value,
-              colors
+              colors,
+              colorRepeat
             )
           );
 
@@ -286,7 +290,8 @@ export async function handleUpload(
               lines[index + 2].toLowerCase().trim().split(","),
               "frametime",
               (value) => value,
-              colors
+              colors,
+              colorRepeat
             )
           );
 
@@ -299,7 +304,8 @@ export async function handleUpload(
               lowerCaseSplitRow,
               "fps",
               (value) => 1000 / value,
-              colors
+              colors,
+              colorRepeat
             )
           );
 
@@ -311,7 +317,8 @@ export async function handleUpload(
         processCfxJson(
           name.slice(0, -5),
           JSON.parse(await file.text()) as Cfx,
-          colors
+          colors,
+          colorRepeat
         )
       );
     }