Feature/frontend/card level picking

frontend/app/card-picking/page.tsx

@@ -0,0 +1,30 @@
+import InvestigatorCard from "@/components/investigator-card2";
+import { investigators } from "@/config/investigators";
+
+export default function RolePickingDemo() {
+  return (
+    <main className="min-h-screen py-4 bg-cover bg-map">
+      <div className="container">
+        <h1 className="font-bold leading-tight text-center text-outline-4 tracking-[4px] text-7xl xl:text-8xl text-yellow">
+          Please Select a Character
+          <span className="block leading-tight tracking-[20px]">
+            請選擇角色
+          </span>
+        </h1>
+        <div className="flex flex-wrap items-center justify-center gap-4 mt-11">
+          {investigators.map((investigator) => {
+            const { name, saneImage, sanity } = investigator;
+            return (
+              <InvestigatorCard
+                key={name}
+                investigator={name}
+                imgUrl={saneImage}
+                sanity={sanity}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/app/globals.css

@@ -1,76 +1,111 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+@layer utilities {
+  .text-outline-2 {
+    text-shadow: -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000,
+      -2px 1px 0 #000, -2px 2px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000,
+      -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000, 0px -2px 0 #000,
+      0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000,
+      1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000,
+      1px 2px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000,
+      2px 1px 0 #000, 2px 2px 0 #000;
+  }
+  .text-outline-4 {
+    text-shadow: -4px -4px 0 #000, -4px -3px 0 #000, -4px -2px 0 #000,
+      -4px -1px 0 #000, -4px 0px 0 #000, -4px 1px 0 #000, -4px 2px 0 #000,
+      -4px 3px 0 #000, -4px 4px 0 #000, -3px -4px 0 #000, -3px -3px 0 #000,
+      -3px -2px 0 #000, -3px -1px 0 #000, -3px 0px 0 #000, -3px 1px 0 #000,
+      -3px 2px 0 #000, -3px 3px 0 #000, -3px 4px 0 #000, -2px -4px 0 #000,
+      -2px -3px 0 #000, -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000,
+      -2px 1px 0 #000, -2px 2px 0 #000, -2px 3px 0 #000, -2px 4px 0 #000,
+      -1px -4px 0 #000, -1px -3px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000,
+      -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000, -1px 3px 0 #000,
+      -1px 4px 0 #000, 0px -4px 0 #000, 0px -3px 0 #000, 0px -2px 0 #000,
+      0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000,
+      0px 3px 0 #000, 0px 4px 0 #000, 1px -4px 0 #000, 1px -3px 0 #000,
+      1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000,
+      1px 2px 0 #000, 1px 3px 0 #000, 1px 4px 0 #000, 2px -4px 0 #000,
+      2px -3px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000,
+      2px 1px 0 #000, 2px 2px 0 #000, 2px 3px 0 #000, 2px 4px 0 #000,
+      3px -4px 0 #000, 3px -3px 0 #000, 3px -2px 0 #000, 3px -1px 0 #000,
+      3px 0px 0 #000, 3px 1px 0 #000, 3px 2px 0 #000, 3px 3px 0 #000,
+      3px 4px 0 #000, 4px -4px 0 #000, 4px -3px 0 #000, 4px -2px 0 #000,
+      4px -1px 0 #000, 4px 0px 0 #000, 4px 1px 0 #000, 4px 2px 0 #000,
+      4px 3px 0 #000, 4px 4px 0 #000;
+  }
+}

frontend/app/level-select/page.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { levels } from "@/config/levels";
+
+export default function LevelSelectDemo() {
+  return (
+    <main className="min-h-screen pb-48 bg-cover bg-map pt-11">
+      <div className="container">
+        <h1 className="text-6xl font-bold leading-tight text-center text-outline-4 xl:text-8xl text-yellow tracking-[4px]">
+          Please Select the Level of Difficulty
+          <span className="block leading-tight tracking-[20px]">
+            請選擇難度
+          </span>
+        </h1>
+        <div className="grid grid-rows-3 gap-16 pt-16 justify-items-center">
+          {levels.map((level) => {
+            return (
+              <Button
+                key={level.en}
+                className="w-full h-auto transition-all bg-gradient-to-r from-tertiary to-secondary rounded-3xl py-14 shadow-custom hover:scale-95 active:scale-95"
+                size="lg"
+              >
+                <span className="text-white font-bold tracking-[2px] text-outline-2 text-7xl xl:text-8xl">
+                  {`${level.en} ${level.zh}`}
+                </span>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/components/investigator-card2/index.tsx

@@ -0,0 +1,90 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { Card, CardFooter, CardHeader, CardTitle } from "../ui/card";
+
+interface InvestigatorCardProps {
+  investigator: Investigator;
+  imgUrl: string;
+  sanity: Sanity;
+}
+
+const InvestigatorCard = React.memo(function ({
+  investigator,
+  imgUrl,
+  sanity,
+}: InvestigatorCardProps) {
+  const [isSelected, setIsSelected] = useState(false);
+
+  const gradientStyle = useMemo(
+    () => ({
+      sane: "from-tertiary to-brown",
+      insane: "from-primary to-secondary",
+    }),
+    []
+  );
+
+  const sanityText = useMemo(
+    () => ({
+      sane: "/img/sane-stroke-text.svg",
+      insane: "/img/insane-stroke-text.svg",
+    }),
+    []
+  );
+
+  const sanitySign = useMemo(
+    () => ({
+      sane: "/img/sane-sign.png",
+      insane: "/img/insane-sign.png",
+    }),
+    []
+  );
+
+  return (
+    <Card
+      className={cn(
+        "rounded-2xl w-60 min-h-[250px] border-0 bg-gradient-to-r shadow-lg cursor-pointer transition-all",
+        "hover:scale-95 active:scale-95",
+        gradientStyle[sanity],
+        isSelected ? "grayscale" : "grayscale-0"
+      )}
+      onClick={() => setIsSelected((v) => !v)}
+    >
+      <CardHeader className="relative w-full h-auto p-0">
+        <Image
+          src={imgUrl}
+          alt={`investigator-card`}
+          width={250}
+          height={250}
+          className="rounded-t-2xl"
+        />
+        <div className="absolute top-3 left-3">
+          <Image
+            src={sanityText[sanity]}
+            alt="sanity"
+            width={50}
+            height={75}
+            className="w-auto h-6"
+          />
+        </div>
+      </CardHeader>
+      <CardFooter className="w-full gap-3 justify-center align-center relative py-2 px-4 min-h-[45px]">
+        <CardTitle className="text-2xl text-white capitalize font-display">
+          {investigator}
+        </CardTitle>
+        <div className="absolute right-1 bottom-1">
+          <Image
+            src={sanitySign[sanity]}
+            alt={`sanity-sign`}
+            width={35}
+            height={35}
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  );
+});
+
+InvestigatorCard.displayName = "InvestigatorCard";
+export default InvestigatorCard;

frontend/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/config/investigators.ts

@@ -0,0 +1,44 @@
+export const investigators: InvestigatorData[] = [
+  {
+    name: "detective",
+    saneImage: "/img/detective-sane.webp",
+    insaneImage: "/img/detective-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "doctorate",
+    saneImage: "/img/doctorate-sane.webp",
+    insaneImage: "/img/doctorate-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "driver",
+    saneImage: "/img/driver-sane.webp",
+    insaneImage: "/img/driver-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "hunter",
+    saneImage: "/img/hunter-sane.webp",
+    insaneImage: "/img/hunter-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "magician",
+    saneImage: "/img/magician-sane.webp",
+    insaneImage: "/img/magician-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "occultist",
+    saneImage: "/img/occultist-sane.webp",
+    insaneImage: "/img/occultist-insane.webp",
+    sanity: "sane",
+  },
+  {
+    name: "reporter",
+    saneImage: "/img/reporter-sane.webp",
+    insaneImage: "/img/reporter-insane.webp",
+    sanity: "sane",
+  },
+];