let download images via ingest now
|
|
@ -1,5 +1,43 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import styles from "../styles/Components.module.css";
|
||||||
|
|
||||||
export default function Select(props) {
|
export default function Select(props) {
|
||||||
const { data, onSelect } = props;
|
const { data, onSelect, selected = {} } = props;
|
||||||
console.log(data);
|
console.log("data", data, "selected", selected);
|
||||||
return <div></div>;
|
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,9 @@ import { useSession, signIn, signOut } from "next-auth/react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import styles from "../styles/Components.module.css";
|
import styles from "../styles/Components.module.css";
|
||||||
|
|
||||||
export default function UserInfo() {
|
export default function UserInfo(props) {
|
||||||
const { data: session } = useSession();
|
const { data: session } = useSession();
|
||||||
const [borderData, setBorderData] = useState(null);
|
const { borderData } = props;
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch("api/user/border/@me")
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then((data) => setBorderData(data));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ import { useEffect, useState } from "react";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [data, setData] = useState(null);
|
const [data, setData] = useState(null);
|
||||||
|
const [borderData, setBorderData] = useState(null);
|
||||||
|
const [selected, setSelected] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch("api/border/all")
|
fetch("api/border/all")
|
||||||
|
|
@ -14,6 +16,15 @@ export default function Home() {
|
||||||
.then((data) => setData(data));
|
.then((data) => setData(data));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch("api/user/border/@me")
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
setBorderData(data);
|
||||||
|
setSelected(data?.borderId || 0);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Head>
|
<Head>
|
||||||
|
|
@ -21,12 +32,14 @@ export default function Home() {
|
||||||
<meta name="description" content="Generated by create next app" />
|
<meta name="description" content="Generated by create next app" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<header clasName={styles.main}>
|
<header>
|
||||||
<h1 className={styles.title}>Steam Borders</h1>
|
<h1 className={styles.title}>Steam Borders</h1>
|
||||||
<UserInfo />
|
<div className={styles.userinfo}>
|
||||||
|
<UserInfo borderData={borderData} />
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main className={styles.main}>
|
<main>
|
||||||
<Select data={data} onSelect={console.log} />
|
<Select data={data} onSelect={setSelected} selected={selected} />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 526 KiB |
|
Before Width: | Height: | Size: 897 KiB |
|
Before Width: | Height: | Size: 573 KiB |
|
Before Width: | Height: | Size: 236 KiB |
|
Before Width: | Height: | Size: 622 KiB |
|
Before Width: | Height: | Size: 588 KiB |
|
Before Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 653 KiB |
|
Before Width: | Height: | Size: 569 KiB |
|
Before Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 686 KiB |
|
Before Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 938 KiB |
|
Before Width: | Height: | Size: 470 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 36 KiB |
BIN
public/user.png
Normal file
|
After Width: | Height: | Size: 566 B |
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,19 @@
|
||||||
align-items: center;
|
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 {
|
.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -43,11 +56,12 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
.description {
|
.description {
|
||||||
text-align: center;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
|
|
||||||
3578
util/border_data.json
Normal file
|
|
@ -1,6 +1,6 @@
|
||||||
console.log("a");
|
console.log("a");
|
||||||
const fs = require('fs');
|
const fs = require("fs");
|
||||||
const path = require('path');
|
const path = require("path");
|
||||||
const Prisma = require("@prisma/client");
|
const Prisma = require("@prisma/client");
|
||||||
|
|
||||||
const prisma = new Prisma.PrismaClient();
|
const prisma = new Prisma.PrismaClient();
|
||||||
|
|
@ -9,7 +9,11 @@ console.log("processing new border images");
|
||||||
|
|
||||||
const cwd = process.cwd();
|
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);
|
const list = fs.readdirSync(folder);
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
|
@ -17,21 +21,26 @@ const list = fs.readdirSync(folder);
|
||||||
for (let item of list) {
|
for (let item of list) {
|
||||||
// console.log(item);
|
// console.log(item);
|
||||||
|
|
||||||
const result = await prisma.borderImage.findFirst(
|
const result = await prisma.borderImage.findFirst({
|
||||||
{
|
|
||||||
where: {
|
where: {
|
||||||
imageName: item
|
imageName: item,
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (!result) {
|
|
||||||
const added = await prisma.borderImage.create(
|
|
||||||
{
|
|
||||||
data: {
|
|
||||||
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++;
|
numAdded++;
|
||||||
console.log(added);
|
console.log(added);
|
||||||
}
|
}
|
||||||
|
|
|
||||||