Intro.tsx

import {SetStateAction, useEffect, useRef, useState} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {intro} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom";

const Intro = () => {

    const [paused, setPaused] = useState(false);
    const [, setAnimationObject] = useState(null);
    const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);

    const [currentIndex, setCurrentIndex] = useState(0);
    const [isAnimationComplete, setIsAnimationComplete] = useState(false);
    const {EN} = intro[currentIndex];
    const typewriterRef = useRef<TypewriterClass>();
    const navigate = useNavigate();

    useEffect(() => {
        if (typewriterRef.current) {
            typewriterRef.current.deleteAll(0.0000000000000000000001);
            typewriterRef.current
                .typeString(EN)
                .start()
                .callFunction(() => {
                    setIsAnimationComplete(true);
                    setPaused(true)
                });
        }
    }, [EN]);

    const handleClick = () => {
        if(currentIndex == intro.length -1) {
            navigate('/opening');
        }
        if (isAnimationComplete) {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % intro.length);
            setIsAnimationComplete(false);
            setPaused(false);
        }
    };

    return (
        <>
            <div className="flex items-center justify-center">
                <div className="container">
                    <div className="text mt-12">
                        <div id="intro-text" className="font-speech">
                            <Typewriter
                                options={{
                                    delay: 40,
                                }}
                                onInit={(typewriter) => {
                                    typewriterRef.current = typewriter;
                                    typewriter
                                        .typeString(EN)
                                        .start()
                                        .callFunction(() => {
                                            setIsAnimationComplete(true);
                                            setPaused(true);
                                        });
                                }}
                            />
                        </div>
                        <div className="mt-12 ml-44 flex justify-center">
                            <div
                                id="animation-container"
                                style={{ width: '600px', height: '300px', position: 'relative' }}
                            >
                                <AnimateCC
                                    animationName="intro"
                                    getAnimationObject={getAnimationObject}
                                    paused={paused}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="mt-20 flex justify-center">
                        <button
                            onClick={handleClick}
                            className={`mt-20 border-4 border-black font-primary ${
                                !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
                            }`}
                        >
                            {currentIndex == intro.length -1 ? 'To Chapter 1' : 'Next'}
                        </button>
                    </div>
                </div>
            </div>
        </>
);
};
export default Intro;