From eb63f0b3fdca7ea3c2c8c2451b3718febba55763 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sun, 18 Dec 2022 17:56:38 -0600
Subject: [PATCH] Adjust loopback arrow, memoized responsive loop state, center
 boxes

- Boxes weren't centered, this was more noticeable for smaller loop sizes
---
 src/components/BoxLoop.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/BoxLoop.tsx b/src/components/BoxLoop.tsx
index 82c50e0..ef7bc10 100644
--- a/src/components/BoxLoop.tsx
+++ b/src/components/BoxLoop.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent, useState} from "react";
+import React, {FunctionComponent, useMemo} from "react";
 import Chance from "chance";
 import {getColor, range} from "@/utils/helpers";
 import BoxGraphic from "@/components/BoxGraphic";
@@ -35,18 +35,20 @@ function createLoop(loopRange: [number, number], count: number): { start: number
 }
 
 const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
-    const [{loop, start, list}] = useState(createLoop([1, 100], count)!);
+    const {loop, list} = useMemo(() => {
+        return createLoop([1, 100], count)!;
+    }, [count])
 
-    return <div className="grid grid-cols-5 gap-x-10 pb-5"
+    return <div className="grid gap-x-10 pb-0"
                 style={{gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`}}>
         {list.map((v, index) => {
             const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`];
             const isLast = index == count - 1;
 
             return (
-                <div key={v} className={"col-span-1 aspect-square"}>
+                <div key={v} className="col-span-1 flex flex-col items-center aspect-square">
                     <div
-                        className="box flex items-center justify-center aspect-square relative">
+                        className="box flex flex-col 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[v]}</div>
                         <BoxGraphic id={sourceKey}
@@ -54,11 +56,14 @@ const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
                             {v}
                         </BoxGraphic>
                         {loop[v] ?
-                            <Xarrow path="smooth" curveness={1.4} color={getColor(v)}
-                                    startAnchor={isLast ? "bottom" : "right"} endAnchor={isLast ? "bottom" : "left"}
-                                    showHead={!isLast} headSize={4}
+                            <Xarrow curveness={1.4} color={getColor(v)}
+                                    startAnchor={isLast ? "bottom" : "right"}
+                                    endAnchor={isLast ? {position: "right", offset: {x: 0, y: 20}} : "left"}
+                                    showHead={true} headSize={4}
                                     _cpy1Offset={isLast ? 100 : 0}
                                     _cpx1Offset={isLast ? -200 : 0}
+                                    _cpy2Offset={isLast ? count * 30 : 0}
+                                    _cpx2Offset={isLast ? -400 : 0}
                                     start={sourceKey} end={destinationKey.toString()}
                                     zIndex={50 + v} divContainerProps={{className: "arrow"}}/> : null}
                     </div>