Skip to content
Snippets Groups Projects
Commit f4f04dd7 authored by Rémi PAPIN's avatar Rémi PAPIN
Browse files

Add cardDone

parent dcb9caf4
No related branches found
No related tags found
1 merge request!142Features/new challenges
src/assets/png/seasons/beariconSuccess.png

5.53 KiB

src/assets/png/seasons/bearx.png

3.32 KiB

import React from 'react' import React from 'react'
import './seasonCardDone.scss' import './seasonCardDone.scss'
import { UserSeason } from 'models' 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 { interface SeasonCardDoneProps {
userSeason: UserSeason userSeason: UserSeason
...@@ -9,7 +13,77 @@ interface SeasonCardDoneProps { ...@@ -9,7 +13,77 @@ interface SeasonCardDoneProps {
const SeasonCardDone: React.FC<SeasonCardDoneProps> = ({ const SeasonCardDone: React.FC<SeasonCardDoneProps> = ({
userSeason, userSeason,
}: SeasonCardDoneProps) => { }: 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 export default SeasonCardDone
@import '../../styles/base/typography'; @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
...@@ -9,11 +9,11 @@ export interface BossEntity { ...@@ -9,11 +9,11 @@ export interface BossEntity {
} }
export interface Boss { export interface Boss {
id: string id: string
userConsumption: number
title: string title: string
description: string description: string
duration: Duration duration: Duration
threshold: number threshold: number
state: UserBossState state: UserBossState
startDate: DateTime | null startDate: DateTime | null
userConsumption: number
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment