update gitignore

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 # prisma data
 /prisma/migrations
 /prisma/borders.db
+
+/public/images

components/select.js

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import styles from "../styles/Components.module.css";
+
+export default function Select(props) {
+  const { data, onSelect, selected = {} } = props;
+  console.log("data", data, "selected", selected);
+  return (
+    <div className={styles.select}>
+      {data &&
+        data.map((border, index) => {
+          return (
+            <div
+              className={[
+                styles.borderKeeper,
+                selected == border.id ? styles.selected : undefined,
+              ].join(" ")}
+              key={border.id}>
+              <Image
+                className={styles.userImage}
+                src="/user.png"
+                alt="user image"
+                width={128}
+                height={128}
+                onClick={(ev) => {
+                  onSelect(border.id);
+                }}
+              />
+              <Image
+                className={styles.borderImage}
+                src={`/images/${border.imageName}`}
+                alt={`border with id ${border.id}`}
+                width={132}
+                height={132}
+                onClick={(ev) => {
+                  onSelect(border.id);
+                }}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
+}

components/userInfo.js

@@ -2,44 +2,23 @@ import { useSession, signIn, signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";
 
-export default function UserInfo(borderInfo) {
+export default function UserInfo(props) {
   const { data: session } = useSession();
-  const [isLoading, setLoading] = useState(false);
-  const [borderData, setBorderData] = useState(undefined);
-
-  useEffect(async () => {
-    setLoading(true);
-    const res = await fetch('api/user/border/@me');
-    const data = await res.json();
-    setBorderData(data);
-    setLoading(false);
-  }, []);
+  const { borderData } = props;
 
   return (
-    <div>{
-      isLoading ?
-        <p>Loading...</p>
-        :
-        <div>
-          <p className={styles.description}>
-            {session ? `Signed in as ${session.user.name} (${borderData.discordId})` : "Not signed in"}
-            <br />
-            {session ? (
-              <button onClick={() => signOut()}>Sign Out</button>
-            ) : (
-              <button onClick={() => signIn()}>Sign In</button>
-            )}
-          </p>
-          {
-            !!borderData ?
-              (<div>
-                <img src={session.user.image} />
-                <img src={`/api/border/${borderData.imageId ?? '0'}`} />
-              </div>)
-              : undefined
-          }
-        </div>
-    }
+    <div>
+      <p className={styles.description}>
+        {session
+          ? `Signed in as ${session.user.name} (${borderData?.discordId})`
+          : "Not signed in"}
+        <br />
+        {session ? (
+          <button onClick={() => signOut()}>Sign Out</button>
+        ) : (
+          <button onClick={() => signIn()}>Sign In</button>
+        )}
+      </p>
     </div>
   );
 }

lib/borders.js

@@ -4,10 +4,14 @@ import prisma from "./prisma";
 export const getBorderById = async (id) => {
   return await prisma.borderImage.findFirst({
     where: {
-      id: parseInt(id)
-    }
+      id: parseInt(id),
+    },
   });
-}
+};
+
+export const getAllBorders = async () => {
+  return await prisma.borderImage.findMany();
+};
 
 export const getUserBorders = async (req) => {
   const session = await getSession({ req });

pages/api/border/[id].js

@@ -1,14 +1,8 @@
 import { getBorderById } from "../../../lib/borders";
 
 export default function handler(req, res) {
-    const id = req.query.id;
-
-    console.log(id);
-  
-    getBorderById(id).then((result) => {
-      const imageName = result?.imageName ?? "default.png";
-  
-    //   return res.status(200).json(result);
-      return res.redirect(301, `/images/${imageName}`)
-    });
-  }
+  const id = req.query.id;
+  getBorderById(id).then((result) => {
+    return res.status(200).json(result);
+  });
+}

pages/api/border/all.js

@@ -0,0 +1,7 @@
+import { getAllBorders } from "../../../lib/borders";
+
+export default function handler(req, res) {
+  getAllBorders().then((result) => {
+    return res.status(200).json(result);
+  });
+}

pages/index.js

@@ -2,8 +2,29 @@ import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 import UserInfo from "../components/userInfo";
+import Select from "../components/select";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+  const [data, setData] = useState(null);
+  const [borderData, setBorderData] = useState(null);
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    fetch("api/border/all")
+      .then((res) => res.json())
+      .then((data) => setData(data));
+  }, []);
+
+  useEffect(() => {
+    fetch("api/user/border/@me")
+      .then((res) => res.json())
+      .then((data) => {
+        setBorderData(data);
+        setSelected(data?.borderId || 0);
+      });
+  }, []);
+
   return (
     <div className={styles.container}>
       <Head>
@@ -11,10 +32,14 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
+      <header>
         <h1 className={styles.title}>Steam Borders</h1>
-        <UserInfo />
+        <div className={styles.userinfo}>
+          <UserInfo borderData={borderData} />
+        </div>
+      </header>
+      <main>
+        <Select data={data} onSelect={setSelected} selected={selected} />
       </main>
     </div>
   );

styles/Components.module.css

@@ -0,0 +1,40 @@
+.select {
+  min-height: 90vh;
+  max-height: 90vh;
+  max-width: 50vw;
+  left: 45vw;
+  position: relative;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.borderKeeper {
+  width: 132px !important;
+  height: 132px !important;
+  padding: 4px;
+}
+
+.borderKeeper > span {
+  display: inline-table !important;
+}
+
+.userImage,
+.borderImage {
+  position: relative;
+  left: 0;
+}
+
+.userImage {
+  z-index: -1;
+  top: 0;
+}
+
+.borderImage {
+  z-index: 3;
+  top: -256px !important;
+}
+
+.selected {
+  border: 1px solid black;
+}

styles/Home.module.css

@@ -12,6 +12,19 @@
   align-items: center;
 }
 
+.userinfo {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: flex-end;
+  text-align: right;
+  width: 50vw;
+  top: 0;
+  left: 50vw;
+  padding-right: 32px;
+}
+
 .footer {
   display: flex;
   flex: 1;
@@ -43,11 +56,12 @@
   margin: 0;
   line-height: 1.15;
   font-size: 4rem;
+  width: 50vw;
 }
 
 .title,
 .description {
-  text-align: center;
+  text-align: left;
 }
 
 .description {

util/ingest.js

@@ -1,6 +1,6 @@
 console.log("a");
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 const Prisma = require("@prisma/client");
 
 const prisma = new Prisma.PrismaClient();
@@ -9,32 +9,41 @@ console.log("processing new border images");
 
 const cwd = process.cwd();
 
-const folder = path.join(cwd, cwd.includes("util") ? ".." : "", "public/images");
+const folder = path.join(
+  cwd,
+  cwd.includes("util") ? ".." : "",
+  "public/images"
+);
 const list = fs.readdirSync(folder);
 
 (async () => {
-    let numAdded = 0;
-    for (let item of list) {
-        // console.log(item);
+  let numAdded = 0;
+  for (let item of list) {
+    // console.log(item);
 
-        const result = await prisma.borderImage.findFirst(
-            {
-                where: {
-                    imageName: item
-                }
-            }
-        );
-        if (!result) {
-            const added = await prisma.borderImage.create(
-                {
-                    data: {
-                        imageName: item
-                    },
-                }
-            );
-            numAdded++;
-            console.log(added);
-        }
+    const result = await prisma.borderImage.findFirst({
+      where: {
+        imageName: item,
+      },
+    });
+    if (!result && item == "default.png") {
+      const added = await prisma.borderImage.create({
+        data: {
+          id: 0,
+          imageName: item,
+        },
+      });
+      numAdded++;
+      console.log(added);
+    } else if (!result) {
+      const added = await prisma.borderImage.create({
+        data: {
+          imageName: item,
+        },
+      });
+      numAdded++;
+      console.log(added);
     }
-    console.log(`Processed ${numAdded} new images.`);
+  }
+  console.log(`Processed ${numAdded} new images.`);
 })();