Skip to content
Snippets Groups Projects
Commit 49ca1412 authored by Katarína Sieklová's avatar Katarína Sieklová
Browse files

feat: intro DONE!!!

parent 89c79654
No related branches found
No related tags found
No related merge requests found
Pipeline #
Show whitespace changes
Inline Side-by-side
index.html
+ 1
− 4
View file @ 49ca1412
......@@ -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>
public/lit/texts.tsx 0 → 100644
+ 34
− 0
View file @ 49ca1412
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;
src/App.tsx
+ 3
− 3
View file @ 49ca1412
import Intro from './components/Intro';
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 (
......
src/components/Intro.tsx
+ 84
− 87
View file @ 49ca1412
import Typewriter from 'typewriter-effect';
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 [paused, setPaused] = useState(false);
const [, setAnimationObject] = useState(null);
const getAnimationObject = (obj: any) => setAnimationObject(obj);
const [currentIndex, setCurrentIndex] = useState(0);
const [isAnimationComplete, setIsAnimationComplete] = useState(false);
const { text, pathToSvg } = textsAndImages[currentIndex];
const {EN} = texts[currentIndex];
const typewriterRef = useRef<any>(null);
const navigate = useNavigate();
useEffect(() => {
if (typewriterRef.current) {
typewriterRef.current.deleteAll(0.0000000000000000000001);
typewriterRef.current
.typeString(text)
.typeString(EN)
.start()
.callFunction(() => {
setIsAnimationComplete(true);
setPaused(true)
});
}
}, [text]);
}, [EN]);
const handleClick = () => {
if(currentIndex == texts.length -1) {
navigate('/levels');
}
if (isAnimationComplete) {
setCurrentIndex((prevIndex) => (prevIndex + 1) % textsAndImages.length);
setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
setIsAnimationComplete(false);
setPaused(false);
}
};
......@@ -57,7 +44,7 @@ const Intro = () => {
<>
<div className="flex items-center justify-center">
<div className="container">
<div className="text">
<div className="text mt-12">
<div id="intro-text" className="font-speech">
<Typewriter
options={{
......@@ -66,31 +53,41 @@ const Intro = () => {
onInit={(typewriter) => {
typewriterRef.current = typewriter;
typewriter
.typeString(text)
.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 className="girly">
<img src={pathToSvg} alt="girly" className="inline" />
</div>
<div className="mt-20 flex justify-center">
<button
onClick={handleClick}
className={`button border-4 border-black font-primary ${
className={`mt-20 border-4 border-black font-primary ${
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
}`}
>
Next
{currentIndex == texts.length -1 ? 'To Level 1' : 'Next'}
</button>
</div>
</div>
</div>
</>
);
};
export default Intro;
src/components/Test.tsx deleted 100644 → 0
+ 0
− 70
View file @ 89c79654
// 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;
src/index.css
+ 13
− 14
View file @ 49ca1412
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment