From c8429cc66ecff12c94033d2b0734d98a7120f42a Mon Sep 17 00:00:00 2001
From: xsieklov <xsieklov@fi.muni.cz>
Date: Wed, 16 Aug 2023 17:31:38 +0200
Subject: [PATCH] feat: begin chapter 1
---
index.html | 1 +
public/lit/texts.tsx | 14 ++-
src/App.tsx | 6 +-
src/components/{Levels.tsx => Chapters.tsx} | 4 +-
src/components/Intro.tsx | 16 +--
src/components/Opening.tsx | 103 ++++++++++++++++++++
src/index.css | 11 +++
tailwind.config.js | 14 ++-
8 files changed, 153 insertions(+), 16 deletions(-)
rename src/components/{Levels.tsx => Chapters.tsx} (81%)
create mode 100644 src/components/Opening.tsx
diff --git a/index.html b/index.html
index a30e80a..a1bd0c8 100644
--- a/index.html
+++ b/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>
diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx
index d9fe343..441604e 100644
--- a/public/lit/texts.tsx
+++ b/public/lit/texts.tsx
@@ -1,4 +1,4 @@
-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!",
+ },
+]
diff --git a/src/App.tsx b/src/App.tsx
index 18df2a8..61617e3 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/Levels.tsx b/src/components/Chapters.tsx
similarity index 81%
rename from src/components/Levels.tsx
rename to src/components/Chapters.tsx
index b860bd5..6d26cb0 100644
--- a/src/components/Levels.tsx
+++ b/src/components/Chapters.tsx
@@ -1,6 +1,6 @@
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;
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index a948a95..b343990 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -1,7 +1,7 @@
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>
diff --git a/src/components/Opening.tsx b/src/components/Opening.tsx
new file mode 100644
index 0000000..4428101
--- /dev/null
+++ b/src/components/Opening.tsx
@@ -0,0 +1,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;
diff --git a/src/index.css b/src/index.css
index 291cc6b..0165dbd 100644
--- a/src/index.css
+++ b/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;*/
diff --git a/tailwind.config.js b/tailwind.config.js
index a89c86f..ec3e24d 100644
--- a/tailwind.config.js
+++ b/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',
--
GitLab