From 1fe0053281dfa0632b12a33cbd58bef94f453236 Mon Sep 17 00:00:00 2001
From: NekoVari <veenaja08@gmail.com>
Date: Sat, 24 May 2025 21:53:10 +0700
Subject: [PATCH] Update Transition and End page

---
 src/main.jsx                      |  2 ++
 src/pages/endPage.jsx             | 31 +++++++++++++++++++++++++++++++
 src/pages/transitionPage.jsx      |  5 ++++-
 src/pages/vistualNovelHandler.jsx | 19 +++++++++----------
 4 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/endPage.jsx

diff --git a/src/main.jsx b/src/main.jsx
index 05544f2..7c771db 100644
--- a/src/main.jsx
+++ b/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>
diff --git a/src/pages/endPage.jsx b/src/pages/endPage.jsx
new file mode 100644
index 0000000..3817e09
--- /dev/null
+++ b/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;
diff --git a/src/pages/transitionPage.jsx b/src/pages/transitionPage.jsx
index 630b6bf..641d6ba 100644
--- a/src/pages/transitionPage.jsx
+++ b/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>
   );
 };
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index 8f69ba4..cfe9558 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/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>
   );
 }