https://cybershoke.net/assets/EarnPoints-BMandh3k.js

1import{r as d,j as e}from"./vendor-react-BGN68_Lp.js";import{u as h}from"./vendor-redux-D8sX5Eqv.js";import{x as k,g as r,q as p,al as S,w as z}from"./index-uear5Vpj.js";import{g as o}from"./vendor-styled-pkIKgjgv.js";import{u as R}from"./vendor-i18n-BWleq_Sd.js";import"./vendor-socket-DSYo_sTV.js";import"./vendor-router-CYD8mbvC.js";const G=o.div`
2    width: 621px;
3    background: #1b222e;
4    border-radius: 6px;
5    padding: 35px 35px 27px 35px;
6    overflow: hidden;
7
8    .modal-close {
9        opacity: 0.2;
10    }
11
12    @media all and (max-width: 650px) {
13        width: 90%;
14        padding: 24px;
15    }
16`,N=o.div`
17    background: #181e29;
18    border-radius: 6px;
19    margin-top: 5px;
20    padding: 18px 26px;
21    padding-top: 29px;
22
23    @media all and (max-width: 650px) {
24        width: 90%;
25    }
26`,T=o.div`
27    display: flex;
28    flex-direction: column;
29    justify-content: center;
30    align-items: center;
31    width: fit-content;
32`,E=o.h2`
33    margin-bottom: 30px;
34    font-weight: 700;
35    font-size: 26px;
36    line-height: 39px;
37    color: #ffffff;
38    display: flex;
39    align-items: center;
40
41    img {
42        width: 32px;
43        margin-right: 10px;
44    }
45
46    @media all and (max-width: 650px) {
47        font-size: 20px;
48        margin-bottom: 24px;
49
50        img {
51            display: none;
52        }
53    }
54`,f=o.ul`
55    max-height: 217px;
56    overflow: auto;
57    width: ${i=>i.onlyGoods?"100%":"260px"};
58    display: inline-block;
59    padding-left: 13px;
60
61    &::-webkit-scrollbar {

62        background: #222a3a;
63    }
64
65    &.second {
66        margin-left: 20px;
67    }
68
69    li {
70        display: flex;
71        align-items: center;
72        margin-bottom: 20px;
73
74        div {
75            font-weight: 400;
76            font-size: 16px;
77            line-height: 19px;
78            color: #afbcd0;
79            display: inline;
80        }
81
82        &.full {
83            max-width: 100%;
84        }
85    }
86
87    img {
88        width: 20px;
89        margin-right: 10px;
90    }
91
92    @media all and (max-width: 650px) {
93        width: auto;
94        max-height: none;
95        overflow: initial;
96
97        &.second {
98            margin-left: 0px;
99        }
100    }
101`,H=o.ul`
102    display: flex;
103    align-items: center;
104    flex-wrap: nowrap;
105    max-width: 569px;
106    overflow: auto;
107    padding-bottom: 23px;
108
109    &::-webkit-scrollbar {
110        height: 3px;
111        background: #222a3a;
112    }
113
114    li {
115        margin-right: 20px;
116        display: flex;
117        flex-direction: column;
118        align-items: center;
119        justify-content: center;
120
121        & > img {
122            /* height: 48px; */
123            margin-bottom: 9px;
124        }
125    }
126
127    span {
128        display: flex;
129        align-items: center;
130        font-weight: 700;
131        font-size: 14px;
132        color: #dca769;
133
134        img {
135            width: 18px;
136            margin-right: 4px;
137        }
138    }
139
140    @media all and (max-width: 650px) {
141        max-width: 301px;
142        margin: 0 auto;
143    }
144`,P=o.div`
145    display: flex;
146
147    &::after {
148        content: '';
149        position: absolute;
150        bottom: 0;
151        left: 0;
152        width: 100%;
153        height: 92px;
154        background: linear-gradient(
155            180deg,
156            rgba(27, 33, 46, 0) 5.43%,
157            #1b222e 80.43%
158        );
159        opacity: ${({$showGradient:i})=>i?1:0};
160        pointer-events: none;
161        transition: opacity 0.2s ease;
162    }
163
164    @media all and (max-width: 650px) {
165        flex-direction: column;
166        max-height: 160px;
167        overflow-y: auto;
168
169        &::after {
170            display: none;
171        }
172    }
173`,u=o.div`
174    color: #fff !important;
175`,$={en:"up to",pl:"do",de:"bis"},w=(i,a)=>String(i??"").replaceAll("{{angebot}}",$[z.get("lang_g")]??a("UpTo")),c=(i,a)=>i.filter(n=>n.type==a&&p(n.text)),y=i=>Array.from(i?.querySelectorAll("[data-scroll-list]")??[]).some(a=>a.scrollHeight>a.clientHeight&&a.scrollTop+a.clientHeight<a.scrollHeight-1),M=()=>{const{t:i}=R(),a=d.useRef(),n=d.useRef(),[b,x]=d.useState(!1),{mode:g}=h(t=>t.modals.data.EARN_POINTS),j=h(t=>t.root.modes?.["2"]?.[g]),{ranks_progress:s=[],ranks:v=[]}=j??{},m=()=>x(y(n.current));return d.useLayoutEffect(()=>{x(y(n.current))},[s]),e.jsxs(T,{children:[e.jsxs(G,{children:[e.jsx(k,{}),e.jsxs(E,{children:[e.jsx("img",{loading:"lazy",src:r("/pages/leaderboard/icons/modal-cup.svg"),alt:""}),i("HowToEarnPoints")]}),e.jsxs(P,{ref:n,$showGradient:b,children:[e.jsxs(f,{className:"grey-scroll","data-scroll-list":!0,onScroll:m,onlyGoods:s.filter(t=>t.type==1).length==0,children:[c(s,0).map((t,l)=>e.jsxs("li",{children:[e.jsx("img",{loading:"lazy",src:r("/pages/leaderboard/icons/tick.svg"),alt:""}),e.jsxs("div",{children:[e.jsx(u,{children:w(t.points,i)})," - ",p(t.text)]})]},l)),c(s,2).map((t,l)=>e.jsx("li",{className:"full",children:p(t.text)},l))]}),c(s,1).length>0&&e.jsx(f,{className:"grey-scroll second","data-scroll-list":!0,onScroll:m,children:c(s,1).map((t,l)=>e.jsxs("li",{children:[e.jsx("img",{loading:"lazy",src:r("/pages/leaderboard/icons/cross.svg"),alt:""}),e.jsxs("div",{children:[e.jsx(u,{children:w(t.points,i)})," - ",p(t.text)]})]},l))})]})]}),e.jsx(N,{children:e.jsx(H,{className:"grey-scroll",ref:a,onWheel:t=>{a.current.scrollLeft+=t.deltaY},children:v.slice().reverse().map(t=>e.jsxs("li",{children:[e.jsx("img",{loading:"lazy",src:r(`/img/ranks/${g}/${t.id}.png`),alt:""}),e.jsxs("span",{children:[e.jsx("img",{loading:"lazy",src:r("/pages/leaderboard/icons/logo.svg"),alt:""}),S(t.points)]})]},t.id))})})]})};export{M as default};