From fc5519e744db47790f7a51c861f3e4d4bfe48f14 Mon Sep 17 00:00:00 2001
From: ic3w0lf <bob@ic3.space>
Date: Thu, 3 Apr 2025 04:46:44 -0600
Subject: [PATCH] bad code
---
web/src/app/maps/(styles)/page.scss | 43 ++++++++++++
web/src/app/maps/page.tsx | 68 ++++++++++++++-----
.../asset/[assetId]/{route.ts => route.tsx} | 0
web/src/app/thumbnails/maps/[mapId]/route.tsx | 13 ++++
.../user/[userId]/{route.ts => route.tsx} | 0
5 files changed, 108 insertions(+), 16 deletions(-)
create mode 100644 web/src/app/maps/(styles)/page.scss
rename web/src/app/thumbnails/asset/[assetId]/{route.ts => route.tsx} (100%)
create mode 100644 web/src/app/thumbnails/maps/[mapId]/route.tsx
rename web/src/app/thumbnails/user/[userId]/{route.ts => route.tsx} (100%)
diff --git a/web/src/app/maps/(styles)/page.scss b/web/src/app/maps/(styles)/page.scss
new file mode 100644
index 0000000..052bcda
--- /dev/null
+++ b/web/src/app/maps/(styles)/page.scss
@@ -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;
+ }
+ }
+}
diff --git a/web/src/app/maps/page.tsx b/web/src/app/maps/page.tsx
index 1e28448..7e62df3 100644
--- a/web/src/app/maps/page.tsx
+++ b/web/src/app/maps/page.tsx
@@ -1,24 +1,60 @@
-"use client"
+"use client";
+import Image from "next/image";
import { useState, useEffect } from "react";
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() {
- const [ingameMaps, setIngameMaps] = useState();
+ const [maps, setMaps] = useState<Map[]>([]);
- useEffect(() => {
- fetch("/api/maps?Page=1&Limit=10")
- .then(response => response.json())
- .then(setIngameMaps);
- }, []);
+ useEffect(() => {
+ const fetchMaps = async () => {
+ const res = await fetch("/api/maps?Page=1&Limit=100");
+ const data: Map[] = await res.json();
+ setMaps(data);
+ };
- useEffect(() => {
- console.log(ingameMaps);
- }, [ingameMaps]);
-
- return (
- <Webpage>
- <p>maps</p>
- </Webpage>
- );
+ fetchMaps();
+ }, []);
+
+ const customLoader = ({ src }: { src: string }) => {
+ return src;
+ };
+
+ 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>
+ );
}
\ No newline at end of file
diff --git a/web/src/app/thumbnails/asset/[assetId]/route.ts b/web/src/app/thumbnails/asset/[assetId]/route.tsx
similarity index 100%
rename from web/src/app/thumbnails/asset/[assetId]/route.ts
rename to web/src/app/thumbnails/asset/[assetId]/route.tsx
diff --git a/web/src/app/thumbnails/maps/[mapId]/route.tsx b/web/src/app/thumbnails/maps/[mapId]/route.tsx
new file mode 100644
index 0000000..174feee
--- /dev/null
+++ b/web/src/app/thumbnails/maps/[mapId]/route.tsx
@@ -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}`);
+}
\ No newline at end of file
diff --git a/web/src/app/thumbnails/user/[userId]/route.ts b/web/src/app/thumbnails/user/[userId]/route.tsx
similarity index 100%
rename from web/src/app/thumbnails/user/[userId]/route.ts
rename to web/src/app/thumbnails/user/[userId]/route.tsx