diff --git a/index.html b/index.html
index 1b4f4915eae7ca3317c0a9807928b263bad8ae72..a30e80a0cbaef6e63725b4f8ce764ed23b45c9a7 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,11 @@
<link href="/dist/output.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Insu-Learn</title>
-
</head>
<body>
<div id="root"></div>
<script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
-
- <script src="/intro.js" type="text/javascript"></script>
-
+ <script src="/animations/intro.js" type="text/javascript"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9fe343c3448239771915ac5ad962dc59cf3ea37
--- /dev/null
+++ b/public/lit/texts.tsx
@@ -0,0 +1,34 @@
+const intro = [
+ {
+ EN: 'Hey there, super awesome friends!',
+ },
+ {
+ EN: "I'm Blo, and I have a story to share with you.",
+ },
+ {
+ EN: 'My little brother got diagnosed with diabetes.',
+ },
+ {
+ EN: "It's like a mischievous gremlin in his body!",
+ },
+ {
+ EN: 'But we can outsmart it together.',
+ },
+ {
+ EN: "That's why I became a diabetes champion to teach you all about it.",
+ },
+ {
+ EN: "We will learn how food affects us, keep our energy up, and have fun being active.",
+ },
+ {
+ EN: "No worries, learning about diabetes is not scary or boring!",
+ },
+ {
+ EN: "It's an exciting adventure!",
+ },
+ {
+ EN: "So let's dive in! Ready? Let's go!!",
+ },
+];
+
+export default intro;
diff --git a/src/App.tsx b/src/App.tsx
index 57ae4f6fdf6ee36858663f58beaf80c1495ea8dd..18df2a843ba2d2829b9579741e6b40205d87a9d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
import Intro from './components/Intro';
-import { Navigate, Route, Routes } from 'react-router-dom';
-import { FC } from 'react';
+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 Overview from './components/Overview';
-import Test from './components/Test';
const App: FC = () => {
return (
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index bdf6f2d204a1b9356276096506e295ee09b2e0d5..af2632bee88bef6125570c9757107bf98caf1082 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -1,96 +1,93 @@
-import Typewriter from 'typewriter-effect';
-import { useEffect, useRef, useState } from 'react';
+import {useEffect, useRef, useState} from 'react';
+import {AnimateCC} from 'react-adobe-animate';
+import Typewriter from "typewriter-effect";
+import texts from "../../public/lit/texts";
+import {useNavigate} from "react-router-dom";
const Intro = () => {
- const textsAndImages = [
- {
- text: 'Hey there, super awesome friends!',
- pathToSvg: '/src/assets/girly/girly-looking-straight.svg',
- },
- {
- text: "I'm Blo, and I have a story to share with you.",
- pathToSvg: '/src/assets/girly/girl-Rhand-bend.svg',
- },
- {
- text: 'My little brother got diagnosed with diabetes.',
- pathToSvg: '/src/assets/girly/girly-sad.svg',
- },
- {
- text: "It's like a mischievous gremlin in his body!",
- pathToSvg: '/src/assets/girly/girly-arms-up.svg',
- },
- {
- text: 'But we can outsmart it together.',
- pathToSvg: '/src/assets/girly/girl-Rhand-bend.svg',
- },
- {
- text: "That's why I became a diabetes champion to teach you all about it.",
- pathToSvg: '/src/assets/girly/girly-trophy.svg',
- },
- ];
- const [currentIndex, setCurrentIndex] = useState(0);
- const [isAnimationComplete, setIsAnimationComplete] = useState(false);
- const { text, pathToSvg } = textsAndImages[currentIndex];
- const typewriterRef = useRef<any>(null);
+ const [paused, setPaused] = useState(false);
+ const [, setAnimationObject] = useState(null);
+ const getAnimationObject = (obj: any) => setAnimationObject(obj);
- useEffect(() => {
- if (typewriterRef.current) {
- typewriterRef.current.deleteAll(0.0000000000000000000001);
- typewriterRef.current
- .typeString(text)
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- });
- }
- }, [text]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+ const {EN} = texts[currentIndex];
+ const typewriterRef = useRef<any>(null);
+ const navigate = useNavigate();
- const handleClick = () => {
- if (isAnimationComplete) {
- setCurrentIndex((prevIndex) => (prevIndex + 1) % textsAndImages.length);
- setIsAnimationComplete(false);
- }
- };
+ useEffect(() => {
+ if (typewriterRef.current) {
+ typewriterRef.current.deleteAll(0.0000000000000000000001);
+ typewriterRef.current
+ .typeString(EN)
+ .start()
+ .callFunction(() => {
+ setIsAnimationComplete(true);
+ setPaused(true)
+ });
+ }
+ }, [EN]);
- return (
- <>
- <div className="flex items-center justify-center">
- <div className="container">
- <div className="text">
- <div id="intro-text" className="font-speech">
- <Typewriter
- options={{
- delay: 40,
- }}
- onInit={(typewriter) => {
- typewriterRef.current = typewriter;
- typewriter
- .typeString(text)
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- });
- }}
- />
- </div>
- </div>
- <div className="girly">
- <img src={pathToSvg} alt="girly" className="inline" />
- </div>
+ const handleClick = () => {
+ if(currentIndex == texts.length -1) {
+ navigate('/levels');
+ }
+ if (isAnimationComplete) {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
+ setIsAnimationComplete(false);
+ setPaused(false);
+ }
+ };
- <button
- onClick={handleClick}
- className={`button border-4 border-black font-primary ${
- !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
- }`}
- >
- Next
- </button>
- </div>
- </div>
- </>
- );
+ 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 == texts.length -1 ? 'To Level 1' : 'Next'}
+ </button>
+ </div>
+ </div>
+ </div>
+ </>
+);
};
-
export default Intro;
diff --git a/src/components/Test.tsx b/src/components/Test.tsx
deleted file mode 100644
index 8bf2f08a128b0f8c91033fd1e4516528271353b9..0000000000000000000000000000000000000000
--- a/src/components/Test.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// import { useEffect } from 'react';
-//
-// const Test = () => {
-// useEffect(() => {
-// const loadAnimation = () => {
-// const iframe = document.createElement('iframe');
-// iframe.src = '../../animations/intro.html';
-// iframe.style.width = '100%';
-// iframe.style.height = '100%';
-// iframe.style.border = 'none';
-// iframe.style.overflow = 'hidden';
-//
-// const container = document.getElementById('animation-container');
-// if (container) {
-// // Remove existing content within the container
-// while (container.firstChild) {
-// container.removeChild(container.firstChild);
-// }
-// container.appendChild(iframe);
-// }
-// };
-//
-// loadAnimation();
-// }, []);
-//
-// return (
-// <>
-// <div className="mt-12 flex justify-center">
-// <div
-// id="animation-container"
-// style={{ width: '255px', height: '452px' }}
-// />
-// </div>
-// </>
-// );
-// };
-//
-// export default Test;
-
-import { useState } from 'react';
-import { AnimateCC } from 'react-adobe-animate';
-
-const Test = () => {
- const [paused, setPaused] = useState(false);
- const [, setAnimationObject] = useState(null);
- const getAnimationObject = (obj: any) => setAnimationObject(obj);
- const onClick = () => setPaused(!paused);
-
- // console.log(animationObject);
-
- return (
- <>
- <div className="mt-12 flex justify-center">
- <div
- id="animation-container"
- style={{ width: '255px', height: '452px' }}
- >
- <AnimateCC
- animationName="intro12"
- getAnimationObject={getAnimationObject}
- paused={paused}
- />
- </div>
- </div>
- <button onClick={onClick}>{paused ? 'Unpause' : 'Pause'}</button>
- </>
- );
-};
-
-export default Test;
diff --git a/src/index.css b/src/index.css
index 732ff4add8498556faac977357d83a11021ccdc7..291cc6be7ef42b950b7d5e1c806d0dd779792ab0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -60,23 +60,22 @@ strong {
font-weight: 700;
}
-.container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr;
- gap: 0 0;
- grid-auto-flow: row;
- grid-template-areas:
- ". text text text text text text text ."
- ". . . girly girly girly . . ."
- ". . . girly girly girly . . ."
- ". . . . button . . . .";
-}
+/*.container {*/
+/* display: grid;*/
+/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
+/* grid-template-rows: 10rem 30rem 10rem;*/
+/* gap: 0 0;*/
+/* grid-auto-flow: row;*/
+/* grid-template-areas:*/
+/* ". text text text text text text text ."*/
+/* ". . . girly girly girly . . ."*/
+/* ". . . . buttonArea . . . .";*/
+/*}*/
.button {
- grid-area: button;
+ /*grid-area: buttonArea;*/
max-height: 4rem;
- margin-top: 4rem;
+ align-self: center;
}
.girly {