journal.pl/src/pages/main.tsx

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

import logo from '../assets/logo.svg';
import arrow from '../assets/36-arrow-right.svg';
import fullScreen from '../assets/fullscreen.svg';
import logoShort from '../assets/logo-short.svg';

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

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

const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen;
const blowAnimFeature = getFeatures('hub-video-start')?.blowAnim;

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

    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)}
                        ref={inputRef}
                        onClick={(event) => {
                            if (keyboardFeature) {
                                event.preventDefault();
                                event.stopPropagation();
                                inputRef.current.blur();
                            }
                        }}
                        id="input"
                        autoComplete="off"
                    />
                    {keyboardFeature && <InputHolder onClick={() => setInfocuse(true)} />}
                    <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 [sended, setSend] = useState(false);

    const handleCheck = () => {
        if (!sended) {
            socket.emit('play')
            setSend(true)
        }
    }

    return (
        <StartWrapper>
            {sended && blowAnimFeature && (
                <>
                    <Blow
                        delay={.3}
                        color="#83e973"
                    />
                    <Blow
                        delay={.4}
                        color="#97e043"
                    />
                    <Blow
                        delay={.5}
                        color="#d0eb04"
                    />
                    <Blow
                        delay={.6}
                        color="#3fc0e4"
                    />
                    <Blow
                        delay={.7}
                        color="#daf4ff"
                    />
                    <BigLogo src={logoShort} />
                </>
            )}
            {/* <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}
                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>
            <CircleDiv />
        </StartWrapper>
    )
}

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

    const handleFullScreen = useCallback(() => {
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
        }
        setFull(true);
    }, []);

    return (
        <MainWrapper>
            {fullScreenFeature && !isFull && (
                <FullScreenButton onClick={handleFullScreen}>
                    <img src={fullScreen} />
                </FullScreenButton>
            )}
            <LogoImg src={logo} />
            {/* <Start /> */}
            {!showStart && <Input onStart={() => setShowStart(true)} />}
            {showStart && <Start />}
        </MainWrapper>
    );
};