Convos in option

src/pages/optionPage.jsx

@@ -8,6 +8,12 @@ import Animation from './components/animation.jsx';
 
 function OptionPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text ? data.text.replace("{name}", name) : null;
+  const DialogName = data.name ? data.name.replace("{name}", name) : null;
 
   return (
     <div
@@ -16,7 +22,7 @@ function OptionPage({data , onClicked}) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100svh',
-        width: '100svw',  
+        width: '100svw',
         flexDirection: 'column',
         backgroundImage: `url(${backgroundSRC})`,
         backgroundSize: 'cover',
@@ -28,10 +34,22 @@ function OptionPage({data , onClicked}) {
       </div>
       <div className='optionSection'>
         {
-            data.option.map((item,i) => 
+            data.option.map((item,i) =>
                 <div onClick={()=>onClicked(item.goTo-1)} key={i} className='optionBox title'>{item.text}</div>)
         }
       </div>
+      {DialogName && DialogText && (
+        <>
+        <div style={{ width: '60vw' }}>
+        <div className="nameBox title">
+        {DialogName}
+        </div>
+        </div>
+        <div className="textBox title" style={{ overflow: 'scroll' }}>
+        {DialogText}
+        </div>
+        </>
+      )}
     </div>
   );
 }