added token page

sitcon-tw · Feb 21, 2024 · 7d37657 · 7d37657
1 parent 4b74408
commit 7d37657
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "format": "prettier -w src"
   },
   "dependencies": {
+    "framer-motion": "^11.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx → src/app/(game)/layout.tsx b/src/app/layout.tsx → src/app/(game)/layout.tsx
@@ -2,7 +2,7 @@ import Head from "next/head";
 import { Nav } from "@/components/Nav";
 import { Footer } from "@/components/Footer";
 
-import "./globals.css";
+import "../globals.css";
 
 export default function RootLayout({
   children,

diff --git a/src/app/page.tsx → src/app/(game)/page.tsx b/src/app/page.tsx → src/app/(game)/page.tsx
diff --git a/src/app/puzzle/page.tsx → src/app/(game)/puzzle/page.tsx b/src/app/puzzle/page.tsx → src/app/(game)/puzzle/page.tsx
diff --git a/src/app/scanner/page.tsx → src/app/(game)/scanner/page.tsx b/src/app/scanner/page.tsx → src/app/(game)/scanner/page.tsx
diff --git a/src/app/(token)/layout.tsx b/src/app/(token)/layout.tsx
@@ -0,0 +1,29 @@
+import Head from "next/head";
+
+import "../globals.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-TW">
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body className="flex min-h-screen w-screen flex-col bg-sitcon-color8 font-sans">
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/(token)/token/page.tsx b/src/app/(token)/token/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+export default function Page() {
+  const [token, setToken] = useState("");
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setToken(new URLSearchParams(window.location.search).get("token")!);
+    }
+  }, []);
+  function copy() {
+    if (typeof window !== "undefined") {
+      navigator.clipboard.writeText(token);
+    } else {
+      console.error("window is undefined");
+      prompt("請複製以下代碼", token);
+    }
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 500);
+  }
+  return (
+    <div className="mx-auto w-full max-w-[512px] px-2 py-10">
+      <h1 className="text-center text-4xl font-bold">
+        你找到了拼圖
+        <span className="absolute">！</span>
+      </h1>
+      <div className="my-4 flex flex-wrap items-center justify-between gap-6 rounded-2xl bg-gray-50 p-4 pl-6 text-center text-6xl shadow">
+        <div
+          className="grow overflow-hidden text-ellipsis p-2 text-left"
+          style={{
+            fontFamily: `"Roboto Mono", monospace`,
+          }}
+        >
+          {token}
+        </div>
+        <motion.button
+          onClick={copy}
+          className="mx-auto overflow-hidden rounded-2xl bg-purple-500 px-6 py-2 text-2xl font-bold text-white shadow-md"
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          key={copied ? "copied" : "copy"}
+        >
+          {copied ? "已複製" : "複製"}
+        </motion.button>
+      </div>
+      <div className="text-center text-2xl text-gray-600">
+        在 OPass &gt; 大地遊戲 &gt; 掃描器中輸入以下代碼來取得拼圖
+      </div>
+    </div>
+  );
+}