let download images via ingest now

2022-04-16 21:14:14 -04:00 · 2022-04-16 21:14:14 -04:00 · abf3244dda
parent 01e778edad
commit abf3244dda
29 changed files with 3728 additions and 42 deletions
--- a/components/select.js
+++ b/components/select.js
@ -1,5 +1,43 @@
+import Image from "next/image";
+import styles from "../styles/Components.module.css";
+
 export default function Select(props) {
-  const { data, onSelect } = props;
-  console.log(data);
-  return <div></div>;
+  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>
+  );
 }
--- a/components/userInfo.js
+++ b/components/userInfo.js
@ -2,15 +2,9 @@ import { useSession, signIn, signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";

-export default function UserInfo() {
+export default function UserInfo(props) {
  const { data: session } = useSession();
-  const [borderData, setBorderData] = useState(null);
-
-  useEffect(() => {
-    fetch("api/user/border/@me")
-      .then((res) => res.json())
-      .then((data) => setBorderData(data));
-  }, []);
+  const { borderData } = props;

  return (
    <div>
--- a/pages/index.js
+++ b/pages/index.js
@ -7,6 +7,8 @@ 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")
@ -14,6 +16,15 @@ export default function Home() {
      .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>
@ -21,12 +32,14 @@ export default function Home() {
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-      <header clasName={styles.main}>
+      <header>
        <h1 className={styles.title}>Steam Borders</h1>
-        <UserInfo />
+        <div className={styles.userinfo}>
+          <UserInfo borderData={borderData} />
+        </div>
      </header>
-      <main className={styles.main}>
-        <Select data={data} onSelect={console.log} />
+      <main>
+        <Select data={data} onSelect={setSelected} selected={selected} />
      </main>
    </div>
  );
--- a/public/images/00b9a62e09a1e452d6840170849e8ac06f6d3ef5.png
+++ b/public/images/00b9a62e09a1e452d6840170849e8ac06f6d3ef5.png
--- a/public/images/083c19cc935001ee0508aff3b948da62b6a093f6.png
+++ b/public/images/083c19cc935001ee0508aff3b948da62b6a093f6.png
--- a/public/images/18717998311ff5e68b1246dbdb43cbc0fa00a35d.png
+++ b/public/images/18717998311ff5e68b1246dbdb43cbc0fa00a35d.png
--- a/public/images/27ef3d62a0e42bf4ac60d426f2f172e1790ec0fd.png
+++ b/public/images/27ef3d62a0e42bf4ac60d426f2f172e1790ec0fd.png
--- a/public/images/2d876cff5940a8724340a5798c1c8e48880c675f.png
+++ b/public/images/2d876cff5940a8724340a5798c1c8e48880c675f.png
--- a/public/images/359032c610e13a8f370594b200b9ddf8b29aa8af.png
+++ b/public/images/359032c610e13a8f370594b200b9ddf8b29aa8af.png
--- a/public/images/3fd73db5d33e9b6597e6975eb654e89b89b5db5c.png
+++ b/public/images/3fd73db5d33e9b6597e6975eb654e89b89b5db5c.png
--- a/public/images/420efee31f0b0a3fe39cb7409dbe9c3a3e0a0e3a.png
+++ b/public/images/420efee31f0b0a3fe39cb7409dbe9c3a3e0a0e3a.png
--- a/public/images/46461aaea39b18a4a3da2e6d3cf253006f2d6193.png
+++ b/public/images/46461aaea39b18a4a3da2e6d3cf253006f2d6193.png
--- a/public/images/4718aad9a4b04c3cfb049bb7cbf2bd35c2e2eb11.png
+++ b/public/images/4718aad9a4b04c3cfb049bb7cbf2bd35c2e2eb11.png
--- a/public/images/537ab433b4dbf1c225e5809ad53d690ee73438d8.png
+++ b/public/images/537ab433b4dbf1c225e5809ad53d690ee73438d8.png
--- a/public/images/558efce86af3043bda6ac5078e1801dc7b587de7.png
+++ b/public/images/558efce86af3043bda6ac5078e1801dc7b587de7.png
--- a/public/images/68439f85ae83ce6429b845234e28de62a88b1f88.png
+++ b/public/images/68439f85ae83ce6429b845234e28de62a88b1f88.png
--- a/public/images/950172e5379f52079835a2b295e93de1d8a8fbf3.png
+++ b/public/images/950172e5379f52079835a2b295e93de1d8a8fbf3.png
--- a/public/images/984f18d4bcc76669bcbd8971f962d1b75716dd11.png
+++ b/public/images/984f18d4bcc76669bcbd8971f962d1b75716dd11.png
--- a/public/images/babb8c618b2c8eafaad9bc3fac3304a1837ac4fb.png
+++ b/public/images/babb8c618b2c8eafaad9bc3fac3304a1837ac4fb.png
--- a/public/images/bd04ee3a8e6c35c39f8670c034a5ea7fd15ca3f1.png
+++ b/public/images/bd04ee3a8e6c35c39f8670c034a5ea7fd15ca3f1.png
--- a/public/images/beaee5e90d93bfafa5f5f55acb23abfd28ad180c.png
+++ b/public/images/beaee5e90d93bfafa5f5f55acb23abfd28ad180c.png
--- a/public/images/c30260bb120bf1379f075802653c8eb86da7a7e9.png
+++ b/public/images/c30260bb120bf1379f075802653c8eb86da7a7e9.png
--- a/public/images/e0de1bf39208a3c1230bca5bc69561e9d2f0971f.png
+++ b/public/images/e0de1bf39208a3c1230bca5bc69561e9d2f0971f.png
--- a/public/images/e89b3a70625c980c3d68869f5cdb1da9baa447f8.png
+++ b/public/images/e89b3a70625c980c3d68869f5cdb1da9baa447f8.png
--- a/public/user.png
+++ b/public/user.png
--- a/styles/Components.module.css
+++ b/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;
+}
--- a/styles/Home.module.css
+++ b/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 {
--- a/util/border_data.json
+++ b/util/border_data.json
--- a/util/ingest.js
+++ b/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.`);
+})();