From 0e74c0b8079c9e0963509102d61a2a9220e2d9b0 Mon Sep 17 00:00:00 2001
From: xsieklov <xsieklov@fi.muni.cz>
Date: Fri, 27 Oct 2023 19:53:31 +0200
Subject: [PATCH] feat: symptom texts

---
 public/lit/texts.tsx        | 47 ++++++++++++++++++++++++++
 src/components/Symptoms.tsx | 66 ++++++++++++++++++++++++++++++++-----
 src/hooks/useAnimate.tsx    |  3 +-
 3 files changed, 106 insertions(+), 10 deletions(-)

diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx
index 1aed8af..bfeba95 100644
--- a/public/lit/texts.tsx
+++ b/public/lit/texts.tsx
@@ -96,6 +96,53 @@ export const opening = [
     },
 ]
 
+export const symptoms = [
+    {
+        EN: 'In this chapter, we will take a closer look at the symptoms of diabetes.',
+        SK: 'V tejto kapitole sa pozrieme bližšie na príznaky cukrovky.',
+    },
+    {
+        EN: 'It is important to be familiar with these symptoms so that we can notice them in ourselves or in someone close to us.',
+        SK: 'Je dôležité poznať tieto symptómy, aby sme si ich na sebe alebo na niekom blízkom všimli.',
+    },
+    {
+        EN: 'We can then inform our doctor, who will provide treatment.',
+        SK: 'Môžeme o nich potom povedať svojmu doktorovi, ktorý nás ošetrí.',
+    },
+    {
+        EN: 'Symptoms of diabetes include increased thirst,',
+        SK: 'Medzi príznaky cukrovky patrí zvýšený pocit smädu,',
+    },
+    {
+        EN: 'hunger,',
+        SK: 'hladu,',
+    },
+    {
+        EN: 'intense and frequent fatigue or drowsiness,',
+        SK: 'silná a častá únava alebo ospanlivosť,',
+    },
+    {
+        EN: 'reduced ability to focus on objects around us,',
+        SK: 'slabšia schopnosť zaostrovať na predmety okolo nás,',
+    },
+    {
+        EN: 'numb limbs,',
+        SK: 'znecitlivené končatiny,',
+    },
+    {
+        EN: 'slower wound healing,',
+        SK: 'pomalšie hojenie rán,',
+    },
+    {
+        EN: 'rapid weight changes,',
+        SK: 'prudšie zmeny váhy,',
+    },
+    {
+        EN: 'or frequent urination.',
+        SK: 'alebo častá potreba ísť na toaletu.',
+    },
+];
+
 export const startButton =
     {
         EN: "Start",
diff --git a/src/components/Symptoms.tsx b/src/components/Symptoms.tsx
index c734105..362dce3 100644
--- a/src/components/Symptoms.tsx
+++ b/src/components/Symptoms.tsx
@@ -1,23 +1,71 @@
 import FlippableCard from "./FlippableCard";
-import {symptomsCards} from "../../public/lit/texts";
+import {nextButton, skipToTest, symptoms, symptomsCards, toTest} from "../../public/lit/texts";
 import {languageAtom} from "../atoms/languageAtom";
 import {useRecoilValue} from "recoil";
-import {Texts} from "../hooks/useAnimate";
+import {Texts, useAnimate} from "../hooks/useAnimate";
+import {useRef} from "react";
+import Typewriter, {TypewriterClass} from "typewriter-effect";
+import {useTranslate} from "../hooks/useTranslate";
+import {useNavigate} from "react-router-dom";
 
 const Symptoms = () => {
     const language = useRecoilValue(languageAtom);
+    const typewriterRef = useRef<TypewriterClass>();
+    const nextButtonText = useTranslate(nextButton);
+    const testText = useTranslate(toTest);
+    const skipButtonText = useTranslate(skipToTest);
+    const navigate = useNavigate();
+    const {onInit, handleClick, isAnimationComplete, isLast, currentIndex} = useAnimate({
+        typewriterRef,
+        link: '/',
+        text: symptoms,
+        audioFiles: []
+    });
     return (
         <div className="flex h-screen">
-            <div className="w-2/6 p-4"></div>
+            <div id="intro-text" className="w-2/6 p-4 font-speech">
+                <Typewriter
+                    options={{
+                        delay: 40,
+                    }}
+                    onInit={(typewriter) => onInit({typewriter, pauseFor: 0})}
+                />
+            <div className="mt-20 flex justify-evenly">
+                <button
+                    onClick={handleClick}
+                    className={`mt-20 border-4 border-black font-primary ${
+                        !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
+                    }`}
+                >
+                    {isLast ? testText : nextButtonText}
+                </button>
+                {!isLast && (
+                    <button
+                        onClick={() => navigate("/insulin")}
+                        className={`mt-20 border-4 border-black font-primary bg-yellow-main`}
+                    >
+                        {skipButtonText}
+                    </button>
+                )}
+            </div>
+            </div>
+
             <div className="w-4/6 p-4">
                 <div className="grid grid-rows-2 grid-cols-4 gap-4">
-                    {symptomsCards.map((card) => (
-                        <FlippableCard
+                    {symptomsCards.map((card, index) => (
+                        <div
                             key={card.id}
-                            image={card.image}
-                            text={card.text[language as keyof Texts]}
-                            alt={card.id}
-                        />
+                            className={`${
+                                index < currentIndex - 2 ? "opacity-100" : "opacity-0"
+                            } transition-opacity duration-1000`}
+                        >
+                            <FlippableCard
+                                key={card.id}
+                                image={card.image}
+                                text={card.text[language as keyof Texts]}
+                                alt={card.id}
+                            />
+                        </div>
                     ))}
                 </div>
             </div>
diff --git a/src/hooks/useAnimate.tsx b/src/hooks/useAnimate.tsx
index d733e40..0d96d53 100644
--- a/src/hooks/useAnimate.tsx
+++ b/src/hooks/useAnimate.tsx
@@ -96,6 +96,7 @@ export const useAnimate = ({link, text, typewriterRef, audioFiles}: AnimateProps
         onInit,
         handleMuteToggle,
         isMuted,
-        animationObj
+        animationObj,
+        currentIndex
     }
 }
-- 
GitLab