xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-06 15:14:20 -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 Chance from "chance";
import {getColor, range} from "@/utils/helpers"; import {getColor, range} from "@/utils/helpers";
import BoxGraphic from "@/components/BoxGraphic"; 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 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))`}}> style={{gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`}}>
{list.map((v, index) => { {list.map((v, index) => {
const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`]; const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`];
const isLast = index == count - 1; const isLast = index == count - 1;
return ( 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 <div
className="box flex items-center justify-center aspect-square relative"> className="box flex flex-col items-center justify-center aspect-square relative">
<div <div
className="text flex items-center justify-center w-full h-full text-[150%] absolute pt-[30%] cursor-pointer">{loop[v]}</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} <BoxGraphic id={sourceKey}
@@ -54,11 +56,14 @@ const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
{v} {v}
</BoxGraphic> </BoxGraphic>
{loop[v] ? {loop[v] ?
<Xarrow path="smooth" curveness={1.4} color={getColor(v)} <Xarrow curveness={1.4} color={getColor(v)}
startAnchor={isLast ? "bottom" : "right"} endAnchor={isLast ? "bottom" : "left"} startAnchor={isLast ? "bottom" : "right"}
showHead={!isLast} headSize={4} endAnchor={isLast ? {position: "right", offset: {x: 0, y: 20}} : "left"}
showHead={true} headSize={4}
_cpy1Offset={isLast ? 100 : 0} _cpy1Offset={isLast ? 100 : 0}
_cpx1Offset={isLast ? -200 : 0} _cpx1Offset={isLast ? -200 : 0}
_cpy2Offset={isLast ? count * 30 : 0}
_cpx2Offset={isLast ? -400 : 0}
start={sourceKey} end={destinationKey.toString()} start={sourceKey} end={destinationKey.toString()}
zIndex={50 + v} divContainerProps={{className: "arrow"}}/> : null} zIndex={50 + v} divContainerProps={{className: "arrow"}}/> : null}
</div> </div>