diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 7a6c3fc6b78a65f583787962805fd5e85a103970..386bdd32346af80c06d31330d0643980e9c224c0 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,6 +1,7 @@
import React, { Suspense, lazy } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { FluidType } from 'enum/fluid.enum'
+import SeasonView from 'components/Seasons/SeasonView'
const HomeView = lazy(() => import('components/Home/HomeView'))
const SingleFluidView = lazy(() =>
@@ -79,7 +80,7 @@ const Routes = () => {
path={`${url}/finished`}
component={FinishedChallengeDetailsView}
/>
- <Route path={`${url}/`} component={ChallengeView} exact />
+ <Route path={`${url}/`} component={SeasonView} exact />
</>
)}
/>
diff --git a/src/components/Seasons/SeasonCard.tsx b/src/components/Seasons/SeasonCard.tsx
index 30336e1fa20d5ea8524625ea7d36fe46aa9b75e5..5f918353a6fefc9efef3fdb84a8392966605d78c 100644
--- a/src/components/Seasons/SeasonCard.tsx
+++ b/src/components/Seasons/SeasonCard.tsx
@@ -1,7 +1,20 @@
import React from 'react'
+import SeasonCardUnlocked from './SeasonCardUnlocked'
-const SeasonCard: React.FC = () => {
- return <></>
+interface Season {
+ saison: number
+ name: string
+}
+interface SeasonCardProps {
+ season: Season
+ index: number
+}
+const SeasonCard = ({ season, index }: SeasonCardProps) => {
+ return (
+ <div className={index === season.saison ? 'slide active' : 'slide'}>
+ <SeasonCardUnlocked season={season} />
+ </div>
+ )
}
export default SeasonCard
diff --git a/src/components/Seasons/SeasonCardUnlocked.tsx b/src/components/Seasons/SeasonCardUnlocked.tsx
index 047851c2aeff95e1cf89aee94f2e9c9ec1563e30..1b7e2ff5a05b4c0e6b9703dd8db44328aeb8d0ed 100644
--- a/src/components/Seasons/SeasonCardUnlocked.tsx
+++ b/src/components/Seasons/SeasonCardUnlocked.tsx
@@ -1,7 +1,19 @@
import React from 'react'
-const SeasonCardUnlocked: React.FC = () => {
- return <></>
+interface Season {
+ saison: number
+ name: string
+}
+interface SeasonCardUnlockedProps {
+ season: Season
+}
+const SeasonCardUnlocked = ({ season }: SeasonCardUnlockedProps) => {
+ return (
+ <div className="cardContent">
+ <p className="title">Saison</p>
+ <span className="seasonTitle">{season.name}</span>
+ </div>
+ )
}
export default SeasonCardUnlocked
diff --git a/src/components/Seasons/SeasonView.tsx b/src/components/Seasons/SeasonView.tsx
index 2e66e4971bb6c70cb2eef6312ef20850571c5efd..8c66ce98fabb0b5dabf93a0d870d97237b550d92 100644
--- a/src/components/Seasons/SeasonView.tsx
+++ b/src/components/Seasons/SeasonView.tsx
@@ -1,7 +1,100 @@
-import React from 'react'
-
+import React, { useEffect, useState } from 'react'
+import SeasonCard from './SeasonCard'
+import CozyBar from 'components/Header/CozyBar'
+import Content from 'components/Content/Content'
+import Header from 'components/Header/Header'
const SeasonView: React.FC = () => {
- return <></>
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const [touchStart, setTouchStart] = React.useState(0)
+ const [touchEnd, setTouchEnd] = React.useState(0)
+ const [index, setindex] = useState(0)
+ const [containerTranslation, setcontainerTranslation] = useState<any>(0)
+
+ const cardWitdh = 285
+ const marginPx = 16
+
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ interface Season {
+ saison: number
+ name: string
+ }
+
+ const [seasonList, setseasonList] = useState<Season[]>([
+ { saison: 0, name: 'saison0' },
+ { saison: 1, name: 'saison1' },
+ { saison: 2, name: 'saison2' },
+ { saison: 3, name: 'saison3' },
+ { saison: 4, name: 'saison4' },
+ { saison: 5, name: 'saison5' },
+ ])
+
+ const moveSliderRight = () => {
+ if (index < seasonList.length - 1) {
+ if (index >= 1)
+ setcontainerTranslation((prev: number) => prev - cardWitdh - marginPx)
+ else setcontainerTranslation((prev: number) => prev - cardWitdh)
+ setindex(prev => prev + 1)
+ }
+ }
+ const moveSliderLeft = () => {
+ if (index > 0) {
+ if (index >= 1)
+ setcontainerTranslation((prev: number) => prev + cardWitdh + marginPx)
+ else setcontainerTranslation((prev: number) => prev + cardWitdh)
+ setindex(prev => prev - 1)
+ }
+ if (index <= 1) {
+ setcontainerTranslation(0)
+ }
+ }
+ const handleTouchStart = (e: React.TouchEvent) => {
+ setTouchStart(e.targetTouches[0].clientX)
+ }
+
+ const handleTouchEnd = () => {
+ //Change the following value in order to change the swipe sensibilyy
+ if (touchStart - touchEnd > 75) {
+ //If swipe left move slider right and add positive translation
+ moveSliderRight()
+ }
+ if (touchStart - touchEnd < -75) {
+ //If swipe right move slider left and add negative translation
+ moveSliderLeft()
+ }
+ }
+
+ const handleTouchMove = (e: React.TouchEvent) => {
+ setTouchEnd(e.targetTouches[0].clientX)
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_OPTIONS_TITLE'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_OPTIONS_TITLE'}
+ ></Header>
+ <Content height={headerHeight}>
+ <div
+ className="seasonSlider"
+ onTouchStart={handleTouchStart}
+ onTouchMove={handleTouchMove}
+ onTouchEnd={handleTouchEnd}
+ >
+ <div
+ className="container"
+ style={{ transform: `translateX(${containerTranslation}px)` }}
+ >
+ {seasonList.map(season => (
+ <SeasonCard key={season.saison} season={season} index={index} />
+ ))}
+ </div>
+ </div>
+ </Content>
+ </>
+ )
}
export default SeasonView
diff --git a/src/styles/components/_seasons.scss b/src/styles/components/_seasons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fa6f6bc7c5ed66ad26885d7ed66e961fe8be6a38
--- /dev/null
+++ b/src/styles/components/_seasons.scss
@@ -0,0 +1,51 @@
+.seasonSlider {
+ min-height: inherit;
+ margin-top: -2rem;
+ overflow-x: hidden;
+ padding: 2rem;
+ position: relative;
+ .container {
+ min-height: inherit;
+ width: 100%;
+ display: flex;
+ transition: all 300ms ease;
+ .slide {
+ margin: auto;
+ height: 465px;
+ max-width: 285px;
+ min-width: 285px;
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ margin-right: 1rem;
+ transition: all 300ms ease;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ transform: scale(0.9);
+
+ &.active {
+ transform: scale(1.08);
+ }
+ .cardContent {
+ margin: auto;
+ .title {
+ font-weight: 400;
+ text-align: center;
+ text-transform: uppercase;
+ font-family: $text-font;
+ font-size: 1rem;
+ margin-bottom: 0;
+ }
+ .seasonTitle {
+ display: block;
+ font-weight: 700;
+ text-align: center;
+ font-family: $text-font;
+ color: $grey-bright;
+ font-size: 1.2rem;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 669fed4245dd9ba9cc9afc53831d82ff1523481f..06daec7f0665ff62467335eb0e3fc111db8472e7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,75 +1,76 @@
-/* Cozy UI utilities classes */
-@import '~cozy-ui/dist/cozy-ui.min.css';
-/* Cozy UI React components styles */
-@import '~cozy-ui/transpiled/react/stylesheet.css';
-/* App styles */
-@import 'base/layout';
-@import 'base/color';
-@import 'base/breakpoint';
-@import 'base/typography';
-@import 'components/card';
-@import 'components/form';
-// @import 'components/button';
-@import 'components/konnector';
-@import 'components/fluid';
-@import 'components/navigator';
-@import 'components/consumptionvisualizer';
-@import 'components/barchart';
-@import 'components/nav';
-@import 'components/indicators';
-@import 'components/challenges';
-@import 'components/ecogesture';
-@import 'components/modal';
-@import 'components/faq';
-@import 'components/legalnotice';
-@import 'components/splash';
-@import 'components/auth';
-@import 'components/feedback';
-@import 'components/version';
-@import 'components/report';
-@import 'components/oldDataModal';
-
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
-
-:root {
- --blue: #{$blue};
- --blue40: #{$blue-40};
- --blueBackground: #{$blue-radial-gradient};
- --blueRadialGradient: #{$blue-radial-gradient};
- --blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
- --elecColor: #{$elec-color};
- --elecColor40: #{$elec-color-40};
- --elecCompareColor: #{$elec-compare-color};
- --gasColor: #{$gas-color};
- --gasColor40: #{$gas-color-40};
- --gasCompareColor: #{$gas-compare-color};
- --waterColor: #{$water-color};
- --waterColor40: #{$water-color-40};
- --waterCompareColor: #{$water-compare-color};
- --multiColor: #{$multi-color};
- --multiCompareColor: #{$multi-compare-color};
- --redPrimary: #{$red-primary};
- --greyBright: #{$grey-bright};
- --greyDark: #{$grey-dark};
- --textWhite: #{$white};
- --softGrey: #{$soft-grey};
- --darkLight: #{$dark-light};
- --darkLight2: #{$dark-light-2};
- --textFont: #{$text-font};
- --greyLinearGradientBackground: #{$grey-linear-gradient-background};
- --multiColorRadialGradientTrans: #{$multi-color-radial-gradient-transparent};
- --elecColorRadialGradientTrans: #{$elec-color-radial-gradient-transparent};
- --waterColorRadialGradientTrans: #{$water-color-radial-gradient-transparent};
- --gasColorRadialGradientTrans: #{$multi-color-radial-gradient-transparent};
- --multiColorRadialGradient: #{$multi-color-radial-gradient};
- --elecColorRadialGradient: #{$elec-color-radial-gradient};
- --gasColorRadialGradient: #{$gas-color-radial-gradient};
- --waterColorRadialGradient: #{$water-color-radial-gradient};
-}
-
-.application {
- @media #{$large-phone} {
- min-height: 100vh;
- }
- overflow-x: hidden;
-}
+/* Cozy UI utilities classes */
+@import '~cozy-ui/dist/cozy-ui.min.css';
+/* Cozy UI React components styles */
+@import '~cozy-ui/transpiled/react/stylesheet.css';
+/* App styles */
+@import 'base/layout';
+@import 'base/color';
+@import 'base/breakpoint';
+@import 'base/typography';
+@import 'components/card';
+@import 'components/form';
+// @import 'components/button';
+@import 'components/konnector';
+@import 'components/fluid';
+@import 'components/navigator';
+@import 'components/consumptionvisualizer';
+@import 'components/barchart';
+@import 'components/nav';
+@import 'components/indicators';
+@import 'components/challenges';
+@import 'components/ecogesture';
+@import 'components/modal';
+@import 'components/faq';
+@import 'components/legalnotice';
+@import 'components/splash';
+@import 'components/seasons';
+@import 'components/auth';
+@import 'components/feedback';
+@import 'components/version';
+@import 'components/report';
+@import 'components/oldDataModal';
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+
+:root {
+ --blue: #{$blue};
+ --blue40: #{$blue-40};
+ --blueBackground: #{$blue-radial-gradient};
+ --blueRadialGradient: #{$blue-radial-gradient};
+ --blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
+ --elecColor: #{$elec-color};
+ --elecColor40: #{$elec-color-40};
+ --elecCompareColor: #{$elec-compare-color};
+ --gasColor: #{$gas-color};
+ --gasColor40: #{$gas-color-40};
+ --gasCompareColor: #{$gas-compare-color};
+ --waterColor: #{$water-color};
+ --waterColor40: #{$water-color-40};
+ --waterCompareColor: #{$water-compare-color};
+ --multiColor: #{$multi-color};
+ --multiCompareColor: #{$multi-compare-color};
+ --redPrimary: #{$red-primary};
+ --greyBright: #{$grey-bright};
+ --greyDark: #{$grey-dark};
+ --textWhite: #{$white};
+ --softGrey: #{$soft-grey};
+ --darkLight: #{$dark-light};
+ --darkLight2: #{$dark-light-2};
+ --textFont: #{$text-font};
+ --greyLinearGradientBackground: #{$grey-linear-gradient-background};
+ --multiColorRadialGradientTrans: #{$multi-color-radial-gradient-transparent};
+ --elecColorRadialGradientTrans: #{$elec-color-radial-gradient-transparent};
+ --waterColorRadialGradientTrans: #{$water-color-radial-gradient-transparent};
+ --gasColorRadialGradientTrans: #{$multi-color-radial-gradient-transparent};
+ --multiColorRadialGradient: #{$multi-color-radial-gradient};
+ --elecColorRadialGradient: #{$elec-color-radial-gradient};
+ --gasColorRadialGradient: #{$gas-color-radial-gradient};
+ --waterColorRadialGradient: #{$water-color-radial-gradient};
+}
+
+.application {
+ @media #{$large-phone} {
+ min-height: 100vh;
+ }
+ overflow-x: hidden;
+}