fifty-shades-of-bully/src/pages/vistualNovelHandler.jsx

// src/pages/vistualNovelHandler.jsx
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import '../css/global.css';
import { fetchYamlData } from './components/fetchYamlData';
import StoryPage from './storyPage';
import LoadingScene from './components/loadingScene.jsx';

function VitualNovelHandler() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [currentStep, setCurrentStep] = useState(0);
  const navigate = useNavigate();
  const { step } = useParams();

  useEffect(() => {
    const loadData = async () => {
      try {
        const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' });
        if (!Array.isArray(parsedData)) {
          throw new Error('YAML data is not an array');
        }
        setData(parsedData);
      } catch (error) {
        setError(error.message);
      }
    };
    loadData();
  }, []);

  useEffect(() => {
    // Update the current step from the URL parameter
    if (step && !isNaN(step)) {
      setCurrentStep(parseInt(step, 10));
    }
  }, [step]);

  if (error) {
    return <div>Error loading YAML data: {error}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  const handleNextStep = () => {
    console.log(data);
    if (currentStep < data.length - 1) {
      setCurrentStep(currentStep + 1);
      navigate(`/vs/${currentStep + 1}`);
    }
  };

  const currentStepData = data[currentStep];

  const renderComponent = (type) => {
    switch (type) {
      case "story":
        return <StoryPage data={currentStepData} onClicked={handleNextStep}/>;
      case "conversation":
        return <div onClick={handleNextStep}>conversation</div>;
      case "option":
        return <div onClick={handleNextStep}>option</div>;
      default:
        return <LoadingScene />;
    }
  };

  return (
    <div>
      {renderComponent(currentStepData.type)}
    </div>
  );
}

export default VitualNovelHandler;