Načítám žebříček…
} {!loading && entries && entries.length === 0 && ( diff --git a/client/src/components/modals/ButterflyShopModal.scss b/client/src/components/modals/ButterflyShopModal.scss new file mode 100644 index 0000000..ca8d857 --- /dev/null +++ b/client/src/components/modals/ButterflyShopModal.scss @@ -0,0 +1,106 @@ +.shop-balance { + font-size: 0.9rem; + font-weight: 700; + color: #e0a200; + margin-left: 8px; +} + +.shop-heading { + font-weight: 700; + margin: 14px 0 8px; +} + +.butterfly-shop-daily { + padding: 10px 12px; + border-radius: 12px; + background: rgba(28, 126, 214, 0.12); + border: 1px solid rgba(28, 126, 214, 0.35); + margin-bottom: 12px; + + .daily-title { + font-weight: 700; + font-size: 0.9rem; + margin-bottom: 6px; + } + + .daily-bar { + height: 8px; + background: rgba(0, 0, 0, 0.1); + border-radius: 999px; + overflow: hidden; + } + + .daily-bar-inner { + height: 100%; + background: linear-gradient(90deg, #4dabf7, #1c7ed6); + border-radius: 999px; + transition: width 0.3s ease; + } + + .daily-status { + margin-top: 5px; + font-size: 0.8rem; + color: #495057; + font-variant-numeric: tabular-nums; + } +} + +.butterfly-shop-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.butterfly-shop-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 10px 12px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 10px; + background: #fff; + cursor: pointer; + text-align: left; + transition: background 0.12s ease, transform 0.08s ease; + + &:hover:not(:disabled) { + background: #f1f3f5; + } + + &:active:not(:disabled) { + transform: scale(0.99); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .shop-item-label { + display: flex; + flex-direction: column; + font-weight: 600; + font-size: 0.9rem; + } + + .shop-item-lvl { + display: inline; + color: #1c7ed6; + font-weight: 700; + } + + .shop-item-desc { + font-weight: 400; + font-size: 0.74rem; + color: #868e96; + } + + .shop-item-cost { + flex: 0 0 auto; + font-weight: 800; + font-variant-numeric: tabular-nums; + color: #e0a200; + white-space: nowrap; + } +} diff --git a/client/src/components/modals/ButterflyShopModal.tsx b/client/src/components/modals/ButterflyShopModal.tsx new file mode 100644 index 0000000..c8cb63a --- /dev/null +++ b/client/src/components/modals/ButterflyShopModal.tsx @@ -0,0 +1,113 @@ +import { Modal } from "react-bootstrap"; +import { ButterflyStats } from "../../../../types"; +import "./ButterflyShopModal.scss"; + +type UpgradeId = 'net' | 'scarecrow' | 'reinforced'; + +type Props = { + isOpen: boolean; + onClose: () => void; + stats?: ButterflyStats; + onBuyPremium: () => void; + onWaspSpray: () => void; + onRepellent: () => void; + onBuyInsurance: () => void; + onBuyUpgrade: (item: UpgradeId) => void; +}; + +// Zrcadlí serverové hodnoty (server/src/butterflies.ts) +const PREMIUM_BUY_COST = 40; +const WASP_SPRAY_COST = 25; +const REPELLENT_COST = 70; +const INSURANCE_COST = 50; +const UPGRADE_BASE: Record