bad code
This commit is contained in:
parent
170e194ac9
commit
fc5519e744
43
web/src/app/maps/(styles)/page.scss
Normal file
43
web/src/app/maps/(styles)/page.scss
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
.maps-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Allows 4 cards per row */
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-card {
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover; /* Ensures the image covers the space without being cut off */
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-info {
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #bbbbbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,24 +1,60 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import Webpage from "@/app/_components/webpage";
|
import Webpage from "@/app/_components/webpage";
|
||||||
|
|
||||||
|
import "./(styles)/page.scss";
|
||||||
|
|
||||||
|
interface Map {
|
||||||
|
ID: number;
|
||||||
|
DisplayName: string;
|
||||||
|
Creator: string;
|
||||||
|
GameID: number;
|
||||||
|
Date: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: should rewrite this entire page, just wanted to get a simple page working. This was written by chatgippity
|
||||||
|
|
||||||
export default function MapsPage() {
|
export default function MapsPage() {
|
||||||
const [ingameMaps, setIngameMaps] = useState();
|
const [maps, setMaps] = useState<Map[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch("/api/maps?Page=1&Limit=10")
|
const fetchMaps = async () => {
|
||||||
.then(response => response.json())
|
const res = await fetch("/api/maps?Page=1&Limit=100");
|
||||||
.then(setIngameMaps);
|
const data: Map[] = await res.json();
|
||||||
}, []);
|
setMaps(data);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
fetchMaps();
|
||||||
console.log(ingameMaps);
|
}, []);
|
||||||
}, [ingameMaps]);
|
|
||||||
|
const customLoader = ({ src }: { src: string }) => {
|
||||||
return (
|
return src;
|
||||||
<Webpage>
|
};
|
||||||
<p>maps</p>
|
|
||||||
</Webpage>
|
return (
|
||||||
);
|
<Webpage>
|
||||||
|
<div className="maps-container">
|
||||||
|
{maps.map((map) => (
|
||||||
|
<div key={map.ID} className="map-card">
|
||||||
|
<a href={`/maps/${map.ID}`} className="block">
|
||||||
|
<Image
|
||||||
|
loader={customLoader}
|
||||||
|
src={`/thumbnails/maps/${map.ID}`}
|
||||||
|
alt={map.DisplayName}
|
||||||
|
width={500}
|
||||||
|
height={300}
|
||||||
|
className="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="map-info">
|
||||||
|
<h2>{map.DisplayName}</h2>
|
||||||
|
<p>By {map.Creator}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Webpage>
|
||||||
|
);
|
||||||
}
|
}
|
0
web/src/app/thumbnails/asset/[assetId]/route.ts → web/src/app/thumbnails/asset/[assetId]/route.tsx
0
web/src/app/thumbnails/asset/[assetId]/route.ts → web/src/app/thumbnails/asset/[assetId]/route.tsx
13
web/src/app/thumbnails/maps/[mapId]/route.tsx
Normal file
13
web/src/app/thumbnails/maps/[mapId]/route.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
context: { params: Promise<{ mapId: string }> }
|
||||||
|
): Promise<NextResponse> {
|
||||||
|
// TODO: implement this, we need a cdn for in-game map thumbnails...
|
||||||
|
|
||||||
|
const { mapId } = await context.params;
|
||||||
|
const baseUrl = request.nextUrl.origin; // Gets the current base URL
|
||||||
|
|
||||||
|
return NextResponse.redirect(`${baseUrl}/thumbnails/asset/${mapId}`);
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user