From 9e9fcc5f948e4efe5bfc1abc71e1ee8fe4c0f878 Mon Sep 17 00:00:00 2001 From: Arseniy Sitnikov Date: Thu, 12 Dec 2024 18:42:33 +0300 Subject: [PATCH] upd click request --- frontend/src/.DS_Store | Bin 6148 -> 6148 bytes .../shared/Clicker/ClickerBtn/ClickerBtn.tsx | 57 ++++++++------- .../shared/Clicker/PointsZoom/PointsZoom.tsx | 65 +++++++++++++++--- .../Clicker/PointsZoom/pointszoom.module.css | 3 +- .../shared/Pages/ClickerPage/ClickerPage.tsx | 14 +++- 5 files changed, 101 insertions(+), 38 deletions(-) diff --git a/frontend/src/.DS_Store b/frontend/src/.DS_Store index 926ef31574c46953eb6afba9c2d516f20f707dd2..18ab8a0c73904e76a654b40ca82b5216ce59519a 100644 GIT binary patch delta 69 zcmZoMXfc@J&&WD4z#2&O$Z4lB%)x00A3AF+(at5knb>giCB( MYQ(;oo#QV*0G8wvo&W#< delta 29 jcmZoMXfc@J&&WJ6z#2&O$Zfo(%RX6w(O@$>$6tN`i5UqP diff --git a/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx b/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx index 5fa7dce..aca24a4 100644 --- a/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx +++ b/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx @@ -5,7 +5,7 @@ import { ClickerPopup } from '../ClickerPopup'; import { getGradient } from '../../../utils/getGradient'; import { useAppSelector } from '../../hooks/useAppSelector'; import { useDispatch } from 'react-redux'; -import { updateEnergyRequestAsync } from '../../../store/me/actions'; +import { IUserData, updateEnergyRequestAsync } from '../../../store/me/actions'; import axios from 'axios'; import { DevPopup } from '../../Elements/DevPopup'; import { saveMult } from '../../../store/mult'; @@ -15,10 +15,11 @@ interface IClickerBtn { coins: number, setCoins(a: number): void, energy: number, - setMult(a: number): void + setMult(a: number): void, + setEnergy(a: number): void } -export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { +export function ClickerBtn({ setCoins, energy, setMult, coins, setEnergy }: IClickerBtn) { const urlClick = useAppSelector(state => state.urlClick); const token = useAppSelector(state => state.token); const [fill, setFill] = useState(0); @@ -29,14 +30,12 @@ export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { const [close, setClose] = useState(true); const [gradient, setGradient] = useState(getGradient()); let styleIndex = useAppSelector(state => state.styleIndex); - const [initEnergy, setEnergy] = useState(energy); - //const maxEnergy = Number(localStorage.getItem('eg')); const [maxEnergy, setMaxEnergy] = useState(500); - const [closeError, setCloseError] = useState(true); - const [error, setError] = useState(false); - const [animClose, setAnimClose] = useState(false); const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); + + useEffect(() => { + setFill((maxEnergy - energy) / maxEnergy * 100); + }, [energy]); useEffect(() => { const savedEnergy = sessionStorage.getItem('eg'); @@ -44,28 +43,40 @@ export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { const encodeEnergy = atob(savedEnergy); setMaxEnergy(Number(encodeEnergy)); } - setFill((maxEnergy - initEnergy) / maxEnergy * 100); + setFill((maxEnergy - energy) / maxEnergy * 100); }, []); - useEffect(() => { - if (initEnergy === 0 || fill === 100) { - setCloseError(true); - } - }, [initEnergy, fill]); - useEffect(() => { setGradient(getGradient()) }, [styleIndex]); const btnClick = () => { - if (!(initEnergy === 0)) { - sendClick(); + if (energy != 0) { + const newEnergy = energy - 1; + const newFill = (maxEnergy - newEnergy) / maxEnergy * 100; + const newCoins = coins + 1; + dispatch(updateEnergyRequestAsync(newEnergy)); + setCoins(newCoins); + setEnergy(newEnergy) + setFill(newFill); + + if (newFill < 100) { + setSize(220); + + const timer = setTimeout(() => { + setSize(240); + clearTimeout(timer); + }, 100); + } else { + setClose(false); + } + //sendClick(); } else { setClose(false); } }; - const sendClick = () => { + /*const sendClick = () => { if (token && !loading) { setLoading(true); axios.post(`${urlClick}/api/v1/click/`, @@ -120,7 +131,7 @@ export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { console.log(err); }) } - }; + };*/ const hotCards = [ @@ -144,8 +155,7 @@ export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { return (
- {!loading &&
} - {loading &&
} +
@@ -155,9 +165,6 @@ export function ClickerBtn({ setCoins, energy, setMult, coins }: IClickerBtn) { {!close && } />} - {!closeError && - } />}
); } diff --git a/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx b/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx index 0fa17c8..7cc96b3 100644 --- a/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx +++ b/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx @@ -4,8 +4,11 @@ import { formatNumber } from '../../../utils/formatNumber'; import { ETextStyles } from '../../texts'; import ReactDOM from 'react-dom'; import { useDispatch } from 'react-redux'; -import { updatePointsRequestAsync } from '../../../store/me/actions'; +import { meRequest, meRequestError, updateEnergyRequestAsync, updatePointsRequestAsync } from '../../../store/me/actions'; import { checkIOS } from '../../../utils/checkMobile'; +import axios from 'axios'; +import { useAppSelector } from '../../hooks/useAppSelector'; +import { saveMult } from '../../../store/mult'; interface IPointsZoom { points: number, @@ -13,27 +16,64 @@ interface IPointsZoom { className ?: string, closePointsAnim: boolean, setClosePointsAnim(a: boolean): void, - setCoins(a:number):void + setCoins(a:number):void, + setCloseError(a: boolean): void, + setEnergy(a: number): void, + setMult(a: number): void, } -export function PointsZoom({ points, setClose, setCoins, className, closePointsAnim, setClosePointsAnim }: IPointsZoom) { +export function PointsZoom({ points, setMult, setClose, setCoins, className, closePointsAnim, setClosePointsAnim, setCloseError, setEnergy }: IPointsZoom) { const [open, setOpen] = useState(true); const node = document.querySelector('#modal_root'); + const urlClick = useAppSelector(state => state.urlClick); + const token = useAppSelector(state => state.token); + const [sizeHand, setSizeHand] = useState(30); + const energy = Number(useAppSelector(state=>state.me.data.energy)); if (!node) return null; const dispatch = useDispatch(); + const sendClicks = () => { + const initPoints = points; + dispatch(meRequest()); + axios.post(`${urlClick}/api/v1/batch-click/`, + { + count: initPoints + }, + { + headers: { + "Authorization": `TelegramToken ${token}` + } + } + ).then(resp => { + const data = resp.data; + const click = Number(data.click.value); + const encodeMult = btoa(click.toString()); + sessionStorage.setItem('mt', encodeMult); + setMult(Number(click.toFixed(2))); + const energy = Number(data.energy); + dispatch(saveMult(Number(click.toFixed(2)))); + dispatch(updateEnergyRequestAsync(energy)); + dispatch(updatePointsRequestAsync()); + }).catch(err => { + console.log(err); + setCloseError(false); + const returnEnergy = energy + initPoints; + setEnergy(returnEnergy); + dispatch(updateEnergyRequestAsync(returnEnergy)); + dispatch(meRequestError(String(err))); + }) + }; + useEffect(() => { const timer = setInterval(() => { setOpen(false); clearInterval(timer); }, 400); - - console.log(checkIOS()) }, []); useEffect(() => { if (closePointsAnim) { - dispatch(updatePointsRequestAsync()); + sendClicks(); const timer = setTimeout(() => { setClosePointsAnim(false); setClose(true); @@ -43,12 +83,21 @@ export function PointsZoom({ points, setClose, setCoins, className, closePointsA } }, [closePointsAnim]); + useEffect(() => { + setSizeHand(25); + const timer = setTimeout(() => { + setSizeHand(30); + }, 100); + + return () => clearTimeout(timer); + }, [points]); + return (
{ReactDOM.createPortal((
-
-

{`+${formatNumber(Number(points.toFixed(2)))}`}

+
+

{`${formatNumber(Number(points.toFixed(2)))}`}

), node)}
diff --git a/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css b/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css index 63fa9e5..3d995ec 100644 --- a/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css +++ b/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css @@ -15,6 +15,7 @@ left: 10px; z-index: 50; width: calc(100% - 20px); + height: 50px; display: flex; justify-content: space-between; align-items: center; @@ -29,8 +30,6 @@ } .icon { - width: 40px; - height: 40px; background-position: center; background-size: contain; background-repeat: no-repeat; diff --git a/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx b/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx index 7b16ee4..071ccae 100644 --- a/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx +++ b/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx @@ -9,6 +9,8 @@ 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'; interface IClickerPageInterface { name: string, @@ -25,7 +27,10 @@ export function ClickerPage({ name, points, img, energy }: IClickerPageInterface const [closePointsAnim, setClosePointsAnim] = useState(false); const { width, height } = useWindowSize(); const savedMult = useAppSelector(state => state.mult); - + const [closeError, setCloseError] = useState(true); + const [animClose, setAnimClose] = useState(false); + const [initEnergy, setInitEnergy] = useState(energy); + useEffect(() => { setMult(savedMult); }, [savedMult]); @@ -49,18 +54,21 @@ export function ClickerPage({ name, points, img, energy }: IClickerPageInterface return (
- {!closePoints && } + {!closePoints && }

Мои рекорды

670 && 'calc(100vh - 355px)'}`}}> - +
{styleIndex != 0 &&
} + {!closeError && + } />}
); }