diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx index f91d17879201639663f8d3ac0fbada7065bb9b4a..75600661557fb319e9994bd64909f869e2253a17 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 ff9836258f2ab665b5d19161400768d90b7d320e..bc58f7442385c39797ffd6e6e73e9c188395c48d 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 700f73a1e17c8e299e2d759ca86ec13bc6ccb37b..93ef8d4e47d99877d97d593f978629c5d9a17488 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"