94 lines
4.3 KiB
TypeScript
94 lines
4.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import styles from './clickerpage.module.css';
|
||
import { ClickerBtn } from '../../Clicker/ClickerBtn';
|
||
import { Profile } from '../../Clicker/Profile';
|
||
import { ETextStyles } from '../../texts';
|
||
import { SectionsBlock } from '../../Clicker/SectionsBlock';
|
||
import { ClickerFooter } from '../../Clicker/ClickerFooter';
|
||
import { StyleElements } from '../../Clicker/StyleElements';
|
||
import { PointsZoom } from '../../Clicker/PointsZoom';
|
||
import { useWindowSize } from 'usehooks-ts';
|
||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||
import { ModalWindow } from '../../ModalWindow';
|
||
import { DevPopup } from '../../Elements/DevPopup';
|
||
import { AuctionMainPopups } from '../../Auction/AuctionMainPopups';
|
||
import { useAuctionData } from '../../hooks/useAuctionData';
|
||
|
||
interface IClickerPageInterface {
|
||
name: string,
|
||
points: number,
|
||
energy: number,
|
||
img: string
|
||
}
|
||
|
||
export function ClickerPage({ name, points, img, energy }: IClickerPageInterface) {
|
||
const styleIndex = Number(localStorage.getItem('selectedStyle'));
|
||
const [coins, setCoins] = useState(0);
|
||
const [mult, setMult] = useState(1);
|
||
const [closePoints, setClosePoints] = useState(true);
|
||
const [closePointsAnim, setClosePointsAnim] = useState(false);
|
||
const { width, height } = useWindowSize();
|
||
const savedMult = useAppSelector<number>(state => state.mult);
|
||
const [closeError, setCloseError] = useState(true);
|
||
const [animClose, setAnimClose] = useState(false);
|
||
const [initEnergy, setInitEnergy] = useState(energy);
|
||
const [clickTime, setClickTime] = useState(0);
|
||
const [closeAutoClick, setCloseAutoClick] = useState(true);
|
||
const [sameCoords, setSameCoords] = useState(false);
|
||
const [sameInterval, setSameInterval] = useState(false);
|
||
useAuctionData();
|
||
|
||
useEffect(() => {
|
||
const html = document.querySelector('html');
|
||
|
||
if(html) {
|
||
html.style.overflowY = 'scroll';
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setMult(savedMult);
|
||
}, [savedMult]);
|
||
|
||
useEffect(() => {
|
||
//@ts-ignore
|
||
let timer;
|
||
|
||
if (points !== coins && coins != 0) {
|
||
setClosePoints(false);
|
||
timer = setTimeout(() => {
|
||
setClosePointsAnim(true);
|
||
}, 2000);
|
||
}
|
||
return () => {
|
||
//@ts-ignore
|
||
clearTimeout(timer);
|
||
};
|
||
}, [coins]);
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<div className={styles.records}>
|
||
{!closePoints && <PointsZoom sameInterval={sameInterval} setSameInterval={setSameInterval} sameCoords={sameCoords} setSameCoords={setSameCoords} setCloseAutoClick={setCloseAutoClick} setClickTime={setClickTime} clickTime={clickTime} setMult={setMult} setEnergy={setInitEnergy} setCloseError={setCloseError} setCoins={setCoins} points={coins} setClosePointsAnim={setClosePointsAnim} setClose={setClosePoints} className={styles.pointsAnim} closePointsAnim={closePointsAnim}/>}
|
||
<Profile name={name} className={styles.profile} img={img}/>
|
||
<h1 style={ETextStyles.RwSb24100} className={styles.title}>Мои рекорды</h1>
|
||
<SectionsBlock mult={mult}/>
|
||
</div>
|
||
<div className={styles.clicker} style={{height: `${height > 670 && 'calc(100vh - 355px)'}`}}>
|
||
<ClickerBtn setSameInterval={setSameInterval} closeAutoClick={closeAutoClick} sameCoords={sameCoords} setSameCoords={setSameCoords} clickTime={clickTime} setClickTime={setClickTime} setEnergy={setInitEnergy} coins={coins} setCoins={setCoins} energy={initEnergy} setMult={setMult}/>
|
||
</div>
|
||
<ClickerFooter />
|
||
{styleIndex != 0 && <div>
|
||
<StyleElements styleIndex={styleIndex}/>
|
||
</div>}
|
||
{!closeError && <ModalWindow removeBtn={true} setCloseAnimOut={setAnimClose} closeAnimOut={animClose} setClose={setCloseError} modalBlock={
|
||
<DevPopup setClose={setAnimClose} title='Возникла ошибка' text='Мы пока не можем принимать клики, но скоро всё починим.' />
|
||
} />}
|
||
{!closeAutoClick && <ModalWindow removeBtn={true} setCloseAnimOut={setAnimClose} closeAnimOut={animClose} setClose={setCloseAutoClick} modalBlock={
|
||
<DevPopup setClose={setAnimClose} title='Кажется, вы используете автокликер...' text='Ваши клики не отправлены. Давайте играть честно.' img='assets/police.gif'/>
|
||
} />}
|
||
<AuctionMainPopups/>
|
||
</div>
|
||
);
|
||
}
|