fix(#watermark): change interval for calculate top and left

src/components/WaterMark/index.tsx

@@ -1,20 +1,32 @@
+import { useState, useEffect } from 'react'
 import styled from 'styled-components/macro'
 
 type WmType = {
-  leftWM: number,
+  leftWm?: number,
-  topWM: number,
+  topWm?: number,
 }
 
 export const ScWaterMark = styled.div<WmType>`
   position: absolute;
-  top: ${({ topWM }) => `${topWM}%`};
+  top: ${({ topWm }) => `${topWm}%`};
-  left: ${({ leftWM }) => `${leftWM}%`};
+  left: ${({ leftWm }) => `${leftWm}%`};
-  transform: translate(-50%, -50%);
   z-index: 1;
+  width: 100%;
+  opacity: 0.2;
   color: white;
-  opacity: 0.4;
+  //animation: marquee 2s linear;
-  transition-property: left, top;
+  //
-  transition-duration: 3s;
+  //@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 [topWm, setTopWm] = useState(0)
-    const leftWM = Math.floor(Math.random() * 100)
+  const [leftWm, setLeftWm] = useState(0)
-    let topWM
+  const [topWm2, setTopWm2] = useState(0)
-    if (leftWM < 10 || leftWM > 90) {
+  const [leftWm2, setLeftWm2] = useState(0)
-      topWM = Math.floor(Math.random() * 100)
+
-    } else {
+  useEffect(() => {
-      topWM = Math.floor(Math.random() * 10)
+    let getIntervalCoordinates: ReturnType<typeof setInterval>
-    }
+    // eslint-disable-next-line
-    return { leftWM, topWM }
+      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 (
-    <ScWaterMark leftWM={calcCoordinate().leftWM} topWM={calcCoordinate().topWM}>
+    <>
-      {value}
+      <ScWaterMark topWm={topWm} leftWm={leftWm}>{value}</ScWaterMark>
-    </ScWaterMark>
+      <ScWaterMark topWm={topWm2} leftWm={leftWm2}>{value}</ScWaterMark>
+    </>
   )
 }

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 }>`