@everymatrix/casino-game-thumbnail 0.0.245 → 0.0.249

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 (4) hide show
  1. package/dist/casino-game-thumbnail.js +1 -1
  2. package/dist/casino-game-thumbnail.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/CasinoGameThumbnail.svelte +59 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-game-thumbnail",
3
- "version": "0.0.245",
3
+ "version": "0.0.249",
4
4
  "main": "dist/casino-game-thumbnail.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "d96554d716d8c3b41f947c85c9b8cae8f03aa5bf"
39
+ "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
40
40
  }
package/src/CasinoGameThumbnail.svelte CHANGED
@@ -26,11 +26,12 @@
26
26
  export let gamefavorite:boolean = false;
27
27
  export let showfavoredcategory:boolean = false;
28
28
  export let showgamename:boolean = false;
29
+ export let currency:string;
30
+
29
31
  export let endpoint:string = '';
30
32
 
31
33
  export let livelobbyendpoint:String = '';
32
- export let currency:string='EUR';
33
- export let connectlive:string = '';
34
+ export let connectlive:string;
34
35
  export let visibilityconnect:string = '';
35
36
 
36
37
  let isLoggedIn:boolean = false;
@@ -53,7 +54,7 @@
53
54
  let betlimit:any = {};
54
55
  let openhours:any;
55
56
  let seats:any = [];
56
- let currencySymbol:any='TRY';
57
+ let currencySymbol:any='EUR';
57
58
  let min:any;
58
59
  let max:any;
59
60
  let totalseats:any;
@@ -546,15 +547,15 @@
546
547
  $: roulletteref && roulleteresults && attachAnimations();
547
548
  </script>
548
549
 
549
- <div class={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
550
- <div class="GameInnerContainer" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchleave={gameTouchLeave}>
551
- <img src={gamethumbnail} class="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" alt="" bind:this={image} loading="lazy" />
552
- <div class="GameInfoWrapper">
553
- <div class="GameInfo {hover ? 'GameHovered' : ''}">
550
+ <div class={`GameContainer ${extraclassname}`} part={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
551
+ <div class="GameInnerContainer { (livegamedata && !isopen) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" part="GameInnerContainer { (livegamedata && !isopen) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchleave={gameTouchLeave}>
552
+ <img src={gamethumbnail} class="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" part="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" alt="" bind:this={image} loading="lazy" />
553
+ <div class="GameInfoWrapper" part="GameInfoWrapper">
554
+ <div class="GameInfo {hover ? 'GameHovered' : ''}" part="GameInfo {hover ? 'GameHovered' : ''}">
554
555
  {#if fav}
555
556
  {#if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
556
- <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
557
- <svg version="1.1" class="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
557
+ <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
558
+ <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
558
559
  viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
559
560
  c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
560
561
  c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
@@ -567,37 +568,37 @@
567
568
  </div>
568
569
  {/if}
569
570
  {/if}
570
- <p class="GameInfoName" title="{gamename}">{gamename}</p>
571
- <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('gameThumbnail.playNow')}</button>
571
+ <p class="GameInfoName" part="GameInfoName" title="{gamename}">{gamename}</p>
572
+ <button class="GameInfoBtn" part="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('gameThumbnail.playNow')}</button>
572
573
  </div>
573
- <span class="GameInfoVendor">
574
+ <span class="GameInfoVendor" part="GameInfoVendor">
574
575
  { gamevendor ? gamevendor : '-'}
575
576
  </span>
576
577
  </div>
577
578
  {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
578
- <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
579
- <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
579
+ <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
580
+ <svg version="1.1" class="FavoredIcon" part="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
580
581
  <path style="fill: white" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
581
582
  </svg>
582
583
  </div>
583
584
  {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
584
- <div class="FavIconContainer">
585
- <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
585
+ <div class="FavIconContainer" part="FavIconContainer">
586
+ <svg version="1.1" class="FavoredIcon" part="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
586
587
  <path style="fill: white" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
587
588
  </svg>
588
589
  </div>
589
590
  {/if}
590
- <div class="GameExtraInfo">
591
+ <div class="GameExtraInfo" part="GameExtraInfo">
591
592
  {#if gameisnew}
592
- <span class="GameExtraInfoLabel NewGameTag">{$_('gameThumbnail.new')}</span>
593
+ <span class="GameExtraInfoLabel NewGameTag" part="GameExtraInfoLabel NewGameTag">{$_('gameThumbnail.new')}</span>
593
594
  {/if}
594
595
  {#if (parseInt(gamepopularity) > 0)}
595
- <span class="GameExtraInfoLabel PopularGameTag">{$_('gameThumbnail.hot')}</span>
596
+ <span class="GameExtraInfoLabel PopularGameTag" part="GameExtraInfoLabel PopularGameTag">{$_('gameThumbnail.hot')}</span>
596
597
  {/if}
597
598
  {#if livegamedata}
598
599
  {#if !isopen && starttime && timeformat}
599
- <div class="GameProp LiveProps">
600
- <div class="ClosedGame">
600
+ <div class="GameProp LiveProps" part="GameProp LiveProps">
601
+ <div class="ClosedGame" part="ClosedGame">
601
602
  {$_('gameThumbnail.opens')}
602
603
  <span>
603
604
  {moment.utc(starttime).local().format(timeformat)}
@@ -608,15 +609,15 @@
608
609
  </div>
609
610
  {/if}
610
611
  {#if isopen && displaytype && displaytype === BLACKJACK}
611
- <div class="GameProp LiveProps BlackjackDisplay">
612
- <div class="LiveIcons">
612
+ <div class="GameProp LiveProps BlackjackDisplay" part="GameProp LiveProps BlackjackDisplay">
613
+ <div class="LiveIcons" part="LiveIcons">
613
614
  {#if istablefull}
614
- <span class="FullTable">
615
+ <span class="FullTable" part="FullTable">
615
616
  {$_('gameThumbnail.full')}
616
617
  </span>
617
618
  {:else}
618
619
  {#each seats as seatData}
619
- <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
620
+ <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'} part={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
620
621
  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
621
622
  <path d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
622
623
  <path d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
@@ -629,12 +630,12 @@
629
630
  {@html renderBetLimits(min, max, currencySymbol)}
630
631
  </div>
631
632
  {:else if isopen && displaytype && displaytype === ROULETTE}
632
- <div class="{roulettecontainerclassname}">
633
- <div class="LiveIcons" bind:this={roulletteref}>
633
+ <div class="{roulettecontainerclassname}" part="{roulettecontainerclassname}">
634
+ <div class="LiveIcons" part="LiveIcons" bind:this={roulletteref}>
634
635
  {#each new Array(numberofdisplayedresults) as garbage, i}
635
636
  {#if roulleteresults && roulleteresults[i]}
636
637
  {#if isdouble}
637
- <div class="Double">
638
+ <div class="Double" part="Double">
638
639
  {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
639
640
  {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
640
641
  </div>
@@ -652,7 +653,7 @@
652
653
  </div>
653
654
  </div>
654
655
  {#if showgamename}
655
- <p class="GameNameBelow" title="{gamename}">{gamename}</p>
656
+ <p class="GameNameBelow" part="GameNameBelow" title="{gamename}">{gamename}</p>
656
657
  {/if}
657
658
  </div>
658
659
 
@@ -837,6 +838,18 @@
837
838
  background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
838
839
  }
839
840
 
841
+ &.GameInnerContainerUnavailable {
842
+ &::after {
843
+ content: '';
844
+ position: absolute;
845
+ top: 0;
846
+ right: 0;
847
+ bottom: 0;
848
+ left: 0;
849
+ background: rgba(0,0,0,0.9);
850
+ }
851
+ }
852
+
840
853
  .ListGame.GameContainerDimmed:before {
841
854
  display: block;
842
855
  content: ' ';
@@ -1219,24 +1232,24 @@
1219
1232
  background-color: var(--emfe-w-color-white, #FFFFFF);
1220
1233
  background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
1221
1234
  }
1222
- .OpenSeat, .ClosedSeat {
1223
- display: inline-block;
1224
- width: ttp(1);
1225
- height: ttp(1);
1226
- margin-right: ttp(.25);
1227
- @media (min-width: 768px) {
1228
- width: ttp(1);
1229
- height: ttp(1);
1230
- }
1231
- @media (min-width: 1100px) {
1235
+ .OpenSeat, .ClosedSeat {
1236
+ display: inline-block;
1232
1237
  width: ttp(1);
1233
1238
  height: ttp(1);
1239
+ margin-right: ttp(.25);
1240
+ @media (min-width: 768px) {
1241
+ width: ttp(1);
1242
+ height: ttp(1);
1243
+ }
1244
+ @media (min-width: 1100px) {
1245
+ width: ttp(1);
1246
+ height: ttp(1);
1247
+ }
1248
+ svg {
1249
+ width: 100%;
1250
+ height: 100%;
1251
+ }
1234
1252
  }
1235
- svg {
1236
- width: 100%;
1237
- height: 100%;
1238
- }
1239
- }
1240
1253
  .OpenSeat {
1241
1254
  animation: flip-closed-seat 2s both;
1242
1255
  -webkit-animation: flip-closed-seat 2s both;
@@ -1264,7 +1277,7 @@
1264
1277
  padding: ttp(.0625) ttp(.25) ttp(.0625) 0;
1265
1278
  align-items: center;
1266
1279
  border-radius: ttp(.1875);
1267
- font-size: ttp(.625);
1280
+ font-size: 12px;
1268
1281
  white-space: normal;
1269
1282
  text-transform: uppercase;
1270
1283
  -webkit-animation-name: silde-in-from-left;