feat: infinite loop story

src/components/story/Textbox.tsx

@@ -0,0 +1,28 @@
+// src/components/story/Textbox.astro
+
+import type { ReactNode } from "react";
+
+interface Props {
+  header: string;
+}
+
+const Textbox = ({ header }: Props) => {
+  return (
+    <div className="border-1 mt-1 flex flex-col h-80 w-80 items-start justify-start gap-2 rounded-2xl
+      border border-mutedpurple bg-mutedpurple px-8 py-4 text-left font-sans shadow-md">
+      <p className="mb-2 whitespace-pre-line text-lg font-bold text-white">
+        {header}
+      </p>
+      <label htmlFor="userAnswer" className="text-white">
+        เขียนคำตอบของคุณ....
+      </label>
+      <textarea
+        id="userAnswer"
+        className="border-none bg-mutedpurple rounded-md p-2 text-lg h-full w-full text-white" // Added 'text-white'
+        onChange={(e) => console.log(`User's answer: ${e.target.value}`)}
+      />
+    </div>
+  );
+};
+
+export default Textbox;

src/pages/story/Q11A.astro

@@ -0,0 +1,19 @@
+---
+import Scene from "../../images/bg_bar.JPG";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Textbox from "@/components/story/Textbox";
+import ChoiceCard from "@/components/story/ChoiceCard";
+const redirect = "./Scene11";
+---
+
+<BaseLayout>
+  <div class="flex flex-col items-center justify-center h-screen relative">
+    <img class="z-0 mx-auto object-contain" src={Scene.src} alt="Scene Image" />
+    <form class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center gap-8" action={redirect}>
+      <ChoiceCard header= "แล้วสำหรับคุณ \nคำว่า‘ความสุข’ คืออะไร">
+        <Textbox />
+      </ChoiceCard>
+    </form>
+  </div>
+</BaseLayout>
+

src/pages/story/Q11B.astro

@@ -0,0 +1,19 @@
+---
+import Scene from "../../images/bg_bar.JPG";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Textbox from "@/components/story/Textbox";
+import ChoiceCard from "@/components/story/ChoiceCard";
+const redirect = "./Scene11";
+---
+
+<BaseLayout>
+  <div class="flex flex-col items-center justify-center h-screen relative">
+    <img class="z-0 mx-auto object-contain" src={Scene.src} alt="Scene Image" />
+    <form class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center gap-8" action={redirect}>
+      <ChoiceCard header= "แล้วสำหรับคุณ \nคำว่า‘ความสุข’ คืออะไร">
+        <Textbox />
+      </ChoiceCard>
+    </form>
+  </div>
+</BaseLayout>
+

src/pages/story/Q13.astro

@@ -0,0 +1,19 @@
+---
+import Scene from "../../images/bg_bar.JPG";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Textbox from "@/components/story/Textbox";
+import ChoiceCard from "@/components/story/ChoiceCard";
+const redirect = "./Scene12";
+---
+
+<BaseLayout>
+    <div class="flex flex-col items-center justify-center h-screen relative">
+      <img class="z-0 mx-auto object-contain" src={Scene.src} alt="Scene Image" />
+      <form class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center gap-8" action={redirect}>
+        <ChoiceCard header="ถ้ามี ‘คนที่คุณรัก‘ \nมานั่งฟังเรื่องราวของคุณ \nคิดว่าเขาจะพูดอะไรกับคุณ">
+          <Textbox />
+        </ChoiceCard>
+      </form>
+    </div>
+  </BaseLayout>
+

src/pages/story/Q14.astro

@@ -0,0 +1,19 @@
+---
+import Scene from "../../images/bg_bar.JPG";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Textbox from "@/components/story/Textbox";
+import ChoiceCard from "@/components/story/ChoiceCard";
+const redirect = "./Q15";
+---
+
+<BaseLayout>
+    <div class="flex flex-col items-center justify-center h-screen relative">
+      <img class="z-0 mx-auto object-contain" src={Scene.src} alt="Scene Image" />
+      <form class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center gap-8" action={redirect}>
+        <ChoiceCard header="คุณเมาแล้วนึกถึงเรื่องอดีต \nคุณคิดถึงใครบางคน \nผู้คนที่ทำให้คุณมีวันนี้ คนนั้นคือใคร">
+          <Textbox />
+        </ChoiceCard>
+      </form>
+    </div>
+  </BaseLayout>
+

src/pages/story/Q15.astro

@@ -0,0 +1,19 @@
+---
+import Scene from "../../images/bg_bar.JPG";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Textbox from "@/components/story/Textbox";
+import ChoiceCard from "@/components/story/ChoiceCard";
+const redirect = "./Q16";
+---
+
+<BaseLayout>
+    <div class="flex flex-col items-center justify-center h-screen relative">
+      <img class="z-0 mx-auto object-contain" src={Scene.src} alt="Scene Image" />
+      <form class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center gap-8" action={redirect}>
+        <ChoiceCard header="แล้วคุณอยากจะกล่าวอะไร \nกับผู้คนเหล่านั้น">
+          <Textbox />
+        </ChoiceCard>
+      </form>
+    </div>
+  </BaseLayout>
+

src/pages/story/scene1.astro

@@ -1,37 +1,43 @@
 ---
-import Scene from "../../images/IMG_1029.gif"
-import Craycircle from "../../images/Bubble box 1.png"
+import Scene from "../../images/Scene1.gif"
+import BubbleBox from "../../images/BubbleBox.png"
 import BaseLayout from "../../layouts/BaseLayout.astro"
+import Tap from "../../components/story/Tap.tsx"
 ---
 
 <BaseLayout>
-    <div class="relative h-full w-full"> 
-
-    <div class="fade-in">
-        <div class="absolute z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center" style="font-size: 16px">
-            เฮ้ออ<br/>หมดไปอีกหนึ่งวัน
+    <div class="relative h-full w-full">
+  
+      <div class="fade-in">
+        <div class="absolute z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center" style="font-size: 16px; font-weight: bold">
+          เฮ้ออ<br/>หมดไปอีกหนึ่งวัน
         </div>
-
         <div class="absolute z-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <img src={Craycircle.src} alt="Bubble box 1.png">
+          <img src={BubbleBox.src} alt="Bubble box 1.png">
         </div>
-
-        <a href="/" class="absolute z-50 bottom-10 left-1/2 -translate-x-1/ text-black text-opacity-50 px-4 py-2 rounded-md text-center" onclick="handleContinueClick()">
-            Tap to<br/>Continue
-        </a>       
+      </div>
+
+      <img class="relative z-0 h-screen mx-auto object-contain" src={Scene.src}></img>
+
+      <div class="relative fade-in">
+        <Tap redirect="./Scene2"/>
+      </div>
     </div>
-
-    <img class="relative z-0 h-screen mx-auto object-contain" src={Scene.src}></img>
-</div>
-</BaseLayout>
-
-<style>
+  </BaseLayout>
+
+  <style>
     @keyframes fadeIn {
       0% { opacity: 0; }
       100% { opacity: 1; }
     }
-
+  
     .fade-in {
-        animation: fadeIn 2s ease-in-out;
+      animation: fadeIn 2s ease-in-out;
+    }
+
+    /* Add a class for bold Thai text */
+    .bold-thai {
+      font-weight: bold;
     }
-</style>
+  </style>
+

src/pages/story/scene3.astro

@@ -1,19 +1,14 @@
 ---
-import Scene from "../../images/IMG_1010.gif"
+import Scene from "../../images/Scene3.gif"
 import BaseLayout from "../../layouts/BaseLayout.astro"
+import Tap from "../../components/story/Tap.tsx"
 ---
 
 <BaseLayout>
     <div class="relative h-full w-full"> 
-
-    <div class="fade-in">
-        <a href="/" class="absolute z-50 bottom-10 left-1/2 -translate-x-1/ text-black text-opacity-50 px-4 py-2 rounded-md text-center" onclick="handleContinueClick()">
-            Tap to<br/>Continue
-        </a>       
+    <img class="relative z-0 h-screen mx-auto object-contain" src={Scene.src} />
+    <div class="relative fade-in"><Tap redirect="./Q4"/></div>
     </div>
-
-    <img class="relative z-0 h-screen mx-auto object-contain" src={Scene.src}></img>
-</div>
 </BaseLayout>
 
 <style>

src/pages/story/scene4.astro

@@ -1,27 +1,23 @@
 ---
-import Scene from "../../images/IMG_1011.gif"
-import Craycircle from "../../images/Bubble box 1.png"
+import Scene from "../../images/Scene4.gif"
+import BubbleBox from "../../images/BubbleBox.png"
 import BaseLayout from "../../layouts/BaseLayout.astro"
+import Tap from "../../components/story/Tap.tsx"
 ---
 
 <BaseLayout>
     <div class="relative h-full w-full"> 
 
     <div class="fade-in">
-        <div class="absolute z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" style="font-size: 16px">
+        <div class="absolute z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" style="font-size: 16px; font-weight: bold">
             เป็นแผนที่ดีนะ
         </div>
-
         <div class="absolute z-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <img src={Craycircle.src} alt="Bubble box 1.png">
+            <img src={BubbleBox.src} alt="BubbleBox.png">
         </div>
-
-        <a href="/" class="absolute z-50 bottom-10 left-1/2 -translate-x-1/ text-black text-opacity-50 px-4 py-2 rounded-md text-center" onclick="handleContinueClick()">
-            Tap to<br/>Continue
-        </a>       
     </div>
-
     <img class="relative z-0 h-screen mx-auto object-contain" src={Scene.src}></img>
+    <div class="relative fade-in"><Tap redirect="./Q6"/></div>
 </div>
 </BaseLayout>