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

2025-12-06 01:14:17 -06:00 · 2022-12-17 16:15:10 -06:00
parent ea0785cc97
commit 30343f1d48
7 changed files with 96 additions and 23 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.idea

 # dependencies
 /node_modules
--- a/package.json
+++ b/package.json
@@ -15,10 +15,12 @@
    "@trpc/react-query": "^10.0.0",
    "@trpc/server": "^10.0.0",
    "@types/chance": "^1.1.3",
+    "@types/react-no-ssr": "^1.1.3",
    "chance": "^1.1.9",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-no-ssr": "^1.1.0",
    "sass": "^1.57.0",
    "superjson": "1.9.1",
    "zod": "^3.18.0"
--- a/src/components/BoxGraphic.tsx
+++ b/src/components/BoxGraphic.tsx
@@ -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}/>
--- a/src/components/BoxTable.tsx
+++ b/src/components/BoxTable.tsx
@@ -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;
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -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>
        </>
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -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;
+    }
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -228,6 +228,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-no-ssr@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@types/react-no-ssr/-/react-no-ssr-1.1.3.tgz#895baced8f49e270289c8ad11be1a4a50328d243"
+  integrity sha512-uMR17qGISe0qTTiVFuRfatP+9plEe/Q0beQ47xy0OXatwb3Z2bEj3OW7FC+9PVqCYEsfR4b01LU9tXw2urzBzw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.0.14":
  version "18.0.26"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
@@ -481,6 +488,14 @@ axobject-query@^2.2.0:
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==

+babel-runtime@6.x.x:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -601,6 +616,11 @@ core-js-pure@^3.25.1:
  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.26.1.tgz#653f4d7130c427820dcecd3168b594e8bb095a33"
  integrity sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==

+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 cross-spawn@^7.0.2:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1831,6 +1851,13 @@ react-is@^16.13.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-no-ssr@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-no-ssr/-/react-no-ssr-1.1.0.tgz#313b48d2e26020f969ed98e472f10481604e3cc8"
+  integrity sha512-3td8iPIEFKWXOJ3Ar5xURvZAsv/aIlngJLBH6fP5QC3WhsfuO2pn7WQR0ZlkTE0puWCL0RDEvXtOfAg4qMp+xA==
+  dependencies:
+    babel-runtime "6.x.x"
+
 react-ssr-prepass@^1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz#bc4ca7fcb52365e6aea11cc254a3d1bdcbd030c5"
@@ -1857,6 +1884,11 @@ readdirp@~3.6.0:
  dependencies:
    picomatch "^2.2.1"

+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.13.11:
  version "0.13.11"
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"