85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
'use client';
|
||
|
||
import styles from '@/components/shop/Shop.module.css';
|
||
import { FC, useEffect, useRef, useState } from 'react';
|
||
import ModalExchangeContainer from '@/components/ui/modal-exchange/ModalExchangeContainer';
|
||
import { ToastContainer } from 'react-toastify';
|
||
import 'react-toastify/dist/ReactToastify.css';
|
||
import ShopItem from '@/components/shop/ShopItem';
|
||
import { IHandleOpen } from '@/components/shop/ShopContainer';
|
||
import { useShopItemsStore } from '@/store/shopItems.state';
|
||
import { usePlayerStore } from '@/store/player.state';
|
||
import { toFixed } from '@/utils/FormatNumber';
|
||
|
||
interface IShop {
|
||
isOpen: boolean;
|
||
handleClose: () => void;
|
||
handleOpen: (data: IHandleOpen) => void;
|
||
}
|
||
|
||
const Shop: FC<IShop> = ({ isOpen, handleOpen, handleClose }) => {
|
||
const shopBlockRef = useRef<HTMLDivElement>(null);
|
||
const [isOverflow, setIsOverflow] = useState(false);
|
||
|
||
const { shopItems } = useShopItemsStore();
|
||
const { player } = usePlayerStore();
|
||
|
||
useEffect(() => {
|
||
const checkOverflow = () => {
|
||
if (shopBlockRef.current) {
|
||
setIsOverflow(
|
||
shopBlockRef.current.scrollHeight > shopBlockRef.current.clientHeight,
|
||
);
|
||
}
|
||
};
|
||
|
||
checkOverflow();
|
||
|
||
window.addEventListener('resize', checkOverflow);
|
||
|
||
return () => window.removeEventListener('resize', checkOverflow);
|
||
}, []);
|
||
|
||
return (
|
||
<div className={`${styles.shop} ${isOverflow ? styles.overflow : ''}`} ref={shopBlockRef}>
|
||
<div className={styles.content}>
|
||
<div className={styles.header}>
|
||
<span>Магазин</span>
|
||
</div>
|
||
<div className={styles.items}>
|
||
<div className={styles.itemsHeader}>
|
||
<span>Товары</span>
|
||
<span className={styles.itemsAll}>Все</span>
|
||
</div>
|
||
<div className={styles.shopItems}>
|
||
{shopItems &&
|
||
shopItems.map(shopItem => (
|
||
<ShopItem
|
||
key={shopItem.id}
|
||
shopItem={shopItem}
|
||
handleOpen={handleOpen}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className={styles.upgrades}>
|
||
<div className={styles.upgradesTitle}>
|
||
<span>Улучшения</span>
|
||
</div>
|
||
<div className={styles.upgradesContent}>
|
||
<span>Уже скоро...</span>
|
||
</div>
|
||
</div>
|
||
<ModalExchangeContainer
|
||
isOpen={isOpen}
|
||
balance={toFixed(player?.attributes.balance)}
|
||
onClose={handleClose}
|
||
/>
|
||
<ToastContainer />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Shop;
|