Update Transition and End page

src/main.jsx

@@ -10,6 +10,7 @@ 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';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -22,6 +23,7 @@ createRoot(document.getElementById('root')).render(
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
         <Route path='/vs/:step' element={<VitualNovelHandler />} />
+        <Route path='/end' element={<EndPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/pages/endPage.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import '../css/global.css';
+import BlackButton from './components/customButton';
+import LoadingScene from './components/loadingScene';
+
+function EndPage() {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      flexDirection: 'column',
+    }}>
+      <label className='title'>The End</label>
+
+      <div style={{ height: '16vh' }} />
+
+      <BlackButton text="Play again" to='/' />
+
+      <div style={{ height: '8vh' }} />
+
+      <a href='https://xn--22cm3b8aj2d0cs4a.com/' style={{textDecoration: 'none'}}>
+        <BlackButton text="Mental health resources" />
+      </a>
+      
+    </div>
+  );
+}
+
+export default EndPage;

src/pages/transitionPage.jsx

@@ -17,7 +17,10 @@ function TransitionPage({data , onChanged}){
   }, [navigate]);
 
   return (
-    <div>
+    <div onClick={()=>onChanged(data.goTo-1)} 
+      style={{
+        height: '100vh',
+        width: '100vw',  }}>
     </div>
   );
 };

src/pages/vistualNovelHandler.jsx

@@ -49,17 +49,16 @@ function VitualNovelHandler() {
   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}`);
-    // }
+    if (typeof nextstep !== 'number' || Number.isNaN(nextstep)) {
+        navigate(`/end`);//44 is last page
+    }
+    else{
+      setCurrentStep(nextstep);
+      navigate(`/vs/${nextstep}`);
+    }
   };
 
-  const currentStepData = data[currentStep];
+  const currentStepData = data[currentStep] === null ? "end" : data[currentStep];
 
   const renderComponent = (type) => {
     switch (type) {
@@ -78,7 +77,7 @@ function VitualNovelHandler() {
 
   return (
     <div style={{ width: "100svw", height: "100svh" }}>
-      {renderComponent(currentStepData.type)}
+      {renderComponent(currentStepData.type === null ? "end" : currentStepData.type)}
     </div>
   );
 }