Working arrows pointing between boxes

src/components/BoxGraphic.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 interface BoxGraphicProps {
+    id?: string;
     className?: string;
     children: React.ReactNode;
 }
@@ -23,8 +24,8 @@ const [xOffset, yOffset] = [-180, -100];
 points = Object.fromEntries(Object.entries(points).map(([k, p]) => [k, [p[0] + xOffset, p[1] + yOffset]]))
 const {A, B, C, D, E, F, Z} = points;
 
-const BoxGraphic = ({children, className}: BoxGraphicProps) => {
-    return <svg className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
+const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
+    return <svg id={id} className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
         <g shapeRendering="auto">
             <path id="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`} fill={leftColor}/>
             <path id="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`} fill={rightColor}/>

src/components/BoxTable.tsx

@@ -1,27 +1,47 @@
 import {range} from "../utils/helpers";
 import BoxGraphic from "./BoxGraphic";
+import Xarrow from "react-xarrows";
 
 import Chance from "chance";
+import {useState} from "react";
 
 const chance = new Chance();
-const sources = range(0, 100 - 1);
+const sources = range(1, 100);
 const destinations = chance.shuffle(sources);
 const boxes: [number, number][] = sources.map((e, i) => [e, destinations[i] as number])
 
 const BoxTable = () => {
+    const [line, setLine] = useState<[string, string] | null>(null);
+
+    const showLine = (from: number, to: number) => {
+        setLine([from.toString(), to.toString()]);
+    }
+
+    const hideLine = () => {
+        setLine(null);
+    }
+
+    const columns = Math.ceil(Math.sqrt(boxes.length));
     return (
-        <div className="grid grid-cols-10 w-full space-y-2">
-            {boxes.map(([source, destination]) =>
-                <div key={source} className="col-span-1 px-2">
-                    <div className="box aspect-square relative">
-                        <span className="absolute left-6 top-8 cursor-pointer">{destination}</span>
-                        <BoxGraphic className="transition-all cursor-pointer relative z-30">
-                            {source + 1}
-                        </BoxGraphic>
+        <>
+            {line != null ? <Xarrow color={"red"} start={line[0]} end={line[1]} zIndex={50}/> : null}
+            <div className="grid w-full space-y-2"
+                 style={{gridTemplateColumns: `repeat(${Math.max(3, columns)}, minmax(0, 1fr))`}}>
+                {boxes.map(([source, destination]) =>
+                    <div key={source} className="col-span-1 px-2" onMouseEnter={() => showLine(source, destination)}
+                         onMouseLeave={hideLine}>
+                        <div
+                            className="box flex items-center justify-center aspect-square relative">
+                            <div className="text absolute pt-[30%] cursor-pointer">{destination}</div>
+                            <BoxGraphic id={source.toString()} className="transition-all cursor-pointer relative z-30">
+                                {source}
+                            </BoxGraphic>
+
+                        </div>
                     </div>
-                </div>
-            )}
-        </div>
+                )}
+            </div>
+        </>
     );
 }
 

src/styles/globals.scss

@@ -10,17 +10,13 @@ body {
   font-family: "Merriweather", serif;
 }
 
-svg {
-  @apply max-w-full max-h-full;
-}
-
 .box {
   @apply transition-all;
-  > span { @apply transition-opacity opacity-30; }
+  > .text { @apply transition-opacity opacity-30; }
   &:hover {
-    > span { @apply opacity-100; }
+    > .text { @apply opacity-100; }
     > svg {
-      @apply -translate-y-7;
+      @apply max-w-full max-h-full -translate-y-7;
     }
   }
 }