setLoading wern't suppose to be false...

Reviewed-on: mrrpmeowfurry/fifty-shades-of-bully#1

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": {

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
 

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

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,392 +61,392 @@
     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: 10.2
-
-- id: 10.2
-  type: conversation
-  name: Pie
-  text: ”We gotta impress the teacher haha.”
-  sprite: "_Pie_normal.zip"
-  background: "bg-hallway.png"
-  goTo: 12
+  goTo: 11
 
 - id: 11
   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"
+  text: ”We gotta impress the teacher haha.”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 12
 
 - id: 12
-  type: story
-  text: "A few days passed, you and Pie start reviewing and making the presentation."
+  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: "F_Pie_normal.webm"
   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
-  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
-
-- id: 14 01
-  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
-
 - id: 15
-  type: option
-  name: Pie
-  option:
-  - text: "Huh? But I’m not trying to embarrass us."
-    goTo: 16
-  - text: "Ok..."
-    goTo: 17
-  sprite: "_Pie_normal.zip"
+  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: ”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"
+  text: ”Oh you’re doing it like that? I mean it’s okay...”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
-  goTo: 18
+  goTo: 17
 
 - id: 17
   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"
+  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: 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."
+  type: option
+  name: Pie
+  option:
+  - text: "Huh? But I’m not trying to embarrass us."
+    goTo: 20
+  - text: "Ok..."
+    goTo: 21
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
-  goTo: 19.2
 
-- id: 19.2
-  type: story
-  text: "Before presenting, Pie came to you."
+- 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: "F_Pie_normal.webm"
   background: "bg-hallway.png"
-  goTo: 21
+  goTo: 22
 
 - 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"
+  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: 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: "F_Pie_normal.webm"
   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: "F_Pie_normal.webm"
   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?”
-  sprite: "_Pie_normal.zip"
+  text: ”Ok fine, as long as the presentation goes well.”
+  sprite: "F_Pie_normal.webm"
   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.”
-  sprite: "_Pie_normal.zip"
+  text: ”Why didn’t you let me present my parts like you agreed before?”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 34
 
 - 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.”
-  sprite: "_Pie_normal.zip"
+  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: 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: "F_Pie_normal.webm"
   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: "F_Pie_normal.webm"
   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: "F_Pie_normal.webm"
   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: "F_Pie_normal.webm"
   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.”
-  sprite: "_Pie_normal.zip"
+  text: ”Can you explain a bit more about this slide?”
+  sprite: "F_Pie_normal.webm"
   background: "bg-hallway.png"
   goTo: 52
 
 - id: 52
-  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
-
-- id: 52.2
   type: story
-  text: "After this, you know Pie is upset at the whole thing."
-  background: "bg-hallway.png"
-  goTo: 52.3
-
-- id: 52.3
-  type: story
-  text: "After the class ends, Pie turns to you."
+  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: 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"
+  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: 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"
+  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: 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."
+  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: 56
 
 - id: 56
-  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."
+  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: 57
 
 - id: 57
-  type: story
-  text: "This experience taught you to not be taken advantage of, even in group work."
+  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: 58
 
 - id: 58
-  type: story
-  text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
+  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"
   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: "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: 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"

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: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: option
+  name: Pie
+  option:
+  - text: Ok!
+    goTo: 6
+  sprite: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 10
+  type: conversation
+  name: Pie
+  text: ”Yeah maybe it’ll be better...”
+  sprite: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: conversation
+  name: Pie
+  text: ”We gotta impress the teacher haha.”
+  sprite: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  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: "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
+  - text: "Ok..."
+    goTo: 21
+  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: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  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: "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: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  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: "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."
+  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"
+  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: "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: 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: "F_Pie_normal.webm"
+  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: "F_Pie_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 56
+
+- id: 56
+  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: 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"
+  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"
+  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: "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: 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

public/yml/DialogPorscheEnglish.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

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

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;
-    }
+  .spriteBox {
+    width: 98vw;
+    max-height: 45vh;
+  }
+  .spriteBox video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
+

src/css/option.css

@@ -2,27 +2,54 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 60vw;
-    background-color: white;
+    width: 55vw;
+    background: rgba(245, 240, 221);
     color: #8391b8;
     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;
 }
 
 .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%;
+  }
 }
+

src/css/textBox.css

@@ -3,7 +3,7 @@
     justify-content: center;
     align-items: center;
     width: 60vw;
-    background-color: white;
+    background: rgba(245, 240, 221);
     color: #8391b8;
     border-style: solid;
     border-color: #8391b8;

src/css/video.css

@@ -2,6 +2,11 @@
     height: 100vh;
     overflow: hidden;
 } */
+
+video::-webkit-media-controls {
+  display: none;
+}
+
 .video-container {
     position: fixed;
     top: 50%;
@@ -40,3 +45,38 @@
     -webkit-media-controls-time-remaining-display: none;
     -webkit-media-controls-toggle-closed-captions-button: none;
 }
+
+.image-container {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+@media only screen and (max-device-width: 600px) {
+    .image-container.middle {
+        width: 200%;
+        height: 150vh;
+        left: 0%;
+    }
+    .image-container.left {
+        width: 300%;
+        left: 0%;
+    }
+    .image-container.right {
+        width: 200%;
+        left: -100%;
+    }
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    pointer-events: none;
+    user-select: none;
+}

src/main.jsx

@@ -6,11 +6,12 @@ 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';
 import EndPage from './pages/endPage.jsx';
+import LanguageSelection from './pages/languageSelection.jsx';
+import Unsupported from './pages/unsupportedOS.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -19,11 +20,12 @@ 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 />} />
+        <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
+        <Route path='/lang' element={<LanguageSelection />} />
+        <Route path='/unsupported' element={<Unsupported/>}/>
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/pages/components/animation.jsx

@@ -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;

src/pages/components/customButton.jsx

@@ -1,11 +1,20 @@
 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>
   )
 }
 

src/pages/components/loadImage.jsx

@@ -0,0 +1,13 @@
+import '../../css/video.css';
+
+function Image({ src = "bg-hallway.png", side = "middle", alt = "this is an image", onImageLoad }) {
+    const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
+
+    return (
+        <div className={`image-container ${side}`}>
+            <img src={urlSource} alt={alt} onLoad={onImageLoad} />
+        </div>
+    );
+}
+
+export default Image;

src/pages/components/testAnimation_manyfiles.jsx

@@ -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;

src/pages/components/testAnimation_onefile.jsx

@@ -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;

src/pages/conversationPage.jsx

@@ -4,7 +4,6 @@ import '../css/global.css';
 import '../css/textBox.css';
 import '../css/nameBox.css';
 import '../css/conversation.css'
-import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
@@ -14,6 +13,10 @@ function ConversationPage({data , onClicked}) {
 
   const DialogText = data.text.replace("{name}", name);
   const DialogName = data.name.replace("{name}", name);
+  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);
 
   return (
     <div
@@ -31,7 +34,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'>

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>
   );
 }

src/pages/introductionPage.jsx

@@ -1,9 +1,8 @@
 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 LoadImage from './components/loadImage.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 import IntroductionData from './components/introductionData.jsx';
 import SelectionCharacter from './components/selectionCharacter.jsx';
@@ -12,7 +11,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();
@@ -33,11 +31,32 @@ function IntroductionPage() {
         setLoading(false);
     };
     
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
+    const userAgent = navigator.userAgent;
+    const isSafari = userAgent.includes("iPhone"); // safari piss me off so bad omg
+
+    const videoElement = isSafari ? (
+        <LoadImage
+            src='bg-hallway.png'
+            side={character.position(numChar)}
+            onImageLoad={handleVideoReady}
+        />
+    ) : (
+        <PlayVideo
+            src='hallway_FFF.mp4'
+            side={character.position(numChar)}
+            onVideoReady={handleVideoReady}
+        />
+    );
+
     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 (
@@ -56,11 +75,7 @@ function IntroductionPage() {
                     />
                 )
             )}
-            <PlayVideo
-                src='hallway_FFF.mp4'
-                side={character.position(numChar)}
-                onVideoReady={handleVideoReady}
-            />
+            {videoElement}
         </div>
     );
 }

src/pages/languageSelection.jsx

@@ -0,0 +1,52 @@
+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]);
+
+    const userAgent = navigator.userAgent;
+    const isSafari = userAgent.includes("Safari");
+
+    const buttonSet = isSafari ? (
+        <>
+            <BlackButton text="ภาษาไทย" to='/unsupported' onClick={() => setLang("Thai")} />
+            <BlackButton text="English" to='/unsupported' onClick={() => setLang("English")} />
+        </>
+    ) : (
+        <>
+            <BlackButton text="ภาษาไทย" to='/warn' onClick={() => setLang("Thai")} />
+            <BlackButton text="English" to='/warn' onClick={() => setLang("English")} />
+        </>
+    );
+
+    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'
+        }}>
+            {buttonSet}
+        </div>
+        </div>
+    );
+}
+
+export default languageSelection

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>
     )

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'>
         {

src/pages/unsupportedOS.jsx

@@ -0,0 +1,41 @@
+import BlackButton from './components/customButton';
+import { useState } from 'react';
+
+function unsupportedOS() {
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
+    const text = {
+        title: lang === 'Thai' ? 'บราว์เซอร์นี้ไม่รองรับเว็ปไชต์นี้!' : 'Your browser is unsupported!',
+        continue: lang === 'Thai' ? 'ดำเนินการต่อ' : 'Continue',
+        body: lang === 'Thai' ? 'อาจมีปัญหาในการแสดงผลหรือบางส่วนทำงานไม่ถูกต้อง' : 'There may be glitches and broken elements'
+    }
+
+    return(
+  	  <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        flexDirection: 'column',
+      }}
+      >
+        <label className='title'>{text.title}</label>
+
+        <div style={{
+          height: '8vh'
+        }}/>
+
+        <label className="body">
+          {text.body}
+        </label>
+        <div style={{
+            height: '8vh'
+        }}/>
+            <BlackButton text={text.continue} to='/warn' />
+  	  </div>
+    )
+}
+
+export default unsupportedOS

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]);
     }

src/pages/warningPage.jsx

@@ -5,6 +5,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' ? 'เนื้อหาต่อไปนี้อาจสร้างความรู้สึกไม่สบายหรือก่อให้เกิดความทุกข์ใจกับผู้อ่านบางท่าน' 
+        : 
+        'The subsequent content includes material that may be sensitive or distressing to certain audiences.',
+    }
+          // 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={{
         display: 'flex',
@@ -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>
   )