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

Use antialiasing again, no SSR on table, extract to BoxTable, transparent text

Browse Source
This commit is contained in:
Xevion
2022-12-17 16:15:10 -06:00
parent ea0785cc97
commit 30343f1d48
7 changed files with 96 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BoxGraphic.tsx
View File

@@ -25,7 +25,7 @@ const {A, B, C, D, E, F, Z} = points;
const BoxGraphic = ({children, className}: BoxGraphicProps) => {
return <svg className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
<g shapeRendering="crispEdges">
<g shapeRendering="auto">
<path id="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`} fill={leftColor}/>
<path id="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`} fill={rightColor}/>
<path id="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`} fill={topColor}/>

28
src/components/BoxTable.tsx Normal file
View File

@@ -0,0 +1,28 @@
import {range} from "../utils/helpers";
import BoxGraphic from "./BoxGraphic";
import Chance from "chance";
const chance = new Chance();
const sources = range(0, 100 - 1);
const destinations = chance.shuffle(sources);
const boxes: [number, number][] = sources.map((e, i) => [e, destinations[i] as number])
const BoxTable = () => {
return (
<div className="grid grid-cols-10 w-full space-y-2">
{boxes.map(([source, destination]) =>
<div key={source} className="col-span-1 px-2">
<div className="box aspect-square relative">
<span className="absolute left-6 top-8 cursor-pointer">{destination}</span>
<BoxGraphic className="transition-all cursor-pointer relative z-30">
{source + 1}
</BoxGraphic>
</div>
</div>
)}
</div>
);
}
export default BoxTable;

28
src/pages/index.tsx
View File

@@ -1,16 +1,9 @@
import {type NextPage} from "next";
import Head from "next/head";
import BoxGraphic from "../components/BoxGraphic";
import Chance from "chance";
import {range} from "../utils/helpers";
const chance = new Chance();
import BoxTable from "../components/BoxTable";
import NoSSR from "react-no-ssr";
const Home: NextPage = () => {
const sources = range(0, 100);
const destinations = chance.shuffle(sources);
const boxes = sources.map((e, i) => [e, destinations[i]])
return (
<>
<Head>
@@ -18,7 +11,7 @@ const Home: NextPage = () => {
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className="flex min-h-screen flex-col items-center bg-white">
<div className="mt-8 px-3 w-[50rem] space-y-3">
<div className="mt-8 px-3 max-w-[50rem] w-[80%] space-y-3">
<h1 className="text-4xl mb-2">100Prisoners.com</h1>
<div>
This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
@@ -32,18 +25,9 @@ const Home: NextPage = () => {
attempt to find their own number, and all of the prisoners must be successful in order to be set
free. This problem raises questions about strategy and probability in search of a solution.
</div>
<div className="grid grid-cols-10 w-full space-y-2">
{boxes.map(([source, destination]) =>
<div className="col-span-1 px-2">
<div key={source} className="box aspect-square relative">
<span className="absolute left-6 top-8 cursor-pointer">{destination}</span>
<BoxGraphic className="transition-all cursor-pointer relative z-30">
{source + 1}
</BoxGraphic>
</div>
</div>
)}
</div>
<NoSSR>
<BoxTable/>
</NoSSR>
</div>
</main>
</>

26
src/styles/globals.scss Normal file
View File

@@ -0,0 +1,26 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: "Merriweather", serif;
}
svg {
@apply max-w-full max-h-full;
}
.box {
@apply transition-all;
> span { @apply transition-opacity opacity-30; }
&:hover {
> span { @apply opacity-100; }
> svg {
@apply -translate-y-7;
}
}
}