@everymatrix/casino-tournaments-slider-controller 0.0.365 → 0.0.367

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +30 -30
  2. package/dist/casino-tournaments-slider-controller.js +2 -2
  3. package/dist/casino-tournaments-slider-controller.js.map +1 -1
  4. package/index.html +47 -47
  5. package/index.js +1 -1
  6. package/package.json +2 -2
  7. package/public/reset.css +47 -47
  8. package/rollup.config.js +61 -61
  9. package/src/CasinoTournamentsSliderController.svelte +473 -473
  10. package/src/i18n.js +27 -27
  11. package/src/icon.js +3 -3
  12. package/src/index.ts +4 -4
  13. package/src/translations.js +32 -32
  14. package/stories/CasinoTournamentsSliderConstroller.stories.js +13 -13
  15. package/tsconfig.json +6 -6
package/src/CasinoTournamentsSliderController.svelte CHANGED
@@ -1,473 +1,473 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
- import {onMount} from "svelte";
4
- import { getDevice } from 'rvhelper';
5
- import { _, addNewMessages, setLocale, setupI18n } from './i18n';
6
- import { TournamentsSliderTranslations } from './translations';
7
- import { EventSourcePolyfill } from 'event-source-polyfill';
8
- import iconDefault from './icon'
9
-
10
- import "@everymatrix/casino-tournaments-rank";
11
-
12
- export let session:string = '';
13
- export let endpoint:string = '';
14
- export let lang:string = 'en';
15
- export let tournamentsshownnumber:number=5;
16
- export let looptime: string = '5';
17
- export let iconsize: string = '9';
18
- export let icon: string = '';
19
-
20
- const sortByStatus:string = '""|type1';
21
- let userAgent:string = window.navigator.userAgent;
22
- let tournamentList:any =[];
23
- let currentTournament:any;
24
- let currentTournamentIdx:number = 0;
25
- let isFirst:boolean = true;
26
- let isLast:boolean = false;
27
- let isLoading:boolean = false;
28
- let isLoggedIn:boolean =false;
29
- let sessionID:string;
30
- let tournamentsUpdateEventSource:any;
31
-
32
- let tourSlider:HTMLElement;
33
- let xDown:any = null;
34
- let yDown:any = null;
35
-
36
- let slideAutoInterval;
37
- let animatorRef: HTMLElement
38
- let transistionTime: number = 1
39
-
40
- setupI18n({ withLocale: 'en', translations: {}});
41
- Object.keys(TournamentsSliderTranslations).forEach((item) => {
42
- addNewMessages(item, TournamentsSliderTranslations[item]);
43
- });
44
-
45
- const messageHandler = (e:any)=>{
46
- if(!e.data){
47
- return;
48
- }
49
-
50
- if(e.data.type == 'TournamentList'){
51
- tournamentList = e.data.tournamentList;
52
- }
53
-
54
- }
55
- const setSession = () => {
56
- if (session.length > 0 && session != 'false') {
57
- isLoggedIn = true;
58
- isLoading = true;
59
- sessionID = session;
60
- } else {
61
- isLoggedIn = false;
62
- }
63
- }
64
- const setActiveLanguage = ():void => {
65
- setLocale(lang);
66
- }
67
-
68
- const slideAuto = () => {
69
- if(tournamentList.length === 0) return;
70
- currentTournamentIdx = (currentTournamentIdx + 1) % tournamentList.length
71
- }
72
-
73
- const setSlideAutoInterval = () => {
74
- clearInterval(slideAutoInterval)
75
- slideAutoInterval = setInterval(() => {
76
- slideAuto()
77
- }, Number(looptime) * 1000)
78
- }
79
-
80
- const slideTo = (idxTo) =>{
81
- setSlideAutoInterval()
82
- if(idxTo > 0 && isLast) onHideSlider();
83
- if(idxTo > 0 && isLast || (idxTo < 0 && isFirst)){
84
- return;
85
- }
86
- currentTournamentIdx = currentTournamentIdx+ idxTo;
87
- }
88
-
89
- // animator
90
- const delay = (fn) => setTimeout(() => fn(), transistionTime * 1000)
91
-
92
- const animator = {
93
- icon: {
94
- init: function() {
95
- animatorRef.style.transition = `all ${transistionTime}s ease-in-out`;
96
- },
97
- show: function() {
98
- animatorRef.style.display = 'flex'
99
- delay(() => animatorRef.style.opacity = '1')
100
- },
101
- hide: function() {
102
- animatorRef.style.display = 'none'
103
- animatorRef.style.opacity = '0'
104
- }
105
- },
106
-
107
- slider: {
108
- init: function() {
109
- tourSlider.style.transition = `all ${transistionTime}s ease-in-out`;
110
- },
111
- show: function() {
112
-
113
- tourSlider.style.opacity = '1'
114
- tourSlider.style.transform = null;
115
- document.querySelector('body').style['overflow-x'] = 'hidden'
116
- },
117
- hide: function() {
118
- this.init()
119
-
120
- tourSlider.style.opacity = '0'
121
- tourSlider.style.transform = `translateX(${tourSlider.clientWidth + 20}px)`;
122
- delay(() => document.querySelector('body').setAttribute('style', null))
123
- }
124
- }
125
- }
126
-
127
- const onClickAnimator = () => {
128
- animator.slider.show()
129
- animator.icon.hide()
130
- }
131
-
132
- const onHideSlider = () => {
133
- animator.slider.hide()
134
- animator.icon.show()
135
- }
136
-
137
- const transformTournamentItem = (item:any)=>{
138
- let briefTournament = {
139
- id: item.tournament.id,
140
- name: item.tournament.nameOrTitle,
141
- rank: item.leaderBoard ? item.leaderBoard.rank : '-',
142
- overallRank: item.endRank,
143
- prize: item.leaderBoard && item.leaderBoard.prizeName ? item.leaderBoard.prizeName : '-'
144
- };
145
- return briefTournament;
146
- }
147
-
148
- const detailsAction = (tournamentId:any) => {
149
- window.postMessage({ type: 'MyTournamentFromNavClicked', tournamentid: tournamentId, showLeaderboard: true}, window.location.href);
150
- }
151
-
152
- const setTournamentsSearchParams = (urlSearchParams: URLSearchParams, offset:number, limit:number)=>{
153
- urlSearchParams.append('pagination', `offset=${offset},limit=${limit}`);
154
- urlSearchParams.append('sortField', 'StartTime');
155
- urlSearchParams.append('sortOrder', 'desc');
156
- urlSearchParams.append('fields', 'id,nameOrTitle,state');
157
- urlSearchParams.append('language', lang);
158
- urlSearchParams.append('filter', `state=Running`);
159
- return urlSearchParams;
160
- }
161
- const tournamentsUpdateMessageHandler = (message:any)=>{
162
- if(!message.data){
163
- return;
164
- }
165
- try{
166
- let messageData:any = message.data;
167
- let updateInfo:any = JSON.parse(messageData);
168
- let newTournamentList = [];
169
- if(updateInfo.messageType=='PlayerLeaderBoardsUpdate' && updateInfo.items){
170
- updateInfo.items.forEach((item:any, idx: number)=>{
171
- let briefTournamentInfo = transformTournamentItem(item);
172
- if(currentTournament && currentTournament.id == briefTournamentInfo.id && currentTournament.rank != briefTournamentInfo.rank){
173
- window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
174
- rank: briefTournamentInfo.rank,
175
- overallRank: briefTournamentInfo.overallRank,
176
- prize: briefTournamentInfo.prize
177
- }});
178
- }
179
- newTournamentList.push(briefTournamentInfo);
180
- })
181
- tournamentList = newTournamentList;
182
- if(currentTournamentIdx >= updateInfo.items.length ){
183
- currentTournamentIdx = updateInfo.items.length - 1;
184
- }
185
- currentTournament = newTournamentList[currentTournamentIdx];
186
- }
187
-
188
- if(updateInfo.messageType=='PlayerLeaderBoardUpdate' && updateInfo.item){
189
- let briefTournamentInfo = transformTournamentItem(updateInfo.item);
190
- let tournamentIdx = tournamentList.findIndex((item)=>{
191
- return item.id == briefTournamentInfo.id;
192
- })
193
- if(currentTournamentIdx == tournamentIdx){
194
- window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
195
- rank: briefTournamentInfo.rank,
196
- overallRank: briefTournamentInfo.overallRank,
197
- prize: briefTournamentInfo.prize
198
- }});
199
- }
200
- tournamentList[tournamentIdx] = briefTournamentInfo;
201
- }
202
-
203
- }catch(err){
204
- console.log(err);
205
- }
206
-
207
- }
208
-
209
- const getTouches = (evt:any) => {
210
- return evt.touches || evt.originalEvent.touches;
211
- }
212
-
213
- const handleTouchStart = (evt:any) => {
214
- const firstTouch = getTouches(evt)[0];
215
-
216
- xDown = firstTouch.clientX;
217
- yDown = firstTouch.clientY;
218
- };
219
-
220
- const handleTouchMove = (evt:any) => {
221
- if (!xDown || !yDown) return;
222
-
223
- let xUp = evt.touches[0].clientX;
224
- let yUp = evt.touches[0].clientY;
225
-
226
- let xDiff = xDown - xUp;
227
- let yDiff = yDown - yUp;
228
-
229
- if (Math.abs(xDiff) > Math.abs(yDiff)) {
230
- if (xDiff > 0) {
231
- slideTo(1);
232
- } else {
233
- slideTo(-1);
234
- }
235
- }
236
-
237
- xDown = null;
238
- yDown = null;
239
- };
240
-
241
- const addEventListeners = () => {
242
- tourSlider.addEventListener('touchstart', handleTouchStart, {passive: true});
243
- tourSlider.addEventListener('touchmove', handleTouchMove, {passive: true});
244
- }
245
-
246
- const startupUpdateListener=()=>{
247
- if(!endpoint){
248
- return;
249
- }
250
- let tournamentsUrl:URL = new URL(`${endpoint}/tournaments/leaderboard/player/updates?XSessionId=${session}`);
251
- setTournamentsSearchParams(tournamentsUrl.searchParams, 0, tournamentsshownnumber);
252
- if(!EventSource){
253
- tournamentsUpdateEventSource = new EventSourcePolyfill(tournamentsUrl.href, {headers: {'accept': 'text/event-stream'}});
254
- }else{
255
- tournamentsUpdateEventSource = new EventSource(tournamentsUrl.href);
256
- }
257
- if(typeof(tournamentsUpdateEventSource) != "undefined"){
258
- tournamentsUpdateEventSource.addEventListener('message', tournamentsUpdateMessageHandler);
259
- }
260
- }
261
- const resetSliderListener= ()=>{
262
- if(!tournamentsUpdateEventSource){
263
- return;
264
- }
265
- tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
266
- tournamentsUpdateEventSource.close();
267
- startupUpdateListener();
268
- }
269
-
270
-
271
- onMount(()=>{
272
- startupUpdateListener();
273
- window.addEventListener("message", messageHandler, false);
274
- setSlideAutoInterval()
275
-
276
- return ()=>{
277
- clearInterval(slideAutoInterval);
278
- window.removeEventListener("message", messageHandler);
279
- if( tournamentsUpdateEventSource){
280
- tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
281
- }
282
- tourSlider.removeEventListener('touchstart', handleTouchStart);
283
- tourSlider.removeEventListener('touchmove', handleTouchMove);
284
- }
285
- })
286
-
287
- $: iconHref = icon || iconDefault
288
-
289
- $: endpoint && startupUpdateListener();
290
- $: tourSlider && addEventListeners();
291
- $: session && setSession();
292
- $: lang && setActiveLanguage();
293
- $: looptime && setSlideAutoInterval()
294
- $: currentTournament = tournamentList[currentTournamentIdx];
295
- $: isLast = currentTournamentIdx == tournamentList.length - 1;
296
- $: isFirst = currentTournamentIdx == 0;
297
- $: tournamentsshownnumber && lang && resetSliderListener();
298
- </script>
299
-
300
- <div part="Tournaments" class="casino-tournaments-slider-controller" bind:this={tourSlider}>
301
- <div part="Tournaments_ArrowLeft" class="ArrowLeft {isFirst ? 'Disabled':''}" on:click="{()=>slideTo(-1)}">
302
- <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
303
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
304
- </svg>
305
- </div>
306
- {#if (!tournamentList )}
307
- <div part="TournamentLoading" class="TournamentInfo SearchLoading" style="height: 200px">
308
- <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" >{$_(`tournamentsSlider.loading`)}</span></div>
309
- <div part="TournamentInfo_Rank" class="rank">
310
- <casino-tournaments-rank displayin="col" showicon="false" userrank="-" prize='-' overallrank="-" tournamentid=""></casino-tournaments-rank>
311
- </div>
312
- <div part="TournamentInfo_Points" class="circle">
313
- </div>
314
- </div>
315
- {/if}
316
- {#if (tournamentList && tournamentList.length > 0)}
317
- <div part="TournamentInfo" class="TournamentInfo">
318
- <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" on:click={() => detailsAction(currentTournament.id)}>{currentTournament.name}</span></div>
319
- <div part="TournamentInfo_Rank" class="rank">
320
- <casino-tournaments-rank displayin="col" showicon="false" userrank="{currentTournament.rank}"
321
- prize='{currentTournament.prize}' overallrank="{currentTournament.overallRank}"
322
- tournamentid="{currentTournament.id}"></casino-tournaments-rank>
323
- </div>
324
- <div part="TournamentInfo_Points" class="circle">
325
- {#each tournamentList as item, idx}
326
- <svg class="{currentTournamentIdx == idx ? 'active' : ''}" width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
327
- <circle cx="2.77888" cy="2.50837" r="2.28571" fill="currentColor" stroke="currentColor" />
328
- </svg>
329
- {/each}
330
- </div>
331
- </div>
332
- {/if}
333
- <div part="Tournaments_ArrowRight" class="ArrowRight" on:click="{()=>slideTo(1)}">
334
- <svg width="6" height="10" fill="currentColor" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
335
- <path fill-rule="evenodd" clip-rule="evenodd" d="M4.93488 5.75848L5.79688 4.89648L1.48689 0.586501L0.624894 1.4485L4.07278 4.89638L0.624326 8.34484L1.48632 9.20683L4.93478 5.75838L4.93488 5.75848Z"/>
336
- </svg>
337
- {#if isLast}
338
- <svg width="6" height="10" fill="currentColor" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
339
- <path fill-rule="evenodd" clip-rule="evenodd" d="M4.93488 5.75848L5.79688 4.89648L1.48689 0.586501L0.624894 1.4485L4.07278 4.89638L0.624326 8.34484L1.48632 9.20683L4.93478 5.75838L4.93488 5.75848Z"/>
340
- </svg>
341
- {/if}
342
- </div>
343
- </div>
344
-
345
- <section id="animator" bind:this={animatorRef} part="Animator" on:click="{() => onClickAnimator()}">
346
- <div class="svg" part="Icon">
347
- <svg width={iconsize} height={iconsize} viewBox={`0 0 ${iconsize} ${iconsize}`} fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
348
- <rect width={iconsize} height={iconsize} fill="url(#pattern0)"/>
349
- <defs>
350
- <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
351
- <use xlink:href="#image0_2606_356" transform="scale(0.00195312)"/>
352
- </pattern>
353
- <image
354
- id="image0_2606_356"
355
- width="512"
356
- height="512"
357
- xlink:href={iconHref}
358
- />
359
- </defs>
360
- </svg>
361
- </div>
362
-
363
- <div class="restoreButton" part="RestoreButton">
364
- <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
365
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
366
- </svg>
367
- <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
368
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
369
- </svg>
370
- </div>
371
- </section>
372
-
373
- <style lang="scss">
374
- ::host{
375
- }
376
- .casino-tournaments-slider-controller {
377
- position: relative;
378
- width: 100%;
379
- background: #212223;
380
- color: #fff;
381
- display: inline-flex;
382
- padding: 10px 5px;
383
- border: 1px solid #ff8364;
384
- border-radius: 5px;
385
- min-height: 70px;
386
- -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
387
- }
388
- .TournamentInfo{
389
- width: calc(100% - 4px);
390
- padding: 2px;
391
- .name{
392
- white-space: nowrap;
393
- overflow: auto;
394
- width: 99%;
395
- text-align: center;
396
- text-transform: capitalize;
397
- font-size: 11px;
398
- margin-bottom: 5px;
399
- cursor: pointer;
400
- }
401
- .circle{text-align: center; height: 7px;
402
- height: 5px;
403
- margin-top: 3px;
404
- svg{color: #C4C4C4; margin: 0 2px; vertical-align: top; margin-top: 3px;}
405
- svg.active{color: white}
406
- }
407
- }
408
- .ArrowLeft{
409
- left: 1px;
410
- }
411
- .ArrowRight{
412
- right: 1px;
413
- }
414
-
415
- .ArrowLeft, .ArrowRight{
416
- &.Disabled svg{color: darkgrey}
417
- position: absolute;
418
- cursor: pointer;
419
- top: calc(50% - 7px);
420
- svg{
421
- vertical-align: middle;
422
- width: 11px;
423
- height: 11px;
424
- color: #FF8364;
425
- }
426
- margin: 0px;
427
- display: flex;
428
- width: 7px;
429
- }
430
-
431
- section#animator {
432
- position: absolute;
433
- right: 0;
434
- top: 0;
435
- opacity: 0;
436
- display: none;
437
- cursor: pointer;
438
- text-align: center;
439
-
440
- align-items: center;
441
- flex-direction: column;
442
-
443
- .restoreButton {
444
- color: #000;
445
- display: inline-flex;
446
- }
447
- }
448
-
449
- casino-tournaments-rank::part(Rank), casino-tournaments-rank::part(Prize){
450
- background-color: transparent;
451
- padding: 0px;
452
- margin: 0px;
453
- line-height: 14px;
454
- }
455
- casino-tournaments-rank::part(RankText), casino-tournaments-rank::part(PrizeText){
456
- line-height: 16px;
457
- margin: auto;
458
- }
459
- casino-tournaments-rank::part(Rank_Arror_UP), casino-tournaments-rank::part(Rank_Arror_Down){
460
- padding: 0px 3px;
461
- }
462
- casino-tournaments-rank::part(PrizeText){
463
- font-weight: normal;
464
- }
465
- casino-tournaments-rank::part(Rank){
466
- color: #ff8364;
467
- font-size: 10px;
468
- }
469
- casino-tournaments-rank::part(Prize){
470
- color: #fdd500;
471
- font-size: 10px;
472
- }
473
- </style>
1
+ <svelte:options tag={null} />
2
+ <script lang="ts">
3
+ import {onMount} from "svelte";
4
+ import { getDevice } from 'rvhelper';
5
+ import { _, addNewMessages, setLocale, setupI18n } from './i18n';
6
+ import { TournamentsSliderTranslations } from './translations';
7
+ import { EventSourcePolyfill } from 'event-source-polyfill';
8
+ import iconDefault from './icon'
9
+
10
+ import "@everymatrix/casino-tournaments-rank";
11
+
12
+ export let session:string = '';
13
+ export let endpoint:string = '';
14
+ export let lang:string = 'en';
15
+ export let tournamentsshownnumber:number=5;
16
+ export let looptime: string = '5';
17
+ export let iconsize: string = '9';
18
+ export let icon: string = '';
19
+
20
+ const sortByStatus:string = '""|type1';
21
+ let userAgent:string = window.navigator.userAgent;
22
+ let tournamentList:any =[];
23
+ let currentTournament:any;
24
+ let currentTournamentIdx:number = 0;
25
+ let isFirst:boolean = true;
26
+ let isLast:boolean = false;
27
+ let isLoading:boolean = false;
28
+ let isLoggedIn:boolean =false;
29
+ let sessionID:string;
30
+ let tournamentsUpdateEventSource:any;
31
+
32
+ let tourSlider:HTMLElement;
33
+ let xDown:any = null;
34
+ let yDown:any = null;
35
+
36
+ let slideAutoInterval;
37
+ let animatorRef: HTMLElement
38
+ let transistionTime: number = 1
39
+
40
+ setupI18n({ withLocale: 'en', translations: {}});
41
+ Object.keys(TournamentsSliderTranslations).forEach((item) => {
42
+ addNewMessages(item, TournamentsSliderTranslations[item]);
43
+ });
44
+
45
+ const messageHandler = (e:any)=>{
46
+ if(!e.data){
47
+ return;
48
+ }
49
+
50
+ if(e.data.type == 'TournamentList'){
51
+ tournamentList = e.data.tournamentList;
52
+ }
53
+
54
+ }
55
+ const setSession = () => {
56
+ if (session.length > 0 && session != 'false') {
57
+ isLoggedIn = true;
58
+ isLoading = true;
59
+ sessionID = session;
60
+ } else {
61
+ isLoggedIn = false;
62
+ }
63
+ }
64
+ const setActiveLanguage = ():void => {
65
+ setLocale(lang);
66
+ }
67
+
68
+ const slideAuto = () => {
69
+ if(tournamentList.length === 0) return;
70
+ currentTournamentIdx = (currentTournamentIdx + 1) % tournamentList.length
71
+ }
72
+
73
+ const setSlideAutoInterval = () => {
74
+ clearInterval(slideAutoInterval)
75
+ slideAutoInterval = setInterval(() => {
76
+ slideAuto()
77
+ }, Number(looptime) * 1000)
78
+ }
79
+
80
+ const slideTo = (idxTo) =>{
81
+ setSlideAutoInterval()
82
+ if(idxTo > 0 && isLast) onHideSlider();
83
+ if(idxTo > 0 && isLast || (idxTo < 0 && isFirst)){
84
+ return;
85
+ }
86
+ currentTournamentIdx = currentTournamentIdx+ idxTo;
87
+ }
88
+
89
+ // animator
90
+ const delay = (fn) => setTimeout(() => fn(), transistionTime * 1000)
91
+
92
+ const animator = {
93
+ icon: {
94
+ init: function() {
95
+ animatorRef.style.transition = `all ${transistionTime}s ease-in-out`;
96
+ },
97
+ show: function() {
98
+ animatorRef.style.display = 'flex'
99
+ delay(() => animatorRef.style.opacity = '1')
100
+ },
101
+ hide: function() {
102
+ animatorRef.style.display = 'none'
103
+ animatorRef.style.opacity = '0'
104
+ }
105
+ },
106
+
107
+ slider: {
108
+ init: function() {
109
+ tourSlider.style.transition = `all ${transistionTime}s ease-in-out`;
110
+ },
111
+ show: function() {
112
+
113
+ tourSlider.style.opacity = '1'
114
+ tourSlider.style.transform = null;
115
+ document.querySelector('body').style['overflow-x'] = 'hidden'
116
+ },
117
+ hide: function() {
118
+ this.init()
119
+
120
+ tourSlider.style.opacity = '0'
121
+ tourSlider.style.transform = `translateX(${tourSlider.clientWidth + 20}px)`;
122
+ delay(() => document.querySelector('body').setAttribute('style', null))
123
+ }
124
+ }
125
+ }
126
+
127
+ const onClickAnimator = () => {
128
+ animator.slider.show()
129
+ animator.icon.hide()
130
+ }
131
+
132
+ const onHideSlider = () => {
133
+ animator.slider.hide()
134
+ animator.icon.show()
135
+ }
136
+
137
+ const transformTournamentItem = (item:any)=>{
138
+ let briefTournament = {
139
+ id: item.tournament.id,
140
+ name: item.tournament.nameOrTitle,
141
+ rank: item.leaderBoard ? item.leaderBoard.rank : '-',
142
+ overallRank: item.endRank,
143
+ prize: item.leaderBoard && item.leaderBoard.prizeName ? item.leaderBoard.prizeName : '-'
144
+ };
145
+ return briefTournament;
146
+ }
147
+
148
+ const detailsAction = (tournamentId:any) => {
149
+ window.postMessage({ type: 'MyTournamentFromNavClicked', tournamentid: tournamentId, showLeaderboard: true}, window.location.href);
150
+ }
151
+
152
+ const setTournamentsSearchParams = (urlSearchParams: URLSearchParams, offset:number, limit:number)=>{
153
+ urlSearchParams.append('pagination', `offset=${offset},limit=${limit}`);
154
+ urlSearchParams.append('sortField', 'StartTime');
155
+ urlSearchParams.append('sortOrder', 'desc');
156
+ urlSearchParams.append('fields', 'id,nameOrTitle,state');
157
+ urlSearchParams.append('language', lang);
158
+ urlSearchParams.append('filter', `state=Running`);
159
+ return urlSearchParams;
160
+ }
161
+ const tournamentsUpdateMessageHandler = (message:any)=>{
162
+ if(!message.data){
163
+ return;
164
+ }
165
+ try{
166
+ let messageData:any = message.data;
167
+ let updateInfo:any = JSON.parse(messageData);
168
+ let newTournamentList = [];
169
+ if(updateInfo.messageType=='PlayerLeaderBoardsUpdate' && updateInfo.items){
170
+ updateInfo.items.forEach((item:any, idx: number)=>{
171
+ let briefTournamentInfo = transformTournamentItem(item);
172
+ if(currentTournament && currentTournament.id == briefTournamentInfo.id && currentTournament.rank != briefTournamentInfo.rank){
173
+ window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
174
+ rank: briefTournamentInfo.rank,
175
+ overallRank: briefTournamentInfo.overallRank,
176
+ prize: briefTournamentInfo.prize
177
+ }});
178
+ }
179
+ newTournamentList.push(briefTournamentInfo);
180
+ })
181
+ tournamentList = newTournamentList;
182
+ if(currentTournamentIdx >= updateInfo.items.length ){
183
+ currentTournamentIdx = updateInfo.items.length - 1;
184
+ }
185
+ currentTournament = newTournamentList[currentTournamentIdx];
186
+ }
187
+
188
+ if(updateInfo.messageType=='PlayerLeaderBoardUpdate' && updateInfo.item){
189
+ let briefTournamentInfo = transformTournamentItem(updateInfo.item);
190
+ let tournamentIdx = tournamentList.findIndex((item)=>{
191
+ return item.id == briefTournamentInfo.id;
192
+ })
193
+ if(currentTournamentIdx == tournamentIdx){
194
+ window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
195
+ rank: briefTournamentInfo.rank,
196
+ overallRank: briefTournamentInfo.overallRank,
197
+ prize: briefTournamentInfo.prize
198
+ }});
199
+ }
200
+ tournamentList[tournamentIdx] = briefTournamentInfo;
201
+ }
202
+
203
+ }catch(err){
204
+ console.log(err);
205
+ }
206
+
207
+ }
208
+
209
+ const getTouches = (evt:any) => {
210
+ return evt.touches || evt.originalEvent.touches;
211
+ }
212
+
213
+ const handleTouchStart = (evt:any) => {
214
+ const firstTouch = getTouches(evt)[0];
215
+
216
+ xDown = firstTouch.clientX;
217
+ yDown = firstTouch.clientY;
218
+ };
219
+
220
+ const handleTouchMove = (evt:any) => {
221
+ if (!xDown || !yDown) return;
222
+
223
+ let xUp = evt.touches[0].clientX;
224
+ let yUp = evt.touches[0].clientY;
225
+
226
+ let xDiff = xDown - xUp;
227
+ let yDiff = yDown - yUp;
228
+
229
+ if (Math.abs(xDiff) > Math.abs(yDiff)) {
230
+ if (xDiff > 0) {
231
+ slideTo(1);
232
+ } else {
233
+ slideTo(-1);
234
+ }
235
+ }
236
+
237
+ xDown = null;
238
+ yDown = null;
239
+ };
240
+
241
+ const addEventListeners = () => {
242
+ tourSlider.addEventListener('touchstart', handleTouchStart, {passive: true});
243
+ tourSlider.addEventListener('touchmove', handleTouchMove, {passive: true});
244
+ }
245
+
246
+ const startupUpdateListener=()=>{
247
+ if(!endpoint){
248
+ return;
249
+ }
250
+ let tournamentsUrl:URL = new URL(`${endpoint}/tournaments/leaderboard/player/updates?XSessionId=${session}`);
251
+ setTournamentsSearchParams(tournamentsUrl.searchParams, 0, tournamentsshownnumber);
252
+ if(!EventSource){
253
+ tournamentsUpdateEventSource = new EventSourcePolyfill(tournamentsUrl.href, {headers: {'accept': 'text/event-stream'}});
254
+ }else{
255
+ tournamentsUpdateEventSource = new EventSource(tournamentsUrl.href);
256
+ }
257
+ if(typeof(tournamentsUpdateEventSource) != "undefined"){
258
+ tournamentsUpdateEventSource.addEventListener('message', tournamentsUpdateMessageHandler);
259
+ }
260
+ }
261
+ const resetSliderListener= ()=>{
262
+ if(!tournamentsUpdateEventSource){
263
+ return;
264
+ }
265
+ tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
266
+ tournamentsUpdateEventSource.close();
267
+ startupUpdateListener();
268
+ }
269
+
270
+
271
+ onMount(()=>{
272
+ startupUpdateListener();
273
+ window.addEventListener("message", messageHandler, false);
274
+ setSlideAutoInterval()
275
+
276
+ return ()=>{
277
+ clearInterval(slideAutoInterval);
278
+ window.removeEventListener("message", messageHandler);
279
+ if( tournamentsUpdateEventSource){
280
+ tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
281
+ }
282
+ tourSlider.removeEventListener('touchstart', handleTouchStart);
283
+ tourSlider.removeEventListener('touchmove', handleTouchMove);
284
+ }
285
+ })
286
+
287
+ $: iconHref = icon || iconDefault
288
+
289
+ $: endpoint && startupUpdateListener();
290
+ $: tourSlider && addEventListeners();
291
+ $: session && setSession();
292
+ $: lang && setActiveLanguage();
293
+ $: looptime && setSlideAutoInterval()
294
+ $: currentTournament = tournamentList[currentTournamentIdx];
295
+ $: isLast = currentTournamentIdx == tournamentList.length - 1;
296
+ $: isFirst = currentTournamentIdx == 0;
297
+ $: tournamentsshownnumber && lang && resetSliderListener();
298
+ </script>
299
+
300
+ <div part="Tournaments" class="casino-tournaments-slider-controller" bind:this={tourSlider}>
301
+ <div part="Tournaments_ArrowLeft" class="ArrowLeft {isFirst ? 'Disabled':''}" on:click="{()=>slideTo(-1)}">
302
+ <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
303
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
304
+ </svg>
305
+ </div>
306
+ {#if (!tournamentList )}
307
+ <div part="TournamentLoading" class="TournamentInfo SearchLoading" style="height: 200px">
308
+ <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" >{$_(`tournamentsSlider.loading`)}</span></div>
309
+ <div part="TournamentInfo_Rank" class="rank">
310
+ <casino-tournaments-rank displayin="col" showicon="false" userrank="-" prize='-' overallrank="-" tournamentid=""></casino-tournaments-rank>
311
+ </div>
312
+ <div part="TournamentInfo_Points" class="circle">
313
+ </div>
314
+ </div>
315
+ {/if}
316
+ {#if (tournamentList && tournamentList.length > 0)}
317
+ <div part="TournamentInfo" class="TournamentInfo">
318
+ <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" on:click={() => detailsAction(currentTournament.id)}>{currentTournament.name}</span></div>
319
+ <div part="TournamentInfo_Rank" class="rank">
320
+ <casino-tournaments-rank displayin="col" showicon="false" userrank="{currentTournament.rank}"
321
+ prize='{currentTournament.prize}' overallrank="{currentTournament.overallRank}"
322
+ tournamentid="{currentTournament.id}"></casino-tournaments-rank>
323
+ </div>
324
+ <div part="TournamentInfo_Points" class="circle">
325
+ {#each tournamentList as item, idx}
326
+ <svg class="{currentTournamentIdx == idx ? 'active' : ''}" width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
327
+ <circle cx="2.77888" cy="2.50837" r="2.28571" fill="currentColor" stroke="currentColor" />
328
+ </svg>
329
+ {/each}
330
+ </div>
331
+ </div>
332
+ {/if}
333
+ <div part="Tournaments_ArrowRight" class="ArrowRight" on:click="{()=>slideTo(1)}">
334
+ <svg width="6" height="10" fill="currentColor" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
335
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4.93488 5.75848L5.79688 4.89648L1.48689 0.586501L0.624894 1.4485L4.07278 4.89638L0.624326 8.34484L1.48632 9.20683L4.93478 5.75838L4.93488 5.75848Z"/>
336
+ </svg>
337
+ {#if isLast}
338
+ <svg width="6" height="10" fill="currentColor" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
339
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4.93488 5.75848L5.79688 4.89648L1.48689 0.586501L0.624894 1.4485L4.07278 4.89638L0.624326 8.34484L1.48632 9.20683L4.93478 5.75838L4.93488 5.75848Z"/>
340
+ </svg>
341
+ {/if}
342
+ </div>
343
+ </div>
344
+
345
+ <section id="animator" bind:this={animatorRef} part="Animator" on:click="{() => onClickAnimator()}">
346
+ <div class="svg" part="Icon">
347
+ <svg width={iconsize} height={iconsize} viewBox={`0 0 ${iconsize} ${iconsize}`} fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
348
+ <rect width={iconsize} height={iconsize} fill="url(#pattern0)"/>
349
+ <defs>
350
+ <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
351
+ <use xlink:href="#image0_2606_356" transform="scale(0.00195312)"/>
352
+ </pattern>
353
+ <image
354
+ id="image0_2606_356"
355
+ width="512"
356
+ height="512"
357
+ xlink:href={iconHref}
358
+ />
359
+ </defs>
360
+ </svg>
361
+ </div>
362
+
363
+ <div class="restoreButton" part="RestoreButton">
364
+ <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
365
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
366
+ </svg>
367
+ <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
368
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
369
+ </svg>
370
+ </div>
371
+ </section>
372
+
373
+ <style lang="scss">
374
+ ::host{
375
+ }
376
+ .casino-tournaments-slider-controller {
377
+ position: relative;
378
+ width: 100%;
379
+ background: #212223;
380
+ color: #fff;
381
+ display: inline-flex;
382
+ padding: 10px 5px;
383
+ border: 1px solid #ff8364;
384
+ border-radius: 5px;
385
+ min-height: 70px;
386
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
387
+ }
388
+ .TournamentInfo{
389
+ width: calc(100% - 4px);
390
+ padding: 2px;
391
+ .name{
392
+ white-space: nowrap;
393
+ overflow: auto;
394
+ width: 99%;
395
+ text-align: center;
396
+ text-transform: capitalize;
397
+ font-size: 11px;
398
+ margin-bottom: 5px;
399
+ cursor: pointer;
400
+ }
401
+ .circle{text-align: center; height: 7px;
402
+ height: 5px;
403
+ margin-top: 3px;
404
+ svg{color: #C4C4C4; margin: 0 2px; vertical-align: top; margin-top: 3px;}
405
+ svg.active{color: white}
406
+ }
407
+ }
408
+ .ArrowLeft{
409
+ left: 1px;
410
+ }
411
+ .ArrowRight{
412
+ right: 1px;
413
+ }
414
+
415
+ .ArrowLeft, .ArrowRight{
416
+ &.Disabled svg{color: darkgrey}
417
+ position: absolute;
418
+ cursor: pointer;
419
+ top: calc(50% - 7px);
420
+ svg{
421
+ vertical-align: middle;
422
+ width: 11px;
423
+ height: 11px;
424
+ color: #FF8364;
425
+ }
426
+ margin: 0px;
427
+ display: flex;
428
+ width: 7px;
429
+ }
430
+
431
+ section#animator {
432
+ position: absolute;
433
+ right: 0;
434
+ top: 0;
435
+ opacity: 0;
436
+ display: none;
437
+ cursor: pointer;
438
+ text-align: center;
439
+
440
+ align-items: center;
441
+ flex-direction: column;
442
+
443
+ .restoreButton {
444
+ color: #000;
445
+ display: inline-flex;
446
+ }
447
+ }
448
+
449
+ casino-tournaments-rank::part(Rank), casino-tournaments-rank::part(Prize){
450
+ background-color: transparent;
451
+ padding: 0px;
452
+ margin: 0px;
453
+ line-height: 14px;
454
+ }
455
+ casino-tournaments-rank::part(RankText), casino-tournaments-rank::part(PrizeText){
456
+ line-height: 16px;
457
+ margin: auto;
458
+ }
459
+ casino-tournaments-rank::part(Rank_Arror_UP), casino-tournaments-rank::part(Rank_Arror_Down){
460
+ padding: 0px 3px;
461
+ }
462
+ casino-tournaments-rank::part(PrizeText){
463
+ font-weight: normal;
464
+ }
465
+ casino-tournaments-rank::part(Rank){
466
+ color: #ff8364;
467
+ font-size: 10px;
468
+ }
469
+ casino-tournaments-rank::part(Prize){
470
+ color: #fdd500;
471
+ font-size: 10px;
472
+ }
473
+ </style>