Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import {SetStateAction, useEffect, useRef, useState} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {opening} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom";
const Opening = () => {
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} = opening[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 == opening.length -1) {
navigate('/opening');
}
if (isAnimationComplete) {
setCurrentIndex((prevIndex) => (prevIndex + 1) % opening.length);
setIsAnimationComplete(false);
setPaused(true);
}
};
return (
<>
<div className=" mt-8 ">
<p className="text-2xl bg-red-200 border border-red-800 w-max justify-self-center inline p-4 animate-fade-in">
Diabetes is a disease in which the body is unable to produce a sufficient amount of insulin.
</p>
</div>
<div className="flex items-center justify-center">
<div className="max-w-screen">
<div className="text mt-12">
<div id="intro-text" className="font-speech"
style={{ position: 'absolute', top: 400, left: 0, right: 900 }}>
<Typewriter
options={{
delay: 40,
}}
onInit={(typewriter) => {
typewriterRef.current = typewriter;
typewriter
.pauseFor(3500)
.typeString(EN)
.start()
.callFunction(() => {
setIsAnimationComplete(true);
setPaused(false);
});
}}
/>
</div>
<div className="flex justify-center">
<div
id="animation-container"
>
<AnimateCC
animationName="opening"
getAnimationObject={getAnimationObject}
paused={paused}
/>
</div>
</div>
</div>
<div className="flex justify-center">
{currentIndex == 0}
<button
onClick={handleClick}
className={`border-4 border-black font-primary ${
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
}`}
>
{currentIndex == opening.length -1 ? 'To Chapter 2' : 'Next'}
</button>
</div>
</div>
</div>
</>
);
};
export default Opening;