Initial commit of frontend

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+*.vim

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/card.js

@@ -0,0 +1,19 @@
+import styles from "../styles/everything.module.css";
+
+export default function Card({
+  children,
+  primary = true,
+  onClick = undefined,
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={`${styles.card} ${
+        primary ? styles.primary : styles.secondary
+      }`}
+      style={{ cursor: onClick ? "pointer" : "auto" }}
+    >
+      {children}
+    </div>
+  );
+}

components/navbar.js

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import styles from "../styles/everything.module.css";
+import Link from "next/link";
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  return (
+    <header className={styles.header}>
+      <div id={styles.brand}>
+        <Link href="/">2022 /r/place Tools</Link>
+      </div>
+      <nav>
+        <ul className={styles.hul}>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://place-atlas.stefanocoding.me/"
+            >
+              Atlas
+            </a>
+          </li>
+          <li>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://place-wiki.stefanocoding.me/"
+            >
+              Wiki
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className={open ? styles["open"] : ""}
+        id={styles["hamburger-icon"]}
+        onClick={() => setOpen(!open)}
+      >
+        <div className={styles.bar1}></div>
+        <div className={styles.bar2}></div>
+        <div className={styles.bar3}></div>
+        <ul className={`${styles["mobile-menu"]} ${styles.hul}`}>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://place-atlas.stefanocoding.me/"
+            >
+              Atlas
+            </a>
+          </li>
+          <li>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://place-wiki.stefanocoding.me/"
+            >
+              Wiki
+            </a>
+          </li>
+        </ul>
+      </div>
+    </header>
+  );
+}
+

components/pixels.js

@@ -0,0 +1,100 @@
+import Card from "./card";
+import styles from "../styles/everything.module.css";
+
+export default function Pixels({ pixels, image = true, uid = false }) {
+  /*
+  Example pixels:
+  {
+   "count" : 18,
+   "pixels" : [
+      {
+         "createdAt" : null,
+         "id" : 10737584,
+         "pixel_color" : "#000000",
+         "timestamp" : "2022-04-01T16:13:59.866Z",
+         "updatedAt" : null,
+         "user_id" : "qquPzVansWsmGZcq46mfvtSilJh9/UoOcpbE/Q9cTsTUoc0R833I9Kx6ZwpfJBYh1rN6u/gui+K0pAkQvT5f7A==",
+         "x" : 24,
+         "x2" : null,
+         "y" : 942,
+         "y2" : null
+      },
+      ...
+   ],
+   "status" : "ok"
+}
+  */
+
+  // The current pixel being displayed
+  // const [current, setCurrent] = useState(0);
+  if (pixels && pixels.count !== 0) {
+    // 220px because that is 200px + 10px*2 padding
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {pixels.pixels.map((px) => (
+          <Card key={px.timestamp} style={{ maxWidth: "300px" }}>
+            {image ? (
+              <div
+                style={{
+                  height: "300px",
+                  width: "300px",
+                  backgroundImage:
+                    'url("https://placedata.reddit.com/data/final_place_3x.png")',
+                  backgroundPosition: `${
+                    px.x * -3 + 100 <= 0 ? px.x * -3 + 100 : 0
+                  }px ${px.y * -3 + 100 <= 0 ? px.y * -3 + 100 : 0}px`,
+                  borderRadius: "5% 5% 0% 0%",
+                }}
+              />
+            ) : (
+              ""
+            )}
+            <div style={{ padding: "5px 20px", inlineSize: "290px" }}>
+              <p>Coordinates: {`(${px.x}, ${px.y})`}</p>
+              <div style={{ padding: "0" }}>
+                <p
+                  style={{
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    lineHeight: "1em",
+                    margin: "0",
+                  }}
+                >
+                  Color: {px.pixel_color}
+                </p>
+                <div
+                  style={{
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    marginLeft: "5px",
+                    height: "1em",
+                    width: "1em",
+                    background: px.pixel_color,
+                  }}
+                />
+              </div>
+              {uid ? (
+                <p style={{ wordWrap: "break-word" }}>User id: {px.user_id}</p>
+              ) : (
+                ""
+              )}
+              <p>Time placed: {new Date(px.timestamp).toUTCString()}</p>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  } else if (pixels && pixels.count === 0) {
+    return (
+      <p className={`${styles.error} ${styles.active}`}>No results found</p>
+    );
+  }
+}

next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  env: {
+    API_URL: process.env.API_URL,
+  }
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "place-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-datepicker": "^4.7.0",
+    "react-dom": "18.0.0"
+  },
+  "devDependencies": {
+    "eslint": "8.13.0",
+    "eslint-config-next": "12.1.4"
+  }
+}

pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/index.js

@@ -0,0 +1,42 @@
+import Head from "next/head";
+import Card from "../components/card";
+import styles from "../styles/everything.module.css";
+import Navbar from "../components/navbar";
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>2022 /r/place Helper Tools</title>
+        <meta
+          name="description"
+          content="Tools for Reddit's experiment, r/place 2022"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Navbar />
+      <div className={styles.main}>
+        <h1>All tools</h1>
+        <Card
+          primary={true}
+          style={{ maxWidth: "200px" }}
+          onClick={() => (location.href = "remaining")}
+        >
+          <p style={{ padding: "20px" }}>
+            Pixels Remaining <br />
+            Did your pixels make it to the final canvas?
+          </p>
+        </Card>
+        <Card
+          style={{ maxWidth: "200px" }}
+          onClick={() => (location.href = "remaining")}
+        >
+          <p style={{ padding: "20px" }}>
+            Pixel Search <br /> Find all pixels placed in an area between two
+            times.
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}