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

Restructure into flex-centered compact grids with gap, translate & text scaling

Browse Source
This commit is contained in:
Xevion
2022-12-17 20:28:07 -06:00
parent 903efc6166
commit f9c48d3400
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/BoxTable.tsx
View File

@@ -98,18 +98,20 @@ const BoxTable = () => {
const columns = Math.ceil(Math.sqrt(boxes.length));
return (
<>
<div className="grid w-full space-y-2"
<div className="flex flex-col items-center justify-center w-full">
<div className="grid gap-4 max-w-full"
style={{gridTemplateColumns: `repeat(${Math.max(3, columns)}, minmax(0, 1fr))`}}>
{boxes.map(([source, destination]) =>
<div key={source}
className={classNames("col-span-1 px-2", isFiltered && filteredBoxes[source] ? "opacity-0 pointer-events-none" : null)}
className={classNames("col-span-1 aspect-square", isFiltered && filteredBoxes[source] ? "opacity-0 pointer-events-none" : "")}
onClick={() => toggleLines(source)} 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">
<div
className="text flex items-center justify-center w-full h-full text-[150%] absolute pt-[30%] cursor-pointer">{destination}</div>
<BoxGraphic id={source.toString()}
className="w-full transition-all cursor-pointer relative z-30">
{source}
</BoxGraphic>
{enabledLines[source] ?
@@ -120,7 +122,7 @@ const BoxTable = () => {
</div>
)}
</div>
</>
</div>
);
}

4
src/styles/globals.scss
View File

@@ -11,13 +11,13 @@ body {
}
.box {
@apply transition-all;
@apply transition-all max-h-[6rem];
.arrow { @apply drop-shadow-lg; }
> .text { @apply transition-opacity opacity-30; }
&:hover {
> .text { @apply opacity-100; }
> svg {
@apply max-w-full max-h-full -translate-y-7;
@apply max-w-full max-h-full -translate-y-[40%];
}
}
}