xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-06 05:14:21 -06:00
Code Issues Packages Projects Releases Wiki Activity

Adjust loopback arrow, memoized responsive loop state, center boxes

Browse Source 
- Boxes weren't centered, this was more noticeable for smaller loop sizes
This commit is contained in:
Xevion
2022-12-18 17:56:38 -06:00
parent cdb4866296
commit eb63f0b3fd
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/BoxLoop.tsx
View File

@@ -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>