bro-js/journal.pl
8
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

all other staff

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich
2023-04-16 12:18:29 +03:00
parent 0663ed5370
commit 109d51115b
18 changed files with 681 additions and 827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/main.tsx
+17 -219
View File
@@ -1,41 +1,16 @@
import React, {useState, useCallback, useRef, useMemo} from 'react';
import { getFeatures } from '@ijl/cli';
import React, {useState, useCallback, useRef, useEffect} from 'react';
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;
import { Journal } from './Journal';
const Input = ({ onStart }) => {
const [value, setValue] = useState('');
@@ -45,9 +20,18 @@ const Input = ({ onStart }) => {
}, [setValue]);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const pass = localStorage.getItem('pass')
if (pass) {
onStart();
}
}, []);
const handleSubmit = useCallback((event) => {
event.preventDefault();
if (value === 'SBER') {
localStorage.setItem('pass', 'true')
if (value === 'OYB0Y') {
onStart()
}
}, [value])
@@ -59,219 +43,33 @@ const Input = ({ onStart }) => {
<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"
type="password"
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);
}, []);
const [shoList, setShoList] = useState(false);
return (
<MainWrapper>
{fullScreenFeature && !isFull && (
<FullScreenButton onClick={handleFullScreen}>
<img src={fullScreen} />
</FullScreenButton>
)}
<LogoImg src={logo} />
{/* <Start /> */}
{!showStart && <Input onStart={() => setShowStart(true)} />}
{showStart && <Start />}
{!shoList && <Input onStart={() => setShoList(true)} />}
{shoList && <Journal />}
</MainWrapper>
);
};