handle yml

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "animejs": "^3.2.2",
+    "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

public/yml/DialogPorsche.yml

@@ -8,7 +8,7 @@
   type: conversation
   name: Porsche
   text: ”Hi! I haven’t seen you around before so you must be new. I’m Porsche. Why don’t you sit with me and my friends? We'll tell you about the school!”
-  sprite:
+  sprite: ""
   background: ""
   goTo: 3
 
@@ -18,7 +18,7 @@
   option:
   - text: Sure!
     goTo: 4
-  sprite:
+  sprite: ""
   background: ""
 
 - id: 4

src/main.jsx

@@ -9,6 +9,7 @@ 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 StoryPage from './pages/storyPage.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -20,6 +21,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
+        <Route path='/story' element={<StoryPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/pages/components/fetchYamlData.jsx

@@ -0,0 +1,18 @@
+import * as yaml from 'js-yaml';
+
+export const fetchYamlData = async ({ src = '/yml/DialogPorsche.yml' }) => {
+  try {
+    const response = await fetch(src);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const yamlData = await response.text();
+    console.log('Fetched YAML data:', yamlData); // Debugging statement
+    const parsedData = yaml.load(yamlData);
+    console.log('Parsed YAML data:', parsedData); // Debugging statement
+    return parsedData;
+  } catch (error) {
+    throw new Error(`Error loading YAML data: ${error.message}`);
+  }
+};
+

src/pages/storyPage.jsx

@@ -0,0 +1,75 @@
+// src/StoryPage.js
+import { useEffect, useState } from 'react';
+import '../css/global.css';
+import { fetchYamlData } from './components/fetchYamlData';
+
+function StoryPage() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' });
+        console.log("Parsed in component:", parsedData);
+        if (!Array.isArray(parsedData)) {
+          throw new Error('YAML data is not an array');
+        }
+        setData(parsedData);
+      } catch (error) {
+        setError(error.message);
+      }
+    };
+    loadData();
+  }, []);
+  
+
+  if (error) {
+    return <div>Error loading YAML data: {error}</div>;
+  }
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
+
+  const handleClicked = () => {
+    console.log(data);
+    // You can add logic here to handle the click event, such as navigating to the next step
+    if (currentStep < data.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const currentStepData = data[currentStep];
+
+  return (
+    <div
+      onClick={handleClicked}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        flexDirection: 'column',
+      }}
+    >
+      <label className='title'>Fifty Shades <br /> of Bully</label>
+      <div>
+        <p>ID: {currentStepData.id}</p>
+        <p>Type: {currentStepData.type}</p>
+        {currentStepData.name && <p>Name: {currentStepData.name}</p>}
+        <p>Text: {currentStepData.text}</p>
+        {currentStepData.option && (
+          <ul>
+            {currentStepData.option.map((option, index) => (
+              <li key={index}>{option.text}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default StoryPage;