diff --git a/frontend/.DS_Store b/frontend/.DS_Store index 9a9ce6d..a650082 100644 Binary files a/frontend/.DS_Store and b/frontend/.DS_Store differ diff --git a/frontend/index.html b/frontend/index.html index 48ef220..93a89c1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,10 +3,8 @@ - + + } /> } /> } /> + } /> diff --git a/frontend/src/main.global.css b/frontend/src/main.global.css index 0c714b0..aaa6fd0 100644 --- a/frontend/src/main.global.css +++ b/frontend/src/main.global.css @@ -82,6 +82,7 @@ --grey22: #222222; --grey9A: #9A9A9A; --grey93: #939393; + --grey1F: #1F1F1F; } body { diff --git a/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx b/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx index 0d47501..9f73692 100644 --- a/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx +++ b/frontend/src/shared/Clicker/ClickerBtn/ClickerBtn.tsx @@ -8,14 +8,16 @@ import { useDispatch } from 'react-redux'; import { updateCoinsRequestAsync } from '../../../store/me/actions'; import axios from 'axios'; import { DevPopup } from '../../Elements/DevPopup'; +import { saveMult } from '../../../store/mult'; interface IClickerBtn { coins: number, setCoins(a: number): void, - energy: number + energy: number, + setMult(a: number): void } -export function ClickerBtn({ coins, setCoins, energy }: IClickerBtn) { +export function ClickerBtn({ coins, setCoins, energy, setMult }: IClickerBtn) { const urlClick = useAppSelector(state => state.urlClick); const token = useAppSelector(state => state.token); const [fill, setFill] = useState(0); @@ -27,14 +29,20 @@ export function ClickerBtn({ coins, setCoins, energy }: IClickerBtn) { const [gradient, setGradient] = useState(getGradient()); let styleIndex = useAppSelector(state => state.styleIndex); const [initEnergy, setEnergy] = useState(energy); - const maxEnergy = Number(localStorage.getItem('eg')); + //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(); useEffect(() => { - setFill((maxEnergy - initEnergy)/maxEnergy * 100); + const savedEnergy = sessionStorage.getItem('eg'); + if(savedEnergy) { + const encodeEnergy = atob(savedEnergy); + setMaxEnergy(Number(encodeEnergy)); + } + setFill((maxEnergy - initEnergy) / maxEnergy * 100); }, []); useEffect(() => { @@ -42,54 +50,36 @@ export function ClickerBtn({ coins, setCoins, energy }: IClickerBtn) { }, [styleIndex]); const btnClick = () => { - sendClick(); - /*if(!error) { + if (!(initEnergy === 0)) { sendClick(); - const newEnergy = initEnergy - 1; - const newFill = (maxEnergy - newEnergy) / maxEnergy * 100; - if (newFill <= 100) { - sendClick(); - const newCoins = coins + 1; - dispatch(updateCoinsRequestAsync(newCoins, newEnergy)) - setCoins(newCoins); - setEnergy(newEnergy) - setFill(newFill); - } else { - setFill(100); - } - - if (newFill < 100) { - setSize(220); - - const timer = setTimeout(() => { - setSize(240); - clearTimeout(timer); - }, 100); - } else { - setClose(false); - } } else { - sendClick(); - }*/ + setClose(false); + } }; const sendClick = () => { - if(urlClick && token) { - axios.get(`${urlClick}/api/v1/click`, { - headers: { - //"Content-type": "application/json", - "Authorization": `TelegramToken ${token}` + if(token) { + axios.post(`${urlClick}/api/v1/click/`, + {}, + { + headers: { + "Authorization": `TelegramToken ${token}` + } } - }, ).then((resp) => { - console.log(resp); + //console.log(resp); if(resp.data) { const click = Number(resp.data.click.value); // - const newEnergy = initEnergy - click; + const encodeMult = btoa(click.toString()); + sessionStorage.setItem('mt', encodeMult); + // + const newEnergy = Number(resp.data.energy); + setMult(Number(click.toFixed(2))) + dispatch(saveMult(Number(click.toFixed(2)))); const newFill = (maxEnergy - newEnergy) / maxEnergy * 100; if (newFill <= 100) { - const newCoins = coins + click; + const newCoins = Number(coins + click); dispatch(updateCoinsRequestAsync(newCoins, newEnergy)) setCoins(newCoins); setEnergy(newEnergy) diff --git a/frontend/src/shared/Clicker/ClickerBtn/clickerbtn.module.css b/frontend/src/shared/Clicker/ClickerBtn/clickerbtn.module.css index 0b21bae..3306b9a 100644 --- a/frontend/src/shared/Clicker/ClickerBtn/clickerbtn.module.css +++ b/frontend/src/shared/Clicker/ClickerBtn/clickerbtn.module.css @@ -2,6 +2,7 @@ position: relative; width: 270px; height: 270px; + user-select: none; } .ringContainer::before { @@ -17,6 +18,7 @@ } .ringBig { + user-select: none; position: absolute; top: 0; left: 0; @@ -27,6 +29,7 @@ } .ringSmall { + user-select: none; z-index: 1; position: absolute; top: 50%; diff --git a/frontend/src/shared/Clicker/ClickerBtnFooter/ClickerBtnFooter.tsx b/frontend/src/shared/Clicker/ClickerBtnFooter/ClickerBtnFooter.tsx index f891281..918564a 100644 --- a/frontend/src/shared/Clicker/ClickerBtnFooter/ClickerBtnFooter.tsx +++ b/frontend/src/shared/Clicker/ClickerBtnFooter/ClickerBtnFooter.tsx @@ -13,7 +13,7 @@ export function ClickerBtnFooter({ text, className, onClick }: IClickerBtnFooter return (
-
+
{text === 'Аукцион' ? :}

{text}

diff --git a/frontend/src/shared/Clicker/ClickerFooter/ClickerFooter.tsx b/frontend/src/shared/Clicker/ClickerFooter/ClickerFooter.tsx index 90dd690..9858e57 100644 --- a/frontend/src/shared/Clicker/ClickerFooter/ClickerFooter.tsx +++ b/frontend/src/shared/Clicker/ClickerFooter/ClickerFooter.tsx @@ -16,9 +16,9 @@ export function ClickerFooter() {
navigate('/styles')}/> { !isDev ? navigate('/auction') : setCloseDev(false) }}/> -
+ { !isDev &&
-
+
} {!closeDev && } />} diff --git a/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx b/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx new file mode 100644 index 0000000..b9f02c4 --- /dev/null +++ b/frontend/src/shared/Clicker/PointsZoom/PointsZoom.tsx @@ -0,0 +1,47 @@ +import React, { useEffect, useState } from 'react'; +import styles from './pointszoom.module.css'; +import { formatNumber } from '../../../utils/formatNumber'; +import { ETextStyles } from '../../texts'; +import ReactDOM from 'react-dom'; + +interface IPointsZoom { + points: number, + setClose(a:boolean): void, + className ?: string, + closePointsAnim: boolean, + setClosePointsAnim(a: boolean): void +} + +export function PointsZoom({ points, setClose, className, closePointsAnim, setClosePointsAnim }: IPointsZoom) { + const [open, setOpen] = useState(true); + const node = document.querySelector('#modal_root'); + if (!node) return null; + + useEffect(() => { + const timer = setInterval(() => { + setOpen(false); + clearInterval(timer); + }, 400); + }, []); + + useEffect(() => { + if (closePointsAnim) { + const timer = setTimeout(() => { + setClosePointsAnim(false); + setClose(true); + clearTimeout(timer); + }, 400); + } + }, [closePointsAnim]); + + return ( +
+ {ReactDOM.createPortal(( +
+
+

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

+
+ ), node)} +
+ ); +} diff --git a/frontend/src/shared/Clicker/PointsZoom/index.ts b/frontend/src/shared/Clicker/PointsZoom/index.ts new file mode 100644 index 0000000..15bf8da --- /dev/null +++ b/frontend/src/shared/Clicker/PointsZoom/index.ts @@ -0,0 +1 @@ +export * from './PointsZoom'; diff --git a/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css b/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css new file mode 100644 index 0000000..ece51cb --- /dev/null +++ b/frontend/src/shared/Clicker/PointsZoom/pointszoom.module.css @@ -0,0 +1,102 @@ +.container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + background: rgba(14, 14, 14, 0.01); + backdrop-filter: blur(2px); +} + +.innerContainer { + position: fixed; + top: 20px; + left: 10px; + z-index: 50; + width: calc(100% - 20px); + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 12px; + border-radius: 20px; + background-color: var(--grey1F); + box-shadow: 0px 0px 30px 15px rgba(128, 135, 192, 0.25); +} + +.icon { + width: 40px; + height: 40px; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} + +.animBack { + animation-name: animBack; + animation-duration: 0.4s; + animation-iteration-count: 1; + animation-timing-function: ease-in; +} + +.animBlock { + animation-name: animBlock; + animation-duration: 0.4s; + animation-iteration-count: 1; + animation-timing-function: ease-in; +} + +@keyframes animBack { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes animBlock { + 0% { + width: 64px; + } + + 100% { + width: 100%; + } +} + + +.animBackClose { + animation-name: animBackClose; + animation-duration: 0.4s; + animation-iteration-count: 1; + animation-timing-function: ease-out; +} + +.animBlockClose { + animation-name: animBlockClose; + animation-duration: 0.4s; + animation-iteration-count: 1; + animation-timing-function: ease-out; +} + +@keyframes animBackClose { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes animBlockClose { + 0% { + width: 100%; + } + + 100% { + width: 64px; + } +} \ No newline at end of file diff --git a/frontend/src/shared/Clicker/Profile/Profile.tsx b/frontend/src/shared/Clicker/Profile/Profile.tsx index c4b3748..f26f490 100644 --- a/frontend/src/shared/Clicker/Profile/Profile.tsx +++ b/frontend/src/shared/Clicker/Profile/Profile.tsx @@ -3,6 +3,7 @@ import styles from './profile.module.css'; import { ETextStyles } from '../../texts'; import { formatNumber } from '../../../utils/formatNumber'; import { PersonIcon } from '../../Elements/PersonIcon'; +import { EIcons, Icon } from '../../Icons'; interface IProfileClicker { name: string, @@ -14,12 +15,12 @@ interface IProfileClicker { export function Profile({ name, points, img, className }: IProfileClicker) { return (
- + {img ? :
}

{name}

- {formatNumber(points)} + {formatNumber(Number(points.toFixed(2)))}

diff --git a/frontend/src/shared/Clicker/Profile/profile.module.css b/frontend/src/shared/Clicker/Profile/profile.module.css index 3345976..0552925 100644 --- a/frontend/src/shared/Clicker/Profile/profile.module.css +++ b/frontend/src/shared/Clicker/Profile/profile.module.css @@ -37,4 +37,14 @@ .content { margin-left: 4px; +} + +.emptyIcon { + display: flex; + align-items: center; + justify-content: center; + width: 25px; + height: 25px; + background-color: var(--grey12); + border-radius: 50%; } \ No newline at end of file diff --git a/frontend/src/shared/Clicker/SectionsBlock/SectionsBlock.tsx b/frontend/src/shared/Clicker/SectionsBlock/SectionsBlock.tsx index b542ffc..3212c56 100644 --- a/frontend/src/shared/Clicker/SectionsBlock/SectionsBlock.tsx +++ b/frontend/src/shared/Clicker/SectionsBlock/SectionsBlock.tsx @@ -10,7 +10,11 @@ import { UsersIcons } from '../../Elements/UsersIcons'; import { formatNumber } from '../../../utils/formatNumber'; import { DevPopup } from '../../Elements/DevPopup'; -export function SectionsBlock() { +interface ISectionsBlock { + mult:number; +} + +export function SectionsBlock({ mult }: ISectionsBlock) { const scaleRef = 70; const [close, setClose] = useState(true); const navigate = useNavigate(); @@ -41,20 +45,23 @@ export function SectionsBlock() {
{!isDev ? navigate('/rating') : setCloseDev(false)}}> - {!isDev &&
+ {
# - {formatNumber(12980)} + {formatNumber(1)}
} - { !isDev ? setClose(false) : setCloseDev(false) }}> - {!isDev &&} + { setClose(false) }}> +

+ {'X '} + {mult} +

- { !isDev ? navigate('/referral') : setCloseDev(false) }}> - {!isDev &&
+ { navigate('/referral') }}> + {
diff --git a/frontend/src/shared/Clicker/SectionsBlock/sectionsblock.module.css b/frontend/src/shared/Clicker/SectionsBlock/sectionsblock.module.css index 66b598e..0b7d52e 100644 --- a/frontend/src/shared/Clicker/SectionsBlock/sectionsblock.module.css +++ b/frontend/src/shared/Clicker/SectionsBlock/sectionsblock.module.css @@ -54,4 +54,20 @@ left: 0; height: 10px; background: var(--primary); +} + +.dev { + position: relative; +} + +.dev::after { + content: ''; + position: absolute; + top: -12px; + left: -12px; + width: calc(100% + 24px); + height: calc(100% + 24px); + border-radius: 14px; + background: rgba(20, 20, 20, 0.80); + backdrop-filter: blur(5px); } \ No newline at end of file diff --git a/frontend/src/shared/Elements/DevPopup/DevPopup.tsx b/frontend/src/shared/Elements/DevPopup/DevPopup.tsx index ec31b38..7cca1f7 100644 --- a/frontend/src/shared/Elements/DevPopup/DevPopup.tsx +++ b/frontend/src/shared/Elements/DevPopup/DevPopup.tsx @@ -14,9 +14,9 @@ export function DevPopup({ setClose, type }: IDevPopup) {
-

{type === 'dev' ? 'Скоро будет доступно' : 'Возникла ошибка'}

-

{type === 'dev' ? 'Пока что делаем эту фичу. Скоро сможете поюзать.' : 'Мы пока не можем принимать клики, но скоро всё починим.'}

-
); } diff --git a/frontend/src/shared/Elements/StylesSwiper/StylesSwiper.tsx b/frontend/src/shared/Elements/StylesSwiper/StylesSwiper.tsx index e03d223..5014f8f 100644 --- a/frontend/src/shared/Elements/StylesSwiper/StylesSwiper.tsx +++ b/frontend/src/shared/Elements/StylesSwiper/StylesSwiper.tsx @@ -73,7 +73,7 @@ export const StylesSwiper: React.FC = memo(({ selectedStyle, setC transform: `rotate(${isActive ? 0 : deg}deg)`, filter: `blur(${isActive ? 0 : 3}px)` }} - >
+ >
); }} ))} diff --git a/frontend/src/shared/Elements/StylesSwiper/stylesswiper.module.css b/frontend/src/shared/Elements/StylesSwiper/stylesswiper.module.css index 1243414..1a46410 100644 --- a/frontend/src/shared/Elements/StylesSwiper/stylesswiper.module.css +++ b/frontend/src/shared/Elements/StylesSwiper/stylesswiper.module.css @@ -24,33 +24,33 @@ background: var(--gradientBlue); } -.card1 div { +/*.card1 div { background-image: url('assets/style1.png'); -} +}*/ .card2 { background: var(--gradientOrange); } -.card2 div { +/*.card2 div { background-image: url('assets/style2.png'); -} +}*/ .card3 { background: var(--gradientYellow); } -.card3 div { +/*.card3 div { background-image: url('assets/style3.png'); -} +}*/ .card4 { background: var(--gradientOrangeYellow); } -.card4 div { +/*.card4 div { background-image: url('assets/style4.png'); -} +}*/ .disabled { position: relative; diff --git a/frontend/src/shared/Elements/UsersIcons/usersicons.module.css b/frontend/src/shared/Elements/UsersIcons/usersicons.module.css index d3aa17e..8cb546e 100644 --- a/frontend/src/shared/Elements/UsersIcons/usersicons.module.css +++ b/frontend/src/shared/Elements/UsersIcons/usersicons.module.css @@ -6,7 +6,7 @@ position: absolute; top: 0; border-radius: 50%; - background-color: var(--white); + background-color: var(--grey6C); border: 1px solid var(--grey12); } diff --git a/frontend/src/shared/Icons/Icon.tsx b/frontend/src/shared/Icons/Icon.tsx index 159d5be..1c7ecc6 100644 --- a/frontend/src/shared/Icons/Icon.tsx +++ b/frontend/src/shared/Icons/Icon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ArrowIcon, BitCoinIcon, ChartIcon, CopyIcon, FireIcon, SmallCoinIcon, TrendIcon, UpPriceIcon } from './commonIcons'; +import { ArrowIcon, BitCoinIcon, ChartIcon, CopyIcon, FireIcon, ProfileIcon, SmallCoinIcon, StyleIcon, TrendIcon, UpPriceIcon } from './commonIcons'; import { MedalFirstIcon, MedalSecondIcon, MedalThirdIcon } from './medals'; interface IconsProps { icon: EIcons; @@ -17,7 +17,9 @@ export const EIcons = { TrendIcon: , ChartIcon: , CopyIcon: , - UpPriceIcon: + UpPriceIcon: , + ProfileIcon: , + StyleIcon: } as const; type EIcons = typeof EIcons[keyof typeof EIcons]; diff --git a/frontend/src/shared/Icons/commonIcons.tsx b/frontend/src/shared/Icons/commonIcons.tsx index 2b2e2fb..20dc2bc 100644 --- a/frontend/src/shared/Icons/commonIcons.tsx +++ b/frontend/src/shared/Icons/commonIcons.tsx @@ -76,4 +76,22 @@ export function UpPriceIcon() { ) +} + +export function ProfileIcon() { + return ( + + + + ) +} + +export function StyleIcon() { + return ( + + + + + + ) } \ No newline at end of file diff --git a/frontend/src/shared/ModalWindow/ModalWindow.tsx b/frontend/src/shared/ModalWindow/ModalWindow.tsx index 9ffc001..e59103b 100644 --- a/frontend/src/shared/ModalWindow/ModalWindow.tsx +++ b/frontend/src/shared/ModalWindow/ModalWindow.tsx @@ -15,11 +15,21 @@ interface IModalWindow { export function ModalWindow({ modalBlock, setClose, removeBtn, closeAnimOut, setCloseAnimOut }: IModalWindow) { const node = document.querySelector('#modal_root'); const [closeAnim, setCloseAnim] = useState(false); + const html = document.querySelector('html'); + + useEffect(() => { + if (html) { + html.style.overflowY = 'hidden'; + } + }, []); if (!node) return null; const closePopUp = () => { setCloseAnim(true); + if (html) { + html.style.overflowY = 'auto'; + } const timer = setTimeout(() => { setClose(true); diff --git a/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx b/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx index d744cb4..86cc53b 100644 --- a/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx +++ b/frontend/src/shared/Pages/ClickerPage/ClickerPage.tsx @@ -6,6 +6,10 @@ 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 { Timer } from '../../Auction/Timer'; +import { useWindowSize } from 'usehooks-ts'; +import { useAppSelector } from '../../hooks/useAppSelector'; interface IClickerPageInterface { name: string, @@ -17,16 +21,42 @@ interface IClickerPageInterface { export function ClickerPage({ name, points, img, energy }: IClickerPageInterface) { const styleIndex = Number(localStorage.getItem('selectedStyle')); const [coins, setCoins] = useState(points); + const [mult, setMult] = useState(1); + const [closePoints, setClosePoints] = useState(true); + const [closePointsAnim, setClosePointsAnim] = useState(false); + const { width, height } = useWindowSize(); + const savedMult = useAppSelector(state => state.mult); + useEffect(() => { + setMult(savedMult); + }, [savedMult]); + + useEffect(() => { + //@ts-ignore + let timer; + + if (points !== coins) { + setClosePoints(false); + timer = setTimeout(() => { + setClosePointsAnim(true); + }, 2000); + } + return () => { + //@ts-ignore + clearTimeout(timer); + }; + }, [coins]); + return (
+ {!closePoints && }

Мои рекорды

- +
-
- +
670 && 'calc(100vh - 355px)'}`}}> +
{styleIndex != 0 &&
diff --git a/frontend/src/shared/Pages/ClickerPage/clickerpage.module.css b/frontend/src/shared/Pages/ClickerPage/clickerpage.module.css index 1184469..c8a5103 100644 --- a/frontend/src/shared/Pages/ClickerPage/clickerpage.module.css +++ b/frontend/src/shared/Pages/ClickerPage/clickerpage.module.css @@ -30,7 +30,7 @@ .clicker { position: relative; z-index: 5; - margin-bottom: 24px; + margin-bottom: 100px; display: flex; align-items: center; justify-content: center; @@ -39,3 +39,10 @@ .profile { margin-bottom: 8px; } + +/*.pointsAnim { + position: absolute; + width: 100%; + top: 0; + left: 0; +}*/ \ No newline at end of file diff --git a/frontend/src/shared/Pages/RoutePage/RoutePage.tsx b/frontend/src/shared/Pages/RoutePage/RoutePage.tsx index c9b7548..ac27988 100644 --- a/frontend/src/shared/Pages/RoutePage/RoutePage.tsx +++ b/frontend/src/shared/Pages/RoutePage/RoutePage.tsx @@ -12,6 +12,7 @@ import { useUserData } from '../../hooks/useUserData'; import { Spinner } from '../../Elements/Spinner'; import { updateBackground } from '../../../utils/updateBackground'; import { ErrorPage } from '../ErrorPage'; +import { useNavigate } from 'react-router-dom'; interface IRoutePage { page: string @@ -20,26 +21,37 @@ interface IRoutePage { export function RoutePage({ page }: IRoutePage) { const verified = useTgData(); const { dataUser, loadingUser, errorUser } = useUserData(); + const navigate = useNavigate(); + //@ts-ignore + const tg = window.Telegram.WebApp; + var BackButton = tg.BackButton; useEffect(() => { updateBackground(page); updateStyles(); + if(page === 'main') { + BackButton.hide(); + } else { + BackButton.show(); + } }, [page]); - //{!verified ? : - //} + BackButton.onClick(function () { + navigate(-1); + }); return (
-
- {page === 'main' && !loadingUser && !errorUser && dataUser.name && dataUser.avatar && } + {!verified ? :
+ { //@ts-ignore + page === 'main' && !loadingUser && !errorUser && dataUser.name && } {page === 'rating' && !loadingUser && !errorUser && } {page === 'referral' && !loadingUser && !errorUser && } {page === 'auction' && !loadingUser && !errorUser && } {page === 'styles' && !loadingUser && !errorUser && } {(loadingUser) &&
} {errorUser && !loadingUser && } -
+
}
); } diff --git a/frontend/src/shared/Pages/StoragePage/StoragePage.tsx b/frontend/src/shared/Pages/StoragePage/StoragePage.tsx index 9f3007f..3845246 100644 --- a/frontend/src/shared/Pages/StoragePage/StoragePage.tsx +++ b/frontend/src/shared/Pages/StoragePage/StoragePage.tsx @@ -2,30 +2,41 @@ import React, { useEffect, useState } from 'react'; import styles from './storagepage.module.css'; import { ETextStyles } from '../../texts'; import { StorageBtn } from '../../Storage/StorageBtn'; -import { StorageScale } from '../../Storage/StorageScale'; -import { PopupCard } from '../../Elements/PopupCard'; import { Button } from '../../Button'; import { EIcons, Icon } from '../../Icons'; import { сopyTextToClipboard } from '../../../utils/copyText'; import { Notification } from '../../Notification'; import { StoragePageBlock } from '../../Storage/StoragePageBlock'; import { FriendsPageBlock } from '../../Storage/FriendsPageBlock'; +import { useAppSelector } from '../../hooks/useAppSelector'; +import { DevPopup } from '../../Elements/DevPopup'; +import { ModalWindow } from '../../ModalWindow'; export function StoragePage() { + const userId = useAppSelector(state => state.userTg.id); const [page, setPage] = useState('storage'); - const refLink = 'https://open.spotify.com/'; + const refLink = `https://t.me/sapphirecrown_bot?start=user_${userId}`; const [showNotif, setShow] = useState(false); + const [closeAnimOut, setCloseAnimOut] = useState(false); + const [closeDev, setCloseDev] = useState(true); return (

Реферальная программа

setPage('storage')}/> - setPage('friends')} /> + { + setCloseDev(false); + //setPage('friends') + } + } />
{page === 'storage' ? : }
); } diff --git a/frontend/src/shared/Pages/WrongSourcePage/WrongSourcePage.tsx b/frontend/src/shared/Pages/WrongSourcePage/WrongSourcePage.tsx index 9f781cc..2f6737d 100644 --- a/frontend/src/shared/Pages/WrongSourcePage/WrongSourcePage.tsx +++ b/frontend/src/shared/Pages/WrongSourcePage/WrongSourcePage.tsx @@ -8,9 +8,11 @@ export function WrongSourcePage() { const { width, height } = useWindowSize(); return ( -
-

Похоже вы вошли не по той ссылке...

-
); } diff --git a/frontend/src/shared/Pages/WrongSourcePage/wrongsourcepage.module.css b/frontend/src/shared/Pages/WrongSourcePage/wrongsourcepage.module.css index 6910fb4..db9a2b0 100644 --- a/frontend/src/shared/Pages/WrongSourcePage/wrongsourcepage.module.css +++ b/frontend/src/shared/Pages/WrongSourcePage/wrongsourcepage.module.css @@ -4,7 +4,15 @@ align-items: center; justify-content: center; flex-direction: column; +} + +.innerContainer { + max-width: 400px; gap: 30px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } .title { diff --git a/frontend/src/shared/Storage/StorageBtn/StorageBtn.tsx b/frontend/src/shared/Storage/StorageBtn/StorageBtn.tsx index 3870c6b..6f80fe5 100644 --- a/frontend/src/shared/Storage/StorageBtn/StorageBtn.tsx +++ b/frontend/src/shared/Storage/StorageBtn/StorageBtn.tsx @@ -6,14 +6,15 @@ import { EIcons, Icon } from '../../Icons'; interface IStorageBtn { type: 'storage' | 'friends', active: boolean, - onClick(): void + onClick(): void, + isDev ?: boolean, } -export function StorageBtn({ type, active, onClick }: IStorageBtn) { +export function StorageBtn({ type, active, onClick, isDev=false }: IStorageBtn) { const selectedStyle = Number(localStorage.getItem('selectedStyle')); return ( -