gradients

src/pages/main.tsx

@@ -22,6 +22,8 @@ import {
     HideGroup,
     Circle,
     LineSvg,
+    Svg,
+    CircleDiv,
 } from './style';
 import { socket } from "../socket";
 
@@ -97,20 +99,30 @@ Line.defaultProps = {
 }
 
 const Start = () => {
-    // const socketRef = useRef({ sent: false });
     const [sended, setSend] = useState(false);
 
     const handleCheck = () => {
-        // if (!socketRef.current.sent) {
         if (!sended) {
             socket.emit('play')
-            // socketRef.current.sent = true
             setSend(true)
         }
     }
 
     return (
         <StartWrapper>
+            {/* <Svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1200"
+                height="1200"
+                viewBox="0 0 400 400">
+                <defs>
+                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="50%" stop-color="#f7f7f720" />
+                        <stop offset="100%" stop-color="#4aa9edca" />
+                    </linearGradient>
+                </defs>
+                <circle cx="200" cy="-100" r="90" stroke="url(#gradient)" stroke-width="46" fill="none" transform='rotate(90 50 50)'/>
+            </Svg> */}
             <Line
                 hide={sended}
                 speed={24}
@@ -185,6 +197,7 @@ const Start = () => {
             >
                 <StartI>СТАРТ</StartI>
             </StartLabel>
+            <CircleDiv />
         </StartWrapper>
     )
 }
@@ -195,8 +208,9 @@ export const MainPage = () => {
     return (
         <MainWrapper>
             <LogoImg src={logo} />
-            {!showStart && <Input onStart={() => setShowStart(true)} />}
-            {showStart && <Start />}
+            <Start />
+            {/* {!showStart && <Input onStart={() => setShowStart(true)} />}
+            {showStart && <Start />} */}
         </MainWrapper>
     );
 };