feat: choices and result logic

src/components/story/Score.tsx

@@ -0,0 +1,17 @@
+import scores from "../../store/score.ts";
+const score = scores.get();
+
+const Score = () => {
+  return (
+    <div className="flex items-center justify-center gap-2 text-center text-3xl font-bold">
+      <p id="sangria">{score[0]}</p>
+      <p id="cosmopolitan">{score[1]}</p>
+      <p id="pinacolada">{score[2]}</p>
+      <p id="ginandtonic">{score[3]}</p>
+      <p id="bluelagoon">{score[4]}</p>
+      <p id="lavenderlemonade">{score[5]}</p>
+    </div>
+  );
+};
+
+export default Score;

src/components/story/TapLast.tsx

@@ -0,0 +1,40 @@
+import scores from "../../store/score.ts";
+const score = scores.get();
+const url = {
+  0: "../cocktail/sangria",
+  1: "../cocktail/cosmopolitan",
+  2: "../cocktail/pinacolada",
+  3: "../cocktail/ginandtonic",
+  4: "../cocktail/bluelagoon",
+  5: "../cocktail/lavenderlemonade",
+};
+
+const TapLast = () => {
+  const handleEvents = () => {
+    console.log(score);
+    let maxKey: string;
+    const scoreMap: { [key: string]: number } = score;
+    const maxScore = Math.max(...Object.values(scoreMap));
+    Object.keys(scoreMap).forEach((key) => {
+      if (scoreMap[key] === maxScore) {
+        maxKey = key;
+      }
+    });
+    location.href = url[maxKey];
+  };
+
+  return (
+    <div
+      className="absolute my-auto h-full w-full opacity-50 hover:cursor-pointer"
+      onClick={handleEvents}
+    >
+      <p className="absolute bottom-72 right-8 text-center font-medium">
+        Tap to
+        <br />
+        continue
+      </p>
+    </div>
+  );
+};
+
+export default TapLast;

src/components/story/ฺButtonScore.tsx

@@ -14,7 +14,7 @@ const ButtonScore = ({ text, scoreArray, redirect }: 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"
+      className="flex h-fit w-full flex-wrap items-center justify-center whitespace-pre-line rounded-xl bg-mutedpurple px-4 py-3.5 text-center text-xs font-normal text-white"
       onClick={handleClick}
     >
       {text}

src/pages/story/Q1.astro

@@ -0,0 +1,31 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Q2";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="คุณเข้ามาที่บาร์แห่งหนึ่ง\nบาร์แห่งนี้เป็น">
+      <ButtonScore
+        client:load
+        text="บาร์ชื่อดัง รีวิวแน่น"
+        scoreArray={[2, 0, 2, 0, 0, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="บาร์ลับ สงบ ไม่ค่อยมีคน"
+        scoreArray={[0, 0, 0, 2, 2, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="บาร์ที่คุณเคยมากับคนรู้จัก"
+        scoreArray={[1, 0, 2, 1, 0, 1]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q10.astro

@@ -0,0 +1,15 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Button from "../../components/story/Button";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene14"; //Temporary: Skip to the end of the story
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="การที่คุณเข้าบาร์นี้มา ทำให้คุณมีความสุขไหม">
+      <Button client:load text="มี" redirect={redirect} />
+      <Button client:load text="เฉย ๆ" redirect={redirect} />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q2.astro

@@ -0,0 +1,15 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Button from "../../components/story/Button";
+import ChoiceCard from "../../components/story/ChoiceCard";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="สิ่งแรกที่คุณให้ความสนใจคือ">
+      <Button client:load text="การตกแต่งร้าน" redirect="./Q3A" />
+      <Button client:load text="คนในร้าน" redirect="./Q3C" />
+      <Button client:load text="เสียงดนตรีประกอบ" redirect="./Q3B" />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q3A.astro

@@ -0,0 +1,31 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene3";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="บาร์แห่งนี้มีการตกแต่งแบบไหน">
+      <ButtonScore
+        client:load
+        text="ตกแต่งเรียบหรู"
+        scoreArray={[2, 0, 0, 1, 0, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="แสงสีจัดเต็ม พร้อมปาร์ตี้สุด ๆ"
+        scoreArray={[0, 1, 2, 0, 2, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="แปลกใหม่ไม่เหมือนใคร"
+        scoreArray={[0, 2, 1, 0, 1, 0]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q3B.astro

@@ -0,0 +1,31 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene3";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="เพลงที่เปิดอยู่ในบาร์เป็นยังไง">
+      <ButtonScore
+        client:load
+        text="เพลงเบา ๆ คลอ ๆ"
+        scoreArray={[1, 1, 0, 1, 0, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="เพลงเศร้า อกหัก เคล้าน้ำตา"
+        scoreArray={[0, 1, 0, 2, 1, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="เพลงสนุก แด๊นซ์กระจาย"
+        scoreArray={[0, 1, 2, 0, 2, 0]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q3C.astro

@@ -0,0 +1,37 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene3";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="ในการมาบาร์วันนี้ คุณคาดหวังที่จะ">
+      <ButtonScore
+        client:load
+        text="ชิว ๆ จิบเครื่องดื่มสบาย ๆ"
+        scoreArray={[0, 2, 0, 1, 1, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="แฮงก์เอ้าท์กับเพื่อน"
+        scoreArray={[0, 2, 2, 0, 0, 2]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="พบเจอคนใหม่ ๆ ในชีวิต"
+        scoreArray={[0, 0, 2, 1, 1, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="หนีจากเรื่องทุกข์ใจ"
+        scoreArray={[1, 0, 0, 2, 1, 2]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q4.astro

@@ -0,0 +1,17 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Button from "../../components/story/Button";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Q5";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="บาร์เทนเดอร์ถามคุณว่า\nวันนี้คุณอยากดื่มอะไร">
+      <Button client:load text="วิสกี้" redirect={redirect} />
+      <Button client:load text="จิน" redirect={redirect} />
+      <Button client:load text="วอดก้า" redirect={redirect} />
+      <Button client:load text="รัม" redirect={redirect} />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q5.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene4";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard
+      header="บาร์เทนเดอร์เริ่มชวนคุณคุยระหว่างชงเครื่องดื่ม เขาถามคุณว่า\nถ้ามีเวลาหนึ่งวันที่จะทำอะไรก็ได\nคุณจะเลือกทำอะไร"
+    >
+      <ButtonScore
+        client:load
+        text="ดูหนังคนเดียวชิว ๆ"
+        scoreArray={[0, 2, 0, 1, 2, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="กินข้าวกับครอบครัว"
+        scoreArray={[1, 1, 2, 2, 0, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ใช้เวลากับคนรัก"
+        scoreArray={[2, 1, 0, 2, 0, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="พาสัตว์เลี้ยงไปเที่ยว"
+        scoreArray={[1, 2, 1, 1, 1, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ปาร์ตี้กับเพื่อนฝูง"
+        scoreArray={[0, 2, 2, 0, 1, 1]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>

src/pages/story/Q6.astro

@@ -0,0 +1,39 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene5";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard
+      header="บาร์เทนเดอร์ถามคุณต่อ\nถ้าคุณได้เครื่องดื่มที่ทำให้มี\nพลังวิเศษได้ คุณอยากมีพลังอะไร"
+    >
+      <ButtonScore
+        client:load
+        text="อ่านใจ"
+        scoreArray={[2, 0, 1, 0, 1, 2]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ย้อนเวลา"
+        scoreArray={[2, 0, 0, 2, 1, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ล่องหน"
+        scoreArray={[0, 2, 0, 2, 2, 1]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="เห็นอนาคต"
+        scoreArray={[2, 0, 0, 1, 1, 1]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>