fifty-shades-of-bully/src/pages/conversationPage.jsx

// src/ConversationPage.js
import { useEffect, useState } from 'react';
import '../css/global.css';
import '../css/textBox.css';
import '../css/nameBox.css';
import '../css/conversation.css'
import Animation from './components/animation.jsx';

function ConversationPage({data , onClicked}) {
  const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`

  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'>
        <Animation src={`F${data.sprite}`}/>
      </div>
      <div style={{width:'60vw'}}>
        <div className='nameBox title'>
          {data.name}
        </div>
      </div>
      <div className='textBox title' style={{overflow: 'scroll',}}>
        {data.text}
      </div>
    </div>
  );
}

export default ConversationPage;