Languge Menu (will implement later)

public/yml/DialogPorschemeowmeow.yml

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

src/main.jsx

@@ -10,6 +10,7 @@ import IntroductionPage from './pages/introductionPage.jsx';
 import PlayVideo from './pages/components/playVideo.jsx'
 import VitualNovelHandler from './pages/vistualNovelHandler.jsx';
 import EndPage from './pages/endPage.jsx';
+import LanguageSelection from './pages/languageSelection.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -22,6 +23,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/introduction" element={<IntroductionPage />} />
         <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
+        <Route path='/lang' element={<LanguageSelection />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/pages/languageSelection.jsx

@@ -0,0 +1,38 @@
+import '../css/global.css'
+import BlackButton from './components/customButton'
+import { useState, useEffect } from 'react';
+
+function languageSelection() {
+    const [lang, setLang] = useState(() => {
+        return sessionStorage.getItem("lang") || '';
+    });
+
+    useEffect(() => {
+        sessionStorage.setItem("lang", lang);
+    }, [lang]);
+
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            flexDirection: 'column',
+        }}>
+        <label className='title'>Please choose a language</label>
+        <label className='title'>กรุณาเลือกภาษาที่ต้องการ</label>
+
+        <div style={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '1rem',
+            marginTop: '1rem'
+        }}>
+        <BlackButton text="ภาษาไทย" to='/introduction'/>
+        <BlackButton text="English" to='/introduction'/>
+        </div>
+        </div>
+    );
+}
+
+export default languageSelection