From d1c91abcc3bff30592c5dd6b31483a6a4e015e84 Mon Sep 17 00:00:00 2001 From: lovelytransgirl Date: Tue, 17 Jun 2025 23:20:56 +0700 Subject: [PATCH 1/4] 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 (
- {data.name} + {DialogName}
- {data.text} + {DialogText}
); 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 (
{ + return sessionStorage.getItem("name") || ''; + }); + + const DialogText = data.text.replace("{name}", name); return (
- {data.text} + {DialogText}
); From 6bd94e49e86181e12b5601a30255e32821aa7dbd Mon Sep 17 00:00:00 2001 From: lovelytransgirl Date: Wed, 18 Jun 2025 00:59:47 +0700 Subject: [PATCH 2/4] Implementation of /vs/:char/:step --- src/main.jsx | 2 +- src/pages/introductionPage.jsx | 4 +++- src/pages/vistualNovelHandler.jsx | 11 ++++++++--- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/main.jsx b/src/main.jsx index 7c771db..64a918f 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -22,7 +22,7 @@ createRoot(document.getElementById('root')).render( } /> } /> } /> - } /> + } /> } /> } /> diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx index 75cf4a9..9047a0e 100644 --- a/src/pages/introductionPage.jsx +++ b/src/pages/introductionPage.jsx @@ -35,7 +35,9 @@ function IntroductionPage() { const handleClickedButton = () => { console.log(character.name(numChar)) - if(character.name(numChar)=='Porsche') navigate(`/vs/0`); + if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/0`); + if(character.name(numChar)=='Pie') navigate(`/vs/Pie/0`); + if(character.name(numChar)=='Patt') navigate(`/vs/Pat/0`); } return ( diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx index cfe9558..fddd21a 100644 --- a/src/pages/vistualNovelHandler.jsx +++ b/src/pages/vistualNovelHandler.jsx @@ -14,12 +14,13 @@ function VitualNovelHandler() { const [error, setError] = useState(null); const [currentStep, setCurrentStep] = useState(0); const navigate = useNavigate(); - const { step } = useParams(); + const { char, step } = useParams(); useEffect(() => { const loadData = async () => { try { - const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' }); + const yamlPath = `/yml/Dialog${char}.yml`; + const parsedData = await fetchYamlData({ src: yamlPath }); if (!Array.isArray(parsedData)) { throw new Error('YAML data is not an array'); } @@ -51,10 +52,14 @@ function VitualNovelHandler() { console.log(nextstep) if (typeof nextstep !== 'number' || Number.isNaN(nextstep)) { navigate(`/end`);//44 is last page + console.log("currentStep:", currentStep); + console.log("data at currentStep:", data[currentStep]); } else{ setCurrentStep(nextstep); - navigate(`/vs/${nextstep}`); + navigate(`/vs/${char}/${nextstep}`); +// console.log("currentStep:", currentStep); +// console.log("data at currentStep:", data[currentStep]); } }; From b4331b5bcbcc8d1fd6dfc9cc8b277eab3939a5f4 Mon Sep 17 00:00:00 2001 From: lovelytransgirl Date: Wed, 18 Jun 2025 01:00:48 +0700 Subject: [PATCH 3/4] I forgot to comment --- src/pages/vistualNovelHandler.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx index fddd21a..9236a25 100644 --- a/src/pages/vistualNovelHandler.jsx +++ b/src/pages/vistualNovelHandler.jsx @@ -52,8 +52,8 @@ function VitualNovelHandler() { console.log(nextstep) if (typeof nextstep !== 'number' || Number.isNaN(nextstep)) { navigate(`/end`);//44 is last page - console.log("currentStep:", currentStep); - console.log("data at currentStep:", data[currentStep]); +// console.log("currentStep:", currentStep); +// console.log("data at currentStep:", data[currentStep]); } else{ setCurrentStep(nextstep); From 33ed70c935183a9db72d60da63675ebc3b5ef898 Mon Sep 17 00:00:00 2001 From: lovelytransgirl Date: Wed, 18 Jun 2025 19:28:25 +0700 Subject: [PATCH 4/4] Adjust nameBox to look like miro --- src/css/nameBox.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/css/nameBox.css b/src/css/nameBox.css index 622135a..0703393 100644 --- a/src/css/nameBox.css +++ b/src/css/nameBox.css @@ -4,7 +4,7 @@ align-items: center; width: 20vw; min-width: 100px; - background-color: #8391b8; + background-color: #a2b7e4; color: white; border-style: solid; border-color: #8391b8; @@ -13,4 +13,8 @@ position: absolute; transform: translateY(-40px); z-index: 2; + border-radius: 25px; + + /*#a2b7e4*/ + /*#8391b8*/ }