mirror of
https://github.com/Xevion/100prisoners.git
synced 2025-12-07 20:06:20 -06:00
Abstract header/footer & document body into Page component
This commit is contained in:
Xevion
33
src/components/Page.tsx
Normal file
33
src/components/Page.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import type {FunctionComponent} from "react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Page: FunctionComponent<PageProps> = ({children}: PageProps) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="flex w-full flex-col items-center bg-white">
|
||||||
|
<div className="mt-8 px-3 max-w-screen-md w-[90%]">
|
||||||
|
<h1 className="text-3xl font-rokkitt text-zinc-800 sm:text-5xl mb-2">100Prisoners.com</h1>
|
||||||
|
{children}
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="grid py-1 grid-cols-1 gap-x-1 whitespace-nowrap divide-x-2">
|
||||||
|
<div className="col-span-1 p-2">
|
||||||
|
Created by <Link href={"https://xevion.dev"} about="_blank">
|
||||||
|
<span className="font-bold">
|
||||||
|
Ryan Walters
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -2,7 +2,7 @@ import {type NextPage} from "next";
|
|||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import BoxTable from "@/components/BoxTable";
|
import BoxTable from "@/components/BoxTable";
|
||||||
import NoSSR from "react-no-ssr";
|
import NoSSR from "react-no-ssr";
|
||||||
import Link from "next/link";
|
import Page from "@/components/Page";
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
@@ -11,58 +11,44 @@ const Home: NextPage = () => {
|
|||||||
<title>100prisoners.com</title>
|
<title>100prisoners.com</title>
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
</Head>
|
</Head>
|
||||||
<main className="flex w-full flex-col items-center bg-white">
|
<Page>
|
||||||
<div className="mt-8 px-3 max-w-screen-md w-[90%]">
|
<div className="prose lg:prose-xl">
|
||||||
<h1 className="text-3xl font-rokkitt text-zinc-800 sm:text-5xl mb-2">100Prisoners.com</h1>
|
<p>
|
||||||
<div className="prose lg:prose-xl">
|
This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
|
||||||
<p>
|
challenge that seems astronomically impossible at first, yet can leverage mathematics to
|
||||||
This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
|
raise the chances one hundred octillion.
|
||||||
challenge that seems astronomically impossible at first, yet can leverage mathematics to
|
</p>
|
||||||
raise the chances one hundred octillion.
|
<p>
|
||||||
</p>
|
This thought experiment presents a scenario in which a group of 100 prisoners are tasked
|
||||||
<p>
|
with finding their own numbered slip among a collection of 100 boxes, each containing a
|
||||||
This thought experiment presents a scenario in which a group of 100 prisoners are tasked
|
random permutation of the numbers 1 through 100.
|
||||||
with finding their own numbered slip among a collection of 100 boxes, each containing a
|
</p>
|
||||||
random permutation of the numbers 1 through 100.
|
<ul>
|
||||||
</p>
|
<li>
|
||||||
<ul>
|
Each prisoner is allowed to open 50 boxes.
|
||||||
<li>
|
</li>
|
||||||
Each prisoner is allowed to open 50 boxes.
|
<li>
|
||||||
</li>
|
Each prisoner must find their own number within a box, or they fail.
|
||||||
<li>
|
</li>
|
||||||
Each prisoner must find their own number within a box, or they fail.
|
<li>
|
||||||
</li>
|
All prisoners must be successful - if even one fails, they all lose.
|
||||||
<li>
|
</li>
|
||||||
All prisoners must be successful - if even one fails, they all lose.
|
<li>
|
||||||
</li>
|
Prisoners cannot mark, relay or in any way communicate with each other.
|
||||||
<li>
|
</li>
|
||||||
Prisoners cannot mark, relay or in any way communicate with each other.
|
</ul>
|
||||||
</li>
|
<p>
|
||||||
</ul>
|
Given the premise, the lack of options, and the incredibly tiny odds, one would presume
|
||||||
<p>
|
this challenge to be impossible - but it turns out there is a strategy that guarantees a
|
||||||
Given the premise, the lack of options, and the incredibly tiny odds, one would presume
|
<b> 31%</b> chance of success!
|
||||||
this challenge to be impossible - but it turns out there is a strategy that guarantees a
|
</p>
|
||||||
<b> 31%</b> chance of success!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="pt-7 pb-8">
|
|
||||||
<NoSSR>
|
|
||||||
<BoxTable/>
|
|
||||||
</NoSSR>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<div className="grid py-1 grid-cols-1 gap-x-1 whitespace-nowrap divide-x-2">
|
|
||||||
<div className="col-span-1 p-2">
|
|
||||||
Created by <Link href={"https://xevion.dev"} about="_blank">
|
|
||||||
<span className="font-bold">
|
|
||||||
Ryan Walters
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div className="pt-7 pb-8">
|
||||||
|
<NoSSR>
|
||||||
|
<BoxTable/>
|
||||||
|
</NoSSR>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user