@everymatrix/casino-categories 0.0.365 → 0.0.367

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 (14) hide show
  1. package/README.md +30 -30
  2. package/dist/casino-categories.js +1 -1
  3. package/dist/casino-categories.js.map +1 -1
  4. package/index.html +97 -97
  5. package/index.js +1 -1
  6. package/package.json +2 -2
  7. package/public/reset.css +47 -47
  8. package/rollup.config.js +59 -59
  9. package/src/CasinoCategories.svelte +177 -177
  10. package/src/i18n.js +27 -27
  11. package/src/index.ts +4 -4
  12. package/src/translations.js +122 -122
  13. package/stories/CasinoCategories.stories.js +13 -13
  14. package/tsconfig.json +6 -6
package/src/CasinoCategories.svelte CHANGED
@@ -1,177 +1,177 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
- import { _, addNewMessages, setLocale } from './i18n';
4
- import { Translations } from './translations';
5
-
6
- export let endpoint:string = '';
7
- export let datasource:string = '';
8
- export let lang:string = 'en';
9
- export let activecategory:string = '';
10
- export let clientstyling:string = '';
11
- export let clientstylingurl:string = '';
12
-
13
- let customStylingContainer:HTMLElement;
14
- let displayNone:boolean = false;
15
- let isLoading:boolean = false;
16
- const categories:Array<any> = [];
17
- let topCategories:Array<any> = [];
18
- let otherCategories:Array<any> = [];
19
-
20
- Object.keys(Translations).forEach((item:any):void => {
21
- addNewMessages(item, Translations[item]);
22
- });
23
-
24
- const getCategories = ():void => {
25
- isLoading = true;
26
-
27
- const url:URL = new URL(`${endpoint}/casino/groups/${datasource}`);
28
-
29
- url.searchParams.append("language", lang);
30
-
31
- fetch(url)
32
- .then((res:any) => res.json())
33
- .then((data:any) => {
34
- isLoading = false;
35
-
36
- categories.push(...data.items)
37
-
38
- topCategories = categories.filter(category => category.isTopCategory === true)
39
- otherCategories = categories.filter(category => category.isTopCategory === false)
40
- });
41
- }
42
-
43
- const openGameCategory = (categoryId:any):void => {
44
- window.postMessage({ type: 'OpenGameCategory', categoryId });
45
- };
46
-
47
- const setActiveLanguage = ():void => {
48
- setLocale(lang);
49
- }
50
-
51
- const setClientStyling = ():void => {
52
- let sheet = document.createElement('style');
53
- sheet.innerHTML = clientstyling;
54
- customStylingContainer.appendChild(sheet);
55
- }
56
-
57
- const setClientStylingURL = ():void => {
58
- displayNone = true;
59
-
60
- let url:URL = new URL(clientstylingurl);
61
- let cssFile:HTMLElement = document.createElement('style');
62
-
63
- fetch(url.href)
64
- .then((res:any) => res.text())
65
- .then((data:any) => {
66
- cssFile.innerHTML = data;
67
-
68
- if (customStylingContainer) {
69
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
70
- setTimeout(() => { displayNone = false; }, 500);
71
- }
72
- });
73
- }
74
-
75
- $: endpoint && datasource && getCategories();
76
- $: lang && setActiveLanguage();
77
- $: clientstyling && setClientStyling();
78
- $: clientstylingurl && setClientStylingURL();
79
-
80
- </script>
81
- <div bind:this={customStylingContainer}>
82
- {#if isLoading}
83
- <p class="Message">Loading, please wait...</p>
84
- {:else}
85
- <div class="CasinoCategories">
86
- <h4 class="CategoryTitle">{$_('Translations.topCategories')}</h4>
87
- {#each topCategories as category}
88
- <div class="Category {activecategory === category.id ? "Active" : ""}">
89
- <img on:click={() => openGameCategory(category.id)} src={category.icon} alt="{category.name}" class="CategoryImage" >
90
- <div class="CategoryTextContainer">
91
- <p>{category.name}</p>
92
- <p>{category.games.count} {$_('Translations.games')}</p>
93
- </div>
94
- </div>
95
- {/each}
96
- <h4 class="CategoryTitle">{$_('Translations.otherCategories')}</h4>
97
- {#each otherCategories as category}
98
- <div class="Category {activecategory === category.id ? "Active" : ""}">
99
- <img on:click={() => openGameCategory(category.id)} src={category.icon} alt="{category.name}" class="CategoryImage">
100
- <div class="CategoryTextContainer">
101
- <p>{category.name}</p>
102
- <p>{category.games.count} {$_('Translations.games')}</p>
103
- </div>
104
- </div>
105
- {/each}
106
- </div>
107
- {/if}
108
- </div>
109
-
110
- <style lang="scss">
111
- :host {
112
- font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
113
- }
114
-
115
- *,
116
- *::before,
117
- *::after {
118
- margin: 0;
119
- padding: 0;
120
- box-sizing: border-box;
121
- }
122
-
123
- .CasinoCategories {
124
- display: flex;
125
- flex-direction: column;
126
- gap: 1rem;
127
- padding: 10px 60px;
128
- }
129
-
130
- .CategoryTitle {
131
- font-weight: 500;
132
- position: relative;
133
- right: 30px;
134
- margin: 10px 0;
135
- }
136
-
137
- .Category{
138
- border-radius: 7px;
139
- display: flex;
140
- align-items: center;
141
- gap: 16px;
142
- max-width: 300px;
143
- &.Active{
144
- box-shadow: 15px 15px 30px #e4e2e2;
145
- }
146
-
147
- &TextContainer {
148
- display: flex;
149
- flex-direction: column;
150
- justify-content: center;
151
- gap: 10px;
152
- font-size: 15px;
153
- & p:first-child {
154
- font-weight: 600;
155
- }
156
- & p:last-child {
157
- color: #828282;
158
- font-weight:300;
159
- }
160
- }
161
-
162
- &Image {
163
- border-radius: 4px;
164
- object-fit:cover;
165
- height: 64px;
166
- width: 64px;
167
- font-weight: 100;
168
- }
169
- }
170
- .Message {
171
- position: absolute;
172
- top: 50%;
173
- left: 50%;
174
- transform: translate(-50%, -50%);
175
- font-weight: 600;
176
- }
177
- </style>
1
+ <svelte:options tag={null} />
2
+ <script lang="ts">
3
+ import { _, addNewMessages, setLocale } from './i18n';
4
+ import { Translations } from './translations';
5
+
6
+ export let endpoint:string = '';
7
+ export let datasource:string = '';
8
+ export let lang:string = 'en';
9
+ export let activecategory:string = '';
10
+ export let clientstyling:string = '';
11
+ export let clientstylingurl:string = '';
12
+
13
+ let customStylingContainer:HTMLElement;
14
+ let displayNone:boolean = false;
15
+ let isLoading:boolean = false;
16
+ const categories:Array<any> = [];
17
+ let topCategories:Array<any> = [];
18
+ let otherCategories:Array<any> = [];
19
+
20
+ Object.keys(Translations).forEach((item:any):void => {
21
+ addNewMessages(item, Translations[item]);
22
+ });
23
+
24
+ const getCategories = ():void => {
25
+ isLoading = true;
26
+
27
+ const url:URL = new URL(`${endpoint}/casino/groups/${datasource}`);
28
+
29
+ url.searchParams.append("language", lang);
30
+
31
+ fetch(url)
32
+ .then((res:any) => res.json())
33
+ .then((data:any) => {
34
+ isLoading = false;
35
+
36
+ categories.push(...data.items)
37
+
38
+ topCategories = categories.filter(category => category.isTopCategory === true)
39
+ otherCategories = categories.filter(category => category.isTopCategory === false)
40
+ });
41
+ }
42
+
43
+ const openGameCategory = (categoryId:any):void => {
44
+ window.postMessage({ type: 'OpenGameCategory', categoryId });
45
+ };
46
+
47
+ const setActiveLanguage = ():void => {
48
+ setLocale(lang);
49
+ }
50
+
51
+ const setClientStyling = ():void => {
52
+ let sheet = document.createElement('style');
53
+ sheet.innerHTML = clientstyling;
54
+ customStylingContainer.appendChild(sheet);
55
+ }
56
+
57
+ const setClientStylingURL = ():void => {
58
+ displayNone = true;
59
+
60
+ let url:URL = new URL(clientstylingurl);
61
+ let cssFile:HTMLElement = document.createElement('style');
62
+
63
+ fetch(url.href)
64
+ .then((res:any) => res.text())
65
+ .then((data:any) => {
66
+ cssFile.innerHTML = data;
67
+
68
+ if (customStylingContainer) {
69
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
70
+ setTimeout(() => { displayNone = false; }, 500);
71
+ }
72
+ });
73
+ }
74
+
75
+ $: endpoint && datasource && getCategories();
76
+ $: lang && setActiveLanguage();
77
+ $: clientstyling && setClientStyling();
78
+ $: clientstylingurl && setClientStylingURL();
79
+
80
+ </script>
81
+ <div bind:this={customStylingContainer}>
82
+ {#if isLoading}
83
+ <p class="Message">Loading, please wait...</p>
84
+ {:else}
85
+ <div class="CasinoCategories">
86
+ <h4 class="CategoryTitle">{$_('Translations.topCategories')}</h4>
87
+ {#each topCategories as category}
88
+ <div class="Category {activecategory === category.id ? "Active" : ""}">
89
+ <img on:click={() => openGameCategory(category.id)} src={category.icon} alt="{category.name}" class="CategoryImage" >
90
+ <div class="CategoryTextContainer">
91
+ <p>{category.name}</p>
92
+ <p>{category.games.count} {$_('Translations.games')}</p>
93
+ </div>
94
+ </div>
95
+ {/each}
96
+ <h4 class="CategoryTitle">{$_('Translations.otherCategories')}</h4>
97
+ {#each otherCategories as category}
98
+ <div class="Category {activecategory === category.id ? "Active" : ""}">
99
+ <img on:click={() => openGameCategory(category.id)} src={category.icon} alt="{category.name}" class="CategoryImage">
100
+ <div class="CategoryTextContainer">
101
+ <p>{category.name}</p>
102
+ <p>{category.games.count} {$_('Translations.games')}</p>
103
+ </div>
104
+ </div>
105
+ {/each}
106
+ </div>
107
+ {/if}
108
+ </div>
109
+
110
+ <style lang="scss">
111
+ :host {
112
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
113
+ }
114
+
115
+ *,
116
+ *::before,
117
+ *::after {
118
+ margin: 0;
119
+ padding: 0;
120
+ box-sizing: border-box;
121
+ }
122
+
123
+ .CasinoCategories {
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 1rem;
127
+ padding: 10px 60px;
128
+ }
129
+
130
+ .CategoryTitle {
131
+ font-weight: 500;
132
+ position: relative;
133
+ right: 30px;
134
+ margin: 10px 0;
135
+ }
136
+
137
+ .Category{
138
+ border-radius: 7px;
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 16px;
142
+ max-width: 300px;
143
+ &.Active{
144
+ box-shadow: 15px 15px 30px #e4e2e2;
145
+ }
146
+
147
+ &TextContainer {
148
+ display: flex;
149
+ flex-direction: column;
150
+ justify-content: center;
151
+ gap: 10px;
152
+ font-size: 15px;
153
+ & p:first-child {
154
+ font-weight: 600;
155
+ }
156
+ & p:last-child {
157
+ color: #828282;
158
+ font-weight:300;
159
+ }
160
+ }
161
+
162
+ &Image {
163
+ border-radius: 4px;
164
+ object-fit:cover;
165
+ height: 64px;
166
+ width: 64px;
167
+ font-weight: 100;
168
+ }
169
+ }
170
+ .Message {
171
+ position: absolute;
172
+ top: 50%;
173
+ left: 50%;
174
+ transform: translate(-50%, -50%);
175
+ font-weight: 600;
176
+ }
177
+ </style>
package/src/i18n.js CHANGED
@@ -1,27 +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 };
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 CHANGED
@@ -1,4 +1,4 @@
1
- import CasinoCategories from './CasinoCategories.svelte';
2
-
3
- !customElements.get('casino-categories') && customElements.define('casino-categories', CasinoCategories);
4
- export default CasinoCategories;
1
+ import CasinoCategories from './CasinoCategories.svelte';
2
+
3
+ !customElements.get('casino-categories') && customElements.define('casino-categories', CasinoCategories);
4
+ export default CasinoCategories;
package/src/translations.js CHANGED
@@ -1,122 +1,122 @@
1
- export const Translations = {
2
- en: {
3
- Translations: {
4
- topCategories: "Top Categories",
5
- otherCategories: "Other Categories",
6
- loading: "Loading, please wait...",
7
- games: "games",
8
- },
9
- },
10
- zh: {
11
- Translations: {
12
- topCategories: "热门类别",
13
- otherCategories: "其他类别",
14
- loading: "加载请稍候...",
15
- games: "游戏",
16
- },
17
- },
18
- de: {
19
- Translations: {
20
- topCategories: "Top Kategorien",
21
- otherCategories: "Weitere Kategorien",
22
- loading: "Es lädt, bitte warten...",
23
- games: "Spiele",
24
- },
25
- },
26
- it: {
27
- Translations: {
28
- topCategories: "Top Categories",
29
- otherCategories: "Other Categories",
30
- loading: "Loading, please wait...",
31
- games: "games",
32
- },
33
- },
34
- fr: {
35
- Translations: {
36
- topCategories: "Catégories principales",
37
- otherCategories: "Autres catégories",
38
- loading: "Chargement, veuillez patienter...",
39
- games: "jeux",
40
- },
41
- },
42
- es: {
43
- Translations: {
44
- topCategories: "Top Categories",
45
- otherCategories: "Other Categories",
46
- loading: "Loading, please wait...",
47
- games: "games",
48
- },
49
- },
50
- tr: {
51
- Translations: {
52
- topCategories: "Top Categories",
53
- otherCategories: "Other Categories",
54
- loading: "Loading, please wait...",
55
- games: "games",
56
- },
57
- },
58
- ru: {
59
- Translations: {
60
- topCategories: "Top Categories",
61
- otherCategories: "Other Categories",
62
- loading: "Loading, please wait...",
63
- games: "games",
64
- },
65
- },
66
- ro: {
67
- Translations: {
68
- topCategories: "Categorii de top",
69
- otherCategories: "Alte categorii",
70
- loading: "Se incarca, te rugam asteapta…",
71
- games: "jocuri",
72
- },
73
- },
74
- hr: {
75
- Translations: {
76
- topCategories: "Top Categories",
77
- otherCategories: "Other Categories",
78
- loading: "Loading, please wait...",
79
- games: "games",
80
- },
81
- },
82
- hu: {
83
- Translations: {
84
- topCategories: "Top Categories",
85
- otherCategories: "Other Categories",
86
- loading: "Loading, please wait...",
87
- games: "games",
88
- },
89
- },
90
- pl: {
91
- Translations: {
92
- topCategories: "Top Categories",
93
- otherCategories: "Other Categories",
94
- loading: "Loading, please wait...",
95
- games: "games",
96
- },
97
- },
98
- pt: {
99
- Translations: {
100
- topCategories: "Top Categories",
101
- otherCategories: "Other Categories",
102
- loading: "Loading, please wait...",
103
- games: "games",
104
- },
105
- },
106
- sl: {
107
- Translations: {
108
- topCategories: "Top Categories",
109
- otherCategories: "Other Categories",
110
- loading: "Loading, please wait...",
111
- games: "games",
112
- },
113
- },
114
- sr: {
115
- Translations: {
116
- topCategories: "Top Categories",
117
- otherCategories: "Other Categories",
118
- loading: "Loading, please wait...",
119
- games: "games",
120
- },
121
- },
122
- };
1
+ export const Translations = {
2
+ en: {
3
+ Translations: {
4
+ topCategories: "Top Categories",
5
+ otherCategories: "Other Categories",
6
+ loading: "Loading, please wait...",
7
+ games: "games",
8
+ },
9
+ },
10
+ zh: {
11
+ Translations: {
12
+ topCategories: "热门类别",
13
+ otherCategories: "其他类别",
14
+ loading: "加载请稍候...",
15
+ games: "游戏",
16
+ },
17
+ },
18
+ de: {
19
+ Translations: {
20
+ topCategories: "Top Kategorien",
21
+ otherCategories: "Weitere Kategorien",
22
+ loading: "Es lädt, bitte warten...",
23
+ games: "Spiele",
24
+ },
25
+ },
26
+ it: {
27
+ Translations: {
28
+ topCategories: "Top Categories",
29
+ otherCategories: "Other Categories",
30
+ loading: "Loading, please wait...",
31
+ games: "games",
32
+ },
33
+ },
34
+ fr: {
35
+ Translations: {
36
+ topCategories: "Catégories principales",
37
+ otherCategories: "Autres catégories",
38
+ loading: "Chargement, veuillez patienter...",
39
+ games: "jeux",
40
+ },
41
+ },
42
+ es: {
43
+ Translations: {
44
+ topCategories: "Top Categories",
45
+ otherCategories: "Other Categories",
46
+ loading: "Loading, please wait...",
47
+ games: "games",
48
+ },
49
+ },
50
+ tr: {
51
+ Translations: {
52
+ topCategories: "Top Categories",
53
+ otherCategories: "Other Categories",
54
+ loading: "Loading, please wait...",
55
+ games: "games",
56
+ },
57
+ },
58
+ ru: {
59
+ Translations: {
60
+ topCategories: "Top Categories",
61
+ otherCategories: "Other Categories",
62
+ loading: "Loading, please wait...",
63
+ games: "games",
64
+ },
65
+ },
66
+ ro: {
67
+ Translations: {
68
+ topCategories: "Categorii de top",
69
+ otherCategories: "Alte categorii",
70
+ loading: "Se incarca, te rugam asteapta…",
71
+ games: "jocuri",
72
+ },
73
+ },
74
+ hr: {
75
+ Translations: {
76
+ topCategories: "Top Categories",
77
+ otherCategories: "Other Categories",
78
+ loading: "Loading, please wait...",
79
+ games: "games",
80
+ },
81
+ },
82
+ hu: {
83
+ Translations: {
84
+ topCategories: "Top Categories",
85
+ otherCategories: "Other Categories",
86
+ loading: "Loading, please wait...",
87
+ games: "games",
88
+ },
89
+ },
90
+ pl: {
91
+ Translations: {
92
+ topCategories: "Top Categories",
93
+ otherCategories: "Other Categories",
94
+ loading: "Loading, please wait...",
95
+ games: "games",
96
+ },
97
+ },
98
+ pt: {
99
+ Translations: {
100
+ topCategories: "Top Categories",
101
+ otherCategories: "Other Categories",
102
+ loading: "Loading, please wait...",
103
+ games: "games",
104
+ },
105
+ },
106
+ sl: {
107
+ Translations: {
108
+ topCategories: "Top Categories",
109
+ otherCategories: "Other Categories",
110
+ loading: "Loading, please wait...",
111
+ games: "games",
112
+ },
113
+ },
114
+ sr: {
115
+ Translations: {
116
+ topCategories: "Top Categories",
117
+ otherCategories: "Other Categories",
118
+ loading: "Loading, please wait...",
119
+ games: "games",
120
+ },
121
+ },
122
+ };