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

Per-box arrow refactor, stateful

Browse Source
This commit is contained in:
Xevion
2022-12-17 17:38:42 -06:00
parent 3547b83b3e
commit 55ba803bf9
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/BoxTable.tsx
View File

@@ -6,37 +6,43 @@ import Chance from "chance";
import {useState} from "react";
const chance = new Chance();
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 [sources] = useState<number[]>(range(1, 100));
const [destinations] = useState<number[]>(chance.shuffle(sources));
const [boxes] = useState<[number, number][]>(sources.map((e, i) => [e, destinations[i] as number]))
const showLine = (from: number, to: number) => {
setLine([from.toString(), to.toString()]);
const [enabledLines, setEnabledLines] = useState<Record<number, boolean>>(Object.fromEntries(
sources.map(n => [n, false])
));
const showLine = (from: number) => {
setEnabledLines((prev) => ({...prev, [from]: true}))
}
const hideLine = () => {
setLine(null);
const hideLine = (from: number) => {
setEnabledLines((prev) => ({...prev, [from]: false}))
}
const columns = Math.ceil(Math.sqrt(boxes.length));
return (
<>
{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 key={source} className="col-span-1 px-2" onMouseEnter={() => showLine(source)}
onMouseLeave={() => hideLine(source)}>
<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>
{enabledLines[source] ?
<Xarrow color={"red"} start={source.toString()} end={destination.toString()}
zIndex={50 + source}/> : null}
</div>
</div>
)}