From 93bedff1661a0c2dfdfa0735910c079cc477ef24 Mon Sep 17 00:00:00 2001
From: xsieklov <xsieklov@fi.muni.cz>
Date: Thu, 26 Oct 2023 17:30:45 +0200
Subject: [PATCH] feat: animation at the summary step
---
index.html | 1 +
src/components/InsulinTest.tsx | 14 ++++++++++----
src/hooks/useAnimate.tsx | 2 +-
3 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index ad16156..f79d578 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
<script src="/animations/insulinTest_q2.js" type="text/javascript"></script>
<script src="/animations/insulinTest_q3.js" type="text/javascript"></script>
<script src="/animations/insulinTest_q4.js" type="text/javascript"></script>
+ <script src="/animations/happy.js" type="text/javascript"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
diff --git a/src/components/InsulinTest.tsx b/src/components/InsulinTest.tsx
index 75536bf..9334429 100644
--- a/src/components/InsulinTest.tsx
+++ b/src/components/InsulinTest.tsx
@@ -77,11 +77,17 @@ const InsulinTest = () => {
steps={generateSteps()}
activeStep={currentStep}
/>
- <div className="text-center">
+ <div className="text-center justify-center inline-block">
{isSummaryStep ? (
- <p className="text-xl font-semibold py-4">
- {`${scoreText} ${(score / 5) * 100}%`}
- </p>
+ <div className="w-[300px] h-[700px]">
+ <p className="text-xl font-semibold">
+ {`${scoreText} ${(score / 5) * 100}%`}
+ </p>
+ <AnimateCC
+ animationName="happy"
+ getAnimationObject={getAnimationObject}
+ />
+ </div>
) : isDraggableTestStep ? (
<></>
) : (
diff --git a/src/hooks/useAnimate.tsx b/src/hooks/useAnimate.tsx
index 2eab543..f21607b 100644
--- a/src/hooks/useAnimate.tsx
+++ b/src/hooks/useAnimate.tsx
@@ -1,4 +1,4 @@
-import {SetStateAction, useEffect, useRef, useState} from "react";
+import React, {SetStateAction, useEffect, useRef, useState} from "react";
import {TypewriterClass} from "typewriter-effect";
import {useNavigate} from "react-router-dom";
import {useRecoilValue} from "recoil";
--
GitLab