36 lines
944 B
JavaScript
36 lines
944 B
JavaScript
// src/StoryPage.js
|
|
import { useEffect, useState } from 'react';
|
|
import '../css/global.css';
|
|
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
|
|
onClick={()=>onClicked(data.goTo-1)}
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh',
|
|
width: '100vw',
|
|
flexDirection: 'column',
|
|
backgroundImage: `url(${backgroundSRC})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
|
|
{DialogText}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StoryPage;
|