Merge pull request #16 from esc-chula/scene3

feat: scene3

src/pages/story/3-01.astro

@@ -0,0 +1,18 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+
+import BackgroundImage from "@/assets/story/scene-3/01.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <div class="h-fit w-80 select-none rounded-xl border-4 bg-white border-white">
+        <div class="mb-2.5 ml-2.5 mt-2.5 break-words text-center font-semibold text-sm">
+            <p>"ศูนย์ปฏิบัติการแห่งอนาคต"</p>
+      </div>
+    </div>
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-02" client:load />
+</ImagePageLayout>

src/pages/story/3-02.astro

@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/02.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="ชาไทย"
+      text={"นั่น ลองเข้าไปขอความช่วยเหลือเรื่องสัญญาณจาก “Engine” ผู้ดูแลศูนย์ปฏิบัติการแห่งนี้ กันดีกว่า"}
+      className="bg-chathai"
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-03" client:load />
+</ImagePageLayout>

src/pages/story/3-03.astro

@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/03.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="%USERNAME%"
+      text={"ช่วยด้วย เกิดปัญหาใหญ่ขึ้นแล้ว!"}
+      className="bg-user"
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-04" client:load />
+</ImagePageLayout>

src/pages/story/3-04.astro

@@ -0,0 +1,11 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+
+import BackgroundImage from "@/assets/story/scene-3/04.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <Tap delay={0.5} redirectUrl="/story/3-05" client:load />
+</ImagePageLayout>

src/pages/story/3-05.astro

@@ -0,0 +1,20 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/05.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="%USERNAME%"
+      text={"ตอนนี้ที่โรงงานสัญญาณขาดหายไป เธอสามารถแก้ไขได้ไหม"}
+      className="bg-user"
+      client:only
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-06" client:load />
+</ImagePageLayout>

src/pages/story/3-06.astro

@@ -0,0 +1,27 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/05.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <div class="mb-12 flex flex-col items-center">
+        <TextBubble
+        name="%USERNAME%"
+        text={"ตอนนี้ที่โรงงานสัญญาณขาดหายไป เธอสามารถแก้ไขได้ไหม"}
+        className="bg-user"
+        client:only
+        />
+        <TextBubble
+        name="Engine"
+        text={"งั้นเดี๋ยวฉันจะรีบติดต่อกับลูกทีมของฉันให้"}
+        className="bg-engine"
+        />
+    </div>
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-07" client:load />
+</ImagePageLayout>

src/pages/story/3-07.astro

@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/06.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="Engine"
+      text={"เธออยากทำตำแหน่งไหนในงานนี้ไหม ?"}
+      className="bg-engine"
+      client:only
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-08" client:load />
+</ImagePageLayout>

src/pages/story/3-08.astro

@@ -0,0 +1,30 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import AnswerComponent from "@/components/inputs/AnswerComponent";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/06.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="Engine"
+      text={"เธออยากทำตำแหน่งไหนในงานนี้ไหม ?"}
+      className="bg-engine"
+      client:only
+    />
+  </div>
+
+  <AnswerComponent
+    answers={[
+      { text: "แบ่งงาน ดูภาพรวม เป็นคนตัดสินใจ", attribute: "A" },
+      { text: "ผู้ช่วยฝ่ายเทคนิค คิดวิธีแก้ปัญหา", attribute: "B" },
+      { text: "ฝ่ายประสานงาน สื่อสารกับทุกคน", attribute: "C" },
+      { text: "เป็นที่ปรึกษา ใครมีปัญหาขอให้บอก", attribute: "D" },
+    ]}
+    redirectUrl="/story/3-09"
+    client:only
+  />
+</ImagePageLayout>

src/pages/story/3-09.astro

@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/07.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="Engine"
+      text={"โอ้ เยี่ยมไปเลย ! งั้นเรามาเริ่มกันเลยดีกว่า"}
+      className="bg-engine"
+      client:only
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-10" client:load />
+</ImagePageLayout>

src/pages/story/3-10.astro

@@ -0,0 +1,11 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+
+import BackgroundImage from "@/assets/story/scene-3/08.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <Tap delay={0.5} redirectUrl="/story/3-11" client:load />
+</ImagePageLayout>

src/pages/story/3-11.astro

@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/09.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="Engine"
+      text={"ยะ . . . แย่แล้ว ! คอมดับ ทำยังไงดี !!!"}
+      className="bg-engine"
+      client:only
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-12" client:load />
+</ImagePageLayout>