57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
// src/OptionPage.js
|
|
import { useEffect, useState } from 'react';
|
|
import '../css/global.css';
|
|
import '../css/textBox.css';
|
|
import '../css/nameBox.css';
|
|
import '../css/option.css'
|
|
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
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100svh',
|
|
width: '100svw',
|
|
flexDirection: 'column',
|
|
backgroundImage: `url(${backgroundSRC})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className='spriteBox'>
|
|
<Animation src={`F${data.sprite}`}/>
|
|
</div>
|
|
<div className='optionSection'>
|
|
{
|
|
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>
|
|
);
|
|
}
|
|
|
|
export default OptionPage;
|