From 96fe5f0c78fe340b27a6394b6ce486f424cba94b Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 13 Jun 2025 21:50:18 +0300
Subject: [PATCH] Generate images route with season poster

---
 app/features/admin/routes/generate-images.tsx | 149 ++++++++++++++++++
 app/routes.ts                                 |  11 ++
 app/styles/utils.css                          |   4 +
 3 files changed, 164 insertions(+)
 create mode 100644 app/features/admin/routes/generate-images.tsx

diff --git a/app/features/admin/routes/generate-images.tsx b/app/features/admin/routes/generate-images.tsx
new file mode 100644
index 000000000..efdef131f
--- /dev/null
+++ b/app/features/admin/routes/generate-images.tsx
@@ -0,0 +1,149 @@
+import { Divider } from "~/components/Divider";
+import { Image } from "~/components/Image";
+import { Main } from "~/components/Main";
+import { list } from "~/features/mmr/core/Seasons";
+import { navIconUrl, tierImageUrl } from "~/utils/urls";
+
+// this page is not accessible in production, just used to generate images for social media
+
+export default function GenerateImages() {
+	return (
+		<Main className="stack lg">
+			<h1>Generate Images</h1>
+			<Divider />
+			<SendouQSeason />
+		</Main>
+	);
+}
+
+const season = list.at(-1)!;
+
+function SendouQSeason() {
+	return (
+		<div className="text-center stack lg">
+			<div>
+				<h2 style={{ fontSize: "2rem" }}>Season {season.nth}</h2>
+				<div className="font-semi-bold text-md italic">
+					{season.starts.toLocaleDateString("en-US", {
+						month: "long",
+						day: "numeric",
+						year: "numeric",
+					})}{" "}
+					-{" "}
+					{season.ends.toLocaleDateString("en-US", {
+						month: "long",
+						day: "numeric",
+						year: "numeric",
+					})}
+				</div>
+			</div>
+
+			<div
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(3, 1fr)",
+					gap: "1rem",
+					placeItems: "center",
+				}}
+			>
+				<InfoSquare title="Gain Plus Server access">
+					<Image width={124} height={124} path={navIconUrl("plus")} alt="" />
+				</InfoSquare>
+				<InfoSquare title="Compete in Season Finale">
+					<Image width={124} height={124} path={navIconUrl("sendouq")} alt="" />
+				</InfoSquare>
+				<InfoSquare title="Rank Up to Leviathan">
+					<Image
+						width={124}
+						height={124}
+						path={tierImageUrl("LEVIATHAN")}
+						alt=""
+					/>
+				</InfoSquare>
+			</div>
+
+			<Divider smallText className="font-bold text-xs">
+				EVENTS
+			</Divider>
+
+			<EventSchedule
+				name="In The Zone 44"
+				imgId="itz"
+				date={new Date("2025-07-05T12:00:00Z")}
+			/>
+
+			<EventSchedule
+				name="In The Zone 45"
+				imgId="itz"
+				date={new Date("2025-08-16T12:00:00Z")}
+			/>
+
+			<EventSchedule
+				name="Season Finale"
+				imgId="sf"
+				date={new Date("2025-08-30T12:00:00Z")}
+			/>
+
+			<div className="text-xs font-semi-bold mt-6">
+				Check all ranked tournaments on the calendar!
+			</div>
+		</div>
+	);
+}
+
+function InfoSquare({
+	title,
+	children,
+}: { title: string; children: React.ReactNode }) {
+	return (
+		<div className="font-semi-bold">
+			{title}
+			<div
+				className="bg-lighter"
+				style={{
+					width: "12rem",
+					height: "12rem",
+					borderRadius: "var(--rounded)",
+					marginTop: "1rem",
+					display: "grid",
+					placeItems: "center",
+					borderColor: "var(--border)",
+					borderWidth: "2px",
+					borderStyle: "solid",
+				}}
+			>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+function EventSchedule({
+	name,
+	date,
+	imgId,
+}: { name: string; date: Date; imgId: string }) {
+	return (
+		<div className="stack md horizontal items-center mx-auto">
+			<img
+				alt=""
+				src={`http://localhost:5173/static-assets/img/tournament-logos/${imgId}.png`}
+				style={{
+					width: "4rem",
+					height: "4rem",
+					borderRadius: "100%",
+				}}
+			/>
+			<div className="stack items-start">
+				<div className="font-semi-bold text-lg">{name}</div>
+				<div className="text-sm">
+					{date.toLocaleDateString("en-US", {
+						month: "long",
+						day: "numeric",
+						year: "numeric",
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/app/routes.ts b/app/routes.ts
index 5439968b7..405d65c28 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -5,6 +5,16 @@ import {
 	route,
 } from "@remix-run/route-config";
 
+const devOnlyRoutes =
+	process.env.NODE_ENV === "development"
+		? ([
+				route(
+					"/admin/generate-images",
+					"features/admin/routes/generate-images.tsx",
+				),
+			] satisfies RouteConfig)
+		: [];
+
 export default [
 	index("features/front-page/routes/index.tsx"),
 	route("/patrons-list", "features/front-page/routes/patrons-list.ts"),
@@ -281,4 +291,5 @@ export default [
 		route("impersonate", "features/auth/routes/auth.impersonate.ts"),
 		route("impersonate/stop", "features/auth/routes/auth.impersonate.stop.ts"),
 	]),
+	...devOnlyRoutes,
 ] satisfies RouteConfig;
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 817daa811..760100310 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -110,6 +110,10 @@
 	background-color: var(--bg);
 }
 
+.bg-lighter {
+	background-color: var(--bg-lighter);
+}
+
 .bg-transparent-important {
 	background-color: transparent !important;
 }