@everymatrix/casino-collections-providers 0.0.392
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/README.md +30 -0
- package/dist/casino-collections-providers.js +652 -0
- package/dist/casino-collections-providers.js.map +1 -0
- package/index.html +28 -0
- package/index.js +1 -0
- package/package.json +40 -0
- package/public/favicon.png +0 -0
- package/public/reset.css +48 -0
- package/rollup.config.js +59 -0
- package/src/CasinoCollectionsProviders.svelte +336 -0
- package/src/i18n.js +27 -0
- package/src/index.ts +4 -0
- package/src/translations.js +114 -0
- package/stories/CasinoCollectionsProviders.stories.js +13 -0
- package/tsconfig.json +6 -0
package/index.html
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './dist/casino-collections-providers.js';
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@everymatrix/casino-collections-providers",
|
|
3
|
+
"version": "0.0.392",
|
|
4
|
+
"main": "index.js",
|
|
5
|
+
"svelte": "src/index.ts",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "sirv public",
|
|
8
|
+
"build": "cross-env NODE_ENV=production rollup -c",
|
|
9
|
+
"dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
|
|
10
|
+
"validate": "svelte-check",
|
|
11
|
+
"test": "echo"
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
15
|
+
"@rollup/plugin-commonjs": "^16.0.0",
|
|
16
|
+
"@rollup/plugin-node-resolve": "^10.0.0",
|
|
17
|
+
"@rollup/plugin-typescript": "^6.0.0",
|
|
18
|
+
"@tsconfig/svelte": "^1.0.0",
|
|
19
|
+
"node-sass": "^5.0.0",
|
|
20
|
+
"rollup": "^2.3.4",
|
|
21
|
+
"rollup-plugin-dev-server": "^0.4.3",
|
|
22
|
+
"rollup-plugin-livereload": "^2.0.0",
|
|
23
|
+
"rollup-plugin-svelte": "^7.0.0",
|
|
24
|
+
"rollup-plugin-terser": "^7.0.0",
|
|
25
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
26
|
+
"svelte-check": "^1.0.0",
|
|
27
|
+
"svelte-preprocess": "^4.0.0",
|
|
28
|
+
"tslib": "^2.0.0",
|
|
29
|
+
"typescript": "^3.9.3"
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"cross-env": "^7.0.3",
|
|
33
|
+
"sirv-cli": "^1.0.0",
|
|
34
|
+
"svelte": "^3.0.0"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
},
|
|
39
|
+
"gitHead": "218aa76aa4ef72b20457a0113b4b3e3f58b2194e"
|
|
40
|
+
}
|
|
Binary file
|
package/public/reset.css
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,336 @@
|
|
|
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
|
+
|
|
16
|
+
let gameCategories:Array<any> = [];
|
|
17
|
+
let isLoading:boolean = true;
|
|
18
|
+
let categoriesSlider:HTMLElement;
|
|
19
|
+
//keeps track of the first slide in view, starts at 0
|
|
20
|
+
let currentSlide:number = 0;
|
|
21
|
+
let numberOfSlides:number = 0;
|
|
22
|
+
let numberOfVisibleSlides: number = 0;
|
|
23
|
+
let slideWidth:number;
|
|
24
|
+
let slides:Array<any>;
|
|
25
|
+
|
|
26
|
+
let customStylingContainer:HTMLElement;
|
|
27
|
+
let displayNoneClientStyling:boolean = false;
|
|
28
|
+
let userAgent:string = window.navigator.userAgent;
|
|
29
|
+
let mobile:boolean;
|
|
30
|
+
|
|
31
|
+
Object.keys(Translations).forEach((item:any):void => {
|
|
32
|
+
addNewMessages(item, Translations[item]);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
const getGameCategories = ():void => {
|
|
36
|
+
|
|
37
|
+
const url:URL = new URL(`${endpoint}/v2/casino/groups/${datasource}`);
|
|
38
|
+
|
|
39
|
+
url.searchParams.append('language' , lang);
|
|
40
|
+
url.searchParams.append('expand' , 'games');
|
|
41
|
+
|
|
42
|
+
fetch(url.href)
|
|
43
|
+
.then(res => res.json())
|
|
44
|
+
.then(gameCategoriesData => {
|
|
45
|
+
isLoading = false;
|
|
46
|
+
|
|
47
|
+
let filteredCategories = gameCategoriesData.items.filter(item => item.flags == type);
|
|
48
|
+
|
|
49
|
+
gameCategories = filteredCategories.map(category => {
|
|
50
|
+
return {
|
|
51
|
+
id: category.id,
|
|
52
|
+
name: category.name,
|
|
53
|
+
icon: category.icon,
|
|
54
|
+
games: category.games.items.slice(0, 4).map(game => game)
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
numberOfSlides = gameCategories.length;
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const positionSlides = (curSlide?):void => {
|
|
62
|
+
//store each slide HTML element in an array
|
|
63
|
+
slides = [...categoriesSlider.children];
|
|
64
|
+
|
|
65
|
+
//iterate the array of elements and translate each of them by 100% times the index to create the slider
|
|
66
|
+
slides.forEach((slide: HTMLElement, index: number) => {
|
|
67
|
+
slide.style.transform = `translateX(${100 * (curSlide ? index - curSlide : index)}%)`;
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
slides.map(slide => slideWidth = slide.getBoundingClientRect().width)
|
|
72
|
+
setNumberOfVisibleSlides();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const setNumberOfVisibleSlides = ():void => {
|
|
76
|
+
//needed for finding the beginning and end of the slider
|
|
77
|
+
numberOfVisibleSlides = Math.round(categoriesSlider.offsetWidth / slideWidth);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const goToSlide = ():void => {
|
|
81
|
+
//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
|
|
82
|
+
positionSlides(currentSlide);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const sliderScrollLeft = ():void => {
|
|
86
|
+
if(numberOfVisibleSlides >= numberOfSlides) return;
|
|
87
|
+
if (currentSlide === 0) {
|
|
88
|
+
currentSlide = numberOfSlides - numberOfVisibleSlides;
|
|
89
|
+
} else if(currentSlide - numberOfVisibleSlides < -1){
|
|
90
|
+
currentSlide = 0;
|
|
91
|
+
} else {
|
|
92
|
+
currentSlide--;
|
|
93
|
+
}
|
|
94
|
+
goToSlide();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const sliderScrollRight = ():void => {
|
|
98
|
+
if(numberOfVisibleSlides >= numberOfSlides) return;
|
|
99
|
+
if(currentSlide === numberOfSlides - numberOfVisibleSlides){
|
|
100
|
+
currentSlide = 0;
|
|
101
|
+
} else if(numberOfSlides - numberOfVisibleSlides < currentSlide + 1){
|
|
102
|
+
currentSlide = numberOfSlides - numberOfVisibleSlides;
|
|
103
|
+
} else {
|
|
104
|
+
currentSlide++;
|
|
105
|
+
}
|
|
106
|
+
goToSlide();
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const openGame = (gameId:any, launchUrl:URL, gameName:string):void => {
|
|
110
|
+
window.postMessage({ type: 'OpenCollectionsProvidersGame', gameId, launchUrl, gameName}, window.location.href);
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const openCategory = (categoryId:any):void => {
|
|
114
|
+
window.postMessage({ type: 'OpenCollectionsProvidersCategory', categoryId}, window.location.href);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const setActiveLanguage = ():void => {
|
|
118
|
+
setLocale(lang);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const setClientStyling = ():void => {
|
|
122
|
+
let sheet = document.createElement('style');
|
|
123
|
+
sheet.innerHTML = clientstyling;
|
|
124
|
+
customStylingContainer.appendChild(sheet);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
const setClientStylingURL = ():void => {
|
|
128
|
+
displayNoneClientStyling = true;
|
|
129
|
+
|
|
130
|
+
let url:URL = new URL(clientstylingurl);
|
|
131
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
132
|
+
|
|
133
|
+
fetch(url.href)
|
|
134
|
+
.then((res:any) => res.text())
|
|
135
|
+
.then((data:any) => {
|
|
136
|
+
cssFile.innerHTML = data
|
|
137
|
+
|
|
138
|
+
if (customStylingContainer) {
|
|
139
|
+
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
140
|
+
setTimeout(() => { displayNoneClientStyling = false; }, 500);
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
onMount(() => {
|
|
146
|
+
mobile = isMobile(userAgent);
|
|
147
|
+
})
|
|
148
|
+
|
|
149
|
+
$: endpoint && datasource && lang && getGameCategories();
|
|
150
|
+
//making sure we have something to position, before trying to
|
|
151
|
+
$: gameCategories && categoriesSlider && positionSlides();
|
|
152
|
+
$: lang && setActiveLanguage();
|
|
153
|
+
$: clientstyling && setClientStyling();
|
|
154
|
+
$: clientstylingurl && setClientStylingURL();
|
|
155
|
+
|
|
156
|
+
</script>
|
|
157
|
+
|
|
158
|
+
<div bind:this={customStylingContainer}>
|
|
159
|
+
{#if isLoading}
|
|
160
|
+
<p> Loading, please wait ... </p>
|
|
161
|
+
{:else}
|
|
162
|
+
<div class="CasinoCollectionsProviders {mobile ? 'Mobile' : ''}">
|
|
163
|
+
<div class="CategoriesHeader">
|
|
164
|
+
<p class="Title">{$_('Translations.game')} {type == 'vendor' ? $_('Translations.providers') : $_('Translations.collections')} </p>
|
|
165
|
+
<div class="ButtonsContainer">
|
|
166
|
+
<button on:click={() => sliderScrollLeft()}>
|
|
167
|
+
<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">
|
|
168
|
+
<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"/>
|
|
169
|
+
</svg>
|
|
170
|
+
</button>
|
|
171
|
+
<button on:click={() => sliderScrollRight()}>
|
|
172
|
+
<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">
|
|
173
|
+
<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"/>
|
|
174
|
+
</svg>
|
|
175
|
+
</button>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="CategoriesSlider" bind:this={categoriesSlider}>
|
|
180
|
+
{#each gameCategories as category}
|
|
181
|
+
<div class="CategoriesSliderWrapper Animation">
|
|
182
|
+
<div class="CategorySlide" style:background-image={"url(https://static.everymatrix.com/cms2/base/_casino/B/B3BEB9DD45D98139D05637186C8E30DC.jpg)"} on:click={() => openCategory(category.id)}>
|
|
183
|
+
<div class="CategorySlideTopContainer">
|
|
184
|
+
{#if titletype == 'logo'}
|
|
185
|
+
<img class="CategorySlideLogo" src="{category.icon}" alt="{category.name} icon">
|
|
186
|
+
{:else if titletype == 'title'}
|
|
187
|
+
<p class="CategorySlideTitle">{category.name}</p>
|
|
188
|
+
{/if}
|
|
189
|
+
</div>
|
|
190
|
+
<div class="CategorySlideGameContainer">
|
|
191
|
+
{#each category.games as game}
|
|
192
|
+
<img class="CategorySlideGameImage" src="{game.defaultThumbnail}" alt="{game.name}" on:click|stopPropagation={() => openGame(game.gameId, game.launchUrl, game.name)}>
|
|
193
|
+
{/each}
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
{/each}
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
{/if}
|
|
201
|
+
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
<style lang="scss">
|
|
207
|
+
:host {
|
|
208
|
+
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
*,
|
|
212
|
+
*::before,
|
|
213
|
+
*::after {
|
|
214
|
+
margin: 0;
|
|
215
|
+
padding: 0;
|
|
216
|
+
list-style: none;
|
|
217
|
+
text-decoration: none;
|
|
218
|
+
outline: none;
|
|
219
|
+
box-sizing: border-box;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.CasinoCollectionsProviders {
|
|
223
|
+
background:var(--emfe-w-color-contrast, #07072A);
|
|
224
|
+
width: 100%;
|
|
225
|
+
height: 330px;
|
|
226
|
+
margin: 0 auto;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.Categories {
|
|
230
|
+
&Header{
|
|
231
|
+
display: flex;
|
|
232
|
+
justify-content: space-between;
|
|
233
|
+
height: 70px;
|
|
234
|
+
|
|
235
|
+
& .Title {
|
|
236
|
+
color: var(--emfe-w-color-white, #FFFFFF);
|
|
237
|
+
font-size: 22px;
|
|
238
|
+
font-weight: 500;
|
|
239
|
+
}
|
|
240
|
+
& .ButtonsContainer{
|
|
241
|
+
& button {
|
|
242
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
243
|
+
border-radius: 5px;
|
|
244
|
+
background-color: rgba(0, 0, 25, 0.2);
|
|
245
|
+
height: 40px;
|
|
246
|
+
width: 40px;
|
|
247
|
+
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
|
|
250
|
+
&:active {
|
|
251
|
+
opacity: 0.7;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&Slider {
|
|
258
|
+
position: relative;
|
|
259
|
+
height: 230px;
|
|
260
|
+
overflow: hidden;
|
|
261
|
+
|
|
262
|
+
&Wrapper {
|
|
263
|
+
position: absolute;
|
|
264
|
+
top: 0;
|
|
265
|
+
left: 0;
|
|
266
|
+
}
|
|
267
|
+
.Animation {
|
|
268
|
+
/* THIS creates the slider animation! */
|
|
269
|
+
transition: transform 0.8s;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
& .CategorySlide {
|
|
273
|
+
border-radius: 10px;
|
|
274
|
+
display: flex;
|
|
275
|
+
flex-direction: column;
|
|
276
|
+
align-items: center;
|
|
277
|
+
justify-content: space-evenly;
|
|
278
|
+
height: 200px;
|
|
279
|
+
width: 400px;
|
|
280
|
+
margin-right: 15px;
|
|
281
|
+
background-size: cover;
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
&TopContainer {
|
|
285
|
+
height: 100px;
|
|
286
|
+
display: flex;
|
|
287
|
+
align-items: center;
|
|
288
|
+
}
|
|
289
|
+
&Logo {
|
|
290
|
+
max-height: 100px;
|
|
291
|
+
}
|
|
292
|
+
&Title {
|
|
293
|
+
color: var(--emfe-w-color-white, #FFFFFF);
|
|
294
|
+
font-size: 18px;
|
|
295
|
+
letter-spacing: 1px;
|
|
296
|
+
}
|
|
297
|
+
&GameContainer {
|
|
298
|
+
display: flex;
|
|
299
|
+
justify-content: center;
|
|
300
|
+
gap: 3%;
|
|
301
|
+
min-height: 70px;
|
|
302
|
+
}
|
|
303
|
+
&GameImage {
|
|
304
|
+
border-radius: 10px;
|
|
305
|
+
width: 22%;
|
|
306
|
+
height: 55px;
|
|
307
|
+
object-fit: cover;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.Mobile {
|
|
314
|
+
|
|
315
|
+
&.CasinoCollectionsProviders {
|
|
316
|
+
padding: 25px 10px;
|
|
317
|
+
}
|
|
318
|
+
& .CategoriesSlider {
|
|
319
|
+
overflow: auto;
|
|
320
|
+
scroll-snap-type: x mandatory;
|
|
321
|
+
-ms-overflow-style: none;
|
|
322
|
+
scrollbar-width: none;
|
|
323
|
+
}
|
|
324
|
+
& .CategoriesSlider::-webkit-scrollbar {
|
|
325
|
+
display: none;
|
|
326
|
+
}
|
|
327
|
+
& .CategorySlide {
|
|
328
|
+
width: 85vw;
|
|
329
|
+
scroll-snap-align: start;
|
|
330
|
+
}
|
|
331
|
+
& .ButtonsContainer{
|
|
332
|
+
display: none;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
</style>
|
package/src/i18n.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
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({});
|