From 723f93825a2f58de89f3f560d785f63f9969ca9d Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Fri, 20 Jun 2025 22:53:54 +0700
Subject: [PATCH 01/25] Better Ui

---
 src/css/option.css  | 13 ++++++++-----
 src/css/textBox.css |  5 +++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/css/option.css b/src/css/option.css
index 7c4105f..f6b1498 100644
--- a/src/css/option.css
+++ b/src/css/option.css
@@ -2,17 +2,20 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 60vw;
-    background-color: white;
-    color: #8391b8;
+    width: 55vw;
+    background: rgba(255, 255, 255, 0.5);
+    /*color: #8391b8;*/
+    color: #393E46;
     border-style: solid;
     border-color: #8391b8;
     border-width: 5px;
     border-radius: 30px;
-    padding: 50px;
+    padding: 10px;
 }
 .optionSection {
     display: flex;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
     row-gap: 1rem;
 }
@@ -25,4 +28,4 @@
     .spriteBox {
         width: 75vw;
     }
-}
\ No newline at end of file
+}
diff --git a/src/css/textBox.css b/src/css/textBox.css
index 6f3376f..d9ee259 100644
--- a/src/css/textBox.css
+++ b/src/css/textBox.css
@@ -3,8 +3,9 @@
     justify-content: center;
     align-items: center;
     width: 60vw;
-    background-color: white;
-    color: #8391b8;
+    background: rgba(255, 255, 255, 0.5);
+    /*color: #8391b8;*/
+    color: #393E46;
     border-style: solid;
     border-color: #8391b8;
     border-width: 5px;

From 2f64ccecbd0301a3dc24301f0191d8029487a796 Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Fri, 20 Jun 2025 23:07:48 +0700
Subject: [PATCH 02/25] Fixing readability of text

---
 src/css/option.css  | 5 ++---
 src/css/textBox.css | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/css/option.css b/src/css/option.css
index f6b1498..5cca0b1 100644
--- a/src/css/option.css
+++ b/src/css/option.css
@@ -3,9 +3,8 @@
     justify-content: center;
     align-items: center;
     width: 55vw;
-    background: rgba(255, 255, 255, 0.5);
-    /*color: #8391b8;*/
-    color: #393E46;
+    background: rgba(245, 240, 221);
+    color: #8391b8;
     border-style: solid;
     border-color: #8391b8;
     border-width: 5px;
diff --git a/src/css/textBox.css b/src/css/textBox.css
index d9ee259..37cbdec 100644
--- a/src/css/textBox.css
+++ b/src/css/textBox.css
@@ -3,9 +3,8 @@
     justify-content: center;
     align-items: center;
     width: 60vw;
-    background: rgba(255, 255, 255, 0.5);
-    /*color: #8391b8;*/
-    color: #393E46;
+    background: rgba(245, 240, 221);
+    color: #8391b8;
     border-style: solid;
     border-color: #8391b8;
     border-width: 5px;

From b4d79329f89f86c14a4eaf9069b46d9e8c8b5e4a Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Sat, 21 Jun 2025 16:50:24 +0700
Subject: [PATCH 03/25] Convos in option

---
 src/pages/optionPage.jsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/optionPage.jsx b/src/pages/optionPage.jsx
index 042a349..2f1aa1a 100644
--- a/src/pages/optionPage.jsx
+++ b/src/pages/optionPage.jsx
@@ -8,6 +8,12 @@ import Animation from './components/animation.jsx';
 
 function OptionPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text ? data.text.replace("{name}", name) : null;
+  const DialogName = data.name ? data.name.replace("{name}", name) : null;
 
   return (
     <div
@@ -16,7 +22,7 @@ function OptionPage({data , onClicked}) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100svh',
-        width: '100svw',  
+        width: '100svw',
         flexDirection: 'column',
         backgroundImage: `url(${backgroundSRC})`,
         backgroundSize: 'cover',
@@ -28,10 +34,22 @@ function OptionPage({data , onClicked}) {
       </div>
       <div className='optionSection'>
         {
-            data.option.map((item,i) => 
+            data.option.map((item,i) =>
                 <div onClick={()=>onClicked(item.goTo-1)} key={i} className='optionBox title'>{item.text}</div>)
         }
       </div>
+      {DialogName && DialogText && (
+        <>
+        <div style={{ width: '60vw' }}>
+        <div className="nameBox title">
+        {DialogName}
+        </div>
+        </div>
+        <div className="textBox title" style={{ overflow: 'scroll' }}>
+        {DialogText}
+        </div>
+        </>
+      )}
     </div>
   );
 }

From ffc51b3f323c0e494c5931ec820d3bcf3122620d Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Sat, 21 Jun 2025 16:58:33 +0700
Subject: [PATCH 04/25] WebM thingy, broken css please fix

---
 src/pages/conversationPage.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/conversationPage.jsx b/src/pages/conversationPage.jsx
index 63ab8ea..b67c8ae 100644
--- a/src/pages/conversationPage.jsx
+++ b/src/pages/conversationPage.jsx
@@ -4,6 +4,7 @@ import '../css/global.css';
 import '../css/textBox.css';
 import '../css/nameBox.css';
 import '../css/conversation.css'
+import { useNavigate, useParams } from 'react-router-dom';
 import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
@@ -11,9 +12,13 @@ function ConversationPage({data , onClicked}) {
   const [name] = useState(() => {
     return sessionStorage.getItem("name") || '';
   });
+  const { char } = useParams();
 
   const DialogText = data.text.replace("{name}", name);
   const DialogName = data.name.replace("{name}", name);
+  const videoPath = `https://dl.techtransthai.org/fsob-assets/F_${char}_normal.webm`;
+  // https://dl.techtransthai.org/fsob-assets/F_Porsche_normal.webm
+  console.log(data.sprite);
 
   return (
     <div
@@ -31,7 +36,10 @@ function ConversationPage({data , onClicked}) {
       }}
     >
       <div className='spriteBox'>
-        <Animation src={`F${data.sprite}`}/>
+        <video width="200%" height="200%" autoPlay loop muted>
+          <source src={videoPath} type="video/webm" />
+          Your browser does not support the video tag.
+        </video>
       </div>
       <div style={{width:'60vw'}}>
         <div className='nameBox title'>

From daf4e9db9ced6bd234b7dea9ef3fbe7137d78b7d Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Sat, 21 Jun 2025 16:59:28 +0700
Subject: [PATCH 05/25] forgor to comment

---
 src/pages/conversationPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/conversationPage.jsx b/src/pages/conversationPage.jsx
index b67c8ae..47a014d 100644
--- a/src/pages/conversationPage.jsx
+++ b/src/pages/conversationPage.jsx
@@ -18,7 +18,7 @@ function ConversationPage({data , onClicked}) {
   const DialogName = data.name.replace("{name}", name);
   const videoPath = `https://dl.techtransthai.org/fsob-assets/F_${char}_normal.webm`;
   // https://dl.techtransthai.org/fsob-assets/F_Porsche_normal.webm
-  console.log(data.sprite);
+  //console.log(data.sprite);
 
   return (
     <div

From f752fdfba011d3f74e6660eab02b3d532367f5c6 Mon Sep 17 00:00:00 2001
From: mrrpmeowfurry <velocity.toml@proton.me>
Date: Sat, 21 Jun 2025 12:02:57 +0000
Subject: [PATCH 06/25] revert b4d79329f89f86c14a4eaf9069b46d9e8c8b5e4a

revert Convos in option
---
 src/pages/optionPage.jsx | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/pages/optionPage.jsx b/src/pages/optionPage.jsx
index 2f1aa1a..042a349 100644
--- a/src/pages/optionPage.jsx
+++ b/src/pages/optionPage.jsx
@@ -8,12 +8,6 @@ import Animation from './components/animation.jsx';
 
 function OptionPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
-  const [name] = useState(() => {
-    return sessionStorage.getItem("name") || '';
-  });
-
-  const DialogText = data.text ? data.text.replace("{name}", name) : null;
-  const DialogName = data.name ? data.name.replace("{name}", name) : null;
 
   return (
     <div
@@ -22,7 +16,7 @@ function OptionPage({data , onClicked}) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100svh',
-        width: '100svw',
+        width: '100svw',  
         flexDirection: 'column',
         backgroundImage: `url(${backgroundSRC})`,
         backgroundSize: 'cover',
@@ -34,22 +28,10 @@ function OptionPage({data , onClicked}) {
       </div>
       <div className='optionSection'>
         {
-            data.option.map((item,i) =>
+            data.option.map((item,i) => 
                 <div onClick={()=>onClicked(item.goTo-1)} key={i} className='optionBox title'>{item.text}</div>)
         }
       </div>
-      {DialogName && DialogText && (
-        <>
-        <div style={{ width: '60vw' }}>
-        <div className="nameBox title">
-        {DialogName}
-        </div>
-        </div>
-        <div className="textBox title" style={{ overflow: 'scroll' }}>
-        {DialogText}
-        </div>
-        </>
-      )}
     </div>
   );
 }

From 53eb06b8c0251187b8cac47ca133cc45367789f9 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Sun, 22 Jun 2025 23:32:07 +0700
Subject: [PATCH 07/25] packages

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c9eba7..624cf1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1667,9 +1667,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

From 313d3289286847e6b17ec2451c8bd625d3770ff0 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Sun, 22 Jun 2025 23:34:10 +0700
Subject: [PATCH 08/25] Test

---
 src/main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.jsx b/src/main.jsx
index 64a918f..9f32cbe 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -18,7 +18,7 @@ createRoot(document.getElementById('root')).render(
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/warn" element={<WarningPage />} />
-        <Route path="/name" element={<NamePage />} />
+s        <Route path="/name" element={<NamePage />} />
         <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />

From 1693567813a6ceca3d1c8c3430aae4d87502ba86 Mon Sep 17 00:00:00 2001
From: mrrpmeowfurry <velocity.toml@proton.me>
Date: Sun, 22 Jun 2025 16:34:58 +0000
Subject: [PATCH 09/25] revert 313d3289286847e6b17ec2451c8bd625d3770ff0

revert Test
---
 src/main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.jsx b/src/main.jsx
index 9f32cbe..64a918f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -18,7 +18,7 @@ createRoot(document.getElementById('root')).render(
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/warn" element={<WarningPage />} />
-s        <Route path="/name" element={<NamePage />} />
+        <Route path="/name" element={<NamePage />} />
         <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />

From 43dd81842e91ffe8cb41a2b66f5070fa93bd8873 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Sun, 22 Jun 2025 23:47:15 +0700
Subject: [PATCH 10/25] Ditching animation.jsx, and replace with WebM. Concept
 is already on Porchese

---
 public/yml/DialogPorsche.yml                  |  48 ++--
 src/main.jsx                                  |   2 -
 src/pages/components/animation.jsx            | 210 ------------------
 .../components/testAnimation_manyfiles.jsx    |  46 ----
 .../components/testAnimation_onefile.jsx      |  81 -------
 src/pages/conversationPage.jsx                |   6 +-
 src/pages/introductionPage.jsx                |   1 -
 src/pages/optionPage.jsx                      |   7 +-
 8 files changed, 31 insertions(+), 370 deletions(-)
 delete mode 100644 src/pages/components/animation.jsx
 delete mode 100644 src/pages/components/testAnimation_manyfiles.jsx
 delete mode 100644 src/pages/components/testAnimation_onefile.jsx

diff --git a/public/yml/DialogPorsche.yml b/public/yml/DialogPorsche.yml
index 55ab37d..69b73eb 100644
--- a/public/yml/DialogPorsche.yml
+++ b/public/yml/DialogPorsche.yml
@@ -8,7 +8,7 @@
   type: conversation
   name: Porsche
   text: ”Hi! I haven’t seen you around before so you must be new. I’m Porsche. Why don’t you sit with me and my friends? We'll tell you about the school!”
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 3
 
@@ -18,7 +18,7 @@
   option:
   - text: Sure!
     goTo: 4
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
 
 - id: 4
@@ -43,7 +43,7 @@
   type: conversation
   name: Porsche
   text: “Seems like people have been losing their stuff a lot lately. I can’t think of who would do it though, since we all know each other.”
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 8
 
@@ -55,14 +55,14 @@
     goTo: 9
   - text: "I don’t know either, I’m not familiar with anyone."
     goTo: 10
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
 
 - id: 9
   type: conversation
   name: Porsche
   text: “No! I don’t think so! But people might think it’s you because you’re new. It’s unfair but it’s just how it is sometimes.”
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 11
 
@@ -70,7 +70,7 @@
   type: conversation
   name: Porsche
   text: “Yeah I know. It’s ok. People will calm down. You don’t have to worry!”
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 11
 
@@ -106,7 +106,7 @@
   type: conversation
   name: Porsche
   text: “Hey, why are people saying that the thief might be me? How could it even be me? Did someone tell everyone it was me?”
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 17
 
@@ -114,7 +114,7 @@
   type: conversation
   name: Porsche
   text: "What? I don’t know, people started talking, but I did say it can’t be you. But it is strange that it happens around you."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 18
 
@@ -126,14 +126,14 @@
     goTo: 19
   - text: "But... I haven’t done anything."
     goTo: 20
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
 
 - id: 19
   type: conversation
   name: Porsche
   text: "Ha? Are you trying to say that I might be the one who spread the rumor? How could you! Even though I was the one who befriended and defended you."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -141,7 +141,7 @@
   type: conversation
   name: Porsche
   text: "Calm down! If you are innocent, which I think you are, people will figure it out and calm down as well!"
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 21
 
@@ -149,7 +149,7 @@
   type: conversation
   name: Porsche
   text: "I have to go, see you later!"
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -157,7 +157,7 @@
   type: conversation
   name: Porsche
   text: "I’ll try asking a classmate about this."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 23
 
@@ -165,7 +165,7 @@
   type: conversation
   name: Porsche
   text: "Hey sorry to bother but can you tell me what Porsche has been telling everyone these days?"
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 24
 
@@ -173,7 +173,7 @@
   type: conversation
   name: Porsche
   text: "Uhhh I’m not sure but they keep saying stuff like how things keep disappearing right after you transferred here. But they did say it probably isn’t you though."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 25
 
@@ -197,7 +197,7 @@
   type: conversation
   name: Porsche
   text: "Ok, things keep disappearing and everyone has been saying it’s you, and this time it’s my pencil case! Maybe you should just admit it already?"
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 29
 
@@ -211,7 +211,7 @@
   type: conversation
   name: Porsche
   text: "I understand everyone’s concern right now, but I really did not take anything from anyone."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 31
 
@@ -219,7 +219,7 @@
   type: conversation
   name: Porsche
   text: "I don’t know why and how the rumor started, but I think it’s because I’m new here."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 32
 
@@ -227,7 +227,7 @@
   type: conversation
   name: Porsche
   text: "It’s hurtful to think that some of you would believe that I would steal..."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 33
 
@@ -253,7 +253,7 @@
   type: conversation
   name: Porsche
   text: "After conferring with your classmates, you decided to speak with Porsche alone about the origin of the rumor."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 37
 
@@ -261,7 +261,7 @@
   type: conversation
   name: Porsche
   text: "The evidence pointed to them as the one who started it, yet they continue to deny it."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 38
 
@@ -269,7 +269,7 @@
   type: conversation
   name: Porsche
   text: "As much as you want Porsche to just admit it, you take a deep breath and choose to..."
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
   goTo: 39
 
@@ -281,7 +281,7 @@
     goTo: 40
   - text: "Distance yourself from Porsche."
     goTo: 43
-  sprite: "_Porsche_normal.zip"
+  sprite: "F_Porsche_normal.webm"
   background: "bg-hallway.png"
 
 - id: 40
@@ -318,4 +318,4 @@
   type: story
   text: "But for now, you are determined to set clear boundaries to protect yourself, so situations like this don't happen again."
   background: "bg-hallway.png"
-  goTo: end
\ No newline at end of file
+  goTo: end
diff --git a/src/main.jsx b/src/main.jsx
index 64a918f..9a8dd44 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,7 +6,6 @@ import './css/global.css';
 import HomePage from './pages/homePage.jsx';
 import WarningPage from './pages/warningPage.jsx';
 import NamePage from './pages/namePage.jsx';
-import Animation from './pages/components/animation.jsx';
 import IntroductionPage from './pages/introductionPage.jsx';
 import PlayVideo from './pages/components/playVideo.jsx'
 import VitualNovelHandler from './pages/vistualNovelHandler.jsx';
@@ -19,7 +18,6 @@ createRoot(document.getElementById('root')).render(
         <Route path="/" element={<HomePage />} />
         <Route path="/warn" element={<WarningPage />} />
         <Route path="/name" element={<NamePage />} />
-        <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
         <Route path='/vs/:char/:step' element={<VitualNovelHandler />} />
diff --git a/src/pages/components/animation.jsx b/src/pages/components/animation.jsx
deleted file mode 100644
index 6e06d56..0000000
--- a/src/pages/components/animation.jsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import JSZip from 'jszip';
-
-const Animation = ({ src = "M_Porsche_cross_arm.zip", h = '100%', w = '100%' }) => {
-  const [images, setImages] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const frameRate = 1000 / 24; // 24 FPS
-  const canvasRef = useRef(null);
-  const animationRef = useRef(null);
-  const currentFrameRef = useRef(0);
-  const imageElementsRef = useRef([]);
-  const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
-
-  useEffect(() => {
-    const loadImages = async () => {
-      const zip = new JSZip();
-      try {
-        const response = await fetch(urlSource);
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        const data = await response.arrayBuffer();
-        const zipContent = await zip.loadAsync(data);
-
-        const imgPromises = [];
-        zipContent.forEach((relativePath, file) => {
-          if (file.name.endsWith('.webp')) {
-            imgPromises.push(
-              file.async('base64').then(base64 => {
-                const img = new Image();
-                img.src = `data:image/webp;base64,${base64}`;
-                return new Promise((resolve, reject) => {
-                  img.onload = () => resolve(img);
-                  img.onerror = reject;
-                });
-              })
-            );
-          }
-        });
-
-        const imgElements = await Promise.all(imgPromises);
-        if (imgElements.length === 0) {
-          console.error('No images found in the ZIP file.');
-        }
-
-        imageElementsRef.current = imgElements;
-        setImages(imgElements);
-      } catch (error) {
-        console.error('Error loading images:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadImages();
-  }, [urlSource]);
-
-  useEffect(() => {
-    if (images.length > 0) {
-      const canvas = canvasRef.current;
-      const gl = canvas.getContext('webgl');
-      if (!gl) {
-        console.error("WebGL is not supported.");
-        return;
-      }
-
-      const rect = canvas.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = rect.width * dpr;
-      canvas.height = rect.height * dpr;
-      gl.viewport(0, 0, canvas.width, canvas.height);
-
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${rect.height}px`;
-
-      gl.clearColor(0.0, 0.0, 0.0, 0.0);
-      gl.clear(gl.COLOR_BUFFER_BIT);
-
-      gl.enable(gl.BLEND);
-      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
-      const vertexShaderSource = `
-        attribute vec2 a_position;
-        attribute vec2 a_texCoord;
-        varying vec2 v_texCoord;
-        void main() {
-          gl_Position = vec4(a_position, 0.0, 1.0);
-          v_texCoord = a_texCoord;
-        }
-      `;
-      const fragmentShaderSource = `
-        precision mediump float;
-        uniform sampler2D u_texture;
-        varying vec2 v_texCoord;
-        void main() {
-          gl_FragColor = texture2D(u_texture, v_texCoord);
-        }
-      `;
-
-      const createShader = (source, type) => {
-        const shader = gl.createShader(type);
-        gl.shaderSource(shader, source);
-        gl.compileShader(shader);
-        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-          console.error('Shader compile error:', gl.getShaderInfoLog(shader));
-        }
-        return shader;
-      };
-
-      const vertexShader = createShader(vertexShaderSource, gl.VERTEX_SHADER);
-      const fragmentShader = createShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
-
-      const shaderProgram = gl.createProgram();
-      gl.attachShader(shaderProgram, vertexShader);
-      gl.attachShader(shaderProgram, fragmentShader);
-      gl.linkProgram(shaderProgram);
-      if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-        console.error('Program link error:', gl.getProgramInfoLog(shaderProgram));
-      }
-      gl.useProgram(shaderProgram);
-
-      const positionBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-      const vertices = new Float32Array([
-        -1.0, -1.0,
-         1.0, -1.0,
-        -1.0,  1.0,
-         1.0,  1.0,
-      ]);
-      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-
-      const positionLocation = gl.getAttribLocation(shaderProgram, "a_position");
-      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
-      gl.enableVertexAttribArray(positionLocation);
-
-      const texCoordBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
-      const texCoords = new Float32Array([
-        0.0, 1.0,
-        1.0, 1.0,
-        0.0, 0.0,
-        1.0, 0.0,
-      ]);
-      gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
-
-      const texCoordLocation = gl.getAttribLocation(shaderProgram, "a_texCoord");
-      gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
-      gl.enableVertexAttribArray(texCoordLocation);
-
-      const texture = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-      // Optionally use NEAREST for sharper image:
-      // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-      // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-
-      const uTextureLocation = gl.getUniformLocation(shaderProgram, "u_texture");
-
-      const loadTexture = (image) => {
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-        gl.generateMipmap(gl.TEXTURE_2D);
-      };
-
-      loadTexture(imageElementsRef.current[0]);
-
-      let lastFrameTime = 0;
-
-      const animate = (timestamp) => {
-        if (lastFrameTime === 0) lastFrameTime = timestamp;
-
-        const elapsed = timestamp - lastFrameTime;
-        if (elapsed > frameRate) {
-          currentFrameRef.current = (currentFrameRef.current + 1) % images.length;
-          loadTexture(imageElementsRef.current[currentFrameRef.current]);
-          lastFrameTime = timestamp;
-        }
-
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-
-        animationRef.current = requestAnimationFrame(animate);
-      };
-
-      animationRef.current = requestAnimationFrame(animate);
-
-      return () => {
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-        }
-      };
-    }
-  }, [images]);
-
-  if (loading) {
-    return <div>Loading...</div>;
-  } else {
-    return (
-      <canvas
-        ref={canvasRef}
-        style={{ height: h, width: w }}
-      />
-    );
-  }
-};
-
-export default Animation;
diff --git a/src/pages/components/testAnimation_manyfiles.jsx b/src/pages/components/testAnimation_manyfiles.jsx
deleted file mode 100644
index cb86fbb..0000000
--- a/src/pages/components/testAnimation_manyfiles.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import anime from 'animejs';
-
-const startNumber = 1000; 
-const endNumber = 1239; 
-const imageCount = endNumber - startNumber + 1; 
-const images = [];
-
-for (let i = startNumber; i <= endNumber; i++) {
-    const formattedNumber = String(i).padStart(5, '0');
-    images.push(import(`../../assets/characters/F_porche_akimbo_AME/Porsche${formattedNumber}.png`));
-}
-
-const CharacterAnimation = () => {
-    const totalFrames = imageCount; 
-    const frameDuration = 20;
-    const [currentFrame, setCurrentFrame] = useState(0);
-    const [loadedImages, setLoadedImages] = useState([]); 
-    const characterRef = useRef(null);
-
-    useEffect(() => {
-        Promise.all(images).then((resolvedImages) => {
-            setLoadedImages(resolvedImages.map(image => image.default)); 
-        });
-    }, []);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCurrentFrame((prevFrame) => (prevFrame + 1) % totalFrames);
-        }, frameDuration);
-
-        return () => clearInterval(interval); 
-    }, []);
-
-    return (
-        <img
-            ref={characterRef}
-            src={loadedImages[currentFrame]}
-            alt="Character Animation"
-            style={{ width: '200px', height: 'auto' }}
-        />
-    );
-};
-
-
-export default CharacterAnimation;
diff --git a/src/pages/components/testAnimation_onefile.jsx b/src/pages/components/testAnimation_onefile.jsx
deleted file mode 100644
index 9dca1db..0000000
--- a/src/pages/components/testAnimation_onefile.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import JSZip from 'jszip';
-
-const TestAnimation = () => {
-  const [images, setImages] = useState([]);
-  const [currentFrame, setCurrentFrame] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const frameRate = 60; 
-
-  useEffect(() => {
-    const loadImages = async () => {
-      const zip = new JSZip();
-      try {
-        const response = await fetch('src/assets/mainCharacters/M_Porsche_cross_arm.zip');
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        const data = await response.arrayBuffer();
-        const zipContent = await zip.loadAsync(data);
-
-        const imgPromises = [];
-        zipContent.forEach((relativePath, file) => {
-          if (file.name.endsWith('.webp')) {
-            imgPromises.push(
-              file.async('base64').then(base64 => {
-                return `data:image/webp;base64,${base64}`;
-              })
-            );
-          }
-        });
-
-        const imgUrls = await Promise.all(imgPromises);
-
-        // console.log('Loaded images:', imgUrls); 
-
-        if (imgUrls.length === 0) {
-          console.error('No images found in the ZIP file.');
-        }
-
-        setImages(imgUrls);
-      } catch (error) {
-        console.error('Error loading images:', error);
-      } finally {
-        setLoading(false); 
-      }
-    };
-
-    loadImages();
-
-  }, []);
-
-  useEffect(() => {
-    if (images.length > 0) {
-      const interval = setInterval(() => {
-        setCurrentFrame((prevFrame) => (prevFrame + 1) % images.length);
-      }, frameRate);
-
-      return () => clearInterval(interval);
-    }
-  }, [images]);
-
-  if (loading) {
-    return <div>Loading...</div>; 
-  } else {
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        {images.length > 0 ? (
-          <img
-            src={images[currentFrame]}
-            alt={`Animation frame ${currentFrame + 1}`}
-            style={{ maxWidth: '500px', height: 'auto' }} 
-          />
-        ) : (
-          <div>No images to display.</div> 
-        )}
-      </div>
-    );
-  }
-};
-
-export default TestAnimation;
diff --git a/src/pages/conversationPage.jsx b/src/pages/conversationPage.jsx
index 47a014d..a1988e5 100644
--- a/src/pages/conversationPage.jsx
+++ b/src/pages/conversationPage.jsx
@@ -4,19 +4,17 @@ import '../css/global.css';
 import '../css/textBox.css';
 import '../css/nameBox.css';
 import '../css/conversation.css'
-import { useNavigate, useParams } from 'react-router-dom';
-import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
   const [name] = useState(() => {
     return sessionStorage.getItem("name") || '';
   });
-  const { char } = useParams();
 
   const DialogText = data.text.replace("{name}", name);
   const DialogName = data.name.replace("{name}", name);
-  const videoPath = `https://dl.techtransthai.org/fsob-assets/F_${char}_normal.webm`;
+  const videoPath = `${import.meta.env.VITE_ASSETS_URL}/${data.sprite}`; // data.sprite return webm file name
+
   // https://dl.techtransthai.org/fsob-assets/F_Porsche_normal.webm
   //console.log(data.sprite);
 
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index 9047a0e..9b093f1 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../css/global.css';
 import BlackButton from './components/customButton';
-import Animation from './components/animation.jsx';
 import PlayVideo from './components/playVideo.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 import IntroductionData from './components/introductionData.jsx';
diff --git a/src/pages/optionPage.jsx b/src/pages/optionPage.jsx
index 042a349..2d10d91 100644
--- a/src/pages/optionPage.jsx
+++ b/src/pages/optionPage.jsx
@@ -4,10 +4,10 @@ import '../css/global.css';
 import '../css/textBox.css';
 import '../css/nameBox.css';
 import '../css/option.css'
-import Animation from './components/animation.jsx';
 
 function OptionPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const videoPath = `${import.meta.env.VITE_ASSETS_URL}/${data.sprite}`; // data.sprite return webm file name
 
   return (
     <div
@@ -24,7 +24,10 @@ function OptionPage({data , onClicked}) {
       }}
     >
       <div className='spriteBox'>
-        <Animation src={`F${data.sprite}`}/>
+        <video width="200%" height="200%" autoPlay loop muted>
+          <source src={videoPath} type="video/webm" />
+          Your browser does not support the video tag.
+        </video>
       </div>
       <div className='optionSection'>
         {

From 9d6532cc8b1d7c3984267018f30aded5854fe876 Mon Sep 17 00:00:00 2001
From: Phapoom Saksri <hello@mindhas403.dev>
Date: Sun, 22 Jun 2025 23:53:29 +0700
Subject: [PATCH 11/25] Hidding video player stuff.

---
 src/css/video.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/css/video.css b/src/css/video.css
index 225004d..da3515b 100644
--- a/src/css/video.css
+++ b/src/css/video.css
@@ -2,6 +2,11 @@
     height: 100vh;
     overflow: hidden;
 } */
+
+video::-webkit-media-controls {
+  display: none;
+}
+
 .video-container {
     position: fixed;
     top: 50%;

From 13721f544faf1d448b9ebadd83d0c7d43193e803 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Mon, 23 Jun 2025 00:01:32 +0700
Subject: [PATCH 12/25] Reordering Pie's ID

---
 public/yml/DialogPie.yml | 300 +++++++++++++++++++--------------------
 1 file changed, 150 insertions(+), 150 deletions(-)

diff --git a/public/yml/DialogPie.yml b/public/yml/DialogPie.yml
index 9307e3c..a46178c 100644
--- a/public/yml/DialogPie.yml
+++ b/public/yml/DialogPie.yml
@@ -70,9 +70,9 @@
   text: ”Yeah maybe it’ll be better...”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 10.2
+  goTo: 11
 
-- id: 10.2
+- id: 11
   type: conversation
   name: Pie
   text: ”We gotta impress the teacher haha.”
@@ -80,190 +80,146 @@
   background: "bg-hallway.png"
   goTo: 12
 
-- id: 11
+- id: 12
   type: conversation
   name: Pie
   text: ”I’m not saying it’s bad! But you know, it’s a little basic. I kinda expected you to come up with something more original.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 12
-
-- id: 12
-  type: story
-  text: "A few days passed, you and Pie start reviewing and making the presentation."
-  background: "bg-hallway.png"
   goTo: 13
 
 - id: 13
   type: story
-  text: "You try your best to make the presentation look good, but Pie keeps having things to say about what you are doing."
+  text: "A few days passed, you and Pie start reviewing and making the presentation."
   background: "bg-hallway.png"
   goTo: 14
 
-- id: 14
+- id: 15
+  type: story
+  text: "You try your best to make the presentation look good, but Pie keeps having things to say about what you are doing."
+  background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
   type: conversation
   name: Pie
   text: ”Oh you’re doing it like that? I mean it’s okay...”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 14 01
+  goTo: 17
 
-- id: 14 01
+- id: 17
   type: conversation
   name: Pie
   text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 15
+  goTo: 18
 
-- id: 15
+- id: 19
   type: option
   name: Pie
   option:
   - text: "Huh? But I’m not trying to embarrass us."
-    goTo: 16
+    goTo: 20
   - text: "Ok..."
-    goTo: 17
+    goTo: 21
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
 
-- id: 16
+- id: 20
   type: conversation
   name: Pie
   text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 18
+  goTo: 22
 
-- id: 17
+- id: 21
   type: conversation
   name: Pie
   text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 18
-
-- id: 18
-  type: story
-  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
-  background: "bg-hallway.png"
-  goTo: 18.2
-
-- id: 18.2
-  type: transition
-  goTo: 19
-
-- id: 19
-  type: story
-  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
-  background: "bg-hallway.png"
-  goTo: 19.2
-
-- id: 19.2
-  type: story
-  text: "Before presenting, Pie came to you."
-  background: "bg-hallway.png"
-  goTo: 21
-
-- id: 21
-  type: conversation
-  name: Pie
-  text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
-  sprite: "_Pie_normal.zip"
-  background: "bg-hallway.png"
   goTo: 22
 
 - id: 22
-  type: option
-  name: Pie
-  option:
-  - text: "But I should present the parts I worked on?"
-    goTo: 23
-  - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
-    goTo: 40
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
   background: "bg-hallway.png"
+  goTo: 23
 
 - id: 23
-  type: conversation
-  name: Pie
-  text: ”Ok fine, as long as the presentation goes well.”
-  sprite: "_Pie_normal.zip"
-  background: "bg-hallway.png"
+  type: transition
   goTo: 24
 
 - id: 24
   type: story
-  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
+  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
   background: "bg-hallway.png"
   goTo: 25
 
 - id: 25
   type: story
-  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
+  text: "Before presenting, Pie came to you."
   background: "bg-hallway.png"
   goTo: 26
 
 - id: 26
-  type: story
-  text: "In the end, you were left with little slides to present."
+  type: conversation
+  name: Pie
+  text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 27
 
 - id: 27
-  type: story
-  text: "You confront Pie about their fake agreement after."
+  type: option
+  name: Pie
+  option:
+  - text: "But I should present the parts I worked on?"
+    goTo: 28
+  - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
+    goTo: 47
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 28
 
 - id: 28
   type: conversation
   name: Pie
-  text: ”Why didn’t you let me present my parts like you agreed before?”
+  text: ”Ok fine, as long as the presentation goes well.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 29
 
 - id: 29
-  type: conversation
-  name: Pie
-  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
   background: "bg-hallway.png"
   goTo: 30
 
 - id: 30
   type: story
-  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
+  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
   background: "bg-hallway.png"
   goTo: 31
 
 - id: 31
-  type: conversation
-  name: Pie
-  text: ”You calmly explain to the teacher the situation.”
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "In the end, you were left with little slides to present."
   background: "bg-hallway.png"
   goTo: 32
 
 - id: 32
-  type: conversation
-  name: Pie
-  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
-  sprite: "_Pie_normal.zip"
-  background: "bg-hallway.png"
-  goTo: 32.2
-
-- id: 32.2
   type: story
-  text: "After the class ends, Pie turns to you."
+  text: "You confront Pie about their fake agreement after."
   background: "bg-hallway.png"
   goTo: 33
 
 - id: 33
   type: conversation
   name: Pie
-  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
+  text: ”Why didn’t you let me present my parts like you agreed before?”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 34
@@ -271,183 +227,227 @@
 - id: 34
   type: conversation
   name: Pie
-  text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
+  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 35
 
 - id: 35
   type: story
-  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
   background: "bg-hallway.png"
   goTo: 36
 
 - id: 36
-  type: story
-  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
+  type: conversation
+  name: Pie
+  text: ”You calmly explain to the teacher the situation.”
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 37
 
 - id: 37
-  type: story
-  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
+  type: conversation
+  name: Pie
+  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 38
 
 - id: 38
   type: story
-  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
+  text: "After the class ends, Pie turns to you."
   background: "bg-hallway.png"
   goTo: 39
 
-- id: 39
-  type: story
-  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
-  background: "bg-hallway.png"
-  goTo: end
-
 - id: 40
-  type: story
-  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
+  type: conversation
+  name: Pie
+  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 41
 
 - id: 41
-  type: story
-  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
+  type: conversation
+  name: Pie
+  text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
+  sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 42
 
 - id: 42
-  type: transition
+  type: story
+  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  background: "bg-hallway.png"
   goTo: 43
 
 - id: 43
   type: story
-  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
+  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
   background: "bg-hallway.png"
   goTo: 44
 
 - id: 44
-  type: conversation
-  name: Pie
-  text: ”Can you explain a bit more about this slide?”
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
   background: "bg-hallway.png"
   goTo: 45
 
 - id: 45
   type: story
-  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
   background: "bg-hallway.png"
   goTo: 46
 
 - id: 46
   type: story
-  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
   background: "bg-hallway.png"
-  goTo: 47
+  goTo: end
 
 - id: 47
   type: story
-  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
   background: "bg-hallway.png"
   goTo: 48
 
 - id: 48
-  type: conversation
-  name: Pie
-  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
   background: "bg-hallway.png"
   goTo: 49
 
 - id: 49
-  type: conversation
-  name: Pie
-  text: ”I was actually the one who worked on this slide.”
-  sprite: "_Pie_normal.zip"
-  background: "bg-hallway.png"
+  type: transition
   goTo: 50
 
 - id: 50
-  type: conversation
-  name: Pie
-  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
-  sprite: "_Pie_normal.zip"
+  type: story
+  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
   background: "bg-hallway.png"
   goTo: 51
 
 - id: 51
   type: conversation
   name: Pie
-  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
+  text: ”Can you explain a bit more about this slide?”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
   goTo: 52
 
 - id: 52
+  type: story
+  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  background: "bg-hallway.png"
+  goTo: 53
+
+- id: 53
+  type: story
+  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  background: "bg-hallway.png"
+  goTo: 54
+
+- id: 54
+  type: story
+  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  background: "bg-hallway.png"
+  goTo: 55
+
+- id: 55
+  type: conversation
+  name: Pie
+  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 56
+
+- id: 56
+  type: conversation
+  name: Pie
+  text: ”I was actually the one who worked on this slide.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 57
+
+- id: 57
+  type: conversation
+  name: Pie
+  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 58
+
+- id: 58
+  type: conversation
+  name: Pie
+  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 59
+
+- id: 59
   type: conversation
   name: Pie
   text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 52.2
+  goTo: 60
 
-- id: 52.2
+- id: 60
   type: story
   text: "After this, you know Pie is upset at the whole thing."
   background: "bg-hallway.png"
-  goTo: 52.3
+  goTo: 61
 
-- id: 52.3
+- id: 61
   type: story
   text: "After the class ends, Pie turns to you."
   background: "bg-hallway.png"
-  goTo: 53
+  goTo: 62
 
-- id: 53
+- id: 62
   type: conversation
   name: Pie
   text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 54
+  goTo: 63
 
-- id: 54
+- id: 63
   type: conversation
   name: Pie
   text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
   sprite: "_Pie_normal.zip"
   background: "bg-hallway.png"
-  goTo: 55
+  goTo: 64
 
-- id: 55
+- id: 64
   type: story
   text: "Afterwards, you become aware of Pie’s behavior and decided to stay distant from Pie, choosing to not take their words to heart."
   background: "bg-hallway.png"
-  goTo: 56
+  goTo: 65
 
-- id: 56
+- id: 65
   type: story
   text: "With the teacher's help, the situation was resolved fairly, and both you and Pie received the grades you earned for the presentation."
   background: "bg-hallway.png"
-  goTo: 57
+  goTo: 66
 
-- id: 57
+- id: 66
   type: story
   text: "This experience taught you to not be taken advantage of, even in group work."
   background: "bg-hallway.png"
-  goTo: 58
+  goTo: 67
 
-- id: 58
+- id: 67
   type: story
   text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
   background: "bg-hallway.png"
-  goTo: 59
+  goTo: 68
 
-- id: 59
+- id: 68
   type: story
   text: "Now you aspire to make healthier and more respectful collaborations in the future."
   background: "bg-hallway.png"
-  goTo: end
\ No newline at end of file
+  goTo: end

From f92feef474a88cbf9442216608e217d292a4448d Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Mon, 23 Jun 2025 14:06:09 +0700
Subject: [PATCH 13/25] Lang Impl, Dialog[Char][Languge]

---
 public/yml/{DialogPorsche.yml => DialogPorscheEnglish.yml} | 0
 src/main.jsx                                               | 2 +-
 src/pages/vistualNovelHandler.jsx                          | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename public/yml/{DialogPorsche.yml => DialogPorscheEnglish.yml} (100%)

diff --git a/public/yml/DialogPorsche.yml b/public/yml/DialogPorscheEnglish.yml
similarity index 100%
rename from public/yml/DialogPorsche.yml
rename to public/yml/DialogPorscheEnglish.yml
diff --git a/src/main.jsx b/src/main.jsx
index 9a8dd44..0a8c1fc 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -20,7 +20,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/name" element={<NamePage />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
-        <Route path='/vs/:char/:step' element={<VitualNovelHandler />} />
+        <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index 9236a25..8fa9a6e 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/src/pages/vistualNovelHandler.jsx
@@ -14,12 +14,12 @@ function VitualNovelHandler() {
   const [error, setError] = useState(null);
   const [currentStep, setCurrentStep] = useState(0);
   const navigate = useNavigate();
-  const { char, step } = useParams();
+  const { char, lang, step } = useParams();
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        const yamlPath = `/yml/Dialog${char}.yml`;
+        const yamlPath = `/yml/Dialog${char}${lang}.yml`;
         const parsedData = await fetchYamlData({ src: yamlPath });
         if (!Array.isArray(parsedData)) {
           throw new Error('YAML data is not an array');
@@ -57,7 +57,7 @@ function VitualNovelHandler() {
     }
     else{
       setCurrentStep(nextstep);
-      navigate(`/vs/${char}/${nextstep}`);
+      navigate(`/vs/${char}/${lang}/${nextstep}`);
 //       console.log("currentStep:", currentStep);
 //       console.log("data at currentStep:", data[currentStep]);
     }

From a1d81f07c028d33eec560d4dbdffd432725b0826 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 00:30:49 +0700
Subject: [PATCH 14/25] Languge Menu (will implement later)

---
 public/yml/DialogPorschemeowmeow.yml | 305 +++++++++++++++++++++++++++
 src/main.jsx                         |   2 +
 src/pages/languageSelection.jsx      |  38 ++++
 3 files changed, 345 insertions(+)
 create mode 100644 public/yml/DialogPorschemeowmeow.yml
 create mode 100644 src/pages/languageSelection.jsx

diff --git a/public/yml/DialogPorschemeowmeow.yml b/public/yml/DialogPorschemeowmeow.yml
new file mode 100644
index 0000000..60f8a7a
--- /dev/null
+++ b/public/yml/DialogPorschemeowmeow.yml
@@ -0,0 +1,305 @@
+- background: bg-hallway.png
+  goTo: 2
+  id: 1
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 3
+  id: 2
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow
+  type: conversation
+- background: bg-hallway.png
+  id: 3
+  name: Porsche
+  option:
+  - goTo: 4
+    text: meow
+  sprite: F_Porsche_normal.webm
+  type: option
+- background: bg-hallway.png
+  goTo: 5
+  id: 4
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 6
+  id: 5
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow
+  type: story
+- background: bg-hallway.png
+  goTo: 7
+  id: 6
+  text: meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 8
+  id: 7
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  id: 8
+  name: Porsche
+  option:
+  - goTo: 9
+    text: meow meow meow meow meow meow meow meow meow
+  - goTo: 10
+    text: meow meow meow meow meow meow meow meow meow meow meow
+  sprite: F_Porsche_normal.webm
+  type: option
+- background: bg-hallway.png
+  goTo: 11
+  id: 9
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 11
+  id: 10
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow
+  type: conversation
+- goTo: 12
+  id: 11
+  type: transition
+- background: bg-hallway.png
+  goTo: 13
+  id: 12
+  text: meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 14
+  id: 13
+  text: meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 15
+  id: 14
+  text: meow meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 16
+  id: 15
+  text: meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 17
+  id: 16
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 18
+  id: 17
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  id: 18
+  name: Porsche
+  option:
+  - goTo: 19
+    text: meow meow meow meow meow meow meow meow meow meow
+  - goTo: 20
+    text: meow meow meow meow meow meow
+  sprite: F_Porsche_normal.webm
+  type: option
+- background: bg-hallway.png
+  goTo: 22
+  id: 19
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 21
+  id: 20
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 22
+  id: 21
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 23
+  id: 22
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 24
+  id: 23
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 25
+  id: 24
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- goTo: 26
+  id: 25
+  type: transition
+- background: bg-hallway.png
+  goTo: 27
+  id: 26
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 28
+  id: 27
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 29
+  id: 28
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 30
+  id: 29
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow
+  type: story
+- background: bg-hallway.png
+  goTo: 31
+  id: 30
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 32
+  id: 31
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 33
+  id: 32
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 34
+  id: 33
+  text: meow meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 35
+  id: 34
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 36
+  id: 35
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 37
+  id: 36
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 38
+  id: 37
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow
+  type: conversation
+- background: bg-hallway.png
+  goTo: 39
+  id: 38
+  name: Porsche
+  sprite: F_Porsche_normal.webm
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow
+  type: conversation
+- background: bg-hallway.png
+  id: 39
+  name: Porsche
+  option:
+  - goTo: 40
+    text: meow meow meow meow meow meow
+  - goTo: 43
+    text: meow meow meow meow
+  sprite: F_Porsche_normal.webm
+  type: option
+- background: bg-hallway.png
+  goTo: 41
+  id: 40
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 42
+  id: 41
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: end
+  id: 42
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 44
+  id: 43
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow meow meow meow meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: 45
+  id: 44
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow
+  type: story
+- background: bg-hallway.png
+  goTo: end
+  id: 45
+  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
+    meow meow meow meow meow meow
+  type: story
diff --git a/src/main.jsx b/src/main.jsx
index 0a8c1fc..f1fe8eb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -10,6 +10,7 @@ import IntroductionPage from './pages/introductionPage.jsx';
 import PlayVideo from './pages/components/playVideo.jsx'
 import VitualNovelHandler from './pages/vistualNovelHandler.jsx';
 import EndPage from './pages/endPage.jsx';
+import LanguageSelection from './pages/languageSelection.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -22,6 +23,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/introduction" element={<IntroductionPage />} />
         <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
+        <Route path='/lang' element={<LanguageSelection />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
diff --git a/src/pages/languageSelection.jsx b/src/pages/languageSelection.jsx
new file mode 100644
index 0000000..fa0da26
--- /dev/null
+++ b/src/pages/languageSelection.jsx
@@ -0,0 +1,38 @@
+import '../css/global.css'
+import BlackButton from './components/customButton'
+import { useState, useEffect } from 'react';
+
+function languageSelection() {
+    const [lang, setLang] = useState(() => {
+        return sessionStorage.getItem("lang") || '';
+    });
+
+    useEffect(() => {
+        sessionStorage.setItem("lang", lang);
+    }, [lang]);
+
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            flexDirection: 'column',
+        }}>
+        <label className='title'>Please choose a language</label>
+        <label className='title'>กรุณาเลือกภาษาที่ต้องการ</label>
+
+        <div style={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '1rem',
+            marginTop: '1rem'
+        }}>
+        <BlackButton text="ภาษาไทย" to='/introduction'/>
+        <BlackButton text="English" to='/introduction'/>
+        </div>
+        </div>
+    );
+}
+
+export default languageSelection

From f855b88110e82607adb7eaf9560da7fdd1ec981d Mon Sep 17 00:00:00 2001
From: mrrpmeowfurry <velocity.toml@proton.me>
Date: Mon, 23 Jun 2025 17:46:46 +0000
Subject: [PATCH 15/25] this is a mistake

---
 public/yml/DialogPorschemeowmeow.yml | 305 ---------------------------
 1 file changed, 305 deletions(-)
 delete mode 100644 public/yml/DialogPorschemeowmeow.yml

diff --git a/public/yml/DialogPorschemeowmeow.yml b/public/yml/DialogPorschemeowmeow.yml
deleted file mode 100644
index 60f8a7a..0000000
--- a/public/yml/DialogPorschemeowmeow.yml
+++ /dev/null
@@ -1,305 +0,0 @@
-- background: bg-hallway.png
-  goTo: 2
-  id: 1
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 3
-  id: 2
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow
-  type: conversation
-- background: bg-hallway.png
-  id: 3
-  name: Porsche
-  option:
-  - goTo: 4
-    text: meow
-  sprite: F_Porsche_normal.webm
-  type: option
-- background: bg-hallway.png
-  goTo: 5
-  id: 4
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 6
-  id: 5
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow
-  type: story
-- background: bg-hallway.png
-  goTo: 7
-  id: 6
-  text: meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 8
-  id: 7
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  id: 8
-  name: Porsche
-  option:
-  - goTo: 9
-    text: meow meow meow meow meow meow meow meow meow
-  - goTo: 10
-    text: meow meow meow meow meow meow meow meow meow meow meow
-  sprite: F_Porsche_normal.webm
-  type: option
-- background: bg-hallway.png
-  goTo: 11
-  id: 9
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 11
-  id: 10
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow
-  type: conversation
-- goTo: 12
-  id: 11
-  type: transition
-- background: bg-hallway.png
-  goTo: 13
-  id: 12
-  text: meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 14
-  id: 13
-  text: meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 15
-  id: 14
-  text: meow meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 16
-  id: 15
-  text: meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 17
-  id: 16
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 18
-  id: 17
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  id: 18
-  name: Porsche
-  option:
-  - goTo: 19
-    text: meow meow meow meow meow meow meow meow meow meow
-  - goTo: 20
-    text: meow meow meow meow meow meow
-  sprite: F_Porsche_normal.webm
-  type: option
-- background: bg-hallway.png
-  goTo: 22
-  id: 19
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 21
-  id: 20
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 22
-  id: 21
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 23
-  id: 22
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 24
-  id: 23
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 25
-  id: 24
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- goTo: 26
-  id: 25
-  type: transition
-- background: bg-hallway.png
-  goTo: 27
-  id: 26
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 28
-  id: 27
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 29
-  id: 28
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 30
-  id: 29
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow
-  type: story
-- background: bg-hallway.png
-  goTo: 31
-  id: 30
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 32
-  id: 31
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 33
-  id: 32
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 34
-  id: 33
-  text: meow meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 35
-  id: 34
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 36
-  id: 35
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 37
-  id: 36
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 38
-  id: 37
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow
-  type: conversation
-- background: bg-hallway.png
-  goTo: 39
-  id: 38
-  name: Porsche
-  sprite: F_Porsche_normal.webm
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow
-  type: conversation
-- background: bg-hallway.png
-  id: 39
-  name: Porsche
-  option:
-  - goTo: 40
-    text: meow meow meow meow meow meow
-  - goTo: 43
-    text: meow meow meow meow
-  sprite: F_Porsche_normal.webm
-  type: option
-- background: bg-hallway.png
-  goTo: 41
-  id: 40
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 42
-  id: 41
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: end
-  id: 42
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 44
-  id: 43
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow meow meow meow meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: 45
-  id: 44
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow
-  type: story
-- background: bg-hallway.png
-  goTo: end
-  id: 45
-  text: meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
-    meow meow meow meow meow meow
-  type: story

From 77effde4285b5196c191645d7e7297f650d622e6 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 00:53:53 +0700
Subject: [PATCH 16/25] handleClick for BlackButton

---
 src/pages/components/customButton.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/components/customButton.jsx b/src/pages/components/customButton.jsx
index f6e2d23..7943f5a 100644
--- a/src/pages/components/customButton.jsx
+++ b/src/pages/components/customButton.jsx
@@ -1,12 +1,21 @@
 import '../../css/customButton.css'
 import { useNavigate } from 'react-router-dom';
 
-function BlackButton({ text , to="/"})  {
+function BlackButton({ text , to="/", onClick })  {
   const navigate = useNavigate();
 
+  const handleClick = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+    if (!e.defaultPrevented && to) {
+      navigate(to, { replace: true });
+    }
+  };
+
   return(
-        <button className='gray' onClick={()=> navigate(to, { replace: true })}>{text}</button>
+        <button className='gray' onClick={handleClick}>{text}</button>
   )
 }
-  
-export default BlackButton
\ No newline at end of file
+
+export default BlackButton

From c105f98d46f51ef4f0807e994aa976b5c72bfbdc Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 00:56:56 +0700
Subject: [PATCH 17/25] Store user selected language in session storage.

---
 src/pages/languageSelection.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/languageSelection.jsx b/src/pages/languageSelection.jsx
index fa0da26..e42e6ba 100644
--- a/src/pages/languageSelection.jsx
+++ b/src/pages/languageSelection.jsx
@@ -28,8 +28,12 @@ function languageSelection() {
             gap: '1rem',
             marginTop: '1rem'
         }}>
-        <BlackButton text="ภาษาไทย" to='/introduction'/>
-        <BlackButton text="English" to='/introduction'/>
+        <BlackButton text="ภาษาไทย" to='/name' onClick={(e) => {
+            setLang("Thai");
+        }}/>
+        <BlackButton text="English" to='/name' onClick={(e) => {
+            setLang("English");
+        }}/>
         </div>
         </div>
     );

From 98b04373b64c803bc3e9d8f7a7b39dfc2351fef7 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 01:03:08 +0700
Subject: [PATCH 18/25] Sample Language Implementation for namePage.jsx

---
 src/pages/namePage.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/namePage.jsx b/src/pages/namePage.jsx
index 9f53238..c364a9d 100644
--- a/src/pages/namePage.jsx
+++ b/src/pages/namePage.jsx
@@ -8,10 +8,19 @@ function NamePage() {
         return sessionStorage.getItem("name") || '';
     });
 
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
     useEffect(() => {
         sessionStorage.setItem("name", name);
     }, [name]);
 
+    const text = {
+        title: lang === 'Thai' ? 'อยากให้เรียกคุณว่าอะไร?' : 'What should we call you?',
+        continue: lang === 'Thai' ? 'ดำเนินการต่อ' : 'Continue'
+    }
+
     return (
         <div style={{
             display: 'flex',
@@ -20,7 +29,7 @@ function NamePage() {
             height: '100vh',
             flexDirection: 'column',
           }}>
-            <label className='title'>What should we call you?</label>
+            <label className='title'>{text.title}</label>
 
             <div style={{
                 height: '8vh'
@@ -35,7 +44,7 @@ function NamePage() {
                 name==''?
                     <></>
                 :
-                    <BlackButton text="Continue" to='/introduction'/>
+                    <BlackButton text={text.continue} to='/introduction'/>
             }
         </div>
     )

From 5806426f7ffa69db0b48152a1c3ea5add7e24090 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 18:09:10 +0700
Subject: [PATCH 19/25] Trigger Warning based on language

---
 src/pages/homePage.jsx          |  2 +-
 src/pages/languageSelection.jsx |  4 ++--
 src/pages/warningPage.jsx       | 33 +++++++++++++++++++++++++--------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/pages/homePage.jsx b/src/pages/homePage.jsx
index 591fbde..edec2ee 100644
--- a/src/pages/homePage.jsx
+++ b/src/pages/homePage.jsx
@@ -50,7 +50,7 @@ function HomePage() {
 
       <div style={{ height: '8vh' }} />
 
-      <BlackButton text="Start" to='/warn' />
+      <BlackButton text="Start" to='/lang' />
     </div>
   );
 }
diff --git a/src/pages/languageSelection.jsx b/src/pages/languageSelection.jsx
index e42e6ba..236ee28 100644
--- a/src/pages/languageSelection.jsx
+++ b/src/pages/languageSelection.jsx
@@ -28,10 +28,10 @@ function languageSelection() {
             gap: '1rem',
             marginTop: '1rem'
         }}>
-        <BlackButton text="ภาษาไทย" to='/name' onClick={(e) => {
+        <BlackButton text="ภาษาไทย" to='/warn' onClick={(e) => {
             setLang("Thai");
         }}/>
-        <BlackButton text="English" to='/name' onClick={(e) => {
+        <BlackButton text="English" to='/warn' onClick={(e) => {
             setLang("English");
         }}/>
         </div>
diff --git a/src/pages/warningPage.jsx b/src/pages/warningPage.jsx
index 22afe15..6829f5d 100644
--- a/src/pages/warningPage.jsx
+++ b/src/pages/warningPage.jsx
@@ -4,6 +4,23 @@ import { useNavigate } from 'react-router-dom';
 
 function WarningPage() {
   const navigate = useNavigate();
+  
+  const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
+  const text = {
+        tw: lang === 'Thai' ? 'คำเตือนเนื้อหา' : 'Trigger warning',
+        tw_text: lang === 'Thai' ? 'ทดสอบข้อความตัวอย่าง\nเพื่อใช้ในการจัดวางองค์ประกอบของหน้าเว็บไซต์ หรือสิ่งพิมพ์ โดยข้อความนี้ไม่มีความหมาย' 
+        : 
+        'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit',
+    }
+          // Lorem ipsum dolor sit amet, <br/>
+          // consectetur adipiscing elit, <br/>
+          // sed do eiusmod tempor <br/>
+          // incididunt ut labore et dolore <br/>
+          // magnam aliquam quaerat <br/>
+          // voluptatem.
 
   return(
   	  <div style={{
@@ -15,19 +32,19 @@ function WarningPage() {
       }}
         onClick={()=>{navigate('/name', { replace: true })}}
       >
-        <label className='title'>Trigger warning</label>
+        <label className='title'>{text.tw}</label>
 
         <div style={{
           height: '8vh'
         }}/>
 
-        <label className='body'>
-          Lorem ipsum dolor sit amet, <br/>
-          consectetur adipiscing elit, <br/>
-          sed do eiusmod tempor <br/>
-          incididunt ut labore et dolore <br/>
-          magnam aliquam quaerat <br/>
-          voluptatem.
+        <label className="body">
+          {text.tw_text.split('\n').map((line, index) => (
+            <span key={index}>
+              {line}
+              <br />
+            </span>
+          ))}
         </label>
   	  </div>
   )

From 7a80265dff91406312469833fda233352d8dd967 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 18:12:59 +0700
Subject: [PATCH 20/25] language thingy, idk

---
 .../{DialogPie.yml => DialogPieEnglish.yml}   |   0
 public/yml/DialogPieThai.yml                  | 453 ++++++++++++++++++
 public/yml/DialogPorscheThai.yml              | 321 +++++++++++++
 src/pages/introductionPage.jsx                |  12 +-
 4 files changed, 781 insertions(+), 5 deletions(-)
 rename public/yml/{DialogPie.yml => DialogPieEnglish.yml} (100%)
 create mode 100644 public/yml/DialogPieThai.yml
 create mode 100644 public/yml/DialogPorscheThai.yml

diff --git a/public/yml/DialogPie.yml b/public/yml/DialogPieEnglish.yml
similarity index 100%
rename from public/yml/DialogPie.yml
rename to public/yml/DialogPieEnglish.yml
diff --git a/public/yml/DialogPieThai.yml b/public/yml/DialogPieThai.yml
new file mode 100644
index 0000000..a46178c
--- /dev/null
+++ b/public/yml/DialogPieThai.yml
@@ -0,0 +1,453 @@
+- id: 1
+  type: story
+  text: "In science class, the teacher announced that there will be a group project and presentation."
+  background: "bg-hallway.png"
+  goTo: 2
+
+- id: 2
+  type: story
+  text: "The groups are chosen and you end up working with Pie."
+  background: "bg-hallway.png"
+  goTo: 3
+
+- id: 3
+  type: story
+  text: "From what you've seen so far in this class, Pie seems like a reliable work partner."
+  background: "bg-hallway.png"
+  goTo: 4
+
+- id: 4
+  type: conversation
+  name: Pie
+  text: ”The project seems simple enough, why don’t we start brainstorming for ideas together? I'm Pie by the way.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: option
+  name: Pie
+  option:
+  - text: Ok!
+    goTo: 6
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 6
+  type: story
+  text: "The two of you start brainstorming for the project right away."
+  background: "bg-hallway.png"
+  goTo: 7
+
+- id: 7
+  type: story
+  text: "Pie starts sharing their ideas to you, so you also share yours to Pie."
+  background: "bg-hallway.png"
+  goTo: 8
+
+- id: 8
+  type: conversation
+  name: Pie
+  text: ”The idea is nice…but I don’t know if it is creative enough. We don’t want to lose points on creativity.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 9
+
+- id: 9
+  type: option
+  name: Pie
+  option:
+  - text: "Oh...I can think of another one then."
+    goTo: 10
+  - text: "Oh...why don’t you like it though?"
+    goTo: 11
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 10
+  type: conversation
+  name: Pie
+  text: ”Yeah maybe it’ll be better...”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: conversation
+  name: Pie
+  text: ”We gotta impress the teacher haha.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 12
+
+- id: 12
+  type: conversation
+  name: Pie
+  text: ”I’m not saying it’s bad! But you know, it’s a little basic. I kinda expected you to come up with something more original.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 13
+
+- id: 13
+  type: story
+  text: "A few days passed, you and Pie start reviewing and making the presentation."
+  background: "bg-hallway.png"
+  goTo: 14
+
+- id: 15
+  type: story
+  text: "You try your best to make the presentation look good, but Pie keeps having things to say about what you are doing."
+  background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
+  type: conversation
+  name: Pie
+  text: ”Oh you’re doing it like that? I mean it’s okay...”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 17
+  type: conversation
+  name: Pie
+  text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 18
+
+- id: 19
+  type: option
+  name: Pie
+  option:
+  - text: "Huh? But I’m not trying to embarrass us."
+    goTo: 20
+  - text: "Ok..."
+    goTo: 21
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 20
+  type: conversation
+  name: Pie
+  text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 21
+  type: conversation
+  name: Pie
+  text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 22
+  type: story
+  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
+  type: transition
+  goTo: 24
+
+- id: 24
+  type: story
+  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
+  background: "bg-hallway.png"
+  goTo: 25
+
+- id: 25
+  type: story
+  text: "Before presenting, Pie came to you."
+  background: "bg-hallway.png"
+  goTo: 26
+
+- id: 26
+  type: conversation
+  name: Pie
+  text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: option
+  name: Pie
+  option:
+  - text: "But I should present the parts I worked on?"
+    goTo: 28
+  - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
+    goTo: 47
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 28
+  type: conversation
+  name: Pie
+  text: ”Ok fine, as long as the presentation goes well.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 29
+
+- id: 29
+  type: story
+  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
+  background: "bg-hallway.png"
+  goTo: 30
+
+- id: 30
+  type: story
+  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
+  background: "bg-hallway.png"
+  goTo: 31
+
+- id: 31
+  type: story
+  text: "In the end, you were left with little slides to present."
+  background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: story
+  text: "You confront Pie about their fake agreement after."
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: conversation
+  name: Pie
+  text: ”Why didn’t you let me present my parts like you agreed before?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
+  type: conversation
+  name: Pie
+  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 35
+
+- id: 35
+  type: story
+  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
+  background: "bg-hallway.png"
+  goTo: 36
+
+- id: 36
+  type: conversation
+  name: Pie
+  text: ”You calmly explain to the teacher the situation.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 37
+
+- id: 37
+  type: conversation
+  name: Pie
+  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 38
+
+- id: 38
+  type: story
+  text: "After the class ends, Pie turns to you."
+  background: "bg-hallway.png"
+  goTo: 39
+
+- id: 40
+  type: conversation
+  name: Pie
+  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: conversation
+  name: Pie
+  text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
+  type: story
+  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  background: "bg-hallway.png"
+  goTo: 43
+
+- id: 43
+  type: story
+  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
+  background: "bg-hallway.png"
+  goTo: 44
+
+- id: 44
+  type: story
+  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
+  background: "bg-hallway.png"
+  goTo: 45
+
+- id: 45
+  type: story
+  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
+  background: "bg-hallway.png"
+  goTo: 46
+
+- id: 46
+  type: story
+  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
+  background: "bg-hallway.png"
+  goTo: end
+
+- id: 47
+  type: story
+  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
+  background: "bg-hallway.png"
+  goTo: 48
+
+- id: 48
+  type: story
+  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
+  background: "bg-hallway.png"
+  goTo: 49
+
+- id: 49
+  type: transition
+  goTo: 50
+
+- id: 50
+  type: story
+  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
+  background: "bg-hallway.png"
+  goTo: 51
+
+- id: 51
+  type: conversation
+  name: Pie
+  text: ”Can you explain a bit more about this slide?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 52
+
+- id: 52
+  type: story
+  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  background: "bg-hallway.png"
+  goTo: 53
+
+- id: 53
+  type: story
+  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  background: "bg-hallway.png"
+  goTo: 54
+
+- id: 54
+  type: story
+  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  background: "bg-hallway.png"
+  goTo: 55
+
+- id: 55
+  type: conversation
+  name: Pie
+  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 56
+
+- id: 56
+  type: conversation
+  name: Pie
+  text: ”I was actually the one who worked on this slide.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 57
+
+- id: 57
+  type: conversation
+  name: Pie
+  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 58
+
+- id: 58
+  type: conversation
+  name: Pie
+  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 59
+
+- id: 59
+  type: conversation
+  name: Pie
+  text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 60
+
+- id: 60
+  type: story
+  text: "After this, you know Pie is upset at the whole thing."
+  background: "bg-hallway.png"
+  goTo: 61
+
+- id: 61
+  type: story
+  text: "After the class ends, Pie turns to you."
+  background: "bg-hallway.png"
+  goTo: 62
+
+- id: 62
+  type: conversation
+  name: Pie
+  text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 63
+
+- id: 63
+  type: conversation
+  name: Pie
+  text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 64
+
+- id: 64
+  type: story
+  text: "Afterwards, you become aware of Pie’s behavior and decided to stay distant from Pie, choosing to not take their words to heart."
+  background: "bg-hallway.png"
+  goTo: 65
+
+- id: 65
+  type: story
+  text: "With the teacher's help, the situation was resolved fairly, and both you and Pie received the grades you earned for the presentation."
+  background: "bg-hallway.png"
+  goTo: 66
+
+- id: 66
+  type: story
+  text: "This experience taught you to not be taken advantage of, even in group work."
+  background: "bg-hallway.png"
+  goTo: 67
+
+- id: 67
+  type: story
+  text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
+  background: "bg-hallway.png"
+  goTo: 68
+
+- id: 68
+  type: story
+  text: "Now you aspire to make healthier and more respectful collaborations in the future."
+  background: "bg-hallway.png"
+  goTo: end
diff --git a/public/yml/DialogPorscheThai.yml b/public/yml/DialogPorscheThai.yml
new file mode 100644
index 0000000..69b73eb
--- /dev/null
+++ b/public/yml/DialogPorscheThai.yml
@@ -0,0 +1,321 @@
+- id: 1
+  type: story
+  text: "During break, you go out into the hallway for some air, then someone approaches you with a smile."
+  background: "bg-hallway.png"
+  goTo: 2
+
+- id: 2
+  type: conversation
+  name: Porsche
+  text: ”Hi! I haven’t seen you around before so you must be new. I’m Porsche. Why don’t you sit with me and my friends? We'll tell you about the school!”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 3
+
+- id: 3
+  type: option
+  name: Porsche
+  option:
+  - text: Sure!
+    goTo: 4
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 4
+  type: story
+  text: "After a while, you start hearing whispers around you about a rumor of a thief."
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: story
+  text: "And you have a small feeling that they might be referring to you as the culprit."
+  background: "bg-hallway.png"
+  goTo: 6
+
+- id: 6
+  type: story
+  text: "Porsche then approaches you."
+  background: "bg-hallway.png"
+  goTo: 7
+
+- id: 7
+  type: conversation
+  name: Porsche
+  text: “Seems like people have been losing their stuff a lot lately. I can’t think of who would do it though, since we all know each other.”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 8
+
+- id: 8
+  type: option
+  name: Porsche
+  option:
+  - text: "What does that mean? You think it’s me?"
+    goTo: 9
+  - text: "I don’t know either, I’m not familiar with anyone."
+    goTo: 10
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 9
+  type: conversation
+  name: Porsche
+  text: “No! I don’t think so! But people might think it’s you because you’re new. It’s unfair but it’s just how it is sometimes.”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 10
+  type: conversation
+  name: Porsche
+  text: “Yeah I know. It’s ok. People will calm down. You don’t have to worry!”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: transition
+  goTo: 12
+
+- id: 12
+  type: story
+  text: "After a few days, the rumor grows and the whispers continue."
+  background: "bg-hallway.png"
+  goTo: 13
+
+- id: 13
+  type: story
+  text: "Some classmates have even started avoiding you."
+  background: "bg-hallway.png"
+  goTo: 14
+
+- id: 14
+  type: story
+  text: "This time people keep mentioning that they lose their stuff around you."
+  background: "bg-hallway.png"
+  goTo: 15
+
+- id: 15
+  type: story
+  text: "Getting anxious, you look to Porsche for advice."
+  background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
+  type: conversation
+  name: Porsche
+  text: “Hey, why are people saying that the thief might be me? How could it even be me? Did someone tell everyone it was me?”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 17
+  type: conversation
+  name: Porsche
+  text: "What? I don’t know, people started talking, but I did say it can’t be you. But it is strange that it happens around you."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 18
+
+- id: 18
+  type: option
+  name: Porsche
+  option:
+  - text: "But... I’ve only been around you and your group."
+    goTo: 19
+  - text: "But... I haven’t done anything."
+    goTo: 20
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 19
+  type: conversation
+  name: Porsche
+  text: "Ha? Are you trying to say that I might be the one who spread the rumor? How could you! Even though I was the one who befriended and defended you."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 20
+  type: conversation
+  name: Porsche
+  text: "Calm down! If you are innocent, which I think you are, people will figure it out and calm down as well!"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 21
+
+- id: 21
+  type: conversation
+  name: Porsche
+  text: "I have to go, see you later!"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 22
+  type: conversation
+  name: Porsche
+  text: "I’ll try asking a classmate about this."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
+  type: conversation
+  name: Porsche
+  text: "Hey sorry to bother but can you tell me what Porsche has been telling everyone these days?"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 24
+
+- id: 24
+  type: conversation
+  name: Porsche
+  text: "Uhhh I’m not sure but they keep saying stuff like how things keep disappearing right after you transferred here. But they did say it probably isn’t you though."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 25
+
+- id: 25
+  type: transition
+  goTo: 26
+
+- id: 26
+  type: story
+  text: "A few days later, the rumor has grown to the point if anyone says they lost something, people automatically look to you."
+  background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: story
+  text: "The situation finally breaks when someone openly accuses you of stealing their pencil case."
+  background: "bg-hallway.png"
+  goTo: 28
+
+- id: 28
+  type: conversation
+  name: Porsche
+  text: "Ok, things keep disappearing and everyone has been saying it’s you, and this time it’s my pencil case! Maybe you should just admit it already?"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 29
+
+- id: 29
+  type: story
+  text: "Shocked at the confrontation, you refuse the accusations and calmly explain your side of the story."
+  background: "bg-hallway.png"
+  goTo: 30
+
+- id: 30
+  type: conversation
+  name: Porsche
+  text: "I understand everyone’s concern right now, but I really did not take anything from anyone."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 31
+
+- id: 31
+  type: conversation
+  name: Porsche
+  text: "I don’t know why and how the rumor started, but I think it’s because I’m new here."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: conversation
+  name: Porsche
+  text: "It’s hurtful to think that some of you would believe that I would steal..."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: story
+  text: "After listening to your words, somce classmates came out to defend you."
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
+  type: story
+  text: "Your statements drew the rest of the class to question the validity of the rumors carefully and rethink how the thief rumor came to be."
+  background: "bg-hallway.png"
+  goTo: 35
+
+- id: 35
+  type: story
+  text: "While some choose to apologize for believing the rumors blindly, others turn away and act as if they haven't done anything wrong."
+  background: "bg-hallway.png"
+  goTo: 36
+
+- id: 36
+  type: conversation
+  name: Porsche
+  text: "After conferring with your classmates, you decided to speak with Porsche alone about the origin of the rumor."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 37
+
+- id: 37
+  type: conversation
+  name: Porsche
+  text: "The evidence pointed to them as the one who started it, yet they continue to deny it."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 38
+
+- id: 38
+  type: conversation
+  name: Porsche
+  text: "As much as you want Porsche to just admit it, you take a deep breath and choose to..."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 39
+
+- id: 39
+  type: option
+  name: Porsche
+  option:
+  - text: "Break off the friendship with Porsche."
+    goTo: 40
+  - text: "Distance yourself from Porsche."
+    goTo: 43
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 40
+  type: story
+  text: "After ending your friendship with Porsche, you move on with your life, staying away from the negativity."
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: story
+  text: "You start talking to other classmates and meet people who share similar interests with you."
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
+  type: story
+  text: "Realizing that life is full of new opportunities, you shouldn't be limited to only being around certain people in your life."
+  background: "bg-hallway.png"
+  goTo: end
+
+- id: 43
+  type: story
+  text: "You didn’t completely end the friendship with Porsche, as you still want to maintain a civil relationship with them as your first friend and schoolmate."
+  background: "bg-hallway.png"
+  goTo: 44
+
+- id: 44
+  type: story
+  text: "Maybe, after some time and reflection, they can change for the better and decide to come clean. "
+  background: "bg-hallway.png"
+  goTo: 45
+
+- id: 45
+  type: story
+  text: "But for now, you are determined to set clear boundaries to protect yourself, so situations like this don't happen again."
+  background: "bg-hallway.png"
+  goTo: end
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index 9b093f1..607a8ab 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../css/global.css';
-import BlackButton from './components/customButton';
 import PlayVideo from './components/playVideo.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 import IntroductionData from './components/introductionData.jsx';
@@ -11,7 +10,6 @@ import Character from './class/character.jsx';
 function IntroductionPage() {
     const navigate = useNavigate();
     const [loading, setLoading] = useState(true);
-    const [positionState, setPositionState] = useState("middle");
     const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
     const [numChar, setNumChar] = useState(1);
     const character = new Character();
@@ -31,12 +29,16 @@ function IntroductionPage() {
     const handleVideoReady = () => {
         setLoading(false);
     };
+    
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
 
     const handleClickedButton = () => {
         console.log(character.name(numChar))
-        if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/0`);
-        if(character.name(numChar)=='Pie') navigate(`/vs/Pie/0`);
-        if(character.name(numChar)=='Patt') navigate(`/vs/Pat/0`);
+        if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/${lang}/0`);
+        if(character.name(numChar)=='Pie') navigate(`/vs/Pie/${lang}/0`);
+        if(character.name(numChar)=='Patt') navigate(`/vs/Pat/${lang}/0`);
     }
 
     return (

From 1431064841c6d1808ea4ceece0da81c53594e2a4 Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 18:14:52 +0700
Subject: [PATCH 21/25] Trigger warning

---
 src/pages/warningPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/warningPage.jsx b/src/pages/warningPage.jsx
index 6829f5d..2609874 100644
--- a/src/pages/warningPage.jsx
+++ b/src/pages/warningPage.jsx
@@ -11,9 +11,9 @@ function WarningPage() {
 
   const text = {
         tw: lang === 'Thai' ? 'คำเตือนเนื้อหา' : 'Trigger warning',
-        tw_text: lang === 'Thai' ? 'ทดสอบข้อความตัวอย่าง\nเพื่อใช้ในการจัดวางองค์ประกอบของหน้าเว็บไซต์ หรือสิ่งพิมพ์ โดยข้อความนี้ไม่มีความหมาย' 
+        tw_text: lang === 'Thai' ? 'เนื้อหาต่อไปนี้อาจสร้างความรู้สึกไม่สบายหรือก่อให้เกิดความทุกข์ใจกับผู้อ่านบางท่าน' 
         : 
-        'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit',
+        'The subsequent content includes material that may be sensitive or distressing to certain audiences.',
     }
           // Lorem ipsum dolor sit amet, <br/>
           // consectetur adipiscing elit, <br/>

From 61902fd62ff5e49ed931015ee2a504823e79ecde Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 18:23:54 +0700
Subject: [PATCH 22/25] Patt Dialog

---
 public/yml/DialogPat.yml        | 142 ++++++-------
 public/yml/DialogPatThai.yml    | 355 ++++++++++++++++++++++++++++++++
 public/yml/DialogPieEnglish.yml |  58 +++---
 public/yml/DialogPieThai.yml    |  58 +++---
 4 files changed, 484 insertions(+), 129 deletions(-)
 create mode 100644 public/yml/DialogPatThai.yml

diff --git a/public/yml/DialogPat.yml b/public/yml/DialogPat.yml
index 479228e..5f8bb56 100644
--- a/public/yml/DialogPat.yml
+++ b/public/yml/DialogPat.yml
@@ -20,7 +20,7 @@
   type: conversation
   name: Patt
   text: ”Hey can I borrow your pen? I forgot to bring mine.”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 5
 
@@ -30,14 +30,14 @@
   option:
   - text: Oh sure, you can-
     goTo: 6
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
 - id: 6
   type: conversation
   name: Patt
   text: ”Nice, thanks!”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 7
 
@@ -63,7 +63,7 @@
   type: conversation
   name: Patt
   text: ”Ooooooh look at this! Someone’s got a crush on you! Who’s the one who sent you this love letter?”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 12
 
@@ -87,81 +87,81 @@
     goTo: 15
   - text: Stop it...you don’t need to make fun of it!
     goTo: 16
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
 - id: 15
   type: conversation
   name: Patt
   text: ”What? Are you shy? Hahaha embarrassed to say who it is?”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
-  goTo: 17.2
+  goTo: 17
 
 - id: 16
   type: conversation
   name: Patt
   text: ”Woah chill! I’m just messing around. It’s just a love letter, not a big deal right?”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
-  goTo: 17.2
-
-- id: 17.2
-  type: transition
   goTo: 17
 
 - id: 17
-  type: story
-  text: "Ever since the discovery, Patt would bring up the love letter to you and everyone else, laughing about it."
-  background: "bg-hallway.png"
+  type: transition
   goTo: 18
 
 - id: 18
   type: story
-  text: "Even during work time, Patt pesters you constantly."
+  text: "Ever since the discovery, Patt would bring up the love letter to you and everyone else, laughing about it."
   background: "bg-hallway.png"
   goTo: 19
 
 - id: 19
-  type: conversation
-  name: Patt
-  text: ”Hey, did you write back yet? I wanna know how this love story ends. I’m sure everyone wants to know too! Right?”
-  sprite: "_Patt_normal.zip"
+  type: story
+  text: "Even during work time, Patt pesters you constantly."
   background: "bg-hallway.png"
   goTo: 20
 
 - id: 20
-  type: story
-  text: "Others laugh in agreement, it seems you have become the talk of the class."
+  type: conversation
+  name: Patt
+  text: ”Hey, did you write back yet? I wanna know how this love story ends. I’m sure everyone wants to know too! Right?”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 21
 
 - id: 21
   type: story
-  text: "You feel uncomfortable from the unwanted teasing and attention."
+  text: "Others laugh in agreement, it seems you have become the talk of the class."
   background: "bg-hallway.png"
   goTo: 22
 
 - id: 22
+  type: story
+  text: "You feel uncomfortable from the unwanted teasing and attention."
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
   type: option
   name: Patt
   option:
   - text: Ask Patt to stop
-    goTo: 23
-  - text: Ignore the teasing
     goTo: 24
-  sprite: "_Patt_normal.zip"
+  - text: Ignore the teasing
+    goTo: 25
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
-- id: 23
+- id: 24
   type: conversation
   name: Patt
   text: ”Ok but can you stop already? I don’t see that it’s that funny.”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 26
 
-- id: 24
+- id: 25
   type: story
   text: "You look at Patt and then ignore them, going back to work, trying your best not to give a reaction to add to the attention."
   background: "bg-hallway.png"
@@ -171,118 +171,118 @@
   type: conversation
   name: Patt
   text: ”Woah you don’t have to take it that seriously! I was just joking!”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
-  goTo: 28.2
+  goTo: 28
 
 - id: 27
   type: conversation
   name: Patt
   text: ”Aw man fine, looks like you’re not in the mood, I really wanted an update though!”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
-  goTo: 28.2
-
-- id: 28.2
-  type: transition
   goTo: 28
 
 - id: 28
-  type: story
-  text: "It's been a few days already, but Patt is still teasing you about the love letter in front of the class."
-  background: "bg-hallway.png"
+  type: transition
   goTo: 29
 
 - id: 29
   type: story
-  text: "Having endured the teasing for long enough, the next time Patt teases you, you will try to stop it."
+  text: "It's been a few days already, but Patt is still teasing you about the love letter in front of the class."
   background: "bg-hallway.png"
   goTo: 30
 
 - id: 30
-  type: conversation
-  name: Patt
-  text: ”I still really want to know who it is though! Are you not saying because you also have a crush on them? Don’t want to let us know huh!”
-  sprite: "_Patt_normal.zip"
+  type: story
+  text: "Having endured the teasing for long enough, the next time Patt teases you, you will try to stop it."
   background: "bg-hallway.png"
   goTo: 31
 
 - id: 31
   type: conversation
   name: Patt
-  text: ”Why do you always have to talk about the letter? It’s just a letter, so why do you care so much?”
-  sprite: "_Patt_normal.zip"
+  text: ”I still really want to know who it is though! Are you not saying because you also have a crush on them? Don’t want to let us know huh!”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 32
 
 - id: 32
   type: conversation
   name: Patt
-  text: ”I already said I was just joking! No need to be so sensitive!”
-  sprite: "_Patt_normal.zip"
+  text: ”Why do you always have to talk about the letter? It’s just a letter, so why do you care so much?”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 33
 
 - id: 33
+  type: conversation
+  name: Patt
+  text: ”I already said I was just joking! No need to be so sensitive!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
   type: option
   name: Patt
   option:
   - text: Well your jokes are not funny anymore
-    goTo: 34
+    goTo: 35
   - text: I don’t really see anyone laughing along
     goTo: 45
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
-- id: 34
+- id: 35
   type: conversation
   name: Patt
   text: ”Alright! Maybe you don’t find it funny but others might right?”
-  sprite: "_Patt_normal.zip"
-  background: "bg-hallway.png"
-  goTo: 35
-
-- id: 35
-  type: story
-  text: "Patt tries to laugh it off again but the class isn’t laughing with them anymore."
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 36
 
 - id: 36
   type: story
-  text: "It has been going on for days and the “joke” has gotten old."
+  text: "Patt tries to laugh it off again but the class isn’t laughing with them anymore."
   background: "bg-hallway.png"
   goTo: 37
 
 - id: 37
   type: story
-  text: "This leads to some classmates standing with you on the situation."
+  text: "It has been going on for days and the “joke” has gotten old."
   background: "bg-hallway.png"
   goTo: 38
 
 - id: 38
-  type: conversation
-  name: Patt
-  text: ”Yeah I think it’s a little much now, not gonna lie.”
-  sprite: "_Patt_normal.zip"
+  type: story
+  text: "This leads to some classmates standing with you on the situation."
   background: "bg-hallway.png"
   goTo: 39
 
 - id: 39
   type: conversation
   name: Patt
-  text: ”Alright fine I’ll stops teasing you, geez.”
-  sprite: "_Patt_normal.zip"
+  text: ”Yeah I think it’s a little much now, not gonna lie.”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 40
 
 - id: 40
-  type: story
-  text: "You mustered the courage to confront Patt and successfully had them stop teasing and making fun of you and your things. "
+  type: conversation
+  name: Patt
+  text: ”Alright fine I’ll stops teasing you, geez.”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 41
 
 - id: 41
+  type: story
+  text: "You mustered the courage to confront Patt and successfully had them stop teasing and making fun of you and your things. "
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
   type: story
   text: "Patt's constant teasing went too far, and luckily your classmates feel it too, leaving Patt to stand alone."
   background: "bg-hallway.png"
@@ -310,7 +310,7 @@
   type: conversation
   name: Patt
   text: ”Yeah, why are you so interested in this love letter anyways? Are you jealous of the person who sent it?”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 47
 
@@ -318,7 +318,7 @@
   type: conversation
   name: Patt
   text: ”Haha! Or are you actually the one who sent it in the first place!”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 48
 
@@ -326,7 +326,7 @@
   type: conversation
   name: Patt
   text: ”What?! No! What are you guys talking about!”
-  sprite: "_Patt_normal.zip"
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 49
 
diff --git a/public/yml/DialogPatThai.yml b/public/yml/DialogPatThai.yml
new file mode 100644
index 0000000..5f8bb56
--- /dev/null
+++ b/public/yml/DialogPatThai.yml
@@ -0,0 +1,355 @@
+- id: 1
+  type: story
+  text: "In the classroom, you sit next to Patt, who is pretty energetic and loud."
+  background: "bg-hallway.png"
+  goTo: 2
+
+- id: 2
+  type: story
+  text: "When class time starts, you and your classmates start taking out different books and materials."
+  background: "bg-hallway.png"
+  goTo: 3
+
+- id: 3
+  type: story
+  text: "As you are taking out your things too, Patt taps you on the shoulder."
+  background: "bg-hallway.png"
+  goTo: 4
+
+- id: 4
+  type: conversation
+  name: Patt
+  text: ”Hey can I borrow your pen? I forgot to bring mine.”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: option
+  name: Patt
+  option:
+  - text: Oh sure, you can-
+    goTo: 6
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+
+- id: 6
+  type: conversation
+  name: Patt
+  text: ”Nice, thanks!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 7
+
+- id: 7
+  type: story
+  text: "Patt suddenly reaches into your school bag and rummages through for a moment, taking out your pencil case."
+  background: "bg-hallway.png"
+  goTo: 8
+
+- id: 8
+  type: story
+  text: "They didn’t ask for permission before looking through your bag, which made you a bit unsettled."
+  background: "bg-hallway.png"
+  goTo: 9
+
+- id: 9
+  type: story
+  text: "Patt quickly grabs a pen, but they seem amused by something else in your bag, giving you a bad feeling."
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: conversation
+  name: Patt
+  text: ”Ooooooh look at this! Someone’s got a crush on you! Who’s the one who sent you this love letter?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 12
+
+- id: 12
+  type: story
+  text: "Patt slowly holds up the love letter for the class to see."
+  background: "bg-hallway.png"
+  goTo: 13
+
+- id: 13
+  type: story
+  text: "The class reacted in excited chatters."
+  background: "bg-hallway.png"
+  goTo: 14
+
+- id: 14
+  type: option
+  name: Patt
+  option:
+  - text: Haha...you don’t need to know!
+    goTo: 15
+  - text: Stop it...you don’t need to make fun of it!
+    goTo: 16
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+
+- id: 15
+  type: conversation
+  name: Patt
+  text: ”What? Are you shy? Hahaha embarrassed to say who it is?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 16
+  type: conversation
+  name: Patt
+  text: ”Woah chill! I’m just messing around. It’s just a love letter, not a big deal right?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 17
+  type: transition
+  goTo: 18
+
+- id: 18
+  type: story
+  text: "Ever since the discovery, Patt would bring up the love letter to you and everyone else, laughing about it."
+  background: "bg-hallway.png"
+  goTo: 19
+
+- id: 19
+  type: story
+  text: "Even during work time, Patt pesters you constantly."
+  background: "bg-hallway.png"
+  goTo: 20
+
+- id: 20
+  type: conversation
+  name: Patt
+  text: ”Hey, did you write back yet? I wanna know how this love story ends. I’m sure everyone wants to know too! Right?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 21
+
+- id: 21
+  type: story
+  text: "Others laugh in agreement, it seems you have become the talk of the class."
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 22
+  type: story
+  text: "You feel uncomfortable from the unwanted teasing and attention."
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
+  type: option
+  name: Patt
+  option:
+  - text: Ask Patt to stop
+    goTo: 24
+  - text: Ignore the teasing
+    goTo: 25
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+
+- id: 24
+  type: conversation
+  name: Patt
+  text: ”Ok but can you stop already? I don’t see that it’s that funny.”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 26
+
+- id: 25
+  type: story
+  text: "You look at Patt and then ignore them, going back to work, trying your best not to give a reaction to add to the attention."
+  background: "bg-hallway.png"
+  goTo: 27
+
+- id: 26
+  type: conversation
+  name: Patt
+  text: ”Woah you don’t have to take it that seriously! I was just joking!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 28
+
+- id: 27
+  type: conversation
+  name: Patt
+  text: ”Aw man fine, looks like you’re not in the mood, I really wanted an update though!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 28
+
+- id: 28
+  type: transition
+  goTo: 29
+
+- id: 29
+  type: story
+  text: "It's been a few days already, but Patt is still teasing you about the love letter in front of the class."
+  background: "bg-hallway.png"
+  goTo: 30
+
+- id: 30
+  type: story
+  text: "Having endured the teasing for long enough, the next time Patt teases you, you will try to stop it."
+  background: "bg-hallway.png"
+  goTo: 31
+
+- id: 31
+  type: conversation
+  name: Patt
+  text: ”I still really want to know who it is though! Are you not saying because you also have a crush on them? Don’t want to let us know huh!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: conversation
+  name: Patt
+  text: ”Why do you always have to talk about the letter? It’s just a letter, so why do you care so much?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: conversation
+  name: Patt
+  text: ”I already said I was just joking! No need to be so sensitive!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
+  type: option
+  name: Patt
+  option:
+  - text: Well your jokes are not funny anymore
+    goTo: 35
+  - text: I don’t really see anyone laughing along
+    goTo: 45
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+
+- id: 35
+  type: conversation
+  name: Patt
+  text: ”Alright! Maybe you don’t find it funny but others might right?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 36
+
+- id: 36
+  type: story
+  text: "Patt tries to laugh it off again but the class isn’t laughing with them anymore."
+  background: "bg-hallway.png"
+  goTo: 37
+
+- id: 37
+  type: story
+  text: "It has been going on for days and the “joke” has gotten old."
+  background: "bg-hallway.png"
+  goTo: 38
+
+- id: 38
+  type: story
+  text: "This leads to some classmates standing with you on the situation."
+  background: "bg-hallway.png"
+  goTo: 39
+
+- id: 39
+  type: conversation
+  name: Patt
+  text: ”Yeah I think it’s a little much now, not gonna lie.”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 40
+
+- id: 40
+  type: conversation
+  name: Patt
+  text: ”Alright fine I’ll stops teasing you, geez.”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: story
+  text: "You mustered the courage to confront Patt and successfully had them stop teasing and making fun of you and your things. "
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
+  type: story
+  text: "Patt's constant teasing went too far, and luckily your classmates feel it too, leaving Patt to stand alone."
+  background: "bg-hallway.png"
+  goTo: 43
+
+- id: 43
+  type: story
+  text: "Now aware of Patt’s tendency of joking about everything, you ignore their jokes, not giving Patt the attention and reaction they want."
+  background: "bg-hallway.png"
+  goTo: 44
+
+- id: 44
+  type: story
+  text: "You make sure to not let anyone have the right to make you feel embarrassed or forced."
+  background: "bg-hallway.png"
+  goTo: end
+
+- id: 45
+  type: story
+  text: "Patt looks around and realizes that other people aren’t as amused as they are anymore."
+  background: "bg-hallway.png"
+  goTo: 46
+
+- id: 46
+  type: conversation
+  name: Patt
+  text: ”Yeah, why are you so interested in this love letter anyways? Are you jealous of the person who sent it?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 47
+
+- id: 47
+  type: conversation
+  name: Patt
+  text: ”Haha! Or are you actually the one who sent it in the first place!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 48
+
+- id: 48
+  type: conversation
+  name: Patt
+  text: ”What?! No! What are you guys talking about!”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
+  goTo: 49
+
+- id: 49
+  type: story
+  text: "The class started teasing Patt instead and you were released from the uncomfortable position."
+  background: "bg-hallway.png"
+  goTo: 50
+
+- id: 50
+  type: story
+  text: "The teasing turned into a call out on Patt's behavior, seeing that even Patt isn't comfortable with this sort of treatment."
+  background: "bg-hallway.png"
+  goTo: 51
+
+- id: 51
+  type: story
+  text: "Frustrated that the crowd is no longer on their side, and no longer getting the reaction they wanted, the embarrassed Patt stopped making jokes at your expense."
+  background: "bg-hallway.png"
+  goTo: 53
+
+- id: 53
+  type: story
+  text: "By standing up for yourself, you were able to encourage others to step in, showing that teasing loses its power when no one else is on board as well."
+  background: "bg-hallway.png"
+  goTo: end
\ No newline at end of file
diff --git a/public/yml/DialogPieEnglish.yml b/public/yml/DialogPieEnglish.yml
index a46178c..3f4c87b 100644
--- a/public/yml/DialogPieEnglish.yml
+++ b/public/yml/DialogPieEnglish.yml
@@ -20,7 +20,7 @@
   type: conversation
   name: Pie
   text: ”The project seems simple enough, why don’t we start brainstorming for ideas together? I'm Pie by the way.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 5
 
@@ -30,7 +30,7 @@
   option:
   - text: Ok!
     goTo: 6
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 6
@@ -49,7 +49,7 @@
   type: conversation
   name: Pie
   text: ”The idea is nice…but I don’t know if it is creative enough. We don’t want to lose points on creativity.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 9
 
@@ -61,14 +61,14 @@
     goTo: 10
   - text: "Oh...why don’t you like it though?"
     goTo: 11
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 10
   type: conversation
   name: Pie
   text: ”Yeah maybe it’ll be better...”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 11
 
@@ -76,7 +76,7 @@
   type: conversation
   name: Pie
   text: ”We gotta impress the teacher haha.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 12
 
@@ -84,7 +84,7 @@
   type: conversation
   name: Pie
   text: ”I’m not saying it’s bad! But you know, it’s a little basic. I kinda expected you to come up with something more original.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 13
 
@@ -104,7 +104,7 @@
   type: conversation
   name: Pie
   text: ”Oh you’re doing it like that? I mean it’s okay...”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 17
 
@@ -112,7 +112,7 @@
   type: conversation
   name: Pie
   text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 18
 
@@ -124,14 +124,14 @@
     goTo: 20
   - text: "Ok..."
     goTo: 21
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 20
   type: conversation
   name: Pie
   text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -139,7 +139,7 @@
   type: conversation
   name: Pie
   text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -169,7 +169,7 @@
   type: conversation
   name: Pie
   text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 27
 
@@ -181,14 +181,14 @@
     goTo: 28
   - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
     goTo: 47
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 28
   type: conversation
   name: Pie
   text: ”Ok fine, as long as the presentation goes well.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 29
 
@@ -220,7 +220,7 @@
   type: conversation
   name: Pie
   text: ”Why didn’t you let me present my parts like you agreed before?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 34
 
@@ -228,7 +228,7 @@
   type: conversation
   name: Pie
   text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 35
 
@@ -242,7 +242,7 @@
   type: conversation
   name: Pie
   text: ”You calmly explain to the teacher the situation.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 37
 
@@ -250,7 +250,7 @@
   type: conversation
   name: Pie
   text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 38
 
@@ -264,7 +264,7 @@
   type: conversation
   name: Pie
   text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 41
 
@@ -272,7 +272,7 @@
   type: conversation
   name: Pie
   text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 42
 
@@ -332,7 +332,7 @@
   type: conversation
   name: Pie
   text: ”Can you explain a bit more about this slide?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 52
 
@@ -358,7 +358,7 @@
   type: conversation
   name: Pie
   text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 56
 
@@ -366,7 +366,7 @@
   type: conversation
   name: Pie
   text: ”I was actually the one who worked on this slide.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 57
 
@@ -374,7 +374,7 @@
   type: conversation
   name: Pie
   text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 58
 
@@ -382,7 +382,7 @@
   type: conversation
   name: Pie
   text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 59
 
@@ -390,7 +390,7 @@
   type: conversation
   name: Pie
   text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 60
 
@@ -410,7 +410,7 @@
   type: conversation
   name: Pie
   text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 63
 
@@ -418,7 +418,7 @@
   type: conversation
   name: Pie
   text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 64
 
diff --git a/public/yml/DialogPieThai.yml b/public/yml/DialogPieThai.yml
index a46178c..3f4c87b 100644
--- a/public/yml/DialogPieThai.yml
+++ b/public/yml/DialogPieThai.yml
@@ -20,7 +20,7 @@
   type: conversation
   name: Pie
   text: ”The project seems simple enough, why don’t we start brainstorming for ideas together? I'm Pie by the way.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 5
 
@@ -30,7 +30,7 @@
   option:
   - text: Ok!
     goTo: 6
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 6
@@ -49,7 +49,7 @@
   type: conversation
   name: Pie
   text: ”The idea is nice…but I don’t know if it is creative enough. We don’t want to lose points on creativity.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 9
 
@@ -61,14 +61,14 @@
     goTo: 10
   - text: "Oh...why don’t you like it though?"
     goTo: 11
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 10
   type: conversation
   name: Pie
   text: ”Yeah maybe it’ll be better...”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 11
 
@@ -76,7 +76,7 @@
   type: conversation
   name: Pie
   text: ”We gotta impress the teacher haha.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 12
 
@@ -84,7 +84,7 @@
   type: conversation
   name: Pie
   text: ”I’m not saying it’s bad! But you know, it’s a little basic. I kinda expected you to come up with something more original.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 13
 
@@ -104,7 +104,7 @@
   type: conversation
   name: Pie
   text: ”Oh you’re doing it like that? I mean it’s okay...”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 17
 
@@ -112,7 +112,7 @@
   type: conversation
   name: Pie
   text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 18
 
@@ -124,14 +124,14 @@
     goTo: 20
   - text: "Ok..."
     goTo: 21
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 20
   type: conversation
   name: Pie
   text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -139,7 +139,7 @@
   type: conversation
   name: Pie
   text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 22
 
@@ -169,7 +169,7 @@
   type: conversation
   name: Pie
   text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 27
 
@@ -181,14 +181,14 @@
     goTo: 28
   - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
     goTo: 47
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
 - id: 28
   type: conversation
   name: Pie
   text: ”Ok fine, as long as the presentation goes well.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 29
 
@@ -220,7 +220,7 @@
   type: conversation
   name: Pie
   text: ”Why didn’t you let me present my parts like you agreed before?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 34
 
@@ -228,7 +228,7 @@
   type: conversation
   name: Pie
   text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 35
 
@@ -242,7 +242,7 @@
   type: conversation
   name: Pie
   text: ”You calmly explain to the teacher the situation.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 37
 
@@ -250,7 +250,7 @@
   type: conversation
   name: Pie
   text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 38
 
@@ -264,7 +264,7 @@
   type: conversation
   name: Pie
   text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 41
 
@@ -272,7 +272,7 @@
   type: conversation
   name: Pie
   text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 42
 
@@ -332,7 +332,7 @@
   type: conversation
   name: Pie
   text: ”Can you explain a bit more about this slide?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 52
 
@@ -358,7 +358,7 @@
   type: conversation
   name: Pie
   text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 56
 
@@ -366,7 +366,7 @@
   type: conversation
   name: Pie
   text: ”I was actually the one who worked on this slide.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 57
 
@@ -374,7 +374,7 @@
   type: conversation
   name: Pie
   text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 58
 
@@ -382,7 +382,7 @@
   type: conversation
   name: Pie
   text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 59
 
@@ -390,7 +390,7 @@
   type: conversation
   name: Pie
   text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 60
 
@@ -410,7 +410,7 @@
   type: conversation
   name: Pie
   text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 63
 
@@ -418,7 +418,7 @@
   type: conversation
   name: Pie
   text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
-  sprite: "_Pie_normal.zip"
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 64
 

From 58f91217ed0e8d30a30d197e4f7aaaf7baac926c Mon Sep 17 00:00:00 2001
From: fufu-girl-meow <furries@duck.com>
Date: Tue, 24 Jun 2025 19:11:59 +0700
Subject: [PATCH 23/25] video playbox css fix thigny idk

---
 src/css/conversation.css | 37 +++++++++++++++++++++++++++++++------
 src/css/option.css       | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/css/conversation.css b/src/css/conversation.css
index b415a66..8644a90 100644
--- a/src/css/conversation.css
+++ b/src/css/conversation.css
@@ -1,9 +1,34 @@
 .spriteBox {
-    height: 50vh;
-    width: 30vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  max-height: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
+
+.spriteBox video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+
 @media (max-width: 768px) {
-    .spriteBox {
-        width: 75vw;
-    }
-}
\ No newline at end of file
+  .spriteBox {
+    width: 98vw;
+    max-height: 45vh;
+  }
+  .spriteBox video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
diff --git a/src/css/option.css b/src/css/option.css
index 5cca0b1..7d823d1 100644
--- a/src/css/option.css
+++ b/src/css/option.css
@@ -20,11 +20,36 @@
 }
 
 .spriteBox {
-    height: 50vh;
-    width: 30vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  max-height: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
+
+.spriteBox video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+
 @media (max-width: 768px) {
-    .spriteBox {
-        width: 75vw;
-    }
+  .spriteBox {
+    width: 98vw;
+    max-height: 45vh;
+  }
+  .spriteBox video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
+

From d6bf740e00ef80295f5755a2542a68215b902c9c Mon Sep 17 00:00:00 2001
From: Late Night Defender <latenightdef@techtransthai.org>
Date: Sat, 5 Jul 2025 11:18:44 +0700
Subject: [PATCH 24/25] reorder IDs for Pie

---
 public/yml/DialogPieEnglish.yml | 302 ++++++++++++++++----------------
 1 file changed, 151 insertions(+), 151 deletions(-)

diff --git a/public/yml/DialogPieEnglish.yml b/public/yml/DialogPieEnglish.yml
index 3f4c87b..dbb291a 100644
--- a/public/yml/DialogPieEnglish.yml
+++ b/public/yml/DialogPieEnglish.yml
@@ -94,270 +94,294 @@
   background: "bg-hallway.png"
   goTo: 14
 
-- id: 15
+- id: 14
   type: story
   text: "You try your best to make the presentation look good, but Pie keeps having things to say about what you are doing."
   background: "bg-hallway.png"
+  goTo: 15
+
+- id: 15
+  type: conversation
+  name: Pie
+  text: ”Oh you’re doing it like that? I mean it’s okay...”
+  sprite: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
   goTo: 16
 
 - id: 16
   type: conversation
   name: Pie
-  text: ”Oh you’re doing it like that? I mean it’s okay...”
+  text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 17
 
 - id: 17
-  type: conversation
-  name: Pie
-  text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
-  sprite: "F_Pie_normal.webm"
-  background: "bg-hallway.png"
-  goTo: 18
-
-- id: 19
   type: option
   name: Pie
   option:
   - text: "Huh? But I’m not trying to embarrass us."
-    goTo: 20
+    goTo: 18
   - text: "Ok..."
-    goTo: 21
+    goTo: 19
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
-- id: 20
+- id: 18
   type: conversation
   name: Pie
   text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
-  goTo: 22
+  goTo: 20
 
-- id: 21
+- id: 19
   type: conversation
   name: Pie
   text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 20
+
+- id: 20
+  type: story
+  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
+  background: "bg-hallway.png"
+  goTo: 21
+
+- id: 21
+  type: transition
   goTo: 22
 
 - id: 22
   type: story
-  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
+  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
   background: "bg-hallway.png"
   goTo: 23
 
 - id: 23
-  type: transition
-  goTo: 24
-
-- id: 24
-  type: story
-  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
-  background: "bg-hallway.png"
-  goTo: 25
-
-- id: 25
   type: story
   text: "Before presenting, Pie came to you."
   background: "bg-hallway.png"
-  goTo: 26
+  goTo: 24
 
-- id: 26
+- id: 24
   type: conversation
   name: Pie
   text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
-  goTo: 27
+  goTo: 25
 
-- id: 27
+- id: 25
   type: option
   name: Pie
   option:
   - text: "But I should present the parts I worked on?"
-    goTo: 28
+    goTo: 26
   - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
-    goTo: 47
+    goTo: 44
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
 
-- id: 28
+- id: 26
   type: conversation
   name: Pie
   text: ”Ok fine, as long as the presentation goes well.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: story
+  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
+  background: "bg-hallway.png"
+  goTo: 28
+
+- id: 28
+  type: story
+  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
+  background: "bg-hallway.png"
   goTo: 29
 
 - id: 29
   type: story
-  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
+  text: "In the end, you were left with little slides to present."
   background: "bg-hallway.png"
   goTo: 30
 
 - id: 30
   type: story
-  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
+  text: "You confront Pie about their fake agreement after."
   background: "bg-hallway.png"
   goTo: 31
 
 - id: 31
-  type: story
-  text: "In the end, you were left with little slides to present."
-  background: "bg-hallway.png"
-  goTo: 32
-
-- id: 32
-  type: story
-  text: "You confront Pie about their fake agreement after."
-  background: "bg-hallway.png"
-  goTo: 33
-
-- id: 33
   type: conversation
   name: Pie
   text: ”Why didn’t you let me present my parts like you agreed before?”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: conversation
+  name: Pie
+  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
+  sprite: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: story
+  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
+  background: "bg-hallway.png"
   goTo: 34
 
 - id: 34
   type: conversation
   name: Pie
-  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
+  text: ”You calmly explain to the teacher the situation.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 35
 
 - id: 35
-  type: story
-  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
+  type: conversation
+  name: Pie
+  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 36
 
 - id: 36
-  type: conversation
-  name: Pie
-  text: ”You calmly explain to the teacher the situation.”
-  sprite: "F_Pie_normal.webm"
+  type: story
+  text: "After the class ends, Pie turns to you."
   background: "bg-hallway.png"
   goTo: 37
 
 - id: 37
   type: conversation
   name: Pie
-  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
+  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 38
 
 - id: 38
-  type: story
-  text: "After the class ends, Pie turns to you."
-  background: "bg-hallway.png"
-  goTo: 39
-
-- id: 40
-  type: conversation
-  name: Pie
-  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
-  sprite: "F_Pie_normal.webm"
-  background: "bg-hallway.png"
-  goTo: 41
-
-- id: 41
   type: conversation
   name: Pie
   text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 39
+
+- id: 39
+  type: story
+  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  background: "bg-hallway.png"
+  goTo: 40
+
+- id: 40
+  type: story
+  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: story
+  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
+  background: "bg-hallway.png"
   goTo: 42
 
 - id: 42
   type: story
-  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
   background: "bg-hallway.png"
   goTo: 43
 
 - id: 43
   type: story
-  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
+  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
   background: "bg-hallway.png"
-  goTo: 44
+  goTo: end
 
 - id: 44
   type: story
-  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
+  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
   background: "bg-hallway.png"
   goTo: 45
 
 - id: 45
   type: story
-  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
+  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
   background: "bg-hallway.png"
   goTo: 46
 
 - id: 46
-  type: story
-  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
-  background: "bg-hallway.png"
-  goTo: end
+  type: transition
+  goTo: 47
 
 - id: 47
   type: story
-  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
+  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
   background: "bg-hallway.png"
   goTo: 48
 
 - id: 48
-  type: story
-  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
-  background: "bg-hallway.png"
-  goTo: 49
-
-- id: 49
-  type: transition
-  goTo: 50
-
-- id: 50
-  type: story
-  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
-  background: "bg-hallway.png"
-  goTo: 51
-
-- id: 51
   type: conversation
   name: Pie
   text: ”Can you explain a bit more about this slide?”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 49
+
+- id: 49
+  type: story
+  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  background: "bg-hallway.png"
+  goTo: 50
+
+- id: 50
+  type: story
+  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  background: "bg-hallway.png"
+  goTo: 51
+
+- id: 51
+  type: story
+  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  background: "bg-hallway.png"
   goTo: 52
 
 - id: 52
-  type: story
-  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  type: conversation
+  name: Pie
+  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 53
 
 - id: 53
-  type: story
-  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  type: conversation
+  name: Pie
+  text: ”I was actually the one who worked on this slide.”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 54
 
 - id: 54
-  type: story
-  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  type: conversation
+  name: Pie
+  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 55
 
 - id: 55
   type: conversation
   name: Pie
-  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
+  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 56
@@ -365,88 +389,64 @@
 - id: 56
   type: conversation
   name: Pie
-  text: ”I was actually the one who worked on this slide.”
+  text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 57
 
 - id: 57
-  type: conversation
-  name: Pie
-  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
-  sprite: "F_Pie_normal.webm"
+  type: story
+  text: "After this, you know Pie is upset at the whole thing."
   background: "bg-hallway.png"
   goTo: 58
 
 - id: 58
-  type: conversation
-  name: Pie
-  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
-  sprite: "F_Pie_normal.webm"
+  type: story
+  text: "After the class ends, Pie turns to you."
   background: "bg-hallway.png"
   goTo: 59
 
 - id: 59
   type: conversation
   name: Pie
-  text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
+  text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 60
 
 - id: 60
-  type: story
-  text: "After this, you know Pie is upset at the whole thing."
-  background: "bg-hallway.png"
-  goTo: 61
-
-- id: 61
-  type: story
-  text: "After the class ends, Pie turns to you."
-  background: "bg-hallway.png"
-  goTo: 62
-
-- id: 62
-  type: conversation
-  name: Pie
-  text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
-  sprite: "F_Pie_normal.webm"
-  background: "bg-hallway.png"
-  goTo: 63
-
-- id: 63
   type: conversation
   name: Pie
   text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
   sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
+  goTo: 61
+
+- id: 61
+  type: story
+  text: "Afterwards, you become aware of Pie’s behavior and decided to stay distant from Pie, choosing to not take their words to heart."
+  background: "bg-hallway.png"
+  goTo: 62
+
+- id: 62
+  type: story
+  text: "With the teacher's help, the situation was resolved fairly, and both you and Pie received the grades you earned for the presentation."
+  background: "bg-hallway.png"
+  goTo: 63
+
+- id: 63
+  type: story
+  text: "This experience taught you to not be taken advantage of, even in group work."
+  background: "bg-hallway.png"
   goTo: 64
 
 - id: 64
   type: story
-  text: "Afterwards, you become aware of Pie’s behavior and decided to stay distant from Pie, choosing to not take their words to heart."
+  text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
   background: "bg-hallway.png"
   goTo: 65
 
 - id: 65
-  type: story
-  text: "With the teacher's help, the situation was resolved fairly, and both you and Pie received the grades you earned for the presentation."
-  background: "bg-hallway.png"
-  goTo: 66
-
-- id: 66
-  type: story
-  text: "This experience taught you to not be taken advantage of, even in group work."
-  background: "bg-hallway.png"
-  goTo: 67
-
-- id: 67
-  type: story
-  text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
-  background: "bg-hallway.png"
-  goTo: 68
-
-- id: 68
   type: story
   text: "Now you aspire to make healthier and more respectful collaborations in the future."
   background: "bg-hallway.png"

From 0c22feb3343fcb7743b128cd99a0a1a0036dd96f Mon Sep 17 00:00:00 2001
From: Late Night Defender <latenightdef@techtransthai.org>
Date: Sat, 5 Jul 2025 12:00:12 +0700
Subject: [PATCH 25/25] reorder IDs for Patt

---
 public/yml/DialogPat.yml | 182 +++++++++++++++++++--------------------
 1 file changed, 91 insertions(+), 91 deletions(-)

diff --git a/public/yml/DialogPat.yml b/public/yml/DialogPat.yml
index 5f8bb56..04fbe71 100644
--- a/public/yml/DialogPat.yml
+++ b/public/yml/DialogPat.yml
@@ -57,152 +57,160 @@
   type: story
   text: "Patt quickly grabs a pen, but they seem amused by something else in your bag, giving you a bad feeling."
   background: "bg-hallway.png"
-  goTo: 11
+  goTo: 10
 
-- id: 11
+- id: 10
   type: conversation
   name: Patt
   text: ”Ooooooh look at this! Someone’s got a crush on you! Who’s the one who sent you this love letter?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: story
+  text: "Patt slowly holds up the love letter for the class to see."
+  background: "bg-hallway.png"
   goTo: 12
 
 - id: 12
   type: story
-  text: "Patt slowly holds up the love letter for the class to see."
+  text: "The class reacted in excited chatters."
   background: "bg-hallway.png"
   goTo: 13
 
 - id: 13
-  type: story
-  text: "The class reacted in excited chatters."
-  background: "bg-hallway.png"
-  goTo: 14
-
-- id: 14
   type: option
   name: Patt
   option:
   - text: Haha...you don’t need to know!
-    goTo: 15
+    goTo: 14
   - text: Stop it...you don’t need to make fun of it!
-    goTo: 16
+    goTo: 15
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
-- id: 15
+- id: 14
   type: conversation
   name: Patt
   text: ”What? Are you shy? Hahaha embarrassed to say who it is?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
-  goTo: 17
+  goTo: 16
 
-- id: 16
+- id: 15
   type: conversation
   name: Patt
   text: ”Woah chill! I’m just messing around. It’s just a love letter, not a big deal right?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
+  type: transition
   goTo: 17
 
 - id: 17
-  type: transition
+  type: story
+  text: "Ever since the discovery, Patt would bring up the love letter to you and everyone else, laughing about it."
+  background: "bg-hallway.png"
   goTo: 18
 
 - id: 18
   type: story
-  text: "Ever since the discovery, Patt would bring up the love letter to you and everyone else, laughing about it."
+  text: "Even during work time, Patt pesters you constantly."
   background: "bg-hallway.png"
   goTo: 19
 
 - id: 19
-  type: story
-  text: "Even during work time, Patt pesters you constantly."
-  background: "bg-hallway.png"
-  goTo: 20
-
-- id: 20
   type: conversation
   name: Patt
   text: ”Hey, did you write back yet? I wanna know how this love story ends. I’m sure everyone wants to know too! Right?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 20
+
+- id: 20
+  type: story
+  text: "Others laugh in agreement, it seems you have become the talk of the class."
+  background: "bg-hallway.png"
   goTo: 21
 
 - id: 21
   type: story
-  text: "Others laugh in agreement, it seems you have become the talk of the class."
+  text: "You feel uncomfortable from the unwanted teasing and attention."
   background: "bg-hallway.png"
   goTo: 22
 
 - id: 22
-  type: story
-  text: "You feel uncomfortable from the unwanted teasing and attention."
-  background: "bg-hallway.png"
-  goTo: 23
-
-- id: 23
   type: option
   name: Patt
   option:
   - text: Ask Patt to stop
-    goTo: 24
+    goTo: 23
   - text: Ignore the teasing
-    goTo: 25
+    goTo: 24
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
-- id: 24
+- id: 23
   type: conversation
   name: Patt
   text: ”Ok but can you stop already? I don’t see that it’s that funny.”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 25
+
+- id: 24
+  type: story
+  text: "You look at Patt and then ignore them, going back to work, trying your best not to give a reaction to add to the attention."
+  background: "bg-hallway.png"
   goTo: 26
 
 - id: 25
-  type: story
-  text: "You look at Patt and then ignore them, going back to work, trying your best not to give a reaction to add to the attention."
+  type: conversation
+  name: Patt
+  text: ”Woah you don’t have to take it that seriously! I was just joking!”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 27
 
 - id: 26
-  type: conversation
-  name: Patt
-  text: ”Woah you don’t have to take it that seriously! I was just joking!”
-  sprite: "F_Patt_shrug.webm"
-  background: "bg-hallway.png"
-  goTo: 28
-
-- id: 27
   type: conversation
   name: Patt
   text: ”Aw man fine, looks like you’re not in the mood, I really wanted an update though!”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: transition
   goTo: 28
 
 - id: 28
-  type: transition
+  type: story
+  text: "It's been a few days already, but Patt is still teasing you about the love letter in front of the class."
+  background: "bg-hallway.png"
   goTo: 29
 
 - id: 29
   type: story
-  text: "It's been a few days already, but Patt is still teasing you about the love letter in front of the class."
+  text: "Having endured the teasing for long enough, the next time Patt teases you, you will try to stop it."
   background: "bg-hallway.png"
   goTo: 30
 
 - id: 30
-  type: story
-  text: "Having endured the teasing for long enough, the next time Patt teases you, you will try to stop it."
+  type: conversation
+  name: Patt
+  text: ”I still really want to know who it is though! Are you not saying because you also have a crush on them? Don’t want to let us know huh!”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 31
 
 - id: 31
   type: conversation
   name: Patt
-  text: ”I still really want to know who it is though! Are you not saying because you also have a crush on them? Don’t want to let us know huh!”
+  text: ”Why do you always have to talk about the letter? It’s just a letter, so why do you care so much?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 32
@@ -210,106 +218,106 @@
 - id: 32
   type: conversation
   name: Patt
-  text: ”Why do you always have to talk about the letter? It’s just a letter, so why do you care so much?”
+  text: ”I already said I was just joking! No need to be so sensitive!”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 33
 
 - id: 33
-  type: conversation
-  name: Patt
-  text: ”I already said I was just joking! No need to be so sensitive!”
-  sprite: "F_Patt_shrug.webm"
-  background: "bg-hallway.png"
-  goTo: 34
-
-- id: 34
   type: option
   name: Patt
   option:
   - text: Well your jokes are not funny anymore
-    goTo: 35
+    goTo: 34
   - text: I don’t really see anyone laughing along
-    goTo: 45
+    goTo: 44
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
 
-- id: 35
+- id: 34
   type: conversation
   name: Patt
   text: ”Alright! Maybe you don’t find it funny but others might right?”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
+  goTo: 35
+
+- id: 35
+  type: story
+  text: "Patt tries to laugh it off again but the class isn’t laughing with them anymore."
+  background: "bg-hallway.png"
   goTo: 36
 
 - id: 36
   type: story
-  text: "Patt tries to laugh it off again but the class isn’t laughing with them anymore."
+  text: "It has been going on for days and the “joke” has gotten old."
   background: "bg-hallway.png"
   goTo: 37
 
 - id: 37
   type: story
-  text: "It has been going on for days and the “joke” has gotten old."
+  text: "This leads to some classmates standing with you on the situation."
   background: "bg-hallway.png"
   goTo: 38
 
 - id: 38
-  type: story
-  text: "This leads to some classmates standing with you on the situation."
+  type: conversation
+  name: Patt
+  text: ”Yeah I think it’s a little much now, not gonna lie.”
+  sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 39
 
 - id: 39
   type: conversation
   name: Patt
-  text: ”Yeah I think it’s a little much now, not gonna lie.”
+  text: ”Alright fine I’ll stops teasing you, geez.”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 40
 
 - id: 40
-  type: conversation
-  name: Patt
-  text: ”Alright fine I’ll stops teasing you, geez.”
-  sprite: "F_Patt_shrug.webm"
+  type: story
+  text: "You mustered the courage to confront Patt and successfully had them stop teasing and making fun of you and your things. "
   background: "bg-hallway.png"
   goTo: 41
 
 - id: 41
   type: story
-  text: "You mustered the courage to confront Patt and successfully had them stop teasing and making fun of you and your things. "
+  text: "Patt's constant teasing went too far, and luckily your classmates feel it too, leaving Patt to stand alone."
   background: "bg-hallway.png"
   goTo: 42
 
 - id: 42
   type: story
-  text: "Patt's constant teasing went too far, and luckily your classmates feel it too, leaving Patt to stand alone."
+  text: "Now aware of Patt’s tendency of joking about everything, you ignore their jokes, not giving Patt the attention and reaction they want."
   background: "bg-hallway.png"
   goTo: 43
 
 - id: 43
-  type: story
-  text: "Now aware of Patt’s tendency of joking about everything, you ignore their jokes, not giving Patt the attention and reaction they want."
-  background: "bg-hallway.png"
-  goTo: 44
-
-- id: 44
   type: story
   text: "You make sure to not let anyone have the right to make you feel embarrassed or forced."
   background: "bg-hallway.png"
   goTo: end
 
-- id: 45
+- id: 44
   type: story
   text: "Patt looks around and realizes that other people aren’t as amused as they are anymore."
   background: "bg-hallway.png"
+  goTo: 45
+
+- id: 45
+  type: conversation
+  name: Patt
+  text: ”Yeah, why are you so interested in this love letter anyways? Are you jealous of the person who sent it?”
+  sprite: "F_Patt_shrug.webm"
+  background: "bg-hallway.png"
   goTo: 46
 
 - id: 46
   type: conversation
   name: Patt
-  text: ”Yeah, why are you so interested in this love letter anyways? Are you jealous of the person who sent it?”
+  text: ”Haha! Or are you actually the one who sent it in the first place!”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 47
@@ -317,38 +325,30 @@
 - id: 47
   type: conversation
   name: Patt
-  text: ”Haha! Or are you actually the one who sent it in the first place!”
+  text: ”What?! No! What are you guys talking about!”
   sprite: "F_Patt_shrug.webm"
   background: "bg-hallway.png"
   goTo: 48
 
 - id: 48
-  type: conversation
-  name: Patt
-  text: ”What?! No! What are you guys talking about!”
-  sprite: "F_Patt_shrug.webm"
+  type: story
+  text: "The class started teasing Patt instead and you were released from the uncomfortable position."
   background: "bg-hallway.png"
   goTo: 49
 
 - id: 49
   type: story
-  text: "The class started teasing Patt instead and you were released from the uncomfortable position."
+  text: "The teasing turned into a call out on Patt's behavior, seeing that even Patt isn't comfortable with this sort of treatment."
   background: "bg-hallway.png"
   goTo: 50
 
 - id: 50
   type: story
-  text: "The teasing turned into a call out on Patt's behavior, seeing that even Patt isn't comfortable with this sort of treatment."
+  text: "Frustrated that the crowd is no longer on their side, and no longer getting the reaction they wanted, the embarrassed Patt stopped making jokes at your expense."
   background: "bg-hallway.png"
   goTo: 51
 
 - id: 51
-  type: story
-  text: "Frustrated that the crowd is no longer on their side, and no longer getting the reaction they wanted, the embarrassed Patt stopped making jokes at your expense."
-  background: "bg-hallway.png"
-  goTo: 53
-
-- id: 53
   type: story
   text: "By standing up for yourself, you were able to encourage others to step in, showing that teasing loses its power when no one else is on board as well."
   background: "bg-hallway.png"