change VitualNovelHandler to handle goTo and Connect introductionPage to VitualNovelHandler

src/pages/conversationPage.jsx

@@ -11,6 +11,7 @@ function ConversationPage({data , onClicked}) {
 
   return (
     <div
+      onClick={()=>onClicked(data.goTo-1)}
       style={{
         display: 'flex',
         justifyContent: 'center',

src/pages/introductionPage.jsx

@@ -1,4 +1,5 @@
 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';
@@ -9,7 +10,7 @@ import SelectionCharacter from './components/selectionCharacter.jsx';
 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);
@@ -34,6 +35,7 @@ function IntroductionPage() {
 
     const handleClickedButton = () => {
         console.log(character.name(numChar))
+        if(character.name(numChar)=='Porsche') navigate(`/vs/0`);
     }
 
     return (

src/pages/optionPage.jsx

@@ -26,15 +26,10 @@ function OptionPage({data , onClicked}) {
       <div className='spriteBox'>
         <Animation src={`F${data.sprite}`}/>
       </div>
-      {/* <div style={{width:'60vw'}}>
-        <div className='nameBox title'>
-          {data.name}
-        </div>
-      </div> */}
       <div className='optionSection'>
         {
             data.option.map((item,i) => 
-                <div key={i} className='optionBox title'>{item.text}</div>)
+                <div onClick={()=>onClicked(item.goTo-1)} key={i} className='optionBox title'>{item.text}</div>)
         }
       </div>
     </div>

src/pages/storyPage.jsx

@@ -8,7 +8,7 @@ function StoryPage({data , onClicked}) {
 
   return (
     <div
-      onClick={onClicked}
+      onClick={()=>onClicked(data.goTo-1)}
       style={{
         display: 'flex',
         justifyContent: 'center',

src/pages/vistualNovelHandler.jsx

@@ -46,12 +46,17 @@ function VitualNovelHandler() {
     return <div>Loading...</div>;
   }
 
-  const handleNextStep = () => {
-    console.log(data);
-    if (currentStep < data.length - 1) {
-      setCurrentStep(currentStep + 1);
-      navigate(`/vs/${currentStep + 1}`);
-    }
+  const handleNextStep = (nextstep) => {
+    // console.log(data);
+    console.log(nextstep)
+    setCurrentStep(nextstep);
+    navigate(`/vs/${nextstep}`);
+    
+
+    // else if (nextstep < data.length - 1) {
+    //   setCurrentStep(nextstep + 1);
+    //   navigate(`/vs/${nextstep + 1}`);
+    // }
   };
 
   const currentStepData = data[currentStep];