@everymatrix/casino-collections-providers 1.0.15 → 1.0.69

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 (17) hide show
  1. package/es2015/casino-collections-providers.cjs +1 -0
  2. package/es2015/casino-collections-providers.js +16 -0
  3. package/package.json +14 -34
  4. package/README.md +0 -30
  5. package/dist/casino-collections-providers.js +0 -654
  6. package/dist/casino-collections-providers.js.map +0 -1
  7. package/index.html +0 -28
  8. package/index.js +0 -1
  9. package/public/favicon.png +0 -0
  10. package/public/reset.css +0 -48
  11. package/rollup.config.js +0 -59
  12. package/src/CasinoCollectionsProviders.svelte +0 -367
  13. package/src/i18n.js +0 -27
  14. package/src/index.ts +0 -4
  15. package/src/translations.js +0 -114
  16. package/stories/CasinoCollectionsProviders.stories.js +0 -13
  17. package/tsconfig.json +0 -6
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://demo-api.stage.norway.everymatrix.com/' datasource="RNG" lang='en'
19
- type='vendor' titletype="logo">
20
- </casino-collections-providers>
21
- <casino-collections-providers endpoint='https://demo-api.stage.norway.everymatrix.com/' datasource="RNG" 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';
package/public/favicon.png DELETED
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
- };
package/src/CasinoCollectionsProviders.svelte DELETED
@@ -1,367 +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
-
17
- let gameCategories:Array<any> = [];
18
- let isLoading:boolean = true;
19
- let categoriesSlider:HTMLElement;
20
- //keeps track of the first slide in view, starts at 0
21
- let currentSlide:number = 0;
22
- let numberOfSlides:number = 0;
23
- let numberOfVisibleSlides: number = 0;
24
- let slideWidth:number;
25
- let slides:Array<any>;
26
-
27
- let customStylingContainer:HTMLElement;
28
- let displayNoneClientStyling:boolean = false;
29
- let userAgent:string = window.navigator.userAgent;
30
- let mobile:boolean;
31
-
32
- const setTranslationUrl = ():void => {
33
- let url:string = translationUrl;
34
-
35
- fetch(url).then((res:any) => res.json())
36
- .then((res) => {
37
- Object.keys(res).forEach((item:any):void => {
38
- addNewMessages(item, res[item]);
39
- });
40
- }).catch((err:any) => {
41
- console.log(err);
42
- });
43
- }
44
-
45
- Object.keys(Translations).forEach((item:any):void => {
46
- addNewMessages(item, Translations[item]);
47
- });
48
-
49
- const getGameCategories = ():void => {
50
-
51
- const url:URL = new URL(`${endpoint}/v2/casino/groups/${datasource}`);
52
-
53
- url.searchParams.append('language' , lang);
54
- url.searchParams.append('expand' , 'games');
55
-
56
- fetch(url.href)
57
- .then(res => res.json())
58
- .then(gameCategoriesData => {
59
- isLoading = false;
60
-
61
- let filteredCategories = gameCategoriesData.items.filter(item => item.flags == type);
62
-
63
- gameCategories = filteredCategories.map(category => {
64
- return {
65
- id: category.id,
66
- name: category.name,
67
- icon: category.icon,
68
- games: category.games.items.slice(0, 4).map(game => game),
69
- background: category.background,
70
- flag: category.flags
71
- }
72
- });
73
- numberOfSlides = gameCategories.length;
74
- });
75
- }
76
-
77
- const positionSlides = (curSlide?):void => {
78
- //store each slide HTML element in an array
79
- slides = [...categoriesSlider.children];
80
-
81
- //iterate the array of elements and translate each of them by 100% times the index to create the slider
82
- slides.forEach((slide: HTMLElement, index: number) => {
83
- slide.style.transform = `translateX(${100 * (curSlide ? index - curSlide : index)}%)`;
84
- });
85
-
86
-
87
- slides.map(slide => slideWidth = slide.getBoundingClientRect().width)
88
- setNumberOfVisibleSlides();
89
- }
90
-
91
- const setNumberOfVisibleSlides = ():void => {
92
- //needed for finding the beginning and end of the slider
93
- numberOfVisibleSlides = Math.round(categoriesSlider.offsetWidth / 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(numberOfVisibleSlides >= numberOfSlides) return;
103
- if (currentSlide === 0) {
104
- currentSlide = numberOfSlides - numberOfVisibleSlides;
105
- } else if(currentSlide - numberOfVisibleSlides < -1){
106
- currentSlide = 0;
107
- } else {
108
- currentSlide--;
109
- }
110
- goToSlide();
111
- }
112
-
113
- const sliderScrollRight = ():void => {
114
- if(numberOfVisibleSlides >= numberOfSlides) return;
115
- if(currentSlide === numberOfSlides - numberOfVisibleSlides){
116
- currentSlide = 0;
117
- } else if(numberOfSlides - numberOfVisibleSlides < currentSlide + 1){
118
- currentSlide = numberOfSlides - numberOfVisibleSlides;
119
- } else {
120
- currentSlide++;
121
- }
122
- goToSlide();
123
- }
124
-
125
- const openGame = (gameId:any, launchUrl:URL, gameName:string):void => {
126
- window.postMessage({ type: 'OpenCollectionsProvidersGame', gameId, launchUrl, gameName}, window.location.href);
127
-
128
- //Analytics event
129
- if(typeof gtag == 'function'){
130
- gtag('event', 'OpenGame', {
131
- 'context': 'CollectionsProviders',
132
- 'gameName': `${gameName}`
133
- });
134
- }
135
- };
136
-
137
- const openCategory = (categoryId:any):void => {
138
- window.postMessage({ type: 'OpenCollectionsProvidersCategory', categoryId}, window.location.href);
139
- };
140
-
141
- const setActiveLanguage = ():void => {
142
- setLocale(lang);
143
- }
144
-
145
- const setClientStyling = ():void => {
146
- let sheet = document.createElement('style');
147
- sheet.innerHTML = clientstyling;
148
- customStylingContainer.appendChild(sheet);
149
- }
150
-
151
- const setClientStylingURL = ():void => {
152
- displayNoneClientStyling = true;
153
-
154
- let url:URL = new URL(clientstylingurl);
155
- let cssFile:HTMLElement = document.createElement('style');
156
-
157
- fetch(url.href)
158
- .then((res:any) => res.text())
159
- .then((data:any) => {
160
- cssFile.innerHTML = data
161
-
162
- if (customStylingContainer) {
163
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
164
- setTimeout(() => { displayNoneClientStyling = false; }, 500);
165
- }
166
- });
167
- }
168
-
169
- onMount(() => {
170
- mobile = isMobile(userAgent);
171
- })
172
-
173
- $: endpoint && datasource && lang && getGameCategories();
174
- //making sure we have something to position, before trying to
175
- $: gameCategories && categoriesSlider && positionSlides();
176
- $: lang && setActiveLanguage();
177
- $: clientstyling && customStylingContainer && setClientStyling();
178
- $: clientstylingurl && customStylingContainer && setClientStylingURL();
179
- $: translationUrl && setTranslationUrl();
180
-
181
- </script>
182
-
183
- <div bind:this={customStylingContainer}>
184
- {#if isLoading}
185
- <p> Loading, please wait ... </p>
186
- {:else}
187
- <div class="CasinoCollectionsProviders {mobile ? 'Mobile' : ''}">
188
- <div class="CategoriesHeader">
189
- <p class="Title">{$_('Translations.game')} {type == 'vendor' ? $_('Translations.providers') : $_('Translations.collections')} </p>
190
- <div class="ButtonsContainer">
191
- <button on:click={() => sliderScrollLeft()}>
192
- <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">
193
- <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"/>
194
- </svg>
195
- </button>
196
- <button on:click={() => sliderScrollRight()}>
197
- <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">
198
- <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"/>
199
- </svg>
200
- </button>
201
- </div>
202
- </div>
203
-
204
- <div class="CategoriesSlider" bind:this={categoriesSlider}>
205
- {#each gameCategories as category}
206
- <div class="CategoriesSliderWrapper Animation">
207
- <div class="CategorySlide {category?.flag[0] == 'vendor' ? 'CategorySlideNoHighlight' : ''}" style="background-image:url({category?.background})" on:click={() => openCategory(category.id)}>
208
- <div class="CategorySlideTopContainer">
209
- {#if titletype == 'logo'}
210
- <img class="CategorySlideLogo" src="{category.icon}" alt="{category.name} icon">
211
- {:else if titletype == 'title'}
212
- <p class="CategorySlideTitle">{category.name}</p>
213
- {/if}
214
- </div>
215
- <div class="CategorySlideGameContainer">
216
- {#each category.games as game}
217
- <img class="CategorySlideGameImage" src="{game.defaultThumbnail}" alt="{game.name}" on:click|stopPropagation={() => openGame(game.gameId, game.launchUrl, game.name)}>
218
- {/each}
219
- </div>
220
- </div>
221
- </div>
222
- {/each}
223
- </div>
224
- </div>
225
- {/if}
226
-
227
- </div>
228
-
229
-
230
-
231
- <style lang="scss">
232
- :host {
233
- font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
234
- }
235
-
236
- *,
237
- *::before,
238
- *::after {
239
- margin: 0;
240
- padding: 0;
241
- list-style: none;
242
- text-decoration: none;
243
- outline: none;
244
- box-sizing: border-box;
245
- }
246
-
247
- .CasinoCollectionsProviders {
248
- background:var(--emfe-w-color-contrast, #07072A);
249
- width: 100%;
250
- height: 330px;
251
- margin: 0 auto;
252
- margin-top: 24px;
253
- }
254
-
255
- .Categories {
256
- &Header{
257
- display: flex;
258
- justify-content: space-between;
259
- height: 70px;
260
-
261
- & .Title {
262
- color: var(--emfe-w-color-white, #FFFFFF);
263
- font-size: 22px;
264
- font-weight: 500;
265
- }
266
- & .ButtonsContainer{
267
- & button {
268
- border: 1px solid rgba(255, 255, 255, 0.2);
269
- border-radius: 5px;
270
- background-color: rgba(0, 0, 25, 0.2);
271
- height: 40px;
272
- width: 40px;
273
-
274
- cursor: pointer;
275
-
276
- &:active {
277
- opacity: 0.7;
278
- }
279
- }
280
- }
281
- }
282
-
283
- &Slider {
284
- position: relative;
285
- height: 230px;
286
- overflow: hidden;
287
-
288
- &Wrapper {
289
- position: absolute;
290
- top: 0;
291
- left: 0;
292
- }
293
- .Animation {
294
- /* THIS creates the slider animation! */
295
- transition: transform 0.8s;
296
- }
297
-
298
- & .CategorySlide {
299
- border-radius: 10px;
300
- display: flex;
301
- flex-direction: column;
302
- align-items: center;
303
- justify-content: space-evenly;
304
- height: 200px;
305
- width: 400px;
306
- margin-right: 15px;
307
- background-size: cover;
308
- /* Requirement: Add background effect in order to contrast with the text and games on the collection */
309
- /* -> If the slider has a listing of vendors, do not use the contrast effect since the images are already in contrast with our elements */
310
- /* -> For the collections slider, the blend-mode mashes the inline background-image with the background-color, using the latter to darken the first */
311
- &:not(.CategorySlideNoHighlight) {
312
- background-color: #808080;
313
- background-blend-mode: multiply;
314
- }
315
- &TopContainer {
316
- height: 100px;
317
- display: flex;
318
- align-items: center;
319
- }
320
- &Logo {
321
- max-height: 100px;
322
- }
323
- &Title {
324
- color: var(--emfe-w-color-white, #FFFFFF);
325
- font-size: 18px;
326
- letter-spacing: 1px;
327
- }
328
- &GameContainer {
329
- display: flex;
330
- justify-content: center;
331
- gap: 3%;
332
- min-height: 70px;
333
- }
334
- &GameImage {
335
- border-radius: 10px;
336
- width: 22%;
337
- height: 55px;
338
- object-fit: cover;
339
- }
340
- }
341
- }
342
- }
343
-
344
- .Mobile {
345
-
346
- &.CasinoCollectionsProviders {
347
- padding: 25px 10px;
348
- }
349
- & .CategoriesSlider {
350
- overflow: auto;
351
- scroll-snap-type: x mandatory;
352
- -ms-overflow-style: none;
353
- scrollbar-width: none;
354
- }
355
- & .CategoriesSlider::-webkit-scrollbar {
356
- display: none;
357
- }
358
- & .CategorySlide {
359
- width: 85vw;
360
- scroll-snap-align: start;
361
- }
362
- & .ButtonsContainer{
363
- display: none;
364
- }
365
- }
366
-
367
- </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;
package/src/translations.js DELETED
@@ -1,114 +0,0 @@
1
- export const Translations = {
2
- en: {
3
- Translations: {
4
- game: 'Game',
5
- collections: 'Collections',
6
- providers: 'Providers'
7
- },
8
- },
9
- zh: {
10
- Translations: {
11
- game: 'Game',
12
- collections: 'Collections',
13
- providers: 'Providers'
14
- },
15
- },
16
- de: {
17
- Translations: {
18
- game: 'Game',
19
- collections: 'Collections',
20
- providers: 'Providers'
21
- },
22
- },
23
- it: {
24
- Translations: {
25
- game: 'Game',
26
- collections: 'Collections',
27
- providers: 'Providers'
28
- },
29
- },
30
- fr: {
31
- Translations: {
32
- game: 'Game',
33
- collections: 'Collections',
34
- providers: 'Providers'
35
- },
36
- },
37
- es: {
38
- Translations: {
39
- game: 'Game',
40
- collections: 'Collections',
41
- providers: 'Providers'
42
- },
43
- },
44
- el: {
45
- Translations: {
46
- game: 'Game',
47
- collections: 'Collections',
48
- providers: 'Providers'
49
- },
50
- },
51
- tr: {
52
- Translations: {
53
- game: 'Game',
54
- collections: 'Collections',
55
- providers: 'Providers'
56
- },
57
- },
58
- ru: {
59
- Translations: {
60
- game: 'Game',
61
- collections: 'Collections',
62
- providers: 'Providers'
63
- },
64
- },
65
- ro: {
66
- Translations: {
67
- game: 'Game',
68
- collections: 'Collections',
69
- providers: 'Providers'
70
- },
71
- },
72
- hr: {
73
- Translations: {
74
- game: 'Game',
75
- collections: 'Collections',
76
- providers: 'Providers'
77
- },
78
- },
79
- hu: {
80
- Translations: {
81
- game: 'Game',
82
- collections: 'Collections',
83
- providers: 'Providers'
84
- },
85
- },
86
- pl: {
87
- Translations: {
88
- game: 'Game',
89
- collections: 'Collections',
90
- providers: 'Providers'
91
- },
92
- },
93
- pt: {
94
- Translations: {
95
- game: 'Game',
96
- collections: 'Collections',
97
- providers: 'Providers'
98
- },
99
- },
100
- sl: {
101
- Translations: {
102
- game: 'Game',
103
- collections: 'Collections',
104
- providers: 'Providers'
105
- },
106
- },
107
- sr: {
108
- Translations: {
109
- game: 'Game',
110
- collections: 'Collections',
111
- providers: 'Providers'
112
- },
113
- },
114
- };
package/stories/CasinoCollectionsProviders.stories.js DELETED
@@ -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({});
package/tsconfig.json DELETED
@@ -1,6 +0,0 @@
1
- {
2
- "extends": "@tsconfig/svelte/tsconfig.json",
3
-
4
- "include": ["src/**/*"],
5
- "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6
- }