diff --git a/src/assets/png/seasons/beariconSuccess.png b/src/assets/png/seasons/beariconSuccess.png new file mode 100644 index 0000000000000000000000000000000000000000..2b757e568f14e87fb926b115b964f62b409b63ab Binary files /dev/null and b/src/assets/png/seasons/beariconSuccess.png differ diff --git a/src/assets/png/seasons/bearx.png b/src/assets/png/seasons/bearx.png new file mode 100644 index 0000000000000000000000000000000000000000..c280c526c100e447ad3336dde1f205d0e55070d4 Binary files /dev/null and b/src/assets/png/seasons/bearx.png differ diff --git a/src/components/Season/SeasonCardDone.tsx b/src/components/Season/SeasonCardDone.tsx index 2786a5c3eede1de3f5ac53217fb04ec0f38a9c6e..b315e26521e601b8c720f94bd4d9500756753a76 100644 --- a/src/components/Season/SeasonCardDone.tsx +++ b/src/components/Season/SeasonCardDone.tsx @@ -1,6 +1,10 @@ import React from 'react' import './seasonCardDone.scss' import { UserSeason } from 'models' +import iconSuccess from 'assets/png/seasons/beariconSuccess.png' +import iconAlmost from 'assets/png/seasons/bearx.png' +import { UserSeasonSuccess } from 'enum/userSeason.enum' +import { DateTime } from 'luxon' interface SeasonCardDoneProps { userSeason: UserSeason @@ -9,7 +13,77 @@ interface SeasonCardDoneProps { const SeasonCardDone: React.FC<SeasonCardDoneProps> = ({ userSeason, }: SeasonCardDoneProps) => { - return <></> + const getNumberDayProgress = (localUserSeason: UserSeason) => { + if ( + localUserSeason.startDate !== null && + localUserSeason.endingDate !== null + ) { + const startDate = DateTime.fromISO(localUserSeason.startDate) + const endDate = DateTime.fromISO(localUserSeason.endingDate) + + const delta = endDate.diff(startDate, 'days').toObject() + if (delta && delta.days !== undefined) { + delta.days = Math.round(delta.days + 1) + const label = delta.days == 1 ? ' jour' : ' jours' + return ' ' + delta.days + ' ' + label + } + } else return '' + } + const getUserSaving = (localUserSeason: UserSeason) => { + let label + if (localUserSeason.boss.threshold > localUserSeason.boss.userConsumption) + label = 'Economie de ' + else label = 'Dépense de ' + + return ( + label + + Math.round( + (Math.abs( + localUserSeason.boss.threshold - localUserSeason.boss.userConsumption + ) * + 100) / + 100 + ) + + '€' + ) + } + const getResultLabel = (localUserSeason: UserSeason) => { + switch (localUserSeason.success) { + case UserSeasonSuccess.WIN: + return 'Gagné' + case UserSeasonSuccess.ALMOST_WIN: + return 'Presque gagné' + case UserSeasonSuccess.LOST: + return 'Perdu' + } + } + const getIcon = (localUserSeason: UserSeason) => { + let icon + if (localUserSeason.success == UserSeasonSuccess.WIN) icon = iconSuccess + else icon = iconAlmost + return icon + } + return ( + <div className="cardContent"> + <div className="headerCard">SAISON</div> + <div className="seasonName text-20-bold">{userSeason.boss.title}</div> + <div className="iconResult"> + <img src={getIcon(userSeason)} className="imgResult" /> + </div> + <div className="labelResult">{getResultLabel(userSeason)}</div> + <div className="statsResult"> + <span className="text-18-bold">{userSeason.progress} étoiles</span> + <br /> + obtenues en + <span className="text-18-bold">{getNumberDayProgress(userSeason)}</span> + <br /> + <br /> + <span className="text-18-bold">{getUserSaving(userSeason)}</span> + <br /> + sur le défi final + </div> + </div> + ) } export default SeasonCardDone diff --git a/src/components/Season/seasonCardDone.scss b/src/components/Season/seasonCardDone.scss index e4300007a6ea8c2a1a5e7df46294d2ee3c552521..e3d9c1603272ec1444c76c7a369cbb272730958d 100644 --- a/src/components/Season/seasonCardDone.scss +++ b/src/components/Season/seasonCardDone.scss @@ -1,2 +1,21 @@ @import '../../styles/base/typography'; +.cardContent { + border: 1px solid #E0E0E0; + filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55)); + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.seasonName, .labelResult { + margin-bottom: 2rem; +} +.labelResult { + color: #E3B82A; + font-weight: bold; + font-size: 24px; + line-height: 120%; +} \ No newline at end of file diff --git a/src/models/boss.model.ts b/src/models/boss.model.ts index c780f3825fe27ac651ed7a6a26aa29b47fbac019..2d0fda0be572611d1f8fa82aa893fb74f8f90388 100644 --- a/src/models/boss.model.ts +++ b/src/models/boss.model.ts @@ -9,11 +9,11 @@ export interface BossEntity { } export interface Boss { id: string + userConsumption: number title: string description: string duration: Duration threshold: number state: UserBossState startDate: DateTime | null - userConsumption: number }