54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
// src/ConversationPage.js
|
|
import { useEffect, useState } from 'react';
|
|
import '../css/global.css';
|
|
import '../css/textBox.css';
|
|
import '../css/nameBox.css';
|
|
import '../css/conversation.css'
|
|
|
|
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);
|
|
const videoPath = `${import.meta.env.VITE_ASSETS_URL}/${data.sprite}`; // data.sprite return webm file name
|
|
|
|
// https://dl.techtransthai.org/fsob-assets/F_Porsche_normal.webm
|
|
//console.log(data.sprite);
|
|
|
|
return (
|
|
<div
|
|
onClick={()=>onClicked(data.goTo-1)}
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100svh',
|
|
width: '100svw',
|
|
flexDirection: 'column',
|
|
backgroundImage: `url(${backgroundSRC})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className='spriteBox'>
|
|
<video width="200%" height="200%" autoPlay loop muted>
|
|
<source src={videoPath} type="video/webm" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
<div style={{width:'60vw'}}>
|
|
<div className='nameBox title'>
|
|
{DialogName}
|
|
</div>
|
|
</div>
|
|
<div className='textBox title' style={{overflow: 'scroll',}}>
|
|
{DialogText}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ConversationPage;
|