k2on · anabasisgo · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+	"extends": "next/core-web-vitals"
 }
diff --git a/app/[floor]/Input.tsx b/app/[floor]/Input.tsx
diff --git a/app/[floor]/Share.tsx b/app/[floor]/Share.tsx
diff --git a/app/[floor]/page.tsx b/app/[floor]/page.tsx
diff --git a/app/[location]/Input.tsx b/app/[location]/Input.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import React, { useEffect } from "react";
+import { positionToCode } from "../utils";
+
+export default function Input({ location }: { location: string }) {
+	const ref = React.createRef<HTMLImageElement>();
+
+	useEffect(() => {
+		if (!ref.current) return;
+
+		ref.current.onclick = (e: any) => {
+			if (!ref.current) return;
+			const [floor] = location.split("~");
+
+			const imgX = ref.current.width;
+			const imgY = ref.current.height;
+
+			const x = e.offsetX / imgX;
+			const y = e.offsetY / imgY;
+
+			const code = positionToCode(x, y, 4);
+
+			window.location.href = `${floor}~${code}`;
+		}
+	}, [ref]);
+
+	return <img ref={ref} className="max-h-[70vh] px-1" src={`/img/${location}`} />;
+
+}
diff --git a/app/[location]/Share.tsx b/app/[location]/Share.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react";
+
+export default function Share({ floor }: { floor: string }) {
+	const [copied, setCopied] = useState(false);
+
+	const onShare = () => {
+
+		if (navigator.share) {
+			navigator.share({
+				title: 'Meet me At The Lib',
+				text: 'On floor ' + floor,
+				url: window.location.href,
+			});
+		} else {
+			navigator.clipboard.writeText(window.location.href).then(() => {
+				setCopied(true);
+				setTimeout(() => {
+					setCopied(false);
+				}, 1000);
+			});
+		}
+	}
+
+	return (
+		<button onClick={onShare} className="bg-primary text-4xl p-2 rounded-xl">
+			{copied ? "Link Copied!" : "SHARE"}
+		</button>
+	);
+}
diff --git a/app/[location]/page.tsx b/app/[location]/page.tsx
@@ -0,0 +1,54 @@
+import Head from "next/head";
+import Input from "./Input";
+import Link from "next/link";
+import Share from "./Share";
+import { Metadata } from "next";
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+	const { location } = params;
+	const [floor] = location.split("~");
+	return {
+		title: `Floor ${floor} At The Lib`,
+		description: 'Find me at the library',
+		openGraph: {
+			images: [`https://atthelib.com/img/${location}`]
+		}
+	};
+}
+
+
+interface Props {
+	params: { location: string }
+}
+export default function Floor({ params }: Props) {
+	const { location } = params;
+	const [floor] = location.split("~");
+
+	const imageUrl = "/img/" + location;
+
+	return (
+		<>
+			<Head>
+				<title>Floor {floor}</title>
+				<meta property="og:title" content="At the Lib" />
+				<meta property="og:type" content="atthelib" />
+				<meta property="og:image" content={imageUrl} />
+				<meta property="og:description" content="Come find me AtTheLib!" />
+			</Head>
+			<div className="flex flex-col items-center text-center h-screen">
+				<div className="flex flex-col items-center justify-center grow mb-2">
+					<h1 className="text-4xl font-bold">Floor {floor}</h1>
+					<h2 className="text-2xl text-slate-400">tap somewhere on the map</h2>
+				</div>
+				<Input location={location} />
+				<div className="flex flex-col items-center justify-center gap-3 grow mt-2">
+					<Share floor={floor} />
+					<Link href="/">
+						<button className="text-xl">⬅ BACK</button>
+					</Link>
+				</div>
+			</div>
+		</>
+	);
+}
+
diff --git a/app/globals.css b/app/globals.css
@@ -3,33 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+	--foreground-rgb: 0, 0, 0;
+	--background-start-rgb: 214, 219, 220;
+	--background-end-rgb: 255, 255, 255;
+	--color-primary: 247, 124, 37;
+	--color-secondary: 128, 76, 191;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+	:root {
+		--foreground-rgb: 255, 255, 255;
+		--background-start-rgb: 0, 0, 0;
+		--background-end-rgb: 0, 0, 0;
+	}
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-.floor-list a:nth-child(odd) {
-    background: #F56600;
-}
-
-.floor-list a:nth-child(even) {
-    background: #522D80;
+	color: rgb(var(--foreground-rgb));
+	background: linear-gradient(to bottom,
+			transparent,
+			rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }