Box count as property

- Uncomitted changes from previous (pushed) commit in BoxTable.tsx

src/components/BoxLoop.tsx

@@ -1,12 +1,11 @@
 import React, {FunctionComponent, useState} from "react";
 import Chance from "chance";
-import {classNames, getColor, range} from "@/utils/helpers";
+import {getColor, range} from "@/utils/helpers";
-import {create} from "domain";
 import BoxGraphic from "@/components/BoxGraphic";
 import Xarrow from "react-xarrows";
 
 interface BoxLoopProps {
-
+    count: number;
 }
 
 /**
@@ -35,35 +34,33 @@ function createLoop(loopRange: [number, number], count: number): { start: number
     return {start, loop, list};
 }
 
-const BoxLoop: FunctionComponent<BoxLoopProps> = ({}: BoxLoopProps) => {
+const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
-    const count = 5;
     const [{loop, start, list}] = useState(createLoop([1, 100], count)!);
 
-    return <div className="grid grid-cols-5 gap-x-10 pb-5">
+    return <div className="grid grid-cols-5 gap-x-10 pb-5"
-        {list.map((i, index) => {
+                style={{gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`}}>
-            const [sourceKey, destinationKey] = [`x-${i}`, `x-${loop[i]}`];
+        {list.map((v, index) => {
-            let anchor = ["top", "bottom"];
+            const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`];
-            if (index % 2 == 0) anchor.reverse()
             const isLast = index == count - 1;
 
             return (
-                <div key={i} className={"col-span-1 aspect-square"}>
+                <div key={v} className={"col-span-1 aspect-square"}>
                     <div
                         className="box flex items-center justify-center aspect-square relative">
                         <div
-                            className="text flex items-center justify-center w-full h-full text-[150%] absolute pt-[30%] cursor-pointer">{loop[i]}</div>
+                            className="text flex items-center justify-center w-full h-full text-[150%] absolute pt-[30%] cursor-pointer">{loop[v]}</div>
                         <BoxGraphic id={sourceKey}
                                     className="w-full transition-all cursor-pointer relative z-30">
-                            {i}
+                            {v}
                         </BoxGraphic>
-                        {loop[i] ?
+                        {loop[v] ?
-                            <Xarrow path="smooth" curveness={1.4} color={getColor(i)}
+                            <Xarrow path="smooth" curveness={1.4} color={getColor(v)}
                                     startAnchor={isLast ? "bottom" : "right"} endAnchor={isLast ? "bottom" : "left"}
                                     showHead={!isLast} headSize={4}
                                     _cpy1Offset={isLast ? 100 : 0}
                                     _cpx1Offset={isLast ? -200 : 0}
                                     start={sourceKey} end={destinationKey.toString()}
-                                    zIndex={50 + i} divContainerProps={{className: "arrow"}}/> : null}
+                                    zIndex={50 + v} divContainerProps={{className: "arrow"}}/> : null}
                     </div>
                 </div>
             );

src/components/BoxTable.tsx

@@ -1,4 +1,4 @@
-import {classNames, range} from "@/utils/helpers";
+import {classNames, getColor, range} from "@/utils/helpers";
 import BoxGraphic from "@/components/BoxGraphic";
 import Xarrow from "react-xarrows";
 
@@ -6,25 +6,7 @@ import Chance from "chance";
 import {useMemo, useState} from "react";
 
 const chance = new Chance();
-const colors = [
+
-    "#EF4444",
-    "#F97316",
-    "#F59E0B",
-    "#EAB308",
-    "#84CC16",
-    "#22C55E",
-    "#10B981",
-    "#14B8A6",
-    "#06B6D4",
-    "#0EA5E9",
-    "#3B82F6",
-    "#6366F1",
-    "#8B5CF6",
-    "#A855F7",
-    "#D946EF",
-    "#EC4899",
-    "#F43F5E",
-]
 
 const smartShuffle = (n: number[]): number[] => {
     let shuffled: number[] | null = null;
@@ -91,11 +73,6 @@ const BoxTable = () => {
         setEnabledLines((prev) => ({...prev, ...loop}))
     }
 
-    const getColor = (seed: any) => {
-        const chance = Chance(seed);
-        return chance.pickone(colors);
-    }
-
     const columns = Math.ceil(Math.sqrt(boxes.length));
     return (
         <div className="flex flex-col items-center justify-center w-full">

src/pages/index.tsx

@@ -72,7 +72,7 @@ const Home: NextPage = () => {
                         the boxes have an interesting structure to their existence.
                     </p>
                     <div className="pt-4 pb-2">
-                        <BoxLoop/>
+                        <BoxLoop count={5}/>
                     </div>
                     <p>
                         No matter what number of configuration of boxes is given, a loop, a sequence of numbers that