33 lines
820 B
JavaScript
33 lines
820 B
JavaScript
import {useEffect, useState} from 'react';
|
|
|
|
import {render} from '@/dialogue.js';
|
|
import {TAU} from '@/util/math.js';
|
|
|
|
import styles from './message.module.css';
|
|
|
|
export default function Message({letters}) {
|
|
const [radians, setRadians] = useState(0);
|
|
useEffect(() => {
|
|
setRadians(0);
|
|
let handle;
|
|
let last;
|
|
const spin = (ts) => {
|
|
if ('undefined' === typeof last) {
|
|
last = ts;
|
|
}
|
|
const elapsed = (ts - last) / 1000;
|
|
last = ts;
|
|
setRadians((radians) => radians + (elapsed * TAU));
|
|
handle = requestAnimationFrame(spin);
|
|
};
|
|
handle = requestAnimationFrame(spin);
|
|
return () => {
|
|
cancelAnimationFrame(handle);
|
|
};
|
|
}, []);
|
|
return (
|
|
<div className={styles.message}>
|
|
{render(letters, '')(letters.length - 1, radians)}
|
|
</div>
|
|
)
|
|
} |