diff --git a/src/components/containers/PageCover/styles.scss b/src/components/containers/PageCover/styles.scss index 106c598b..4c2b9724 100644 --- a/src/components/containers/PageCover/styles.scss +++ b/src/components/containers/PageCover/styles.scss @@ -26,7 +26,7 @@ left: 0; width: 100%; height: 100%; - background: url(~/sprites/dots.svg) rgba(0, 0, 0, 0.5); + background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3); } @include tablet { diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx index bdfc99a8..d01896a4 100644 --- a/src/components/flow/FlowHero/index.tsx +++ b/src/components/flow/FlowHero/index.tsx @@ -7,14 +7,13 @@ import { getURL } from '~/utils/dom'; import { withRouter, RouteComponentProps } from 'react-router'; import { URLS } from '~/constants/urls'; import { Icon } from '~/components/input/Icon'; -import { Filler } from '~/components/containers/Filler'; type IProps = RouteComponentProps & { heroes: IFlowState['heroes']; }; const FlowHeroUnconnected: FC = ({ heroes, history }) => { - const [limit, setLimit] = useState(Math.max(heroes.length, 10)); + const [limit, setLimit] = useState(Math.min(heroes.length, 6)); const [current, setCurrent] = useState(0); const [loaded, setLoaded] = useState([]); const timer = useRef(null); @@ -31,6 +30,11 @@ const FlowHeroUnconnected: FC = ({ heroes, history }) => { setCurrent(index > loaded.length - 2 ? loaded[0] : loaded[index + 1]); }, [loaded, current, setCurrent, timer]); + const onNextPress = useCallback(() => { + setLimit(Math.min(heroes.length, limit + 1)); + onNext(); + }, [onNext, heroes, limit, setLimit]); + const onPrevious = useCallback(() => { clearTimeout(timer.current); @@ -52,13 +56,13 @@ const FlowHeroUnconnected: FC = ({ heroes, history }) => { }, [loaded]); useEffect(() => { - setLimit(Math.max(heroes.length, limit)); + setLimit(limit > 0 ? Math.min(heroes.length, limit) : heroes.length); }, [heroes, limit]); const stopSliding = useCallback(() => { clearTimeout(timer.current); timer.current = setTimeout(onNext, 3000); - }, [timer]); + }, [timer, onNext]); const onClick = useCallback(() => { if (!current) return; @@ -66,6 +70,10 @@ const FlowHeroUnconnected: FC = ({ heroes, history }) => { history.push(URLS.NODE_URL(current)); }, [current]); + useEffect(() => { + console.log({ limit }); + }, [limit]); + return (
@@ -77,7 +85,7 @@ const FlowHeroUnconnected: FC = ({ heroes, history }) => {
-
+
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss index cc900bda..ef265d54 100644 --- a/src/components/flow/FlowHero/styles.scss +++ b/src/components/flow/FlowHero/styles.scss @@ -28,7 +28,7 @@ left: 0; width: 100%; height: 100%; - background: url('~/sprites/dots.svg') rgba(0, 0, 0, 0.3); + background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3); } img { diff --git a/src/sprites/stripes.svg b/src/sprites/stripes.svg new file mode 100644 index 00000000..6977e1ab --- /dev/null +++ b/src/sprites/stripes.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file