Compare commits

...

3 Commits

Author SHA1 Message Date
jane 19a94f927e update gitignore 2022-04-16 21:14:57 -04:00
jane abf3244dda let download images via ingest now 2022-04-16 21:14:14 -04:00
jane 01e778edad merge 2022-04-16 18:32:42 -04:00
33 changed files with 3774 additions and 79 deletions

2
.gitignore vendored
View File

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

43
components/select.js Normal file
View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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 });

View File

@ -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);
});
}

7
pages/api/border/all.js Normal file
View File

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

View File

@ -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>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 526 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 897 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 573 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 622 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 653 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 569 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 346 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 686 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 938 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
public/user.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 566 B

View File

@ -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;
}

View File

@ -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 {

3578
util/border_data.json Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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.`);
})();