From 3021aac384af341d7a766b4653a6ed9fe52ca3bc Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sun, 18 Dec 2022 00:33:08 -0600
Subject: [PATCH] Header link, move Boxtable, add instructions

---
 src/components/Page.tsx |  4 +++-
 src/pages/index.tsx     | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 276f01b..590056d 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -11,7 +11,9 @@ const Page: FunctionComponent<PageProps> = ({children}: PageProps) => {
         <>
             <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>
+                    <h1 className="text-3xl font-rokkitt text-zinc-800 sm:text-5xl mb-2">
+                        <Link href={"/"}>100Prisoners.com</Link>
+                    </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">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 510eafd..bfaba67 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,6 +18,17 @@ const Home: NextPage = () => {
                         challenge that seems astronomically impossible at first, yet can leverage mathematics to
                         raise the chances one hundred octillion.
                     </p>
+                    <div className="flex flex-col items-center">
+                        <div className="text-zinc-400 mb-4 text-base text-center">
+                            <p className="!mt-0">
+                                Hover to see part of the loop. <br/>
+                                Click to hide boxes outside the loop and see more of the loop.
+                            </p>
+                        </div>
+                        <NoSSR>
+                            <BoxTable/>
+                        </NoSSR>
+                    </div>
                     <p>
                         This thought experiment presents a scenario in which a group of 100 prisoners are tasked
                         with finding their own numbered slip among a collection of 100 boxes, each containing a
@@ -43,11 +54,7 @@ const Home: NextPage = () => {
                         <b> 31%</b> chance of success!
                     </p>
                 </div>
-                <div className="pt-7 pb-8">
-                    <NoSSR>
-                        <BoxTable/>
-                    </NoSSR>
-                </div>
+
             </Page>
         </>
     );