diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx index 9a3d635a1013dbdd7d9af33aa11e1ea9d0a68896..9e68d0cadce691a4de72f4946341221edba5d37d 100644 --- a/src/components/Season/SeasonCardOnGoing.tsx +++ b/src/components/Season/SeasonCardOnGoing.tsx @@ -153,7 +153,7 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({ <StyledIcon className="duelLocked" icon={duelLocked} size={60} /> </div> )} - <button onClick={resetProgress}>Reset stars</button> + {/* <button onClick={resetProgress}>Reset stars</button> */} </div> ) } diff --git a/src/components/Season/SeasonCardUnlocked.tsx b/src/components/Season/SeasonCardUnlocked.tsx index 15d46080dd7476368bd63c3ef0fa46ae251894a6..10897e91290f38a90df6a730f531fb67c940fd4d 100644 --- a/src/components/Season/SeasonCardUnlocked.tsx +++ b/src/components/Season/SeasonCardUnlocked.tsx @@ -52,7 +52,7 @@ const SeasonCardUnlocked: React.FC<SeasonCardUnlockedProps> = ({ return ( <> - <div className="cardContent"> + <div className="cardContent cardUnlocked"> <p className="title">{t('season.card.title')}</p> <span className="seasonTitle">{userSeason.title}</span> <StyledIcon className="seasonIcon" icon={seasonIcon} /> diff --git a/src/components/Season/SeasonView.tsx b/src/components/Season/SeasonView.tsx index 560b50d6114d4d8c933dd798932bfe59b79a3f68..7a6a544d92e5e50a951bea4ede0b3ad28b7a98a5 100644 --- a/src/components/Season/SeasonView.tsx +++ b/src/components/Season/SeasonView.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import './seasonView.scss' import { useSelector } from 'react-redux' import { EcolyoState } from 'store' @@ -9,6 +9,8 @@ import SeasonCard from './SeasonCard' import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton' import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg' import RightArrowIcon from 'assets/icons/ico/right-arrow.svg' +import { UserSeasonState } from 'enum/userSeason.enum' +import { indexOf } from 'lodash' const SeasonView: React.FC = () => { const { userSeasonList } = useSelector((state: EcolyoState) => state.season) @@ -24,6 +26,7 @@ const SeasonView: React.FC = () => { const [touchStart, setTouchStart] = useState<number>() const [touchEnd, setTouchEnd] = useState<number>() const [index, setindex] = useState<number>(0) + const [lastSeasonIndex, setlastSeasonIndex] = useState<number>(0) const [containerTranslation, setcontainerTranslation] = useState<number>( marginPx ) @@ -93,6 +96,25 @@ const SeasonView: React.FC = () => { if (e.nativeEvent instanceof MouseEvent) setTouchEnd(e.clientX) } + useEffect(() => { + userSeasonList.map((season, i) => { + if ( + season.state === UserSeasonState.UNLOCKED || + season.state === UserSeasonState.ONGOING + ) { + setlastSeasonIndex(i) + if (lastSeasonIndex === 1) { + setcontainerTranslation(0 - cardWitdh * lastSeasonIndex) + } else { + setcontainerTranslation( + 0 - cardWitdh * lastSeasonIndex - marginPx * 1.2 + ) + } + setindex(i) + } + }) + }, [userSeasonList, lastSeasonIndex, cardWitdh]) + return ( <> <CozyBar titleKey={'COMMON.APP_CHALLENGE_TITLE'} /> diff --git a/src/components/Season/seasonCard.scss b/src/components/Season/seasonCard.scss index f151bfa435f81266f4f5c4fb85b766387f572964..1b48f50c56f0fd48bbac45b221ec413ddcaedd91 100644 --- a/src/components/Season/seasonCard.scss +++ b/src/components/Season/seasonCard.scss @@ -10,7 +10,6 @@ color: white; display: flex; flex-direction: column; - filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55)); transform: scale(0.9); &.active { transform: scale(1.08); diff --git a/src/components/Season/seasonCardLocked.scss b/src/components/Season/seasonCardLocked.scss index 1f8d1f0e2f6171c4a42e53f1f8405fb01e771052..c08f7b2b20d676065fd21439ef54ccefd50398b9 100644 --- a/src/components/Season/seasonCardLocked.scss +++ b/src/components/Season/seasonCardLocked.scss @@ -2,6 +2,7 @@ @import '../../styles/base/color'; .cardLocked { + filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55)); .seasonIcon { @media all and(max-height: 700px) { width: 70%; diff --git a/src/components/Season/seasonCardUnlocked.scss b/src/components/Season/seasonCardUnlocked.scss index 84a149912151c0f645225640575d4a9d760ac96f..82c912577662de101dc7a12a38ae9ad69550bee6 100644 --- a/src/components/Season/seasonCardUnlocked.scss +++ b/src/components/Season/seasonCardUnlocked.scss @@ -4,10 +4,21 @@ width: 100%; height: 100%; } -.launchButton { - width: fit-content !important; - margin: auto !important; - text-align: center; - display: block !important; - padding: 1rem 2rem !important; + +.cardUnlocked { + filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55)); + + .launchButton { + width: fit-content !important; + margin: auto !important; + text-align: center; + display: block !important; + padding: 1rem 1.5rem !important; + } + .seasonIcon { + @media all and(max-height: 700px) { + width: 80%; + margin: auto; + } + } }