@everymatrix/casino-tournaments-limited-controller 1.5.5 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@everymatrix/casino-tournaments-limited-controller",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.6.0",
|
4
4
|
"main": "index.js",
|
5
5
|
"svelte": "src/index.ts",
|
6
6
|
"scripts": {
|
@@ -36,5 +36,5 @@
|
|
36
36
|
"publishConfig": {
|
37
37
|
"access": "public"
|
38
38
|
},
|
39
|
-
"gitHead": "
|
39
|
+
"gitHead": "e4b57a534bdee7d09fc53a7b49e31338bc1a3f00"
|
40
40
|
}
|
@@ -4,6 +4,7 @@
|
|
4
4
|
import { onMount } from "svelte";
|
5
5
|
import { formatDate } from './date'
|
6
6
|
import icon from './icon'
|
7
|
+
import './private.loader.svelte'
|
7
8
|
|
8
9
|
import {
|
9
10
|
_fetch,
|
@@ -23,6 +24,7 @@
|
|
23
24
|
} from "./message";
|
24
25
|
|
25
26
|
import '@everymatrix/casino-tournaments-tab'
|
27
|
+
import { translations } from './translations'
|
26
28
|
|
27
29
|
type State = 'Scheduled' | 'Ongoing' | 'Finished'
|
28
30
|
|
@@ -30,7 +32,7 @@
|
|
30
32
|
export let lang: string = 'en'
|
31
33
|
export let session: string = ''
|
32
34
|
export let state: State | undefined = undefined
|
33
|
-
export let states: string = ''
|
35
|
+
export let states: string = 'Scheduled,Ongoing,Finished'
|
34
36
|
export let filter: string = ''
|
35
37
|
|
36
38
|
export let clientstyling:string = '';
|
@@ -42,6 +44,7 @@
|
|
42
44
|
let eventSource = undefined
|
43
45
|
let svgSize: number = 0
|
44
46
|
let href = icon
|
47
|
+
let isLoading:boolean = true
|
45
48
|
|
46
49
|
type Tournament = {
|
47
50
|
id: string
|
@@ -64,36 +67,39 @@
|
|
64
67
|
|
65
68
|
let tournamentsMatrix: TournamentsMatrix = {}
|
66
69
|
|
67
|
-
const
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
})
|
70
|
+
const setTournamentsMatrix = (data) => {
|
71
|
+
let _tournamentsMatrix: TournamentsMatrix = {}
|
72
|
+
__states.map(s => {
|
73
|
+
if(!_tournamentsMatrix[s]){
|
74
|
+
_tournamentsMatrix[s] = []
|
75
|
+
}
|
76
|
+
})
|
75
77
|
|
76
|
-
|
78
|
+
// data.items = []
|
79
|
+
data.items.map(_item => {
|
77
80
|
|
78
|
-
|
81
|
+
const { id, nameOrTitle: title, endTime: enddate } = _item.tournament
|
79
82
|
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
83
|
+
const tournamentComposed: TournamentForRendering = {
|
84
|
+
id,
|
85
|
+
title,
|
86
|
+
rank: _item.leaderBoard && `#${_item.leaderBoard.rank}/${_item.endRank}`,
|
87
|
+
enddate,
|
88
|
+
prize: _item.leaderBoard && _item.leaderBoard.prizeName,
|
89
|
+
}
|
87
90
|
|
88
|
-
|
89
|
-
|
91
|
+
_tournamentsMatrix[matchStatusFromApiToView(_item.tournament.state)].push(tournamentComposed)
|
92
|
+
})
|
90
93
|
|
91
|
-
|
92
|
-
|
94
|
+
tournamentsMatrix = _tournamentsMatrix
|
95
|
+
}
|
96
|
+
|
97
|
+
const eventSourceHandler = composeEventSourceMessageHandler({
|
98
|
+
"PlayerLeaderBoardsUpdate": (data) => {
|
99
|
+
setTournamentsMatrix(data)
|
93
100
|
statesNeedSubscribe.map(s => {
|
94
101
|
postMessageTabTotalUpdate(s, tournamentsMatrix[s].length)
|
95
102
|
})
|
96
|
-
|
97
103
|
},
|
98
104
|
'TournamentUpdate': (data) => {
|
99
105
|
if(data.item){
|
@@ -151,12 +157,8 @@
|
|
151
157
|
|
152
158
|
const init = () => {
|
153
159
|
subscribeApi(0, 30)
|
154
|
-
|
155
160
|
setLocale(lang)
|
156
|
-
|
157
|
-
postMessageTabLocaleTextUpdate('Scheduled', $_('tournamentsLimitedController.Scheduled'))
|
158
|
-
postMessageTabLocaleTextUpdate('Ongoing', $_('tournamentsLimitedController.Ongoing'))
|
159
|
-
postMessageTabLocaleTextUpdate('Finished', `${$_(`tournamentsLimitedController.Finished`)} (${$_('tournamentsLimitedController.last')} 48h)`)
|
161
|
+
setTabTexts()
|
160
162
|
}
|
161
163
|
|
162
164
|
const setClientStyling = ():void => {
|
@@ -181,6 +183,15 @@
|
|
181
183
|
});
|
182
184
|
}
|
183
185
|
|
186
|
+
const setTabTexts = () => {
|
187
|
+
setTimeout(() => {
|
188
|
+
const text = translations[lang]['tournamentsLimitedController']
|
189
|
+
postMessageTabLocaleTextUpdate('Scheduled', text['Scheduled'])
|
190
|
+
postMessageTabLocaleTextUpdate('Ongoing', text['Ongoing'])
|
191
|
+
postMessageTabLocaleTextUpdate('Finished', `${text[`Finished`]} (${text['last']} 48h)`)
|
192
|
+
}, 1)
|
193
|
+
}
|
194
|
+
|
184
195
|
onMount(() => {
|
185
196
|
return () => {
|
186
197
|
if(eventSource){
|
@@ -197,9 +208,15 @@
|
|
197
208
|
$: clientstyling && customStylingContainer && setClientStyling();
|
198
209
|
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
199
210
|
|
211
|
+
$: lang && setTabTexts()
|
212
|
+
|
213
|
+
$: Object.keys(tournamentsMatrix).length && (() => {
|
214
|
+
isLoading = false
|
215
|
+
setTabTexts()
|
216
|
+
})()
|
200
217
|
</script>
|
201
218
|
|
202
|
-
<div class="
|
219
|
+
<div class="Root" part="Root" bind:this={customStylingContainer}>
|
203
220
|
|
204
221
|
<div class="top-wrapper">
|
205
222
|
<div class="svg" bind:clientWidth={svgSize}>
|
@@ -231,65 +248,64 @@
|
|
231
248
|
}'
|
232
249
|
>X</div>
|
233
250
|
</div>
|
234
|
-
|
235
|
-
|
236
|
-
<
|
237
|
-
|
238
|
-
tab={state}
|
239
|
-
/>
|
240
|
-
|
241
|
-
<div class='list header'>
|
242
|
-
{#each [
|
243
|
-
$_('tournamentsLimitedController.name'),
|
244
|
-
$_('tournamentsLimitedController.rank'),
|
245
|
-
$_('tournamentsLimitedController.enddate'),
|
246
|
-
$_('tournamentsLimitedController.prize')
|
247
|
-
] as item}
|
248
|
-
<div>{item}</div>
|
249
|
-
{/each}
|
251
|
+
|
252
|
+
{#if isLoading}
|
253
|
+
<div class="Loading">
|
254
|
+
<casino-tournaments-limited-controller-loader />
|
250
255
|
</div>
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
}}>
|
270
|
-
{item.title}
|
271
|
-
</span>
|
272
|
-
{/if}
|
273
|
-
|
274
|
-
{#if key === 'enddate'}
|
275
|
-
{formatDate(item.enddate)}
|
276
|
-
{/if}
|
277
|
-
{/if}
|
278
|
-
|
279
|
-
{#if key === 'rank'}
|
280
|
-
<span class={item.prize ? "prize-active" : ''}>{item.rank || ' -'}</span>
|
281
|
-
{/if}
|
282
|
-
|
283
|
-
{#if key === 'prize'}
|
284
|
-
<span class={item.prize ? "prize-active" : ''}>{item.prize || ' -'}</span>
|
285
|
-
{/if}
|
286
|
-
</div>
|
256
|
+
{:else}
|
257
|
+
<section>
|
258
|
+
<casino-tournaments-tab
|
259
|
+
tabs={states}
|
260
|
+
tab={state}
|
261
|
+
/>
|
262
|
+
|
263
|
+
{#if list}
|
264
|
+
<table>
|
265
|
+
<thead>
|
266
|
+
<tr>
|
267
|
+
{#each [
|
268
|
+
$_('tournamentsLimitedController.name'),
|
269
|
+
$_('tournamentsLimitedController.rank'),
|
270
|
+
$_('tournamentsLimitedController.enddate'),
|
271
|
+
$_('tournamentsLimitedController.prize')
|
272
|
+
] as item}
|
273
|
+
<th>{item}</th>
|
287
274
|
{/each}
|
288
|
-
|
289
|
-
</
|
290
|
-
|
291
|
-
|
292
|
-
|
275
|
+
</tr>
|
276
|
+
</thead>
|
277
|
+
{#each list as item, i}
|
278
|
+
<tbody>
|
279
|
+
<tr>
|
280
|
+
{#if item}
|
281
|
+
|
282
|
+
<td class="Title" part="Title" on:click={() => {
|
283
|
+
window.postMessage({
|
284
|
+
type: 'MyTournamentFromNavClicked',
|
285
|
+
tournamentId: item.id,
|
286
|
+
showLeaderboard: true
|
287
|
+
}, window.location.href)
|
288
|
+
}}>
|
289
|
+
{item.title}
|
290
|
+
</td>
|
291
|
+
<td class:active={item.prize} class="Rank">{item.rank || ' -'}</td>
|
292
|
+
<td class="EndDate" part="EndDate" nowrap>
|
293
|
+
{#each formatDate(item.enddate) as s}
|
294
|
+
<p>{s}</p>
|
295
|
+
{/each}
|
296
|
+
</td>
|
297
|
+
<td class:active={item.prize} class="Prize">{item.prize || ' -'}</td>
|
298
|
+
{/if}
|
299
|
+
</tr>
|
300
|
+
</tbody>
|
301
|
+
{/each}
|
302
|
+
</table>
|
303
|
+
{:else}
|
304
|
+
<div class="NoContent"></div>
|
305
|
+
{/if}
|
306
|
+
|
307
|
+
</section>
|
308
|
+
{/if}
|
293
309
|
</div>
|
294
310
|
|
295
311
|
<style lang="scss">
|
@@ -310,7 +326,7 @@
|
|
310
326
|
|
311
327
|
$vw_base: 320px;
|
312
328
|
@function vw($px) {
|
313
|
-
|
329
|
+
@return ($px / $vw_base) * 100vw;
|
314
330
|
}
|
315
331
|
|
316
332
|
.CloseButton {
|
@@ -321,7 +337,11 @@
|
|
321
337
|
cursor: pointer
|
322
338
|
}
|
323
339
|
|
324
|
-
.
|
340
|
+
.NoContent {
|
341
|
+
padding: 120px;
|
342
|
+
}
|
343
|
+
|
344
|
+
.Root {
|
325
345
|
background: #282828;
|
326
346
|
|
327
347
|
.top-wrapper {
|
@@ -348,65 +368,58 @@
|
|
348
368
|
|
349
369
|
section {
|
350
370
|
padding: 0 vw(12px);
|
351
|
-
|
352
371
|
}
|
372
|
+
}
|
353
373
|
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
color: #F7F7F7;
|
360
|
-
}
|
361
|
-
}
|
362
|
-
|
363
|
-
display: flex;
|
364
|
-
align-items: center;
|
365
|
-
font-size: vw(12px);
|
366
|
-
|
367
|
-
@import url('https://rsms.me/inter/inter.css');
|
368
|
-
div { font: initial; font-family: 'Inter', sans-serif; }
|
369
|
-
@supports (font-variation-settings: normal) {
|
370
|
-
div { font: initial; font-family: 'Inter var', sans-serif; }
|
371
|
-
}
|
372
|
-
|
373
|
-
div {
|
374
|
-
display: flex;
|
375
|
-
padding: vw(8px) vw(6.45px);
|
376
|
-
// text-align: center;
|
377
|
-
word-break: break-word;
|
378
|
-
font-size: vw(12px) !important;
|
379
|
-
color: #B5B5B5;
|
380
|
-
|
381
|
-
&:nth-child(1) {
|
382
|
-
flex: 0 0 25%;
|
383
|
-
}
|
384
|
-
|
385
|
-
&:nth-child(2) {
|
386
|
-
flex: 0 0 25%;
|
387
|
-
}
|
374
|
+
table {
|
375
|
+
width: 100%;
|
376
|
+
border-collapse: collapse;
|
377
|
+
font-size: vw(12px);
|
378
|
+
line-height: vw(14px);
|
388
379
|
|
389
|
-
|
390
|
-
|
391
|
-
|
380
|
+
|
381
|
+
@import url('https://rsms.me/inter/inter.css');
|
382
|
+
div { font: initial; font-family: 'Inter', sans-serif; }
|
383
|
+
@supports (font-variation-settings: normal) {
|
384
|
+
div { font: initial; font-family: 'Inter var', sans-serif; }
|
385
|
+
}
|
392
386
|
|
393
|
-
|
394
|
-
|
395
|
-
|
387
|
+
thead {
|
388
|
+
|
389
|
+
background: #1C1C1C;
|
390
|
+
color: #F7F7F7;
|
391
|
+
}
|
396
392
|
|
397
|
-
|
398
|
-
|
399
|
-
|
393
|
+
th, td {
|
394
|
+
padding: vw(8px) vw(5px);
|
395
|
+
overflow-wrap: break-word;
|
396
|
+
}
|
397
|
+
|
398
|
+
td {
|
399
|
+
color: #B5B5B5;
|
400
|
+
}
|
401
|
+
}
|
402
|
+
|
403
|
+
.Title {
|
404
|
+
color: #FF8364;
|
405
|
+
text-decoration-line: underline;
|
406
|
+
word-break: break-word;
|
400
407
|
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
408
|
+
&:active {
|
409
|
+
opacity: 0.6;
|
410
|
+
}
|
411
|
+
}
|
405
412
|
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
}
|
413
|
+
.Prize .Rank {
|
414
|
+
&:active {
|
415
|
+
color: #FFD700;
|
410
416
|
}
|
411
417
|
}
|
418
|
+
|
419
|
+
.Loading {
|
420
|
+
display: flex;
|
421
|
+
justify-content: center;
|
422
|
+
padding: vw(30px);
|
423
|
+
}
|
424
|
+
|
412
425
|
</style>
|
package/src/date.js
CHANGED
@@ -6,20 +6,21 @@ export function formatDate(date) {
|
|
6
6
|
|
7
7
|
const _date = new Date(date)
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
str += [
|
9
|
+
const day = [
|
12
10
|
padTo2Digits(_date.getDate()),
|
13
11
|
padTo2Digits(_date.getMonth() + 1),
|
14
12
|
_date.getFullYear() % 100,
|
15
13
|
].join('.')
|
16
|
-
|
17
|
-
|
14
|
+
|
15
|
+
const hm = [
|
18
16
|
padTo2Digits(_date.getHours()),
|
19
17
|
padTo2Digits(_date.getMinutes()),
|
20
18
|
].join(':')
|
21
|
-
str += ' '
|
22
|
-
str += _date.getHours() >= 12 ? 'PM' : 'AM'
|
23
19
|
|
24
|
-
|
20
|
+
const xm = _date.getHours() >= 12 ? 'PM' : 'AM'
|
21
|
+
|
22
|
+
return [
|
23
|
+
day,
|
24
|
+
hm + ' ' + xm
|
25
|
+
]
|
25
26
|
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
<svelte:options tag={'casino-tournaments-limited-controller-loader'} />
|
2
|
+
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
3
|
+
<style lang="scss">
|
4
|
+
|
5
|
+
.lds-ellipsis {
|
6
|
+
display: inline-block;
|
7
|
+
position: relative;
|
8
|
+
width: 80px;
|
9
|
+
height: 80px;
|
10
|
+
}
|
11
|
+
.lds-ellipsis div {
|
12
|
+
position: absolute;
|
13
|
+
top: 33px;
|
14
|
+
width: 13px;
|
15
|
+
height: 13px;
|
16
|
+
border-radius: 50%;
|
17
|
+
background: #fff;
|
18
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
19
|
+
}
|
20
|
+
.lds-ellipsis div:nth-child(1) {
|
21
|
+
left: 8px;
|
22
|
+
animation: lds-ellipsis1 0.6s infinite;
|
23
|
+
}
|
24
|
+
.lds-ellipsis div:nth-child(2) {
|
25
|
+
left: 8px;
|
26
|
+
animation: lds-ellipsis2 0.6s infinite;
|
27
|
+
}
|
28
|
+
.lds-ellipsis div:nth-child(3) {
|
29
|
+
left: 32px;
|
30
|
+
animation: lds-ellipsis2 0.6s infinite;
|
31
|
+
}
|
32
|
+
.lds-ellipsis div:nth-child(4) {
|
33
|
+
left: 56px;
|
34
|
+
animation: lds-ellipsis3 0.6s infinite;
|
35
|
+
}
|
36
|
+
@keyframes lds-ellipsis1 {
|
37
|
+
0% {
|
38
|
+
transform: scale(0);
|
39
|
+
}
|
40
|
+
100% {
|
41
|
+
transform: scale(1);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
@keyframes lds-ellipsis3 {
|
45
|
+
0% {
|
46
|
+
transform: scale(1);
|
47
|
+
}
|
48
|
+
100% {
|
49
|
+
transform: scale(0);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
@keyframes lds-ellipsis2 {
|
53
|
+
0% {
|
54
|
+
transform: translate(0, 0);
|
55
|
+
}
|
56
|
+
100% {
|
57
|
+
transform: translate(24px, 0);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
</style>
|