chula/gearfest-frontend into GEA37-infinite-loop-story

package.json

@@ -22,11 +22,13 @@
     "astro": "^4.0.7",
     "clsx": "2.0.0",
     "framer-motion": "10.16.16",
+    "html-to-image": "1.11.11",
     "nanostores": "0.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.1",
     "tailwindcss": "^3.4.0",
+    "tailwind-merge": "2.2.0",
     "typescript": "^5.3.3"
   },
   "devDependencies": {

src/components/story/Button.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  text: string;
+  handleClick?: () => void;
+}
+
+const Button = ({ text, handleClick }: Props) => {
+  return (
+    <button
+      className="flex h-fit w-full flex-wrap items-center justify-center rounded-xl bg-mutedpurple px-4 py-3.5 text-center text-xs font-normal text-white"
+      onClick={handleClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;

src/components/story/ButtonSet.tsx

@@ -0,0 +1,47 @@
+import { BACKGROUND_BOX, TEXT, type Cocktail } from "@/data/cocktail";
+import { cn } from "@/lib/utils";
+import * as htmlToImage from "html-to-image";
+interface Props extends Cocktail {}
+
+const ButtonSet = ({ variant }: Props): JSX.Element => {
+  const downloadImage = () => {
+    const result = document.getElementById("result");
+    if (!result) return;
+    htmlToImage.toJpeg(result, { quality: 0.96 }).then(function (dataUrl) {
+      const link = document.createElement("a");
+      link.download = "result.jpeg";
+      link.href = dataUrl;
+      link.click();
+    });
+  };
+
+  return (
+    <div className="relative mx-auto mb-16 mt-2 flex w-64 gap-4" id="buttonset">
+      <a
+        href="/"
+        className={cn(
+          `flex w-full flex-wrap items-center justify-center gap-4 rounded-3xl border border-rose-200 px-2 py-1.5
+        text-center font-semibold shadow-md`,
+          BACKGROUND_BOX[variant],
+          TEXT[variant]
+        )}
+      >
+        กลับสู่หน้าหลัก
+      </a>
+      <button
+        className={cn(
+          `flex w-full flex-wrap items-center justify-center gap-2 rounded-3xl border border-rose-200 px-2 py-1.5
+        text-center font-semibold shadow-md`,
+          BACKGROUND_BOX[variant],
+          TEXT[variant]
+        )}
+        onClick={downloadImage}
+      >
+        <i className="icon-[mdi--download]"></i>
+        บันทึกรูป
+      </button>
+    </div>
+  );
+};
+
+export default ButtonSet;

src/components/story/Card.tsx

@@ -0,0 +1,36 @@
+import { useRef, type ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { BACKGROUND_BOX, NAME, TEXT, type Cocktail } from "@/data/cocktail";
+
+interface Props extends Cocktail {
+  children: ReactNode;
+  img: string;
+}
+
+const Card = ({ variant, children, img }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-1 z-10 mt-1 block h-[36rem] w-[22rem] max-w-full items-center justify-center text-pretty rounded-2xl border-[#FFEEE8] px-2 py-2 text-center shadow-md",
+        BACKGROUND_BOX[variant]
+      )}
+    >
+      <div className="mx-auto h-[35rem] rounded-2xl border border-amber-50 px-3">
+        <img src={img} className="mx-auto w-[7rem]" />
+        <h1 className={cn(`pb-2 text-2xl font-bold`, TEXT[variant])}>
+          {NAME[variant]}
+        </h1>
+        <div className="text-pretty pb-4 text-xs font-medium text-mutedbrown">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/components/story/ChoiceCard.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+interface Props {
+  header: string;
+  children: ReactNode;
+}
+
+const ChoiceCard = ({ header, children }: Props) => {
+  return (
+    <div
+      className="border-1 mt-1 flex h-fit w-80 flex-wrap items-center justify-center gap-2 rounded-2xl
+        border border-mutedpurple bg-white px-8 py-8 text-center font-sans shadow-md"
+    >
+      <p className="mb-4 whitespace-pre-line text-lg font-bold text-mutedpurple">
+        {header}
+      </p>
+      {children}
+    </div>
+  );
+};
+
+export default ChoiceCard;

src/components/story/FooterDecorator.astro

@@ -0,0 +1,63 @@
+---
+import { Image } from "astro:assets";
+
+import Cake1 from "@/assets/elements/cake-1.png";
+import Calendar from "@/assets/elements/calendar.png";
+import Donut from "@/assets/elements/donut.png";
+import Drinks from "@/assets/elements/drinks.png";
+import Heart1 from "@/assets/elements/heart-1.png";
+import Letter from "@/assets/elements/letter.png";
+import Orange from "@/assets/elements/orange.png";
+import Palette from "@/assets/elements/palette.png";
+import Strawberry from "@/assets/elements/strawberry.png";
+---
+
+<div
+  class="pointer-events-none absolute inset-x-0 -left-[1.25rem] bottom-32 select-none opacity-80"
+>
+  <Image
+    class="absolute left-0 top-[48px] h-32 w-[152px]"
+    src={Calendar}
+    alt=""
+  />
+  <Image
+    class="absolute left-[471.56px] top-[8.91px] h-[166.91px] w-[140.50px] origin-top-left rotate-[62.88deg]"
+    src={Palette}
+    alt=""
+  />
+  <Image
+    class="absolute left-[193px] top-0 h-[90px] w-24"
+    src={Heart1}
+    alt=""
+  />
+  <Image
+    class="absolute left-[226.20px] top-[15px] h-[105.82px] w-[109.92px] origin-top-left rotate-[1.19deg]"
+    src={Orange}
+    alt=""
+  />
+  <Image
+    class="absolute left-[142px] top-[45px] h-[104px] w-[118px]"
+    src={Donut}
+    alt=""
+  />
+  <Image
+    class="absolute left-[117px] top-[45px] h-[121px] w-[70px]"
+    src={Drinks}
+    alt=""
+  />
+  <Image
+    class="absolute left-[226px] top-[67.43px] h-[115.51px] w-[129.02px] origin-top-left rotate-[-17.79deg]"
+    src={Letter}
+    alt=""
+  />
+  <Image
+    class="absolute left-[207px] top-[69px] h-[88px] w-[88px]"
+    src={Strawberry}
+    alt=""
+  />
+  <Image
+    class="absolute left-[315px] top-[71px] h-[82px] w-[84px]"
+    src={Cake1}
+    alt=""
+  />
+</div>

src/components/story/ScoredButton.tsx

@@ -0,0 +1,17 @@
+import { addScores } from "../../store/score.ts";
+import Button from "./Button";
+
+interface Props {
+  text: string;
+  scores: number[];
+}
+
+const ScoredButton = ({ text, scores }: Props): JSX.Element => {
+  const handleClick = () => {
+    addScores(scores);
+  };
+
+  return <Button text={text} handleClick={handleClick} />;
+};
+
+export default ScoredButton;

src/components/story/Tap.tsx

@@ -0,0 +1,39 @@
+import scores from "../../store/score.ts";
+const score = scores.get();
+interface Props {
+  redirect?: string;
+  scored?: boolean;
+}
+
+const Tap = ({ redirect, scored }: Props) => {
+  if (scored) {
+    const url = {
+      0: "../cocktail/sangria",
+      1: "../cocktail/cosmopolitan",
+      2: "../cocktail/pinacolada",
+      3: "../cocktail/ginandtonic",
+      4: "../cocktail/bluelagoon",
+      5: "../cocktail/lavenderlemonade",
+    };
+    const scoreMap: { [key: string]: number } = score;
+    const fullscore = [16, 15, 16, 15, 17, 13];
+    const product: number[] = [];
+    for (let i = 0; i < fullscore.length; i++) {
+      product.push(scoreMap[i] / fullscore[i]);
+    }
+    const maxScore = Math.max(...product);
+    const maxKey = product.indexOf(maxScore);
+    redirect = url[maxKey];
+  }
+  return (
+    <a href={redirect} className="absolute my-auto h-full w-full opacity-50">
+      <p className="absolute bottom-72 right-8 text-center font-medium">
+        Tap to
+        <br />
+        continue
+      </p>
+    </a>
+  );
+};
+
+export default Tap;

src/data/cocktail.ts

@@ -0,0 +1,40 @@
+export interface Cocktail {
+	variant: "raspberry" | "cosmo" | "pina" | "gin" | "lagoon" | "lalemon";
+}
+
+export const BACKGROUND: Record<Cocktail["variant"], string> = {
+	raspberry: "bg-raspberry",
+	cosmo: "bg-cosmo",
+	pina: "bg-pina",
+	gin: "bg-gin",
+	lagoon: "bg-lagoon",
+	lalemon: "bg-lalemon",
+};
+
+export const BACKGROUND_BOX: Record<Cocktail["variant"], string> = {
+	raspberry: "bg-raspberrybox",
+	cosmo: "bg-cosmobox",
+	pina: "bg-pinabox",
+	gin: "bg-ginbox",
+	lagoon: "bg-lagoonbox",
+	lalemon: "bg-lalemonbox",
+};
+
+export const TEXT: Record<Cocktail["variant"], string> = {
+	raspberry: "text-salmon",
+	cosmo: "text-peach",
+	pina: "text-pineapple",
+	gin: "text-leaf",
+	lagoon: "text-tropical",
+	lalemon: "text-lavender",
+};
+
+export const NAME: Record<Cocktail["variant"], string> = {
+	raspberry: "Summer Berry Sangria",
+	cosmo: "Cosmopolitan",
+	pina: "Pina Colada",
+	gin: "Gin and Tonic",
+	lagoon: "Blue Lagoon",
+	lalemon: "Lavender Lemonade",
+};
+

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import "@/style.css";
+import { ViewTransitions } from "astro:transitions";
 interface Props {
   pageTitle?: string;
 }
@@ -13,10 +15,11 @@ const { pageTitle = "GearFestival" } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>{pageTitle}</title>
+    <ViewTransitions />
   </head>
   <body>
     <main
-      class="absolute left-1/2 flex min-h-screen w-full max-w-md -translate-x-1/2 outline-dashed outline-2 outline-black"
+      class="absolute left-1/2 flex min-h-screen w-full max-w-md -translate-x-1/2 font-sans outline-dashed outline-2 outline-black"
     >
       <slot />
     </main>