From a43fd83c22c69496a25cbc3ff49b2c83f00c9a75 Mon Sep 17 00:00:00 2001
From: rpapin <rpapin@grandlyon.com>
Date: Thu, 17 Dec 2020 13:57:15 +0100
Subject: [PATCH] route complete
---
src/assets/icons/visu/quiz/starResult.svg | 9 +++++++++
src/components/Quiz/QuizFinish.tsx | 13 ++++++++++---
src/components/Quiz/QuizQuestion.tsx | 16 +++++++++++++++-
src/components/Quiz/quizFinish.scss | 19 +++++++++++++++++++
src/enum/userChallenge.enum.ts | 4 +++-
src/locales/fr.json | 6 +++++-
src/services/challenge.service.ts | 22 +++++++++++++++++++++-
7 files changed, 82 insertions(+), 7 deletions(-)
create mode 100644 src/assets/icons/visu/quiz/starResult.svg
diff --git a/src/assets/icons/visu/quiz/starResult.svg b/src/assets/icons/visu/quiz/starResult.svg
new file mode 100644
index 000000000..f3a318164
--- /dev/null
+++ b/src/assets/icons/visu/quiz/starResult.svg
@@ -0,0 +1,9 @@
+<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.998 10.2117L20.7049 8.88865L16.5505 0.638245C16.4371 0.412354 16.2504 0.22949 16.0198 0.118337C15.4415 -0.161338 14.7388 0.0717248 14.4496 0.638245L10.2953 8.88865L1.0021 10.2117C0.745888 10.2476 0.511636 10.3659 0.332287 10.5452C0.115464 10.7635 -0.00401488 11.0572 0.000103019 11.3618C0.00422092 11.6663 0.131599 11.9568 0.354248 12.1694L7.078 18.5912L5.48948 27.6591C5.45223 27.8701 5.47606 28.087 5.55826 28.2854C5.64047 28.4837 5.77776 28.6555 5.95458 28.7813C6.13139 28.9071 6.34065 28.9819 6.55862 28.9971C6.77659 29.0123 6.99456 28.9674 7.18781 28.8675L15.5001 24.5863L23.8123 28.8675C24.0393 28.9858 24.3028 29.0252 24.5554 28.9822C25.1922 28.8746 25.6205 28.283 25.5107 27.6591L23.9221 18.5912L30.6459 12.1694C30.8289 11.9938 30.9497 11.7643 30.9863 11.5133C31.0851 10.8858 30.6386 10.305 29.998 10.2117Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="14.9672" y1="1.91675e-07" x2="14.9672" y2="29" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 6f7455af6..e1cde34c7 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,8 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react'
-import './quizBegin.scss'
+import './quizFinish.scss'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
import quizStars from 'assets/icons/visu/quiz/quizStars.svg'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -41,7 +41,14 @@ const QuizFinish: React.FC<QuizFinishProps> = ({
}
return (
<div className="quiz-finish-container">
- <div className="score-final">{t('quiz.score_final')}</div>
+ <div>
+ <div className="score-final-title">{t('quiz.score_final')}</div>
+ <div className="score-final">5/5</div>
+ <div className="score-final">{t('quiz.earn')}</div>
+ <div className="score-final">
+ 5 <StyledIcon className="quiz-icon" icon={starResult} size={50} />
+ </div>
+ </div>
<div className="button-start">
<StyledStopButton color="secondary" onClick={goBack}>
{t('quiz.go_back')}
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 685c1cb42..8eefbd4f7 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -1,6 +1,11 @@
import React, { useEffect } from 'react'
import './quizQuestion.scss'
import { UserChallenge } from 'models'
+import ChallengeService from 'services/challenge.service'
+import { Client, useClient } from 'cozy-client'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { useDispatch } from 'react-redux'
interface QuizQuestion {
userChallenge: UserChallenge
@@ -9,8 +14,17 @@ interface QuizQuestion {
const QuizQuestion: React.FC<QuizQuestion> = ({
userChallenge,
}: QuizQuestion) => {
- const validateQuestion = () => {
+ const client: Client = useClient()
+ const dispatch = useDispatch()
+ const validateQuestion = async () => {
console.log('open modal')
+ //if last question
+ const challengeService = new ChallengeService(client)
+ const userChallengeUpdated = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_FINISH
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
}
useEffect(() => {
diff --git a/src/components/Quiz/quizFinish.scss b/src/components/Quiz/quizFinish.scss
index e69de29bb..c96489d22 100644
--- a/src/components/Quiz/quizFinish.scss
+++ b/src/components/Quiz/quizFinish.scss
@@ -0,0 +1,19 @@
+@import '../../styles/base/color';
+
+.quiz-finish-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 1rem 2rem;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ margin-right: 1rem;
+ transition: all 300ms ease;
+ color: $white;
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ height: 70vh;
+}
+.score-final-title {
+ font-weight: bold;
+ font-size: 2rem;
+}
diff --git a/src/enum/userChallenge.enum.ts b/src/enum/userChallenge.enum.ts
index 9ac1ac494..e96f1fd63 100644
--- a/src/enum/userChallenge.enum.ts
+++ b/src/enum/userChallenge.enum.ts
@@ -8,7 +8,9 @@ export enum UserChallengeUpdateFlag {
DUEL_LOSS = 15,
QUIZ = 20,
QUIZ_START = 21,
- QUIZ_RESET = 22,
+ QUIZ_FINISH = 22,
+ QUIZ_RESET = 23,
+
MISSION = 30,
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 311a66e23..e5cb7d2fa 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -392,6 +392,10 @@
}
},
"quiz" : {
- "explanation" : "Répondez correctement au 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le défi final"
+ "explanation" : "Répondez correctement au 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le défi final",
+ "score_final" : "SCORE FINAL",
+ "earn" : "Vous remportez",
+ "go_back" : "Retour",
+ "try_again" : "Rééssayer"
}
}
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index ac26199d4..9d3c7d5d3 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -27,6 +27,7 @@ import QuizService from 'services/quiz.service'
import ConsumptionDataManager from 'services/consumption.service'
import { getRelationship } from 'utils/utils'
import quizService from 'services/quiz.service'
+import { QuizState } from 'enum/quiz.enum'
export default class ChallengeService {
private readonly _client: Client
@@ -359,7 +360,26 @@ export default class ChallengeService {
...userChallenge,
quiz: updatedQuiz,
}
- console.log(updatedUserChallenge)
+ break
+ case UserChallengeUpdateFlag.QUIZ_FINISH:
+ //updatedQuiz = await quizService.startUserQuiz(userChallenge.quiz)
+ updatedUserChallenge = {
+ ...userChallenge,
+ quiz: {
+ ...userChallenge.quiz,
+ state: QuizState.DONE,
+ },
+ }
+ break
+ case UserChallengeUpdateFlag.QUIZ_RESET:
+ //updatedQuiz = await quizService.startUserQuiz(userChallenge.quiz)
+ updatedUserChallenge = {
+ ...userChallenge,
+ quiz: {
+ ...userChallenge.quiz,
+ state: QuizState.LOCKED,
+ },
+ }
break
default:
updatedUserChallenge = userChallenge
--
GitLab