@betarena/ad-engine 0.0.5 → 0.0.7
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/.eslintrc.yaml +164 -0
- package/package.json +34 -14
- package/src/App.svelte +8 -0
- package/src/lib/Widget-AdEngine.svelte +492 -0
- package/src/lib/Widget-AdGeneral.svelte +284 -0
- package/src/lib/Widget-AdvertSlide.svelte +384 -0
- package/src/lib/assets/icon-close.svg +9 -0
- package/src/lib/assets/icon-external-link.svg +4 -0
- package/src/lib/constants/instance.ts +10 -0
- package/src/lib/store.ts +284 -0
- package/src/lib/types/ad-engine.d.ts +21 -0
- package/src/lib/types/geojs.d.ts +83 -0
- package/src/lib/types/global.d.ts +4 -0
- package/src/lib/types/vite-env.d.ts +2 -0
- package/src/lib/utils/device.ts +37 -0
- package/src/lib/utils/fetch.ts +107 -0
- package/src/lib/utils/geo.ts +34 -0
- package/src/main.ts +17 -0
- package/vite.config.ts +29 -3
- package/dist/assets/index-Cm9IxoHj.js +0 -1
- package/dist/index.html +0 -13
- package/dist/vite.svg +0 -1
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
3
|
+
│ 📌 High Order Component Overview │
|
|
4
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
5
|
+
│ ➤ Internal Svelte Code Format :|: V.8.0 │
|
|
6
|
+
│ ➤ Status :|: 🔒 LOCKED │
|
|
7
|
+
│ ➤ Author(s) :|: @migbash │
|
|
8
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
9
|
+
│ 📝 Description │
|
|
10
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
11
|
+
│ Betarena Ad-Engine Component │
|
|
12
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
13
|
+
-->
|
|
14
|
+
|
|
15
|
+
<!--
|
|
16
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
17
|
+
│ 🟦 Svelte Component JS/TS │
|
|
18
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
19
|
+
│ ➤ HINT: │ Access snippets for '<script> [..] </script>' those found in │
|
|
20
|
+
│ │ '.vscode/snippets.code-snippets' via intellisense using 'doc' │
|
|
21
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
22
|
+
-->
|
|
23
|
+
|
|
24
|
+
<script lang="ts">
|
|
25
|
+
|
|
26
|
+
// #region ➤ 📦 Package Imports
|
|
27
|
+
|
|
28
|
+
// ╭────────────────────────────────────────────────────────────────────────╮
|
|
29
|
+
// │ NOTE: │
|
|
30
|
+
// │ Please add inside 'this' region the 'imports' that are required │
|
|
31
|
+
// │ by 'this' .svelte file is ran. │
|
|
32
|
+
// │ IMPORTANT │
|
|
33
|
+
// │ Please, structure the imports as follows: │
|
|
34
|
+
// │ 1. svelte/sveltekit imports │
|
|
35
|
+
// │ 2. project-internal files and logic │
|
|
36
|
+
// │ 3. component import(s) │
|
|
37
|
+
// │ 4. assets import(s) │
|
|
38
|
+
// │ 5. type(s) imports(s) │
|
|
39
|
+
// ╰────────────────────────────────────────────────────────────────────────╯
|
|
40
|
+
|
|
41
|
+
import { fly } from 'svelte/transition';
|
|
42
|
+
|
|
43
|
+
import iconArrow from './assets/icon-external-link.svg';
|
|
44
|
+
|
|
45
|
+
import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
|
|
46
|
+
|
|
47
|
+
// #endregion ➤ 📦 Package Imports
|
|
48
|
+
|
|
49
|
+
// #region ➤ 📌 VARIABLES
|
|
50
|
+
|
|
51
|
+
// ╭────────────────────────────────────────────────────────────────────────╮
|
|
52
|
+
// │ NOTE: │
|
|
53
|
+
// │ Please add inside 'this' region the 'variables' that are to be │
|
|
54
|
+
// │ and are expected to be used by 'this' .svelte file / component. │
|
|
55
|
+
// │ IMPORTANT │
|
|
56
|
+
// │ Please, structure the imports as follows: │
|
|
57
|
+
// │ 1. export const / let [..] │
|
|
58
|
+
// │ 2. const [..] │
|
|
59
|
+
// │ 3. let [..] │
|
|
60
|
+
// │ 4. $: [..] │
|
|
61
|
+
// ╰────────────────────────────────────────────────────────────────────────╯
|
|
62
|
+
|
|
63
|
+
export let
|
|
64
|
+
/**
|
|
65
|
+
* @augments AdsCreativeMain
|
|
66
|
+
*/
|
|
67
|
+
adData: AdsCreativeMain
|
|
68
|
+
;
|
|
69
|
+
|
|
70
|
+
const
|
|
71
|
+
/**
|
|
72
|
+
* @description
|
|
73
|
+
* 📝 `this` component **main** `id` and `data-testid` prefix.
|
|
74
|
+
*/ // eslint-disable-next-line no-unused-vars
|
|
75
|
+
CNAME = 'global⮕widget⮕betarenaAdEngineX1⮕main'
|
|
76
|
+
;
|
|
77
|
+
|
|
78
|
+
// #endregion ➤ 📌 VARIABLES
|
|
79
|
+
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<!--
|
|
83
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
84
|
+
│ 💠 Svelte Component HTML │
|
|
85
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
86
|
+
│ ➤ HINT: │ Use 'Ctrl + Space' to autocomplete global class=styles, dynamically │
|
|
87
|
+
│ │ imported from './static/app.css' │
|
|
88
|
+
│ ➤ HINT: │ access custom Betarena Scores VScode Snippets by typing emmet-like │
|
|
89
|
+
│ │ abbrev. │
|
|
90
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
91
|
+
-->
|
|
92
|
+
|
|
93
|
+
<p>
|
|
94
|
+
General Advert Sample
|
|
95
|
+
</p>
|
|
96
|
+
|
|
97
|
+
<div
|
|
98
|
+
id={CNAME}
|
|
99
|
+
in:fly={{ y: 500, duration: 500 }}
|
|
100
|
+
out:fly={{ y: 500, duration: 500 }}
|
|
101
|
+
>
|
|
102
|
+
|
|
103
|
+
<!--
|
|
104
|
+
╭─────
|
|
105
|
+
│ ➤ (image) banner image
|
|
106
|
+
╰─────
|
|
107
|
+
-->
|
|
108
|
+
{#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
|
|
109
|
+
<iframe
|
|
110
|
+
width=250
|
|
111
|
+
height=250
|
|
112
|
+
src={adData.data?.media}
|
|
113
|
+
/>
|
|
114
|
+
<!--
|
|
115
|
+
<video
|
|
116
|
+
width=250
|
|
117
|
+
height=250
|
|
118
|
+
src={adData.data?.media}
|
|
119
|
+
/>
|
|
120
|
+
-->
|
|
121
|
+
|
|
122
|
+
{:else if (adData.type == 2)}
|
|
123
|
+
<img
|
|
124
|
+
id='banner'
|
|
125
|
+
src={adData.data?.media}
|
|
126
|
+
alt=''
|
|
127
|
+
title=''
|
|
128
|
+
loading='lazy'
|
|
129
|
+
/>
|
|
130
|
+
|
|
131
|
+
{/if}
|
|
132
|
+
|
|
133
|
+
<!--
|
|
134
|
+
╭─────
|
|
135
|
+
│ ➤ (container) advert content
|
|
136
|
+
╰─────
|
|
137
|
+
-->
|
|
138
|
+
<div
|
|
139
|
+
id="main-box"
|
|
140
|
+
>
|
|
141
|
+
|
|
142
|
+
<!--
|
|
143
|
+
╭─────
|
|
144
|
+
│ ➤ (text) advert title
|
|
145
|
+
╰─────
|
|
146
|
+
-->
|
|
147
|
+
<p
|
|
148
|
+
id="title"
|
|
149
|
+
>
|
|
150
|
+
{adData.data?.title}
|
|
151
|
+
</p>
|
|
152
|
+
|
|
153
|
+
<!--
|
|
154
|
+
╭─────
|
|
155
|
+
│ ➤ (button) advert CTA
|
|
156
|
+
╰─────
|
|
157
|
+
-->
|
|
158
|
+
<a
|
|
159
|
+
href={adData.data?.cta_link}
|
|
160
|
+
target="_blank"
|
|
161
|
+
rel="noopener
|
|
162
|
+
noreferrer">
|
|
163
|
+
<button
|
|
164
|
+
>
|
|
165
|
+
{adData.data?.cta_title ?? 'Recieve Bonus'}
|
|
166
|
+
<img
|
|
167
|
+
id=''
|
|
168
|
+
src={iconArrow}
|
|
169
|
+
alt='icon-arrow'
|
|
170
|
+
title='icon-arrow'
|
|
171
|
+
loading='lazy'
|
|
172
|
+
style=
|
|
173
|
+
"
|
|
174
|
+
margin-left: 10px;
|
|
175
|
+
"
|
|
176
|
+
/>
|
|
177
|
+
</button>
|
|
178
|
+
</a>
|
|
179
|
+
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<!--
|
|
185
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
186
|
+
│ 🌊 Svelte Component CSS/SCSS │
|
|
187
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
188
|
+
│ ➤ HINT: │ auto-fill/auto-complete iniside <style> for var() │
|
|
189
|
+
│ │ values by typing/CTRL+SPACE │
|
|
190
|
+
│ ➤ HINT: │ access custom Betarena Scores CSS VScode Snippets by typing 'style...' │
|
|
191
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
192
|
+
-->
|
|
193
|
+
|
|
194
|
+
<style lang="scss">
|
|
195
|
+
|
|
196
|
+
/*
|
|
197
|
+
╭──────────────────────────────────────────────────────────────────────────────╮
|
|
198
|
+
│ 📲 MOBILE-FIRST │
|
|
199
|
+
╰──────────────────────────────────────────────────────────────────────────────╯
|
|
200
|
+
*/
|
|
201
|
+
|
|
202
|
+
div#global⮕widget⮕betarenaAdEngineX1⮕main
|
|
203
|
+
{
|
|
204
|
+
/* 🎨 style */
|
|
205
|
+
overflow: hidden;
|
|
206
|
+
border-radius: 40px 40px 0px 0px;
|
|
207
|
+
background-color: #383838;
|
|
208
|
+
|
|
209
|
+
a
|
|
210
|
+
{
|
|
211
|
+
text-decoration: none !important;
|
|
212
|
+
color: inherit;
|
|
213
|
+
display: flex;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
button
|
|
217
|
+
{
|
|
218
|
+
/* 🎨 style */
|
|
219
|
+
outline: none !important;
|
|
220
|
+
border: none !important;
|
|
221
|
+
opacity: 1;
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
transition: all 0.3s ease;
|
|
224
|
+
align-items: center;
|
|
225
|
+
white-space: nowrap;
|
|
226
|
+
display: flex;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
p
|
|
231
|
+
{
|
|
232
|
+
/* 🎨 style */
|
|
233
|
+
font-family: "Roboto";
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
img
|
|
237
|
+
{
|
|
238
|
+
&#banner
|
|
239
|
+
{
|
|
240
|
+
/* 🎨 style */
|
|
241
|
+
height: 355px;
|
|
242
|
+
width: 100%;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
iframe
|
|
247
|
+
{
|
|
248
|
+
/* 🎨 style */
|
|
249
|
+
width: 100%;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
div#main-box
|
|
253
|
+
{
|
|
254
|
+
/* 🎨 style */
|
|
255
|
+
text-align: center;
|
|
256
|
+
padding: 20px 20px 35px 20px;
|
|
257
|
+
|
|
258
|
+
p
|
|
259
|
+
{
|
|
260
|
+
/* 🎨 style */
|
|
261
|
+
margin: 0;
|
|
262
|
+
margin-bottom: 25px;
|
|
263
|
+
|
|
264
|
+
&#title
|
|
265
|
+
{
|
|
266
|
+
/* 🎨 style */
|
|
267
|
+
color: #FFFFFF;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
button
|
|
272
|
+
{
|
|
273
|
+
/* 🎨 style */
|
|
274
|
+
border-radius: 7.57px;
|
|
275
|
+
height: 50px;
|
|
276
|
+
width: 100%;
|
|
277
|
+
padding: 10px;
|
|
278
|
+
background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
|
|
279
|
+
color: #FFFFFF;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
</style>
|
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
3
|
+
│ 📌 High Order Component Overview │
|
|
4
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
5
|
+
│ ➤ Internal Svelte Code Format :|: V.8.0 │
|
|
6
|
+
│ ➤ Status :|: 🔒 LOCKED │
|
|
7
|
+
│ ➤ Author(s) :|: @migbash │
|
|
8
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
9
|
+
│ 📝 Description │
|
|
10
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
11
|
+
│ Betarena Ad-Engine Component │
|
|
12
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
13
|
+
-->
|
|
14
|
+
|
|
15
|
+
<!--
|
|
16
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
17
|
+
│ 🟦 Svelte Component JS/TS │
|
|
18
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
19
|
+
│ ➤ HINT: │ Access snippets for '<script> [..] </script>' those found in │
|
|
20
|
+
│ │ '.vscode/snippets.code-snippets' via intellisense using 'doc' │
|
|
21
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
22
|
+
-->
|
|
23
|
+
|
|
24
|
+
<script lang="ts">
|
|
25
|
+
|
|
26
|
+
// #region ➤ 📦 Package Imports
|
|
27
|
+
|
|
28
|
+
// ╭────────────────────────────────────────────────────────────────────────╮
|
|
29
|
+
// │ NOTE: │
|
|
30
|
+
// │ Please add inside 'this' region the 'imports' that are required │
|
|
31
|
+
// │ by 'this' .svelte file is ran. │
|
|
32
|
+
// │ IMPORTANT │
|
|
33
|
+
// │ Please, structure the imports as follows: │
|
|
34
|
+
// │ 1. svelte/sveltekit imports │
|
|
35
|
+
// │ 2. project-internal files and logic │
|
|
36
|
+
// │ 3. component import(s) │
|
|
37
|
+
// │ 4. assets import(s) │
|
|
38
|
+
// │ 5. type(s) imports(s) │
|
|
39
|
+
// ╰────────────────────────────────────────────────────────────────────────╯
|
|
40
|
+
|
|
41
|
+
import { onMount } from 'svelte';
|
|
42
|
+
import { fly } from 'svelte/transition';
|
|
43
|
+
|
|
44
|
+
import iconClose from './assets/icon-close.svg';
|
|
45
|
+
import iconArrow from './assets/icon-external-link.svg';
|
|
46
|
+
import { betarenaAdEngineStore } from './store.js';
|
|
47
|
+
|
|
48
|
+
import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
|
|
49
|
+
|
|
50
|
+
// #endregion ➤ 📦 Package Imports
|
|
51
|
+
|
|
52
|
+
// #region ➤ 📌 VARIABLES
|
|
53
|
+
|
|
54
|
+
// ╭────────────────────────────────────────────────────────────────────────╮
|
|
55
|
+
// │ NOTE: │
|
|
56
|
+
// │ Please add inside 'this' region the 'variables' that are to be │
|
|
57
|
+
// │ and are expected to be used by 'this' .svelte file / component. │
|
|
58
|
+
// │ IMPORTANT │
|
|
59
|
+
// │ Please, structure the imports as follows: │
|
|
60
|
+
// │ 1. export const / let [..] │
|
|
61
|
+
// │ 2. const [..] │
|
|
62
|
+
// │ 3. let [..] │
|
|
63
|
+
// │ 4. $: [..] │
|
|
64
|
+
// ╰────────────────────────────────────────────────────────────────────────╯
|
|
65
|
+
|
|
66
|
+
export let
|
|
67
|
+
/**
|
|
68
|
+
* @augments AdsCreativeMain
|
|
69
|
+
*/
|
|
70
|
+
adData: AdsCreativeMain
|
|
71
|
+
;
|
|
72
|
+
|
|
73
|
+
const
|
|
74
|
+
/**
|
|
75
|
+
* @description
|
|
76
|
+
* 📣 `this` component **main** `id` and `data-testid` prefix.
|
|
77
|
+
*/ // eslint-disable-next-line no-unused-vars
|
|
78
|
+
CNAME = 'global⮕widget⮕betarenaAdEngine⮕main'
|
|
79
|
+
;
|
|
80
|
+
|
|
81
|
+
let
|
|
82
|
+
/**
|
|
83
|
+
* @description
|
|
84
|
+
* 📝
|
|
85
|
+
*/
|
|
86
|
+
isAdvertShown: boolean = false,
|
|
87
|
+
/**
|
|
88
|
+
* @description
|
|
89
|
+
* 📝
|
|
90
|
+
*/
|
|
91
|
+
isAdvertCloseBtnShown: boolean = false
|
|
92
|
+
;
|
|
93
|
+
|
|
94
|
+
$: ({ isBetarenaAdShownForToday } = { ...$betarenaAdEngineStore });
|
|
95
|
+
|
|
96
|
+
// #endregion ➤ 📌 VARIABLES
|
|
97
|
+
|
|
98
|
+
// #region ➤ 🔄 LIFECYCLE [SVELTE]
|
|
99
|
+
|
|
100
|
+
// ╭────────────────────────────────────────────────────────────────────────╮
|
|
101
|
+
// │ NOTE: │
|
|
102
|
+
// │ Please add inside 'this' region the 'logic' that should run │
|
|
103
|
+
// │ immediately and as part of the 'lifecycle' of svelteJs, │
|
|
104
|
+
// │ as soon as 'this' .svelte file is ran. │
|
|
105
|
+
// ╰────────────────────────────────────────────────────────────────────────╯
|
|
106
|
+
|
|
107
|
+
onMount
|
|
108
|
+
(
|
|
109
|
+
() =>
|
|
110
|
+
{
|
|
111
|
+
setTimeout
|
|
112
|
+
(
|
|
113
|
+
() =>
|
|
114
|
+
{
|
|
115
|
+
isAdvertShown = true;
|
|
116
|
+
return;
|
|
117
|
+
},
|
|
118
|
+
// 10000
|
|
119
|
+
0
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
setTimeout
|
|
123
|
+
(
|
|
124
|
+
() =>
|
|
125
|
+
{
|
|
126
|
+
isAdvertCloseBtnShown = true;
|
|
127
|
+
return;
|
|
128
|
+
},
|
|
129
|
+
// 15000
|
|
130
|
+
0
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
// #endregion ➤ 🔄 LIFECYCLE [SVELTE]
|
|
138
|
+
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<!--
|
|
142
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
143
|
+
│ 💠 Svelte Component HTML │
|
|
144
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
145
|
+
│ ➤ HINT: │ Use 'Ctrl + Space' to autocomplete global class=styles, dynamically │
|
|
146
|
+
│ │ imported from './static/app.css' │
|
|
147
|
+
│ ➤ HINT: │ access custom Betarena Scores VScode Snippets by typing emmet-like │
|
|
148
|
+
│ │ abbrev. │
|
|
149
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
150
|
+
-->
|
|
151
|
+
|
|
152
|
+
<p>
|
|
153
|
+
Global Advert Sample
|
|
154
|
+
</p>
|
|
155
|
+
|
|
156
|
+
{#if isAdvertShown && !isBetarenaAdShownForToday}
|
|
157
|
+
<div
|
|
158
|
+
id={CNAME}
|
|
159
|
+
in:fly={{ y: 500, duration: 500 }}
|
|
160
|
+
out:fly={{ y: 500, duration: 500 }}
|
|
161
|
+
>
|
|
162
|
+
|
|
163
|
+
<!--
|
|
164
|
+
╭─────
|
|
165
|
+
│ ➤ (image) close
|
|
166
|
+
╰─────
|
|
167
|
+
-->
|
|
168
|
+
{#if isAdvertCloseBtnShown}
|
|
169
|
+
<img
|
|
170
|
+
id='close'
|
|
171
|
+
src={iconClose}
|
|
172
|
+
alt='icon-close'
|
|
173
|
+
title='icon-close'
|
|
174
|
+
loading='lazy'
|
|
175
|
+
on:click=
|
|
176
|
+
{
|
|
177
|
+
() =>
|
|
178
|
+
{
|
|
179
|
+
betarenaAdEngineStore.updateData
|
|
180
|
+
(
|
|
181
|
+
[
|
|
182
|
+
['toggleAdShownState', undefined]
|
|
183
|
+
]
|
|
184
|
+
);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
/>
|
|
189
|
+
{/if}
|
|
190
|
+
|
|
191
|
+
<!--
|
|
192
|
+
╭─────
|
|
193
|
+
│ ➤ (image) banner image
|
|
194
|
+
╰─────
|
|
195
|
+
-->
|
|
196
|
+
{#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
|
|
197
|
+
<iframe
|
|
198
|
+
width=250
|
|
199
|
+
height=250
|
|
200
|
+
src={adData.data?.media}
|
|
201
|
+
/>
|
|
202
|
+
<!--
|
|
203
|
+
<video
|
|
204
|
+
width=250
|
|
205
|
+
height=250
|
|
206
|
+
src={adData.data?.media}
|
|
207
|
+
/>
|
|
208
|
+
-->
|
|
209
|
+
|
|
210
|
+
{:else if (adData.type == 2)}
|
|
211
|
+
<img
|
|
212
|
+
id='banner'
|
|
213
|
+
src={adData.data?.media}
|
|
214
|
+
alt=''
|
|
215
|
+
title=''
|
|
216
|
+
loading='lazy'
|
|
217
|
+
/>
|
|
218
|
+
|
|
219
|
+
{/if}
|
|
220
|
+
|
|
221
|
+
<!--
|
|
222
|
+
╭─────
|
|
223
|
+
│ ➤ (container) advert content
|
|
224
|
+
╰─────
|
|
225
|
+
-->
|
|
226
|
+
<div
|
|
227
|
+
id="main-box"
|
|
228
|
+
>
|
|
229
|
+
|
|
230
|
+
<!--
|
|
231
|
+
╭─────
|
|
232
|
+
│ ➤ (text) advert title
|
|
233
|
+
╰─────
|
|
234
|
+
-->
|
|
235
|
+
<p
|
|
236
|
+
id="title"
|
|
237
|
+
>
|
|
238
|
+
{adData.data?.title}
|
|
239
|
+
</p>
|
|
240
|
+
|
|
241
|
+
<!--
|
|
242
|
+
╭─────
|
|
243
|
+
│ ➤ (button) advert CTA
|
|
244
|
+
╰─────
|
|
245
|
+
-->
|
|
246
|
+
<a
|
|
247
|
+
href={adData.data?.cta_link}
|
|
248
|
+
target="_blank"
|
|
249
|
+
rel=
|
|
250
|
+
"
|
|
251
|
+
noopener
|
|
252
|
+
noreferrer
|
|
253
|
+
"
|
|
254
|
+
>
|
|
255
|
+
<button
|
|
256
|
+
>
|
|
257
|
+
{adData.data?.cta_title ?? 'Recieve Bonus'}
|
|
258
|
+
<img
|
|
259
|
+
id=''
|
|
260
|
+
src={iconArrow}
|
|
261
|
+
alt='icon-arrow'
|
|
262
|
+
title='icon-arrow'
|
|
263
|
+
loading='lazy'
|
|
264
|
+
style=
|
|
265
|
+
"
|
|
266
|
+
margin-left: 10px;
|
|
267
|
+
"
|
|
268
|
+
/>
|
|
269
|
+
</button>
|
|
270
|
+
</a>
|
|
271
|
+
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
</div>
|
|
275
|
+
{/if}
|
|
276
|
+
|
|
277
|
+
<!--
|
|
278
|
+
╭──────────────────────────────────────────────────────────────────────────────────╮
|
|
279
|
+
│ 🌊 Svelte Component CSS/SCSS │
|
|
280
|
+
┣──────────────────────────────────────────────────────────────────────────────────┫
|
|
281
|
+
│ ➤ HINT: │ auto-fill/auto-complete iniside <style> for var() │
|
|
282
|
+
│ │ values by typing/CTRL+SPACE │
|
|
283
|
+
│ ➤ HINT: │ access custom Betarena Scores CSS VScode Snippets by typing 'style...' │
|
|
284
|
+
╰──────────────────────────────────────────────────────────────────────────────────╯
|
|
285
|
+
-->
|
|
286
|
+
|
|
287
|
+
<style lang="scss">
|
|
288
|
+
|
|
289
|
+
/*
|
|
290
|
+
╭──────────────────────────────────────────────────────────────────────────────╮
|
|
291
|
+
│ 📲 MOBILE-FIRST │
|
|
292
|
+
╰──────────────────────────────────────────────────────────────────────────────╯
|
|
293
|
+
*/
|
|
294
|
+
|
|
295
|
+
div#global⮕widget⮕betarenaAdEngine⮕main
|
|
296
|
+
{
|
|
297
|
+
/* 📌 position */
|
|
298
|
+
position: fixed;
|
|
299
|
+
z-index: 10000;
|
|
300
|
+
bottom: 0;
|
|
301
|
+
right: 0;
|
|
302
|
+
left: 0;
|
|
303
|
+
/* 🎨 style */
|
|
304
|
+
overflow: hidden;
|
|
305
|
+
border-radius: 40px 40px 0px 0px;
|
|
306
|
+
background-color: #383838;
|
|
307
|
+
|
|
308
|
+
button
|
|
309
|
+
{
|
|
310
|
+
/* 🎨 style */
|
|
311
|
+
outline: none !important;
|
|
312
|
+
border: none !important;
|
|
313
|
+
opacity: 1;
|
|
314
|
+
cursor: pointer;
|
|
315
|
+
transition: all 0.3s ease;
|
|
316
|
+
align-items: center;
|
|
317
|
+
white-space: nowrap;
|
|
318
|
+
display: flex;
|
|
319
|
+
justify-content: center;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
p
|
|
323
|
+
{
|
|
324
|
+
/* 🎨 style */
|
|
325
|
+
font-family: "Roboto";
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
img
|
|
329
|
+
{
|
|
330
|
+
&#close
|
|
331
|
+
{
|
|
332
|
+
/* 📌 position */
|
|
333
|
+
position: absolute;
|
|
334
|
+
top: 10px;
|
|
335
|
+
right: 10px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
&#banner
|
|
339
|
+
{
|
|
340
|
+
/* 🎨 style */
|
|
341
|
+
height: 355px;
|
|
342
|
+
width: 100%;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
iframe
|
|
347
|
+
{
|
|
348
|
+
/* 🎨 style */
|
|
349
|
+
width: 100%;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
div#main-box
|
|
353
|
+
{
|
|
354
|
+
/* 🎨 style */
|
|
355
|
+
text-align: center;
|
|
356
|
+
padding: 20px 20px 35px 20px;
|
|
357
|
+
|
|
358
|
+
p
|
|
359
|
+
{
|
|
360
|
+
/* 🎨 style */
|
|
361
|
+
margin: 0;
|
|
362
|
+
margin-bottom: 25px;
|
|
363
|
+
|
|
364
|
+
&#title
|
|
365
|
+
{
|
|
366
|
+
/* 🎨 style */
|
|
367
|
+
color: #FFFFFF;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
button
|
|
372
|
+
{
|
|
373
|
+
/* 🎨 style */
|
|
374
|
+
border-radius: 7.57px;
|
|
375
|
+
height: 50px;
|
|
376
|
+
width: 100%;
|
|
377
|
+
padding: 10px;
|
|
378
|
+
background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
|
|
379
|
+
color: #FFFFFF;
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
</style>
|