diff --git a/src/components/WaterMark/index.tsx b/src/components/WaterMark/index.tsx index 7f4bb904..4a5f682c 100644 --- a/src/components/WaterMark/index.tsx +++ b/src/components/WaterMark/index.tsx @@ -1,20 +1,32 @@ +import { useState, useEffect } from 'react' import styled from 'styled-components/macro' type WmType = { - leftWM: number, - topWM: number, + leftWm?: number, + topWm?: number, } export const ScWaterMark = styled.div` position: absolute; - top: ${({ topWM }) => `${topWM}%`}; - left: ${({ leftWM }) => `${leftWM}%`}; - transform: translate(-50%, -50%); + top: ${({ topWm }) => `${topWm}%`}; + left: ${({ leftWm }) => `${leftWm}%`}; z-index: 1; + width: 100%; + opacity: 0.2; color: white; - opacity: 0.4; - transition-property: left, top; - transition-duration: 3s; + //animation: marquee 2s linear; + // + //@keyframes marquee { + // 0% { + // opacity: 0; + // } + // 50% { + // opacity: 0.3; + // } + // 100% { + // opacity: 0; + // } + //} ` type WaterMarkProps = { @@ -22,19 +34,28 @@ type WaterMarkProps = { } export const WaterMark = ({ value }: WaterMarkProps) => { - const calcCoordinate = () => { - const leftWM = Math.floor(Math.random() * 100) - let topWM - if (leftWM < 10 || leftWM > 90) { - topWM = Math.floor(Math.random() * 100) - } else { - topWM = Math.floor(Math.random() * 10) - } - return { leftWM, topWM } - } + const [topWm, setTopWm] = useState(0) + const [leftWm, setLeftWm] = useState(0) + const [topWm2, setTopWm2] = useState(0) + const [leftWm2, setLeftWm2] = useState(0) + + useEffect(() => { + let getIntervalCoordinates: ReturnType + // eslint-disable-next-line + getIntervalCoordinates = setInterval( + () => { + setLeftWm(Math.floor(Math.random() * 95)) + setTopWm(Math.floor(Math.random() * 10)) + setLeftWm2(Math.floor(Math.random() * 95)) + setTopWm2(Math.floor(Math.random() * (10)) + 80) + }, 1000 * 60 * 3, + ) + return () => clearInterval(getIntervalCoordinates) + }, []) return ( - - {value} - + <> + {value} + {value} + ) } diff --git a/src/features/TournamentList/components/TournamentMobile/styled.tsx b/src/features/TournamentList/components/TournamentMobile/styled.tsx index 1443700d..67c94702 100644 --- a/src/features/TournamentList/components/TournamentMobile/styled.tsx +++ b/src/features/TournamentList/components/TournamentMobile/styled.tsx @@ -48,6 +48,10 @@ export const TournamentName = styled(Name)` text-overflow: ellipsis; margin-left: 7px; white-space: nowrap; + + @media (orientation: portrait) { + max-width: 200px; + } ` export const CountMatches = styled.span<{ color?: string }>`