33 lines
794 B
JavaScript
33 lines
794 B
JavaScript
import {memo, useEffect, useState} from 'react';
|
|
|
|
import {useRadians} from '@/context/radians.js';
|
|
import {render} from '@/dialogue.js';
|
|
|
|
import styles from './message.module.css';
|
|
|
|
function Message({letters}) {
|
|
const radians = useRadians();
|
|
const [localRadians, setLocalRadians] = useState(radians);
|
|
const [isAnimating, setIsAnimating] = useState(true);
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => {
|
|
setIsAnimating(false);
|
|
}, 2_000);
|
|
return () => {
|
|
clearTimeout(handle);
|
|
}
|
|
}, []);
|
|
useEffect(() => {
|
|
if (isAnimating) {
|
|
setLocalRadians(radians)
|
|
}
|
|
}, [isAnimating, radians]);
|
|
return (
|
|
<div className={styles.message}>
|
|
{render(letters, '')(letters.length - 1, localRadians)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(Message);
|