xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-15 18: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

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>
</>