@everymatrix/casino-collections-providers 1.44.0 → 1.45.2

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 DELETED
@@ -1,28 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset='utf-8'>
6
- <meta name='viewport' content='width=device-width,initial-scale=1'>
7
-
8
- <title>
9
- casino-collections-providers
10
- </title>
11
- <link rel="stylesheet" href="public/reset.css">
12
- <script src='dist/casino-collections-providers.js'></script>
13
- </head>
14
-
15
- <body>
16
-
17
- <div class="webcomponent">
18
- <casino-collections-providers endpoint='https://arenacasino.nwacdn.com' datasource="Casino" lang='en'
19
- type='vendor' titletype="logo">
20
- </casino-collections-providers>
21
- <casino-collections-providers endpoint='https://arenacasino.nwacdn.com' datasource="Casino" lang='en'
22
- type='collection' titletype="title">
23
- </casino-collections-providers>
24
- </div>
25
-
26
- </body>
27
-
28
- </html>
package/index.js DELETED
@@ -1 +0,0 @@
1
- import './dist/casino-collections-providers.js';
Binary file
package/public/reset.css DELETED
@@ -1,48 +0,0 @@
1
- /* http://meyerweb.com/eric/tools/css/reset/
2
- v2.0 | 20110126
3
- License: none (public domain)
4
- */
5
-
6
- html, body, div, span, applet, object, iframe,
7
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
- a, abbr, acronym, address, big, cite, code,
9
- del, dfn, em, img, ins, kbd, q, s, samp,
10
- small, strike, strong, sub, sup, tt, var,
11
- b, u, i, center,
12
- dl, dt, dd, ol, ul, li,
13
- fieldset, form, label, legend,
14
- table, caption, tbody, tfoot, thead, tr, th, td,
15
- article, aside, canvas, details, embed,
16
- figure, figcaption, footer, header, hgroup,
17
- menu, nav, output, ruby, section, summary,
18
- time, mark, audio, video {
19
- margin: 0;
20
- padding: 0;
21
- border: 0;
22
- font-size: 100%;
23
- font: inherit;
24
- vertical-align: baseline;
25
- }
26
- /* HTML5 display-role reset for older browsers */
27
- article, aside, details, figcaption, figure,
28
- footer, header, hgroup, menu, nav, section {
29
- display: block;
30
- }
31
- body {
32
- line-height: 1;
33
- }
34
- ol, ul {
35
- list-style: none;
36
- }
37
- blockquote, q {
38
- quotes: none;
39
- }
40
- blockquote:before, blockquote:after,
41
- q:before, q:after {
42
- content: '';
43
- content: none;
44
- }
45
- table {
46
- border-collapse: collapse;
47
- border-spacing: 0;
48
- }
package/rollup.config.js DELETED
@@ -1,59 +0,0 @@
1
- import svelte from 'rollup-plugin-svelte';
2
- import commonjs from '@rollup/plugin-commonjs';
3
- import resolve from '@rollup/plugin-node-resolve';
4
- import serve from 'rollup-plugin-dev-server';
5
- import livereload from 'rollup-plugin-livereload';
6
- import { terser } from 'rollup-plugin-terser';
7
- import sveltePreprocess from 'svelte-preprocess';
8
- import typescript from '@rollup/plugin-typescript';
9
- const production = process.env.NODE_ENV === 'production';
10
- const dev = process.env.NODE_ENV === 'development';
11
-
12
- export default {
13
- input: 'src/index.ts',
14
- output: {
15
- sourcemap: true,
16
- format: 'umd',
17
- name: 'app',
18
- file: 'dist/casino-collections-providers.js'
19
- },
20
- plugins: [
21
- svelte({
22
- preprocess: sveltePreprocess(),
23
- compilerOptions: {
24
- // enable run-time checks when not in production
25
- customElement: true,
26
- dev: !production
27
- }
28
- }),
29
- commonjs(),
30
- resolve({
31
- browser: true,
32
- dedupe: ['svelte']
33
- }),
34
- dev && serve({
35
- open: true,
36
- verbose: true,
37
- allowCrossOrigin: true,
38
- historyApiFallback: false,
39
- host: 'localhost',
40
- port: 5050,
41
- }),
42
- dev && livereload({ watch: ['', 'dist'] }),
43
- typescript({
44
- sourceMap: !production,
45
- inlineSources: !production,
46
- }),
47
- // If we're building for production (npm run build
48
- // instead of npm run dev), minify
49
- production &&
50
- terser({
51
- output: {
52
- comments: "all"
53
- },
54
- })
55
- ],
56
- watch: {
57
- clearScreen: false
58
- }
59
- };
@@ -1,420 +0,0 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
- import { _, addNewMessages, setLocale } from './i18n';
4
- import { TRANSLATIONS } from './translations.js';
5
- import { isMobile } from 'rvhelper';
6
- import { onMount } from 'svelte';
7
-
8
- export let endpoint:string = '';
9
- export let datasource:string = '';
10
- export let lang:string = '';
11
- export let type:string = '';
12
- export let titletype:string = '';
13
- export let clientstyling:string = '';
14
- export let clientstylingurl:string = '';
15
- export let translationurl:string = '';
16
- export let collectionprovidersgamenames:string = '';
17
-
18
- let gameCategories:Array<any> = [];
19
- let isLoading:boolean = true;
20
- let categoriesSlider:HTMLElement;
21
- //keeps track of the first slide in view, starts at 0
22
- let currentSlide:number = 0;
23
- let numberOfSlides:number = 0;
24
- let numberOfVisibleSlides: number = 0;
25
- let slideWidth:number;
26
- let slides:Array<any>;
27
-
28
- let customStylingContainer:HTMLElement;
29
- let userAgent:string = window.navigator.userAgent;
30
- let mobile:boolean;
31
- let categoriesSliderWidth:number = 0;
32
-
33
- const setTranslationUrl = ():void => {
34
- let url:string = translationurl;
35
-
36
- fetch(url).then((res:any) => res.json())
37
- .then((res) => {
38
- Object.keys(res).forEach((item:any):void => {
39
- addNewMessages(item, res[item]);
40
- });
41
- }).catch((err:any) => {
42
- console.log(err);
43
- });
44
- }
45
-
46
- Object.keys(TRANSLATIONS).forEach((item:any):void => {
47
- addNewMessages(item, TRANSLATIONS[item]);
48
- });
49
-
50
- const getGameCategories = ():void => {
51
-
52
- const url:URL = new URL(`${endpoint}/v2/casino/groups/${datasource}`);
53
-
54
- url.searchParams.append('language' , lang);
55
- url.searchParams.append('expand' , 'games');
56
-
57
- fetch(url.href)
58
- .then(res => res.json())
59
- .then(gameCategoriesData => {
60
- isLoading = false;
61
-
62
- let filteredCategories = gameCategoriesData.items.filter(item => item.flags == type);
63
-
64
- gameCategories = filteredCategories.map(category => {
65
- return {
66
- id: category.id,
67
- name: category.name,
68
- icon: category.icon ? category.icon : category.vendors?.items[0]?.subVendors[0]?.logo,
69
- games: category.games.items.slice(0, 4).map(game => game),
70
- background: category.background,
71
- flag: category.flags
72
- }
73
- });
74
- numberOfSlides = gameCategories.length;
75
- });
76
- }
77
-
78
- const positionSlides = (curSlide?):void => {
79
- // store each slide HTML element in an array
80
- slides = [...categoriesSlider.children];
81
-
82
- // iterate the array of elements and translate each of them by 100% times the index to create the slider
83
- slides.forEach((slide: HTMLElement, index: number) => {
84
- slide.style.transform = `translateX(${100 * (curSlide ? index - curSlide : index)}%)`;
85
- });
86
-
87
- slideWidth = slides[0].getBoundingClientRect().width;
88
- setNumberOfVisibleSlides();
89
- }
90
-
91
- const setNumberOfVisibleSlides = ():void => {
92
- //needed for finding the beginning and end of the slider
93
- numberOfVisibleSlides = Math.floor(categoriesSliderWidth / slideWidth);
94
- }
95
-
96
- const goToSlide = ():void => {
97
- //in order to go to a specific slide, position all the slides relative to one of them, one which is determined by sliderScrollLeft and sliderScrollRight
98
- positionSlides(currentSlide);
99
- }
100
-
101
- const sliderScrollLeft = ():void => {
102
- if (currentSlide === 0) {
103
- currentSlide = numberOfSlides - numberOfVisibleSlides;
104
- } else if(currentSlide - numberOfVisibleSlides < -1){
105
- currentSlide = 0;
106
- } else {
107
- currentSlide--;
108
- }
109
- goToSlide();
110
- }
111
-
112
- const sliderScrollRight = ():void => {
113
- if(currentSlide === numberOfSlides - numberOfVisibleSlides){
114
- currentSlide = 0;
115
- } else if(numberOfSlides - numberOfVisibleSlides < currentSlide + 1){
116
- currentSlide = numberOfSlides - numberOfVisibleSlides;
117
- } else {
118
- currentSlide++;
119
- }
120
- goToSlide();
121
- }
122
-
123
- const openGame = (gameId:any, launchUrl:URL, gameName:string, subVendor: string):void => {
124
- window.postMessage({ type: 'OpenCollectionsProvidersGame', gameId, launchUrl, gameName, subVendor }, window.location.href);
125
-
126
- //Analytics event
127
- if(typeof gtag == 'function'){
128
- gtag('event', 'OpenGame', {
129
- 'context': 'CollectionsProviders',
130
- 'gameName': `${gameName}`
131
- });
132
- }
133
- };
134
-
135
- const openCategory = (categoryId:any):void => {
136
- window.postMessage({ type: 'OpenCollectionsProvidersCategory', categoryId}, window.location.href);
137
- };
138
-
139
- const setActiveLanguage = ():void => {
140
- setLocale(lang);
141
- }
142
-
143
- const setClientStyling = ():void => {
144
- let sheet = document.createElement('style');
145
- sheet.innerHTML = clientstyling;
146
- customStylingContainer.appendChild(sheet);
147
- }
148
-
149
- const setClientStylingURL = ():void => {
150
- let url:URL = new URL(clientstylingurl);
151
- let cssFile:HTMLElement = document.createElement('style');
152
-
153
- fetch(url.href)
154
- .then((res:any) => res.text())
155
- .then((data:any) => {
156
- cssFile.innerHTML = data
157
-
158
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
159
- });
160
- }
161
-
162
- onMount(() => {
163
- mobile = isMobile(userAgent);
164
- })
165
-
166
- $: endpoint && datasource && lang && getGameCategories();
167
- //making sure we have something to position, before trying to
168
- $: categoriesSliderWidth && gameCategories && categoriesSlider && positionSlides();
169
- $: lang && setActiveLanguage();
170
- $: clientstyling && customStylingContainer && setClientStyling();
171
- $: clientstylingurl && customStylingContainer && setClientStylingURL();
172
- $: translationurl && setTranslationUrl();
173
- </script>
174
-
175
- <div bind:this={customStylingContainer}>
176
- {#if isLoading}
177
- <div class="LoadingSpinner"></div>
178
- {:else}
179
- <div class="CasinoCollectionsProviders {mobile ? 'Mobile' : ''} {type === 'vendor' ? 'Providers' : 'Collections'}">
180
- <div class="CategoriesHeader">
181
- <p class="Title"> {type == 'vendor' ? $_('providers') : $_('collections')} </p>
182
- {#if numberOfSlides > numberOfVisibleSlides}
183
- <div class="ButtonsContainer">
184
- <button on:click={() => sliderScrollLeft()}>
185
- <svg id="Component_46_2" data-name="Component 46 – 2" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 24.656">
186
- <path id="Path_36" data-name="Path 36" d="M12.328,16,0,3.672,3.672,0l8.656,8.656L20.984,0l3.672,3.672Z" transform="translate(14.656 0) rotate(90)" fill="#fff"/>
187
- </svg>
188
- </button>
189
- <button on:click={() => sliderScrollRight()}>
190
- <svg id="Component_46_2" data-name="Component 46 – 2" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 24.656">
191
- <path id="Path_36" data-name="Path 36" d="M12.328,16,0,3.672,3.672,0l8.656,8.656L20.984,0l3.672,3.672Z" transform="translate(0 24.656) rotate(-90)" fill="#fff"/>
192
- </svg>
193
- </button>
194
- </div>
195
- {/if}
196
- </div>
197
-
198
- <div class="CategoriesSlider" bind:this={categoriesSlider} bind:clientWidth={categoriesSliderWidth}>
199
- {#each gameCategories as category}
200
- <div class="CategoriesSliderWrapper Animation">
201
- <div class="CategorySlide {category?.flag[0] == 'vendor' ? 'CategorySlideNoHighlight' : ''}" style="background-image:url({category?.background}); background-size: cover;" on:click={() => openCategory(category.id)}>
202
- <div class="CategorySlideTopContainer">
203
- {#if titletype == 'logo'}
204
- <img class="CategorySlideLogo" src="{category.icon}" alt="{category.name} icon">
205
- {:else if titletype == 'title'}
206
- <p class="CategorySlideTitle">{category.name}</p>
207
- {/if}
208
- </div>
209
- <div class="CategorySlideGameContainer">
210
- {#each category.games as game}
211
- <div class="CategorySlideGames">
212
- <img class="CategorySlideGameImage" src="{game.defaultThumbnail}" alt="{game.name}" on:click|stopPropagation={() => openGame(game.gameId, game.launchUrl, game.name, game.subVendor)}>
213
- {#if collectionprovidersgamenames == 'true'}
214
- <p title={game.name}> {game.name} </p>
215
- {/if}
216
- </div>
217
- {/each}
218
- </div>
219
- </div>
220
- </div>
221
- {/each}
222
- </div>
223
- </div>
224
- {/if}
225
- </div>
226
-
227
-
228
-
229
- <style lang="scss">
230
-
231
-
232
- *,
233
- *::before,
234
- *::after {
235
- margin: 0;
236
- padding: 0;
237
- list-style: none;
238
- text-decoration: none;
239
- outline: none;
240
- box-sizing: border-box;
241
- }
242
-
243
- .CasinoCollectionsProviders {
244
- background: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));
245
- width: 100%;
246
- height: 330px;
247
- margin: 0 auto;
248
- margin-top: 24px;
249
- }
250
-
251
- .Categories {
252
- &Header{
253
- display: flex;
254
- justify-content: space-between;
255
- height: 70px;
256
-
257
- & .Title {
258
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
259
- font-size: 22px;
260
- font-weight: 500;
261
- }
262
- & .ButtonsContainer{
263
- & button {
264
- border: 1px solid rgba(255, 255, 255, 0.2);
265
- border-radius: 5px;
266
- background-color: rgba(0, 0, 25, 0.2);
267
- height: 40px;
268
- width: 40px;
269
-
270
- cursor: pointer;
271
-
272
- &:active {
273
- opacity: 0.7;
274
- }
275
- }
276
- }
277
- }
278
-
279
- &Slider {
280
- position: relative;
281
- height: 230px;
282
- overflow: hidden;
283
- cursor: pointer;
284
-
285
- &Wrapper {
286
- position: absolute;
287
- top: 0;
288
- left: 0;
289
- }
290
- .Animation {
291
- /* THIS creates the slider animation! */
292
- transition: transform 0.8s;
293
- }
294
-
295
- & .CategorySlide {
296
- border-radius: 10px;
297
- display: flex;
298
- flex-direction: column;
299
- align-items: center;
300
- justify-content: space-evenly;
301
- height: 200px;
302
- width: 400px;
303
- margin-right: 15px;
304
- background-size: cover;
305
- /* Requirement: Add background effect in order to contrast with the text and games on the collection */
306
- /* -> If the slider has a listing of vendors, do not use the contrast effect since the images are already in contrast with our elements */
307
- /* -> For the collections slider, the blend-mode mashes the inline background-image with the background-color, using the latter to darken the first */
308
- &:not(.CategorySlideNoHighlight) {
309
- background-color: #808080;
310
- background-blend-mode: multiply;
311
- }
312
- &TopContainer {
313
- height: 100px;
314
- display: flex;
315
- align-items: center;
316
- }
317
- &Logo {
318
- transform: translate(-50%, -50%);
319
- max-width: 175px;
320
- top: 30%;
321
- max-height: 100%;
322
- position: absolute;
323
- }
324
- &Title {
325
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-constrast, #FFFFFF));
326
- font-size: 18px;
327
- letter-spacing: 1px;
328
- }
329
- &GameContainer {
330
- display: flex;
331
- width: 40px;
332
- justify-content: center;
333
- gap: 10%;
334
- min-height: 85px;
335
- }
336
- &GameImage {
337
- border-radius: 10px;
338
- width: auto;
339
- height: 55px;
340
- object-fit: cover;
341
- }
342
- &Games{
343
- color:white;
344
- text-align: center;
345
- p{
346
- font-size: 8px;
347
- display: -webkit-box;
348
- -webkit-line-clamp: 1;
349
- -webkit-box-orient: vertical;
350
- overflow: hidden;
351
- }
352
- }
353
- }
354
- }
355
- }
356
-
357
- .Mobile {
358
-
359
- &.Providers {
360
- padding: 25px 10px;
361
- }
362
-
363
- &.Collections {
364
- padding: 25px 10px;
365
- }
366
-
367
- &.CasinoCollectionsProviders {
368
- padding: 25px 10px;
369
- }
370
- & .CategoriesSlider {
371
- overflow: auto;
372
- scroll-snap-type: x mandatory;
373
- -ms-overflow-style: none;
374
- scrollbar-width: none;
375
- }
376
- & .CategoriesSlider::-webkit-scrollbar {
377
- display: none;
378
- }
379
- & .CategorySlide {
380
- width: 80vw;
381
- scroll-snap-align: start;
382
- }
383
- & .ButtonsContainer{
384
- display: none;
385
- }
386
- & .CategorySlideGameImage{
387
- border-radius: 10px;
388
- width: auto;
389
- height: 40px;
390
- object-fit: cover;
391
- }
392
- }
393
-
394
- .LoadingSpinner {
395
- display: block;
396
- width: 80px;
397
- height: 80px;
398
- margin: 0 auto
399
- }
400
- .LoadingSpinner:after {
401
- content: " ";
402
- display: block;
403
- width: 64px;
404
- height: 64px;
405
- margin: 8px;
406
- border-radius: 50%;
407
- border: 6px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
408
- border-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent;
409
- animation: LoadingSpinner 1.2s linear infinite;
410
- }
411
- @keyframes LoadingSpinner {
412
- 0% {
413
- transform: rotate(0deg);
414
- }
415
- 100% {
416
- transform: rotate(360deg);
417
- }
418
- }
419
-
420
- </style>
package/src/i18n.js DELETED
@@ -1,27 +0,0 @@
1
- import {
2
- dictionary,
3
- locale,
4
- addMessages,
5
- _
6
- } from 'svelte-i18n';
7
-
8
- function setupI18n({ withLocale: _locale, translations }) {
9
- locale.subscribe((data) => {
10
- if (data == null) {
11
- dictionary.set(translations);
12
- locale.set(_locale);
13
- }
14
- }); // maybe we will need this to make sure that the i18n is set up only once
15
- /*dictionary.set(translations);
16
- locale.set(_locale);*/
17
- }
18
-
19
- function addNewMessages(lang, dict) {
20
- addMessages(lang, dict);
21
- }
22
-
23
- function setLocale(_locale) {
24
- locale.set(_locale);
25
- }
26
-
27
- export { _, setupI18n, addNewMessages, setLocale };
package/src/index.ts DELETED
@@ -1,4 +0,0 @@
1
- import CasinoCollectionsProviders from './CasinoCollectionsProviders.svelte';
2
-
3
- !customElements.get('casino-collections-providers') && customElements.define('casino-collections-providers', CasinoCollectionsProviders);
4
- export default CasinoCollectionsProviders;
@@ -1,92 +0,0 @@
1
- export const TRANSLATIONS = {
2
- "en": {
3
- "collections": "Game Collections",
4
- "providers": "Game Providers",
5
- "loading": "Loading, please wait ..."
6
- },
7
- "zh-hk": {
8
- "collections": "收藏品",
9
- "providers": "供应商",
10
- "loading": "加載請稍候 ..."
11
- },
12
- "de": {
13
- "collections": "Game Collections",
14
- "providers": "Game Providers",
15
- "loading": "Laden, bitte warten..."
16
- },
17
- "it": {
18
- "collections": "Game Collections",
19
- "providers": "Game Providers",
20
- "loading": "Loading, please wait ..."
21
- },
22
- "fr": {
23
- "collections": "Collections",
24
- "providers": "Fournisseurs",
25
- "loading": "Chargement, veuillez patienter ..."
26
- },
27
- "es": {
28
- "collections": "Colecciones de juegos",
29
- "providers": "Proveedores de juegos",
30
- "loading": "Cargando…"
31
- },
32
- "el": {
33
- "collections": "Game Collections",
34
- "providers": "Game Providers",
35
- "loading": "Φορτώνει, παρακαλούμε περιμένετε ..."
36
- },
37
- "tr": {
38
- "collections": "Oyun Koleksiyonları",
39
- "providers": "Oyun Sağlayıcıları",
40
- "loading": "Yükleniyor, lütfen bekleyin..."
41
- },
42
- "ru": {
43
- "collections": "Game Collections",
44
- "providers": "Game Providers",
45
- "loading": "Loading, please wait ..."
46
- },
47
- "ro": {
48
- "collections": "Selectie Jocuri",
49
- "providers": "Furnizori",
50
- "loading": "Se încarcă, asteptati ..."
51
- },
52
- "hr": {
53
- "collections": "Kolekcije igara",
54
- "providers": "Brendovi igara",
55
- "loading": "Učitavam"
56
- },
57
- "hu": {
58
- "collections": "Game Collections",
59
- "providers": "Game Providers",
60
- "loading": "Betöltés, kérjük várjon..."
61
- },
62
- "pl": {
63
- "collections": "Game Collections",
64
- "providers": "Game Providers",
65
- "loading": "Loading, please wait ..."
66
- },
67
- "pt": {
68
- "collections": "Game Collections",
69
- "providers": "Game Providers",
70
- "loading": "Carregando, por favor espere ..."
71
- },
72
- "sl": {
73
- "collections": "Game Collections",
74
- "providers": "Game Providers",
75
- "loading": "Loading, please wait ..."
76
- },
77
- "sr": {
78
- "collections": "Game Collections",
79
- "providers": "Game Providers",
80
- "loading": "Loading, please wait ..."
81
- },
82
- "pt-br": {
83
- "collections": "Coleções de jogos",
84
- "providers": "Provedores de jogos",
85
- "Loading": "Carregando, por favor espere..."
86
- },
87
- "es-mx": {
88
- "collections": "Colecciones de juego",
89
- "providers": "Proveedores de juego",
90
- "Loading": "Cargando, por favor espere..."
91
- }
92
- }
@@ -1,13 +0,0 @@
1
- import { html } from 'lit-element';
2
-
3
- import CasinoCollectionsProviders from '../src/CasinoCollectionsProviders';
4
-
5
- // This default export determines where your story goes in the story list
6
- export default {
7
- title: 'CasinoCollectionsProviders',
8
- };
9
-
10
- // 👇 We create a “template” of how args map to rendering
11
- const CasinoCollectionsProviders = ({ aProperty }) => html`<casino-collections-providers></casino-collections-providers>`;
12
-
13
- export const FirstStory = CasinoCollectionsProviders.bind({});