updated style

sitcon-tw · Mar 2, 2024 · 867fb4a · 867fb4a
1 parent 9d23eaa
commit 867fb4a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 43 deletions.
diff --git a/src/app/(game)/layout.tsx b/src/app/(game)/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
         />
       </Head>
       <body>
-        <div className="mx-auto flex h-[100svh] w-screen max-w-[768px] flex-col font-sans text-gray-950">
+        <div className="mx-auto flex h-[100svh] w-screen max-w-[768px] flex-col bg-sitcon-color8 font-sans text-gray-950">
           <Nav />
           {!token && isClient && <NonTokenModalContent />}
           <div className="grow overflow-y-scroll">{children}</div>

diff --git a/src/app/(game)/page.tsx b/src/app/(game)/page.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useLocalStorage } from "usehooks-ts";
-import { CheckCircle2 } from "lucide-react";
+import { CheckCircle2, Circle } from "lucide-react";
 
 function Activity({
   activity,
@@ -25,18 +25,19 @@ function Activity({
     <div
       className={twMerge(
         "flex items-center justify-start gap-4 break-all rounded-xl border border-sitcon-secondary p-2 text-left shadow-sm",
-        finished ? "bg-sitcon-secondary" : "border-opacity-50",
+        finished ? "bg-sitcon-secondary" : "border-opacity-50 bg-white",
       )}
       onClick={() => setOpen(activity)}
     >
-      <CheckCircle2
-        size={48}
-        strokeWidth={2}
-        className={twMerge(
-          "shrink-0",
-          finished ? "text-[#462002]" : "text-[#F8F3E8]",
-        )}
-      />
+      {finished ? (
+        <CheckCircle2
+          size={48}
+          strokeWidth={2}
+          className="shrink-0 text-[#462002]"
+        />
+      ) : (
+        <Circle size={48} strokeWidth={2} className="shrink-0 text-[#F8F3E8]" />
+      )}
       <p className={text({ level: 1 })}>{activity.name}</p>
     </div>
   );
@@ -64,7 +65,7 @@ const menus = [
         邁開您的腳步，來一一踩點{" "}
         <Link
           href="https://sitcon.org/2024/events/"
-          className="text-blue-500 underline hover:underline-offset-2"
+          className="text-[#B1884C] underline hover:underline-offset-2"
         >
           SITCON 2024 各大年會活動
         </Link>{" "}
@@ -125,8 +126,10 @@ export default function Home() {
       />
 
       <div className="mx-2 my-8 flex flex-col gap-4">
-        <div className="flex flex-col gap-1">
-          <h5 className={heading({ level: 5 })}>如何完成任務?</h5>
+        <div className="flex flex-col gap-1 rounded-xl bg-white p-4 shadow-sm">
+          <h5 className={twMerge(heading({ level: 5 }), "text-[#B1884C]")}>
+            如何完成任務？
+          </h5>
           <div className={text({ level: 3 })}>{menus[active].description}</div>
         </div>
 
@@ -146,9 +149,9 @@ export default function Home() {
           <select
             value={filter}
             onChange={(e) => setFilter(e.target.value as Filter)}
-            className="h-10 w-24 rounded-md border-2 border-sitcon-secondary bg-sitcon-white px-3 py-[6px]"
+            className="h-10 w-24 rounded-xl border-2 border-sitcon-secondary bg-sitcon-white px-3 py-[6px]"
           >
-            <option value="all">ALL</option>
+            <option value="all">全部</option>
             <option value="finished">已完成</option>
             <option value="unfinished">未完成</option>
           </select>

diff --git a/src/app/(game)/puzzle/page.tsx b/src/app/(game)/puzzle/page.tsx
@@ -6,24 +6,38 @@ import { useFinished } from "@/hooks/useFinished";
 import { useLocalStorage } from "usehooks-ts";
 import { twMerge } from "tailwind-merge";
 import { activities, type ActivityType } from "@/data/activity";
-import { CheckCircle2 } from "lucide-react";
+import { CheckCircle2, Circle, Ticket } from "lucide-react";
 import Dialog from "@/components/Dialog";
 function sum(a: number, b: ActivityType) {
   return a + b.piece;
 }
-function Ticket({ isDone, num }: { isDone: boolean; num: number }) {
+function TicketItem({ isDone, num }: { isDone: boolean; num: number }) {
   return (
     <div
       className={twMerge(
-        "break-all rounded-xl border border-sitcon-secondary p-3 text-left shadow-sm",
+        "flex items-center gap-2 break-all rounded-xl border border-sitcon-secondary p-3 text-left shadow-sm",
         isDone
-          ? "bg-sitcon-secondary  text-[#462002]"
-          : "border-opacity-50 text-sitcon-secondary/50",
+          ? "bg-sitcon-secondary text-[#462002]"
+          : "border-opacity-50 bg-white",
       )}
     >
-      <CheckCircle2 size={48} strokeWidth={2} className={twMerge("shrink-0")} />
-      <div className="mt-2 text-xl font-bold">抽獎券</div>
-      <div className="text-base font-normal">完成拼圖 {num} 即可獲得</div>
+      {isDone ? (
+        <CheckCircle2
+          size={48}
+          strokeWidth={2}
+          className={twMerge("shrink-0")}
+        />
+      ) : (
+        <Circle
+          size={48}
+          strokeWidth={2}
+          className={twMerge("shrink-0 text-[#F8F3E8]")}
+        />
+      )}
+      <div>
+        <div className="text-xl font-bold">抽獎券</div>
+        <div className="text-base font-normal">完成拼圖 {num} 即可獲得</div>
+      </div>
     </div>
   );
 }
@@ -39,7 +53,10 @@ function TicketRules() {
       </button>
       <Dialog open={show} setOpen={setShow}>
         <div className="p-6">
-          <div className="text-2xl font-bold">抽獎活動說明</div>
+          <div className="mb-4 flex flex-col items-center justify-center gap-2 text-center tracking-wider">
+            <Ticket strokeWidth={2} size={48} />
+            <h1 className="text-2xl font-bold">抽獎活動說明</h1>
+          </div>
           本活動開放所有與會朋友一同參與，歡迎您在下午 3 點 55 分至 R0
           參與抽獎過程，屆時將由工作人員現場抽出 12
           位幸運朋友，於公布中獎名單後將中獎序號推播到 OPass
@@ -103,9 +120,9 @@ export default function Page() {
           <TicketRules />
         </div>
         <div className="my-2 grid gap-2 md:grid-cols-3">
-          <Ticket isDone={finishedN >= 9} num={1} />
-          <Ticket isDone={finishedN >= 25} num={2} />
-          <Ticket isDone={finishedN >= 41} num={3} />
+          <TicketItem isDone={finishedN >= 9} num={1} />
+          <TicketItem isDone={finishedN >= 25} num={2} />
+          <TicketItem isDone={finishedN >= 41} num={3} />
         </div>
       </div>
     </div>

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -13,7 +13,7 @@ export function Menu({ texts, active, setActive }: Props) {
   return (
     <div className="grid grid-cols-3">
       {texts.map((text, index) => (
-        <div
+        <button
           key={index}
           onClick={() => setActive(index)}
           className={twMerge(
@@ -23,7 +23,7 @@ export function Menu({ texts, active, setActive }: Props) {
           )}
         >
           <h4 className={heading({ level: 4 })}>{text}</h4>
-        </div>
+        </button>
       ))}
     </div>
   );

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import { text } from "@/varients/text";
 import Dialog from "./Dialog";
 import { BookText } from "lucide-react";
+import { twMerge } from "tailwind-merge";
 export function Nav() {
   const [open, setOpen] = useState(false);
 
@@ -30,43 +31,50 @@ export function Nav() {
 
 function Rule() {
   return (
-    <div className="flex flex-col gap-4 px-4 py-2">
-      <div className="flex flex-col items-center justify-center gap-2 text-center tracking-wider">
+    <div className="flex flex-col px-4 py-2">
+      <div className="mb-4 flex flex-col items-center justify-center gap-2 text-center tracking-wider">
         <BookText strokeWidth={2} size={48} />
-        <h1 className={heading({ level: 1 })}>規則</h1>
+        <h1 className="text-2xl font-bold">規則</h1>
       </div>
 
       <p className={text({ level: 1 })}>
         今年的大地遊戲，我們將 SITCON 2024
         諸多年會相關活動都融合進了「迷因拼圖」遊戲中，邀請您來一同邊玩邊探索，解鎖所有活動體驗！
       </p>
-      <h1 className={heading({ level: 1 })}>該從哪裡開始？</h1>
+      <h1 className="mt-4 text-xl font-bold">該從哪裡開始？</h1>
       <p className={text({ level: 1 })}>
         請在攤位、年會活動、與 BONUS
         三種關卡類型中選擇一個您有興趣的活動，並依照「如何完成任務？」中的提示完成指定任務，即可獲得該活動相對應的拼圖點數！（每類型關卡皆有各別完成之上限，鼓勵以多元形式參與。）
       </p>
-      <h1 className={heading({ level: 1 })}>為何要收集拼圖點數？</h1>
+      <h1 className="mt-4 text-xl font-bold">為何要收集拼圖點數？</h1>
       <p className={text({ level: 1 })}>
         當您每解完一個任務，都將會在「我的拼圖」中發現新增的迷因拼圖塊，最終，您將可以成功湊出至多
         3 組迷因拼圖。您可以自由選擇完成 1 至 3 組迷因拼圖，並至 3F
         講者服務台兌換相應數量的紀念品抽獎券。
       </p>
-      <h1 className={heading({ level: 1 })}>如何兌換獎勵？</h1>
+      <h1 className="mt-4 text-xl font-bold">如何兌換獎勵？</h1>
       <p className={text({ level: 1 })}>
         您可以在「累積獎勵」的進度條上，確認當前可兌換的紀念禮品抽獎券數量，並至
         3F
         講者服務台兌換抽獎券（抽獎活動之詳細說明請參考「我的拼圖」頁面右下方之「抽獎活動說明」）。
       </p>
       <p className={text({ level: 1 })}>
-        {" "}
         您需要注意的是，每個 OPass
         帳號當日僅限兌換乙次抽獎券，當您確認兌換後將不得再繼續累積拼圖與更多抽獎券。
       </p>
-      <b className={text({ level: 1, bold: true })}>
-        完成越多任務、中獎機率越高！快點開始遊戲吧 {"(ﾉ>ω<)ﾉ"}
-      </b>
-      <b className={text({ level: 1, bold: true })}>重要時間戳記及地點：</b>
-      <div className="grid w-fit grid-cols-3 gap-[1px] border border-gray-400 bg-gray-400">
+      <p className="mt-4 text-center">
+        <div className={text({ level: 1, bold: true })}>
+          完成越多任務、中獎機率越高！
+        </div>
+        <div className={text({ level: 1, bold: true })}>
+          快點開始遊戲吧 {"(ﾉ>ω<)ﾉ"}
+        </div>
+      </p>
+
+      <strong className={twMerge(text({ level: 1, bold: true }), "mt-4")}>
+        重要時間戳記及地點：
+      </strong>
+      <div className="my-2 grid w-fit grid-cols-3 gap-[1px] border border-gray-400 bg-gray-400">
         <Cell></Cell>
         <Cell>時間</Cell>
         <Cell>地點</Cell>

diff --git a/src/components/Puzzle.tsx b/src/components/Puzzle.tsx
@@ -12,7 +12,7 @@ export default function Puzzle({
     <div className="w-full p-2">
       <div
         className={twMerge(
-          "grid aspect-square overflow-hidden rounded-md border-4 border-gray-200",
+          "grid aspect-square overflow-hidden rounded-xl border border-[#ffe8c4] shadow-sm",
           size === "3x3" ? "grid-cols-3" : "grid-cols-4",
         )}
         style={{