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

feat: begin chapter 1

parent 7ebd99cf
No related branches found
No related tags found
No related merge requests found
Pipeline #
......@@ -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>
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!",
},
]
......@@ -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>
......
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;
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>
......
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;
......@@ -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;*/
......
......@@ -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',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment