feat: begin chapter 1

index.html

@@ -11,6 +11,7 @@
     <div id="root"></div>
     <script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
     <script src="/animations/intro.js" type="text/javascript"></script>
+    <script src="/animations/opening.js" type="text/javascript"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

public/lit/texts.tsx

-const intro = [
+export const intro = [
     {
         EN: 'Hey there, super awesome friends!',
     },
@@ -31,4 +31,14 @@ const intro = [
     },
 ];
 
-export default intro;
+export const opening = [
+    {
+        EN: "Whaaat? Wait, stop!",
+    },
+    {
+        EN: "You probably don't even know what insulin is. I'll explain.",
+    },
+    {
+        EN: "Whaaat? Wait, stop!",
+    },
+]

src/App.tsx

@@ -3,8 +3,9 @@ import Test from './components/Intro';
 import {Navigate, Route, Routes} from 'react-router-dom';
 import {FC} from 'react';
 import Navbar from './components/Navbar';
-import Levels from './components/Levels';
+import Chapters from './components/Chapters';
 import Overview from './components/Overview';
+import Opening from "./components/Opening";
 
 const App: FC = () => {
   return (
@@ -16,7 +17,8 @@ const App: FC = () => {
         <Routes>
           <Route path="/" element={<Navigate to="/intro" replace />} index />
           <Route path="intro" element={<Intro />} />
-          <Route path="/levels" element={<Levels />} />
+          <Route path="/chapters" element={<Chapters />} />
+          <Route path="/opening" element={<Opening />} />
           <Route path="/overview" element={<Overview />} />
           <Route path="/test" element={<Test />} />
         </Routes>

src/components/Levels.tsx → src/components/Chapters.tsx

 import levels from '../assets/icons/levels.svg';
 
-const Levels = () => {
+const Chapters = () => {
   return (
     <>
       <div className="align-center mx-2 mt-4 flex justify-center">
@@ -10,4 +10,4 @@ const Levels = () => {
   );
 };
 
-export default Levels;
+export default Chapters;

src/components/Intro.tsx

 import {SetStateAction, useEffect, useRef, useState} from 'react';
 import {AnimateCC} from 'react-adobe-animate';
-import Typewriter from "typewriter-effect";
-import texts from "../../public/lit/texts";
+import Typewriter, {TypewriterClass} from "typewriter-effect";
+import {intro} from "../../public/lit/texts";
 import {useNavigate} from "react-router-dom";
 
 const Intro = () => {
@@ -12,8 +12,8 @@ const Intro = () => {
 
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-    const {EN} = texts[currentIndex];
-    const typewriterRef = useRef<any>(null);
+    const {EN} = intro[currentIndex];
+    const typewriterRef = useRef<TypewriterClass>();
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -30,11 +30,11 @@ const Intro = () => {
     }, [EN]);
 
     const handleClick = () => {
-        if(currentIndex == texts.length -1) {
-            navigate('/levels');
+        if(currentIndex == intro.length -1) {
+            navigate('/opening');
         }
         if (isAnimationComplete) {
-            setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % intro.length);
             setIsAnimationComplete(false);
             setPaused(false);
         }
@@ -82,7 +82,7 @@ const Intro = () => {
                                 !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
                             }`}
                         >
-                            {currentIndex == texts.length -1 ? 'To Level 1' : 'Next'}
+                            {currentIndex == intro.length -1 ? 'To Chapter 1' : 'Next'}
                         </button>
                     </div>
                 </div>

src/components/Opening.tsx

+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;

src/index.css

@@ -59,7 +59,18 @@ button:focus-visible {
 strong {
     font-weight: 700;
 }
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
 
+.animate-fade-in {
+    animation: fade-in 1s ease-in-out;
+}
 /*.container {*/
 /*    display: grid;*/
 /*    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/

tailwind.config.js

@@ -6,6 +6,7 @@ export default {
         primary: {
           light: '#65a30d',
           main: '#3f6212',
+          // main: '#B7F0AD',
           dark: '#365314',
         },
         beige: {
@@ -14,10 +15,19 @@ export default {
           dark: '#ac8f5f',
         },
         red: {
-          main: '#9e2a2b',
+          main: '#D35F5F',
+        },
+        blue: {
+          main: '#D35F5F',
         },
         yellow: {
-          main: '#facc15',
+          main: '#EBE76C',
+        },
+        orange: {
+          main: '#F0B86E',
+        },
+        purple: {
+          main: '#836096',
         },
         gray: {
           main: '#d6d3d1',