From 1b36186c20acdace954825a4612f82a82a5bad1e Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Thu, 10 Dec 2020 16:23:31 +0100
Subject: [PATCH] Add display consumtpion in boss mini card
---
src/components/Season/SeasonCardOnGoing.tsx | 21 ++++++++++++++++++--
src/components/Season/seasonCardOnGoing.scss | 16 +++++++++++++++
src/locales/fr.json | 3 ++-
3 files changed, 37 insertions(+), 3 deletions(-)
diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx
index f91d17879..756006615 100644
--- a/src/components/Season/SeasonCardOnGoing.tsx
+++ b/src/components/Season/SeasonCardOnGoing.tsx
@@ -70,7 +70,6 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
})
}, [userSeason])
- //TODO change icon and stars when finished
return (
<div className="cardContent onGoing">
<div className="titleBlock">
@@ -125,11 +124,29 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
<StarsContainer starNumber={userSeason.progress >= 15 ? 5 : 4} />
</div>
</div>
- {userSeason.progress >= userSeason.target ? (
+ {userSeason.progress >= userSeason.target &&
+ userSeason.boss.state === UserBossState.UNLOCKED ? (
<button className="smallCard goDuel" onClick={goDuel}>
{t('season.card.ongoing.duel')}
<StyledIcon className="circleStar" icon={seasonIcon} size={60} />
</button>
+ ) : userSeason.boss.state === UserBossState.ONGOING ? (
+ <div className={'smallCard bossCard active'}>
+ <div className="finalDuel">
+ <span>{t('season.card.ongoing.duel')}</span>
+ <p className="starCount">
+ <span className="blueNumber">{`${userSeason.boss.userConsumption} € `}</span>
+ <span>{` / ${userSeason.boss.threshold} €`}</span>
+ </p>
+ </div>
+ <StyledIcon className="circleStar" icon={seasonIcon} size={60} />
+ </div>
+ ) : userSeason.boss.state === UserBossState.DONE ? (
+ //TODO add open Modal onclick
+ <div className={'smallCard bossCard'}>
+ <span>{t('season.card.ongoing.duelDone')}</span>
+ <StyledIcon className="duelLocked" icon={duelLocked} size={60} />
+ </div>
) : (
<div className={'smallCard bossCard'}>
<p className="starCount">
diff --git a/src/components/Season/seasonCardOnGoing.scss b/src/components/Season/seasonCardOnGoing.scss
index ff9836258..bc58f7442 100644
--- a/src/components/Season/seasonCardOnGoing.scss
+++ b/src/components/Season/seasonCardOnGoing.scss
@@ -82,12 +82,28 @@
margin: 0 0.3rem 0 0.7rem;
}
}
+ .finalDuel {
+ display: flex;
+ flex-direction: column;
+ .starCount {
+ span {
+ font-size: 1rem;
+ font-weight: 500;
+ }
+ .blueNumber {
+ margin-left: 0;
+ }
+ }
+ }
}
.bossCard {
background: $dark-3;
border: solid 1px rgba(97, 240, 242, 0.5);
align-items: center;
justify-content: space-between;
+ &.active {
+ background: $grey-linear-gradient-background;
+ }
}
.goDuel {
align-items: center;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 700f73a1e..93ef8d4e4 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -350,7 +350,8 @@
"quiz": "Quiz",
"mission": "Missions",
"action": "Actions",
- "duel": "Défi Final"
+ "duel": "Défi Final",
+ "duelDone": "Résultat du défi final"
},
"locked": {
"desc": "À débloquer en terminant la saison précédente"
--
GitLab