@everymatrix/casino-tournaments-page-controller 0.0.228 → 0.0.232
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.
package/index.html
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
</h1>
|
|
30
30
|
</header>
|
|
31
31
|
|
|
32
|
-
<casino-tournaments-page-controller session="
|
|
32
|
+
<casino-tournaments-page-controller session="d91e9d22-68e4-474c-8c5a-d1915ce9ffd8" namemask="opap" userid="3976988" showleaderboard="true" endpoint="https://demo-api.stage.norway.everymatrix.com/v1" cmsendpoint="https://casinouat.pamestoixima.gr/apijson/en/tournaments/906333318049055456" lang="en" loginevent="Login" registerevent="Register" tourid="919351011811343804"></casino-tournaments-page-controller>
|
|
33
33
|
|
|
34
34
|
</body>
|
|
35
35
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everymatrix/casino-tournaments-page-controller",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.232",
|
|
4
4
|
"main": "dist/casino-tournaments-page-controller.js",
|
|
5
5
|
"svelte": "src/index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "3c2127b4476d6b57667cffae8f76e819c7941042"
|
|
41
41
|
}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
<svelte:options tag={null}
|
|
1
|
+
<svelte:options tag={null}/>
|
|
2
2
|
|
|
3
3
|
<script lang="ts">
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
4
|
+
import {onMount} from 'svelte';
|
|
5
|
+
import {isMobile, getDevice, checkSession} from 'rvhelper';
|
|
6
|
+
import {_, addNewMessages, setLocale, setupI18n} from './i18n';
|
|
7
|
+
import {TournamentsPageTranslations} from './translations';
|
|
8
|
+
import {EventSourcePolyfill} from 'event-source-polyfill';
|
|
9
9
|
|
|
10
10
|
import '@everymatrix/casino-tournaments-page';
|
|
11
11
|
import '@everymatrix/casino-tournaments-details';
|
|
12
12
|
import '@everymatrix/casino-tournaments-thumbnail-controller';
|
|
13
13
|
import '@everymatrix/casino-tournaments-table';
|
|
14
14
|
|
|
15
|
-
export let session:string = '';
|
|
16
|
-
export let userid:string = '';
|
|
17
|
-
export let tourid:string = '';
|
|
18
|
-
export let endpoint:string = '';
|
|
19
|
-
export let showleaderboard:string = '';
|
|
20
|
-
export let cmsendpoint:string = '';
|
|
21
|
-
export let lang:string = '';
|
|
22
|
-
export let navigationbackbutton:string = 'Default';
|
|
23
|
-
export let currency:string = 'EUR';
|
|
24
|
-
export let tablelimit:string = '30';
|
|
25
|
-
export let namemask:string = '';
|
|
15
|
+
export let session: string = '';
|
|
16
|
+
export let userid: string = '';
|
|
17
|
+
export let tourid: string = '';
|
|
18
|
+
export let endpoint: string = '';
|
|
19
|
+
export let showleaderboard: string = '';
|
|
20
|
+
export let cmsendpoint: string = '';
|
|
21
|
+
export let lang: string = '';
|
|
22
|
+
export let navigationbackbutton: string = 'Default';
|
|
23
|
+
export let currency: string = 'EUR';
|
|
24
|
+
export let tablelimit: string = '30';
|
|
25
|
+
export let namemask: string = '';
|
|
26
26
|
|
|
27
27
|
// Variables of topics for communication
|
|
28
28
|
let sessionTopic;
|
|
29
29
|
|
|
30
|
-
let isLoggedIn:boolean = false;
|
|
31
|
-
let sessionID:string = '';
|
|
32
|
-
let playerID:string = '';
|
|
33
|
-
let isLoading:boolean = true;
|
|
34
|
-
let tournamentDescription:Array<any> = [];
|
|
30
|
+
let isLoggedIn: boolean = false;
|
|
31
|
+
let sessionID: string = '';
|
|
32
|
+
let playerID: string = '';
|
|
33
|
+
let isLoading: boolean = true;
|
|
34
|
+
let tournamentDescription: Array<any> = [];
|
|
35
35
|
|
|
36
|
-
let tournamentDetails:any = undefined;
|
|
37
|
-
let tournamentTableData:any = undefined;
|
|
36
|
+
let tournamentDetails: any = undefined;
|
|
37
|
+
let tournamentTableData: any = undefined;
|
|
38
38
|
|
|
39
39
|
let userAgent = window.navigator.userAgent;
|
|
40
40
|
|
|
41
|
-
let showTable:boolean = false;
|
|
42
|
-
let firstRowData:any = {};
|
|
43
|
-
let firstRowAvailable:boolean = false;
|
|
41
|
+
let showTable: boolean = false;
|
|
42
|
+
let firstRowData: any = {};
|
|
43
|
+
let firstRowAvailable: boolean = false;
|
|
44
44
|
|
|
45
|
-
let tableUpdateEventSource:EventSourcePolyfill;
|
|
45
|
+
let tableUpdateEventSource: EventSourcePolyfill;
|
|
46
46
|
|
|
47
|
-
setupI18n({
|
|
47
|
+
setupI18n({withLocale: 'en', translations: {}});
|
|
48
48
|
|
|
49
|
-
Object.keys(TournamentsPageTranslations).forEach((item:any) => {
|
|
49
|
+
Object.keys(TournamentsPageTranslations).forEach((item: any) => {
|
|
50
50
|
addNewMessages(item, TournamentsPageTranslations[item]);
|
|
51
51
|
});
|
|
52
52
|
|
|
@@ -54,53 +54,53 @@
|
|
|
54
54
|
const tableColumns = ['Position', 'Name', 'Score'];
|
|
55
55
|
|
|
56
56
|
// @TODO data type
|
|
57
|
-
const transformTableData = (data:any) => {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
57
|
+
const transformTableData = (data: any) => {
|
|
58
|
+
let tableData: any = [];
|
|
59
|
+
|
|
60
|
+
if (data && data.length > 0) {
|
|
61
|
+
data.forEach((item: any) => {
|
|
62
|
+
if (item.unqualified == false) {
|
|
63
|
+
if (item.userID == playerID) {
|
|
64
|
+
firstRowAvailable = true;
|
|
65
|
+
firstRowData = {
|
|
66
|
+
Position: item.rank,
|
|
67
|
+
Name: item.shortName,
|
|
68
|
+
Score: item.score,
|
|
69
|
+
};
|
|
70
|
+
} else {
|
|
71
|
+
tableData.push({
|
|
72
|
+
Position: item.rank,
|
|
73
|
+
Name: item.shortName,
|
|
74
|
+
Score: item.score,
|
|
75
|
+
});
|
|
76
|
+
}
|
|
76
77
|
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
tableUpdateMessageHandler = (message:any)=>{
|
|
84
|
-
if(!message.data){
|
|
81
|
+
return tableData;
|
|
82
|
+
},
|
|
83
|
+
tableUpdateMessageHandler = (message: any) => {
|
|
84
|
+
if (!message.data) {
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
|
-
try{
|
|
88
|
-
let messageData:any = message.data;
|
|
89
|
-
let updateTableData:any = JSON.parse(messageData);
|
|
90
|
-
if(!updateTableData || !updateTableData.Items){
|
|
87
|
+
try {
|
|
88
|
+
let messageData: any = message.data;
|
|
89
|
+
let updateTableData: any = JSON.parse(messageData);
|
|
90
|
+
if (!updateTableData || !updateTableData.Items) {
|
|
91
91
|
return;
|
|
92
92
|
}
|
|
93
93
|
let newTableData = transformTableData(updateTableData.Items);
|
|
94
|
-
if(firstRowAvailable && firstRowData){
|
|
95
|
-
window.postMessage({
|
|
94
|
+
if (firstRowAvailable && firstRowData) {
|
|
95
|
+
window.postMessage({type: 'CasinoTableFirstRowData', tableData: firstRowData}, window.location.href);
|
|
96
96
|
}
|
|
97
|
-
window.postMessage({
|
|
98
|
-
}catch(err){
|
|
97
|
+
window.postMessage({type: 'CasinoTableDataUpdate', tableData: newTableData}, window.location.href);
|
|
98
|
+
} catch (err) {
|
|
99
99
|
console.error(err);
|
|
100
100
|
}
|
|
101
101
|
},
|
|
102
|
-
startupTableDataChangeListener = (tournamentID:String, searchParams:any) =>{
|
|
103
|
-
let endpointURL:String = `${endpoint}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&`;
|
|
102
|
+
startupTableDataChangeListener = (tournamentID: String, searchParams: any) => {
|
|
103
|
+
let endpointURL: String = `${endpoint}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&`;
|
|
104
104
|
endpointURL += searchParams.toString();
|
|
105
105
|
tableUpdateEventSource = new EventSourcePolyfill(endpointURL, {
|
|
106
106
|
headers: {
|
|
@@ -108,12 +108,12 @@
|
|
|
108
108
|
'X-SessionID': session
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
-
if(typeof(tableUpdateEventSource) != "undefined"){
|
|
111
|
+
if (typeof (tableUpdateEventSource) != "undefined") {
|
|
112
112
|
tableUpdateEventSource.addEventListener('message', tableUpdateMessageHandler);
|
|
113
113
|
}
|
|
114
|
-
|
|
114
|
+
};
|
|
115
115
|
|
|
116
|
-
const getData = (endpointURL:String, tourID:String) => {
|
|
116
|
+
const getData = (endpointURL: String, tourID: String) => {
|
|
117
117
|
let url = new URL(endpointURL + `/tournaments/${tourID}`);
|
|
118
118
|
let reqHeaders = new Headers();
|
|
119
119
|
|
|
@@ -128,13 +128,13 @@
|
|
|
128
128
|
};
|
|
129
129
|
|
|
130
130
|
fetch(url.href, requestOptions)
|
|
131
|
-
.then((res:any) => res.json())
|
|
132
|
-
.then((res:any) => {
|
|
131
|
+
.then((res: any) => res.json())
|
|
132
|
+
.then((res: any) => {
|
|
133
133
|
tournamentDetails = res.item;
|
|
134
134
|
});
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
const getTableData = (endpointURL:String, tourID:String) => {
|
|
137
|
+
const getTableData = (endpointURL: String, tourID: String) => {
|
|
138
138
|
let url = new URL(endpointURL + `/tournaments/${tourID}/leaderboard`);
|
|
139
139
|
let reqHeaders = new Headers();
|
|
140
140
|
|
|
@@ -152,22 +152,25 @@
|
|
|
152
152
|
};
|
|
153
153
|
|
|
154
154
|
fetch(url, requestOptions)
|
|
155
|
-
.then((res:any) => res.json())
|
|
156
|
-
.then((res:any) => {
|
|
155
|
+
.then((res: any) => res.json())
|
|
156
|
+
.then((res: any) => {
|
|
157
157
|
tournamentTableData = transformTableData(res.items);
|
|
158
158
|
showTable = true;
|
|
159
159
|
|
|
160
160
|
// @TODO data is not iterable error fix
|
|
161
|
-
window.postMessage({
|
|
162
|
-
|
|
161
|
+
window.postMessage({
|
|
162
|
+
type: 'CasinoTableData',
|
|
163
|
+
tableData: tournamentTableData.slice(0, tablelimit)
|
|
164
|
+
}, window.location.href);
|
|
165
|
+
window.postMessage({type: 'CasinoTableColumns', tableColumns}, window.location.href);
|
|
163
166
|
if (firstRowAvailable) {
|
|
164
|
-
window.postMessage({
|
|
167
|
+
window.postMessage({type: 'CasinoTableFirstRowData', tableData: firstRowData}, window.location.href);
|
|
165
168
|
}
|
|
166
169
|
startupTableDataChangeListener(tourID, url.searchParams);
|
|
167
170
|
});
|
|
168
171
|
}
|
|
169
172
|
|
|
170
|
-
const messageHandler = (e:any) => {
|
|
173
|
+
const messageHandler = (e: any) => {
|
|
171
174
|
if (e.data && e.data.type == 'UserSessionID') {
|
|
172
175
|
isLoggedIn = true;
|
|
173
176
|
sessionID = e.data.session;
|
|
@@ -183,7 +186,7 @@
|
|
|
183
186
|
// event value, it will emit the 'RedirectBack' event which will enable the client to handle the routing;
|
|
184
187
|
// else, if it has the 'Default' value, it will do a window.history.back()
|
|
185
188
|
if (navigationbackbutton == 'Event') {
|
|
186
|
-
window.postMessage({
|
|
189
|
+
window.postMessage({type: 'RedirectBack'}, window.location.href);
|
|
187
190
|
} else if (navigationbackbutton == 'Default') {
|
|
188
191
|
window.history.back();
|
|
189
192
|
}
|
|
@@ -209,8 +212,8 @@
|
|
|
209
212
|
|
|
210
213
|
const getDataFromCMS = () => {
|
|
211
214
|
fetch(`${cmsendpoint}?tournamentId=${tourid}`)
|
|
212
|
-
.then((res:any) => res.json())
|
|
213
|
-
.then((data:any) => {
|
|
215
|
+
.then((res: any) => res.json())
|
|
216
|
+
.then((data: any) => {
|
|
214
217
|
if (data && data.details) {
|
|
215
218
|
tournamentDescription = data.details;
|
|
216
219
|
}
|
|
@@ -236,64 +239,70 @@
|
|
|
236
239
|
<p>{$_('tournamentsPage.loading')}</p>
|
|
237
240
|
{:else}
|
|
238
241
|
<div class="TournamentsPage" part="TournamentsPage">
|
|
242
|
+
<div class="TournamentsSectionWrapper" part="TournamentsSectionWrapper">
|
|
239
243
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
</svg>
|
|
245
|
-
<p>{$_('tournamentsPage.back')}</p>
|
|
246
|
-
</div>
|
|
247
|
-
<!--<div class="NavButtons">
|
|
248
|
-
<div class="PrevButton">
|
|
249
|
-
<svg fill="none" stroke="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
244
|
+
<div class="TopButtons" part="TopButtons">
|
|
245
|
+
<div class="BackButton" part="BackButton" on:click={() => goBack()}>
|
|
246
|
+
<svg fill="none" stroke="currentColor" width="24" height="24" viewBox="0 0 24 24"
|
|
247
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
250
248
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
251
249
|
</svg>
|
|
252
|
-
<p>{$_('tournamentsPage.
|
|
250
|
+
<p>{$_('tournamentsPage.back')}</p>
|
|
253
251
|
</div>
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
userid={userid}
|
|
269
|
-
endpoint={endpoint}
|
|
270
|
-
tournamenturl={tournamentDetails.href}
|
|
271
|
-
showdetails="false"
|
|
272
|
-
showslider="true"
|
|
273
|
-
showenrolled="true"
|
|
274
|
-
fullsize={!!showleaderboard}
|
|
275
|
-
{lang}
|
|
276
|
-
{currency}
|
|
277
|
-
></casino-tournaments-thumbnail-controller>
|
|
278
|
-
{/if}
|
|
279
|
-
{#if tournamentDescription.length > 0}
|
|
280
|
-
{#each tournamentDescription as desc}
|
|
281
|
-
<casino-tournaments-details title={desc.title} text={desc.description}>
|
|
282
|
-
</casino-tournaments-details>
|
|
283
|
-
{/each}
|
|
284
|
-
{/if}
|
|
252
|
+
<!--<div class="NavButtons">
|
|
253
|
+
<div class="PrevButton">
|
|
254
|
+
<svg fill="none" stroke="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
255
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
256
|
+
</svg>
|
|
257
|
+
<p>{$_('tournamentsPage.previous')}</p>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="NextButton">
|
|
260
|
+
<p>{$_('tournamentsPage.next')}</p>
|
|
261
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
262
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
263
|
+
</svg>
|
|
264
|
+
</div>
|
|
265
|
+
</div>-->
|
|
285
266
|
</div>
|
|
286
267
|
|
|
287
|
-
<div class="
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
268
|
+
<div class="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}"
|
|
269
|
+
part="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}">
|
|
270
|
+
<div
|
|
271
|
+
class="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? 'TournamentCardDetails' : 'FullSize'}"
|
|
272
|
+
part="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? 'TournamentCardDetails' : 'FullSize'}">
|
|
273
|
+
{#if tournamentDetails}
|
|
274
|
+
<casino-tournaments-thumbnail-controller
|
|
275
|
+
session={session}
|
|
276
|
+
userid={userid}
|
|
277
|
+
endpoint={endpoint}
|
|
278
|
+
tournamenturl={tournamentDetails.href}
|
|
279
|
+
showdetails="false"
|
|
280
|
+
showslider="true"
|
|
281
|
+
showenrolled="true"
|
|
282
|
+
fullsize={!!showleaderboard}
|
|
283
|
+
{lang}
|
|
284
|
+
{currency}
|
|
285
|
+
></casino-tournaments-thumbnail-controller>
|
|
291
286
|
{/if}
|
|
292
|
-
|
|
293
|
-
|
|
287
|
+
{#if tournamentDescription.length > 0}
|
|
288
|
+
{#each tournamentDescription as desc}
|
|
289
|
+
<casino-tournaments-details title={desc.title} text={desc.description}>
|
|
290
|
+
</casino-tournaments-details>
|
|
291
|
+
{/each}
|
|
292
|
+
{/if}
|
|
293
|
+
</div>
|
|
294
294
|
|
|
295
|
-
|
|
295
|
+
<div class="{showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'}"
|
|
296
|
+
part="{showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'}">
|
|
297
|
+
{#if showleaderboard == "true"}
|
|
298
|
+
{#if showTable == true}
|
|
299
|
+
<casino-tournaments-table firstrow="true" sortable="false" {lang}></casino-tournaments-table>
|
|
300
|
+
{/if}
|
|
301
|
+
{/if}
|
|
302
|
+
</div>
|
|
296
303
|
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
297
306
|
</div>
|
|
298
307
|
{/if}
|
|
299
308
|
|
|
@@ -316,10 +325,17 @@
|
|
|
316
325
|
.TournamentsPage {
|
|
317
326
|
background: var(--emfe-w-color-contrast, #07072A);
|
|
318
327
|
width: 100%;
|
|
319
|
-
height: 100%;
|
|
320
328
|
color: var(--emfe-w-color-white, #FFFFFF);
|
|
321
329
|
}
|
|
322
330
|
|
|
331
|
+
.TournamentsSectionWrapper {
|
|
332
|
+
padding: 24px 0;
|
|
333
|
+
|
|
334
|
+
@media screen and (max-width: 1300px) {
|
|
335
|
+
padding: 24px 2.4%;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
323
339
|
.FullSize {
|
|
324
340
|
width: 100%;
|
|
325
341
|
}
|
|
@@ -339,6 +355,7 @@
|
|
|
339
355
|
display: inline-flex;
|
|
340
356
|
align-items: center;
|
|
341
357
|
cursor: pointer;
|
|
358
|
+
|
|
342
359
|
p {
|
|
343
360
|
font-size: 24px;
|
|
344
361
|
}
|
|
@@ -375,6 +392,7 @@
|
|
|
375
392
|
.TournamentContentDetails {
|
|
376
393
|
display: flex;
|
|
377
394
|
gap: 20px;
|
|
395
|
+
|
|
378
396
|
&.MobileClass {
|
|
379
397
|
flex-direction: column;
|
|
380
398
|
}
|
|
@@ -382,6 +400,7 @@
|
|
|
382
400
|
|
|
383
401
|
.TournamentCardDetails {
|
|
384
402
|
width: 420px;
|
|
403
|
+
|
|
385
404
|
&.MobileClass {
|
|
386
405
|
width: 100%;
|
|
387
406
|
}
|