xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-06 07: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)); const columns = Math.ceil(Math.sqrt(boxes.length));
return ( return (
<> <div className="flex flex-col items-center justify-center w-full">
<div className="grid w-full space-y-2" <div className="grid gap-4 max-w-full"
style={{gridTemplateColumns: `repeat(${Math.max(3, columns)}, minmax(0, 1fr))`}}> style={{gridTemplateColumns: `repeat(${Math.max(3, columns)}, minmax(0, 1fr))`}}>
{boxes.map(([source, destination]) => {boxes.map(([source, destination]) =>
<div key={source} <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)} onClick={() => toggleLines(source)} onMouseEnter={() => showLine(source)}
onMouseLeave={() => hideLine(source)}> onMouseLeave={() => hideLine(source)}>
<div <div
className="box flex items-center justify-center aspect-square relative"> className="box flex items-center justify-center aspect-square relative">
<div className="text absolute pt-[30%] cursor-pointer">{destination}</div> <div
<BoxGraphic id={source.toString()} className="transition-all cursor-pointer relative z-30"> 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} {source}
</BoxGraphic> </BoxGraphic>
{enabledLines[source] ? {enabledLines[source] ?
@@ -120,7 +122,7 @@ const BoxTable = () => {
</div> </div>
)} )}
</div> </div>
</> </div>
); );
} }

4
src/styles/globals.scss
View File

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