journal.pl/src/pages/main.tsx

import React, {useState, useCallback, useRef} from 'react';
import { getFeatures } from '@ijl/cli';

import logo from '../assets/logo-white.svg';
import arrow from '../assets/36-arrow-right.svg';

import { Keyboard } from '../components/keyboard';

import {
    MainWrapper,
    InputElement,
    InputLabel,
    InputWrapper,
    LogoImg,
    ArrowImg,
    IconButton,
    StartWrapper,
    StartI,
    StartInput,
    StartLabel,
    HalfLine,
    HideGroup,
    Circle,
    LineSvg,
} from './style';
import { socket } from "../socket";

const keyboardFeature = getFeatures('hub-video-start')?.keyboard;

const Input = ({ onStart }) => {
    const [value, setValue] = useState('');
    const [inFocuse, setInfocuse] = useState(false);
    const handleChange = useCallback(event => {
        setValue(event.target.value.toUpperCase())
    }, [setValue]);

    const handleSubmit = useCallback((event) => {
        event.preventDefault();
        if (value === 'SBER') {
            onStart()
        }
    }, [value])

    return (
        <>
            <form onSubmit={handleSubmit}>
                <InputWrapper>
                    <InputLabel
                        htmlFor='input'
                    >
                        Ввод:
                    </InputLabel>
                    <InputElement
                        value={value}
                        onChange={handleChange}
                        onFocus={() => setInfocuse(true)}
                        id="input"
                        autoComplete="off"
                    />
                    <IconButton type="submit">
                        <ArrowImg src={arrow} />
                    </IconButton>
                </InputWrapper>
            </form>
            {keyboardFeature && inFocuse && (
                <Keyboard onChange={setValue} />
            )}
        </>
    )
}

export const Line = ({ hide, reverse, speed, delay, radius, progress, width, color }) => (
    <LineSvg
        delay={delay}
        reverse={reverse}
        animationSpeed={speed}
        width={(radius * 2) + 20 + width}
        height={(radius * 2) + 20 + width}
    >
        <HideGroup hide={hide} delay={delay}>
            <Circle
                percent={progress}
                circumference={radius * 2 * Math.PI}
                stroke={color}
                strokeWidth={width}
                fill="transparent"
                r={radius}
                cx={radius + 10 + width/2}
                cy={radius + 10 + width/2}
            />
        </HideGroup>
    </LineSvg>
)

Line.defaultProps = {
    reverse: false
}

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>
            <Line
                hide={sended}
                speed={24}
                delay={3}
                radius={122}
                progress={2}
                width={3}
                reverse
                color="white"
            />
            <Line
                hide={sended}
                speed={12}
                delay={9}
                radius={122}
                progress={2}
                width={3}
                color="white"
            />
            <Line
                hide={sended}
                speed={53}
                radius={220}
                delay={6}
                progress={22}
                width={12}
                color="#92de22"
            />
            <Line
                hide={sended}
                speed={53}
                radius={220}
                delay={17.8}
                progress={.5}
                width={12}
                color="#92de22"
            />
            <Line
                hide={sended}
                speed={53}
                radius={220}
                delay={18.3}
                progress={.2}
                width={12}
                color="#92de22"
            />
            <Line
                hide={sended}
                speed={54}
                radius={220}
                delay={30}
                progress={44}
                width={15}
                color="#92de22"
            />
            <Line
                hide={sended}
                speed={12}
                radius={120}
                delay={0}
                progress={13}
                width={6}
                color="white"
            />
            <StartInput
                id="check"
                type="checkbox"
                onChange={handleCheck}
            />
            <StartLabel
                htmlFor='check'
            >
                <StartI>СТАРТ</StartI>
            </StartLabel>
        </StartWrapper>
    )
}

export const MainPage = () => {
    const [showStart, setShowStart] = useState(false);

    return (
        <MainWrapper>
            <LogoImg src={logo} />
            {!showStart && <Input onStart={() => setShowStart(true)} />}
            {showStart && <Start />}
        </MainWrapper>
    );
};