From c587ebcce79fcfc2d73969b9dcfa4690e8002204 Mon Sep 17 00:00:00 2001
From: mildrrnt <woranita888@gmail.com>
Date: Fri, 12 Jan 2024 14:37:24 +0700
Subject: [PATCH] feat: choices and result logic

---
 src/components/story/Score.tsx                | 17 +++++
 src/components/story/TapLast.tsx              | 40 ++++++++++++
 .../story/\340\270\272ButtonScore.tsx"        |  2 +-
 src/pages/story/1.astro                       | 20 ------
 src/pages/story/4.astro                       |  7 ---
 src/pages/story/Q1.astro                      | 31 ++++++++++
 src/pages/story/Q10.astro                     | 15 +++++
 src/pages/story/Q2.astro                      | 15 +++++
 src/pages/story/Q3A.astro                     | 31 ++++++++++
 src/pages/story/Q3B.astro                     | 31 ++++++++++
 src/pages/story/Q3C.astro                     | 37 +++++++++++
 src/pages/story/Q4.astro                      | 17 +++++
 src/pages/story/Q5.astro                      | 45 ++++++++++++++
 src/pages/story/Q6.astro                      | 39 ++++++++++++
 src/pages/story/{2.astro => Q7.astro}         | 62 +++++++++----------
 src/pages/story/Q8.astro                      | 25 ++++++++
 src/pages/story/Q9.astro                      | 31 ++++++++++
 src/pages/story/Scene10.astro                 |  9 +++
 src/pages/story/Scene14.astro                 |  9 +++
 src/pages/story/{3.astro => Scene3.astro}     | 18 +++---
 src/pages/story/Scene4.astro                  |  9 +++
 src/pages/story/Scene5.astro                  |  9 +++
 src/pages/story/Scene6.astro                  |  9 +++
 src/pages/story/Scene7.astro                  |  9 +++
 src/pages/story/Scene8.astro                  |  9 +++
 src/pages/story/Scene9.astro                  |  9 +++
 26 files changed, 487 insertions(+), 68 deletions(-)
 create mode 100644 src/components/story/Score.tsx
 create mode 100644 src/components/story/TapLast.tsx
 delete mode 100644 src/pages/story/1.astro
 delete mode 100644 src/pages/story/4.astro
 create mode 100644 src/pages/story/Q1.astro
 create mode 100644 src/pages/story/Q10.astro
 create mode 100644 src/pages/story/Q2.astro
 create mode 100644 src/pages/story/Q3A.astro
 create mode 100644 src/pages/story/Q3B.astro
 create mode 100644 src/pages/story/Q3C.astro
 create mode 100644 src/pages/story/Q4.astro
 create mode 100644 src/pages/story/Q5.astro
 create mode 100644 src/pages/story/Q6.astro
 rename src/pages/story/{2.astro => Q7.astro} (55%)
 create mode 100644 src/pages/story/Q8.astro
 create mode 100644 src/pages/story/Q9.astro
 create mode 100644 src/pages/story/Scene10.astro
 create mode 100644 src/pages/story/Scene14.astro
 rename src/pages/story/{3.astro => Scene3.astro} (83%)
 create mode 100644 src/pages/story/Scene4.astro
 create mode 100644 src/pages/story/Scene5.astro
 create mode 100644 src/pages/story/Scene6.astro
 create mode 100644 src/pages/story/Scene7.astro
 create mode 100644 src/pages/story/Scene8.astro
 create mode 100644 src/pages/story/Scene9.astro

diff --git a/src/components/story/Score.tsx b/src/components/story/Score.tsx
new file mode 100644
index 0000000..fae4ab1
--- /dev/null
+++ b/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;
diff --git a/src/components/story/TapLast.tsx b/src/components/story/TapLast.tsx
new file mode 100644
index 0000000..1264e32
--- /dev/null
+++ b/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;
diff --git "a/src/components/story/\340\270\272ButtonScore.tsx" "b/src/components/story/\340\270\272ButtonScore.tsx"
index a7e1454..adb5469 100644
--- "a/src/components/story/\340\270\272ButtonScore.tsx"
+++ "b/src/components/story/\340\270\272ButtonScore.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}
diff --git a/src/pages/story/1.astro b/src/pages/story/1.astro
deleted file mode 100644
index 1647482..0000000
--- a/src/pages/story/1.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import BaseLayout from "../../layouts/BaseLayout.astro";
-import Button from "../../components/story/Button";
-import ChoiceCard from "../../components/story/ChoiceCard";
-const redirect = "./2";
-import scores from "@/store/score";
-console.log(scores.get());
----
-
-<BaseLayout>
-  <section
-    class="flex w-full flex-col items-center justify-center gap-8 bg-slate-800"
-  >
-    <ChoiceCard header="นี่คือตัวอย่างปุ่ม\nที่ไม่นับคะแนนสักอัน">
-      <Button client:load text="Option 1" redirect={redirect} />
-      <Button client:load text="Option 2" redirect={redirect} />
-      <Button client:load text="Option 3" redirect={redirect} />
-    </ChoiceCard>
-  </section>
-</BaseLayout>
diff --git a/src/pages/story/4.astro b/src/pages/story/4.astro
deleted file mode 100644
index 1c70771..0000000
--- a/src/pages/story/4.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-import BaseLayout from "../../layouts/BaseLayout.astro";
----
-
-<BaseLayout>
-  <h1 class="text-3xl">Well done!</h1>
-</BaseLayout>
diff --git a/src/pages/story/Q1.astro b/src/pages/story/Q1.astro
new file mode 100644
index 0000000..d3b3ba9
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q10.astro b/src/pages/story/Q10.astro
new file mode 100644
index 0000000..3bae617
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q2.astro b/src/pages/story/Q2.astro
new file mode 100644
index 0000000..9bb672a
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q3A.astro b/src/pages/story/Q3A.astro
new file mode 100644
index 0000000..b0d44f5
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q3B.astro b/src/pages/story/Q3B.astro
new file mode 100644
index 0000000..2d8646a
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q3C.astro b/src/pages/story/Q3C.astro
new file mode 100644
index 0000000..f432e2f
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q4.astro b/src/pages/story/Q4.astro
new file mode 100644
index 0000000..4f32850
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q5.astro b/src/pages/story/Q5.astro
new file mode 100644
index 0000000..db7cf08
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/Q6.astro b/src/pages/story/Q6.astro
new file mode 100644
index 0000000..5c89e3a
--- /dev/null
+++ b/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>
diff --git a/src/pages/story/2.astro b/src/pages/story/Q7.astro
similarity index 55%
rename from src/pages/story/2.astro
rename to src/pages/story/Q7.astro
index 7eafd1a..0aadada 100644
--- a/src/pages/story/2.astro
+++ b/src/pages/story/Q7.astro
@@ -1,31 +1,31 @@
----
-import BaseLayout from "../../layouts/BaseLayout.astro";
-import ButtonScore from "../../components/story/ฺButtonScore";
-import ChoiceCard from "../../components/story/ChoiceCard";
-const redirect = "./3";
----
-
-<BaseLayout>
-  <section class="flex w-full flex-col items-center justify-center gap-8">
-    <ChoiceCard header="นี่คือตัวอย่างปุ่ม\nที่นับคะแนนหมดเลย">
-      <ButtonScore
-        client:load
-        text="Option 1"
-        scoreArray={[2, 0, 2, 0, 0, 1]}
-        redirect={redirect}
-      />
-      <ButtonScore
-        client:load
-        text="Option 2"
-        scoreArray={[0, 2, 0, 0, 2, 1]}
-        redirect={redirect}
-      />
-      <ButtonScore
-        client:load
-        text="Option 3"
-        scoreArray={[3, 0, 1, 1, 1, 2]}
-        redirect={redirect}
-      />
-    </ChoiceCard>
-  </section>
-</BaseLayout>
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene7";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="คุณยังเลือกที่จะดื่มมันไหม">
+      <ButtonScore
+        client:load
+        text="ไม่ดื่มดีกว่า"
+        scoreArray={[2, 0, 0, 0, 0, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ชิมสักหน่อย"
+        scoreArray={[0, 2, 1, 1, 1, 2]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ดื่มเลย แปลกใหม่"
+        scoreArray={[0, 2, 2, 0, 2, 2]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>
diff --git a/src/pages/story/Q8.astro b/src/pages/story/Q8.astro
new file mode 100644
index 0000000..097f914
--- /dev/null
+++ b/src/pages/story/Q8.astro
@@ -0,0 +1,25 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ButtonScore from "../../components/story/ฺButtonScore";
+import ChoiceCard from "../../components/story/ChoiceCard";
+const redirect = "./Scene9";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="คุณจะจัดทริปครั้งนี้ยังไง">
+      <ButtonScore
+        client:load
+        text="เลือกที่จะแวะเที่ยวตามทาง แวะตามที่เที่ยวต่าง ๆ\nหาประสบการณ์แปลกใหม่\nเพลิดเพลินกับการเดินทาง"
+        scoreArray={[0, 2, 2, 1, 2, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ออกเดินทางไปยังจุดหมายโดยทันที\nโดยไม่ออกนอกลู่นอกทาง\nเพื่อให้จบงานได้เร็วที่สุด"
+        scoreArray={[2, 0, 0, 0, 0, 2]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>
diff --git a/src/pages/story/Q9.astro b/src/pages/story/Q9.astro
new file mode 100644
index 0000000..6c32cea
--- /dev/null
+++ b/src/pages/story/Q9.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 = "./Scene10";
+---
+
+<BaseLayout>
+  <section class="flex w-full flex-col items-center justify-center gap-8">
+    <ChoiceCard header="ถ้าคุณเลือกชีวิตในอุดมคติได้\nคุณอยากใช้ชีวิตยังไง">
+      <ButtonScore
+        client:load
+        text="ชีวิตที่สงบเรียบง่าย"
+        scoreArray={[2, 2, 1, 0, 1, 0]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ชีวิตโลดโผน มีอิสระ"
+        scoreArray={[0, 1, 1, 2, 1, 2]}
+        redirect={redirect}
+      />
+      <ButtonScore
+        client:load
+        text="ชีวิตในโลกอื่น"
+        scoreArray={[0, 1, 0, 2, 2, 0]}
+        redirect={redirect}
+      />
+    </ChoiceCard>
+  </section>
+</BaseLayout>
diff --git a/src/pages/story/Scene10.astro b/src/pages/story/Scene10.astro
new file mode 100644
index 0000000..4efb7bd
--- /dev/null
+++ b/src/pages/story/Scene10.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Q10" />
+</BaseLayout>
diff --git a/src/pages/story/Scene14.astro b/src/pages/story/Scene14.astro
new file mode 100644
index 0000000..eacd35e
--- /dev/null
+++ b/src/pages/story/Scene14.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import TapLast from "../../components/story/TapLast";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้ แต่เป็นหน้าสุดท้าย
+  <TapLast client:load />
+</BaseLayout>
diff --git a/src/pages/story/3.astro b/src/pages/story/Scene3.astro
similarity index 83%
rename from src/pages/story/3.astro
rename to src/pages/story/Scene3.astro
index 1565cb1..d44634b 100644
--- a/src/pages/story/3.astro
+++ b/src/pages/story/Scene3.astro
@@ -1,9 +1,9 @@
----
-import BaseLayout from "../../layouts/BaseLayout.astro";
-import Tap from "../../components/story/Tap";
----
-
-<BaseLayout>
-  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
-  <Tap client:load redirect="./4" />
-</BaseLayout>
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Q4" />
+</BaseLayout>
diff --git a/src/pages/story/Scene4.astro b/src/pages/story/Scene4.astro
new file mode 100644
index 0000000..2a14408
--- /dev/null
+++ b/src/pages/story/Scene4.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Q8" />
+</BaseLayout>
diff --git a/src/pages/story/Scene5.astro b/src/pages/story/Scene5.astro
new file mode 100644
index 0000000..3114df0
--- /dev/null
+++ b/src/pages/story/Scene5.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Scene6" />
+</BaseLayout>
diff --git a/src/pages/story/Scene6.astro b/src/pages/story/Scene6.astro
new file mode 100644
index 0000000..a786a87
--- /dev/null
+++ b/src/pages/story/Scene6.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้ ไม่อร่อย
+  <Tap client:load redirect="./Q7" />
+</BaseLayout>
diff --git a/src/pages/story/Scene7.astro b/src/pages/story/Scene7.astro
new file mode 100644
index 0000000..b994684
--- /dev/null
+++ b/src/pages/story/Scene7.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Scene8" />
+</BaseLayout>
diff --git a/src/pages/story/Scene8.astro b/src/pages/story/Scene8.astro
new file mode 100644
index 0000000..2a14408
--- /dev/null
+++ b/src/pages/story/Scene8.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Q8" />
+</BaseLayout>
diff --git a/src/pages/story/Scene9.astro b/src/pages/story/Scene9.astro
new file mode 100644
index 0000000..4767563
--- /dev/null
+++ b/src/pages/story/Scene9.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
+---
+
+<BaseLayout>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./Q9" />
+</BaseLayout>