From d1c91abcc3bff30592c5dd6b31483a6a4e015e84 Mon Sep 17 00:00:00 2001
From: lovelytransgirl <furries@duck.com>
Date: Tue, 17 Jun 2025 23:20:56 +0700
Subject: [PATCH] Store user's name using sessionStorage

---
 src/pages/conversationPage.jsx | 10 ++++++++--
 src/pages/namePage.jsx         | 12 +++++++++---
 src/pages/storyPage.jsx        |  7 ++++++-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/pages/conversationPage.jsx b/src/pages/conversationPage.jsx
index e6dc980..63ab8ea 100644
--- a/src/pages/conversationPage.jsx
+++ b/src/pages/conversationPage.jsx
@@ -8,6 +8,12 @@ import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
+  const DialogName = data.name.replace("{name}", name);
 
   return (
     <div
@@ -29,11 +35,11 @@ function ConversationPage({data , onClicked}) {
       </div>
       <div style={{width:'60vw'}}>
         <div className='nameBox title'>
-          {data.name}
+          {DialogName}
         </div>
       </div>
       <div className='textBox title' style={{overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );
diff --git a/src/pages/namePage.jsx b/src/pages/namePage.jsx
index 735db28..9f53238 100644
--- a/src/pages/namePage.jsx
+++ b/src/pages/namePage.jsx
@@ -1,10 +1,16 @@
 import '../css/global.css'
 import '../css/customInput.css'
 import BlackButton from './components/customButton'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function NamePage() {
-    const [name, setName] = useState('');
+    const [name, setName] = useState(() => {
+        return sessionStorage.getItem("name") || '';
+    });
+
+    useEffect(() => {
+        sessionStorage.setItem("name", name);
+    }, [name]);
 
     return (
         <div style={{
@@ -35,4 +41,4 @@ function NamePage() {
     )
 }
 
-export default NamePage
\ No newline at end of file
+export default NamePage
diff --git a/src/pages/storyPage.jsx b/src/pages/storyPage.jsx
index 08e2c72..67e1655 100644
--- a/src/pages/storyPage.jsx
+++ b/src/pages/storyPage.jsx
@@ -5,6 +5,11 @@ import '../css/textBox.css';
 
 function StoryPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
 
   return (
     <div
@@ -22,7 +27,7 @@ function StoryPage({data , onClicked}) {
       }}
     >
       <div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );