@everymatrix/casino-game-thumbnail 1.13.14 → 1.13.16

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 +3 -3
  2. package/dist/casino-game-thumbnail.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/CasinoGameThumbnail.svelte +34 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-game-thumbnail",
3
- "version": "1.13.14",
3
+ "version": "1.13.16",
4
4
  "main": "dist/casino-game-thumbnail.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "a5cf232b09fe0b3050e2243fb25404a2e17f382f"
38
+ "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
39
39
  }
package/src/CasinoGameThumbnail.svelte CHANGED
@@ -415,7 +415,7 @@
415
415
  }
416
416
  if (numberofplayers) {
417
417
  rightSideContent = `
418
- <svg fill="white" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
418
+ <svg fill="var(--emfe-w-color-white, #FFFFFF);" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
419
419
  <span class="NrOfPlayers">${numberofplayers}</span>`;
420
420
  }
421
421
  if (!rightSideContent && !leftSideContent) {
@@ -594,16 +594,16 @@
594
594
  </script>
595
595
 
596
596
 
597
- <div class={`GameContainer ${extraclassname}`} part={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
598
- <div class="GameInnerContainer { (livegamedata && !isopen && openhours.value) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" part="GameInnerContainer { (livegamedata && !isopen) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchend={gameTouchEnd}>
599
- <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${hover ? 'GameContainerHovered' : ''} ${loaded ? 'Loaded' : ''}`} part="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" alt="" bind:this={image} loading="lazy" />
600
- <div class="GameInfoWrapper" part="GameInfoWrapper">
601
- <div class="GameInfo {hover ? 'GameHovered' : ''}" part="GameInfo {hover ? 'GameHovered' : ''}">
597
+ <div class={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
598
+ <div class="GameInnerContainer { (livegamedata && !isopen && openhours.value) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchend={gameTouchEnd}>
599
+ <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${hover ? 'GameContainerHovered' : ''} ${loaded ? 'Loaded' : ''}`} alt="" bind:this={image} loading="lazy" />
600
+ <div class="GameInfoWrapper">
601
+ <div class="GameInfo {hover ? 'GameHovered' : ''}">
602
602
  {#if fav}
603
603
  {#if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
604
- <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
604
+ <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
605
605
  <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"
606
- 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
606
+ viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
607
607
  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
608
608
  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
609
609
  c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
@@ -617,39 +617,39 @@
617
617
  {:else}
618
618
  <div class="LoaderRipple"><div></div><div></div></div>
619
619
  {/if}
620
- <p class="GameInfoName" part="GameInfoName" title="{gamename}">{gamename}</p>
620
+ <p class="GameInfoName" title="{gamename}">{gamename}</p>
621
621
  {#if lang}
622
- <button class="GameInfoBtn" part="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('playNow')}</button>
622
+ <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('playNow')}</button>
623
623
  {/if}
624
624
  </div>
625
- <span class="GameInfoVendor" part="GameInfoVendor">
625
+ <span class="GameInfoVendor">
626
626
  { gamevendor ? gamevendor : '-'}
627
627
  </span>
628
628
  </div>
629
629
  {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
630
- <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
631
- <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">
632
- <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"/>
630
+ <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
631
+ <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">
632
+ <path style="fill: var(--emfe-w-color-white, #FFFFFF);" 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"/>
633
633
  </svg>
634
634
  </div>
635
635
  {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
636
- <div class="FavIconContainer" part="FavIconContainer">
637
- <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">
638
- <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"/>
636
+ <div class="FavIconContainer">
637
+ <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">
638
+ <path style="fill: var(--emfe-w-color-white, #FFFFFF);" 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"/>
639
639
  </svg>
640
640
  </div>
641
641
  {/if}
642
- <div class="GameExtraInfo" part="GameExtraInfo">
642
+ <div class="GameExtraInfo">
643
643
  {#if gameisnew}
644
- <span class="GameExtraInfoLabel NewGameTag" part="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
644
+ <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
645
645
  {/if}
646
646
  {#if gametag}
647
- <span class="GameExtraInfoLabel PopularGameTag" part="GameExtraInfoLabel PopularGameTag">{gametag}</span>
647
+ <span class="GameExtraInfoLabel PopularGameTag">{gametag}</span>
648
648
  {/if}
649
649
  {#if livegamedata}
650
650
  {#if !isopen && starttime && timeformat}
651
- <div class="GameProp LiveProps" part="GameProp LiveProps">
652
- <div class="ClosedGame" part="ClosedGame">
651
+ <div class="GameProp LiveProps">
652
+ <div class="ClosedGame">
653
653
  {$_('opens')}
654
654
  <span>
655
655
  {moment.utc(starttime).local().format(timeformat)}
@@ -661,14 +661,14 @@
661
661
  {/if}
662
662
  {#if isopen && displaytype && displaytype === BLACKJACK}
663
663
  <div class="GameProp LiveProps BlackjackDisplay" part="GameProp LiveProps BlackjackDisplay">
664
- <div class="LiveIcons" part="LiveIcons">
664
+ <div class="LiveIcons">
665
665
  {#if istablefull}
666
- <span class="FullTable" part="FullTable">
666
+ <span class="FullTable">
667
667
  {$_('full')}
668
668
  </span>
669
669
  {:else}
670
670
  {#each seats as seatData}
671
- <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'} part={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
671
+ <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
672
672
  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
673
673
  <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"/>
674
674
  <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"/>
@@ -681,12 +681,12 @@
681
681
  {@html renderBetLimits(min, max, currencySymbol)}
682
682
  </div>
683
683
  {:else if isopen && displaytype && displaytype === ROULETTE}
684
- <div class="{roulettecontainerclassname}" part="{roulettecontainerclassname}">
685
- <div class="LiveIcons" part="LiveIcons" bind:this={roulletteref}>
684
+ <div class="{roulettecontainerclassname}">
685
+ <div class="LiveIcons" bind:this={roulletteref}>
686
686
  {#each new Array(numberofdisplayedresults) as garbage, i}
687
687
  {#if roulleteresults && roulleteresults[i]}
688
688
  {#if isdouble}
689
- <div class="Double" part="Double">
689
+ <div class="Double">
690
690
  {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
691
691
  {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
692
692
  </div>
@@ -704,7 +704,7 @@
704
704
  </div>
705
705
  </div>
706
706
  {#if showgamename}
707
- <p class="GameNameBelow" part="GameNameBelow" title="{gamename}">{gamename}</p>
707
+ <p class="GameNameBelow" title="{gamename}">{gamename}</p>
708
708
  {/if}
709
709
  </div>
710
710
 
@@ -770,10 +770,10 @@
770
770
  &Btn {
771
771
  appearance: none;
772
772
  padding: 6px;
773
- background: var(--emfe-w-color-primary, #D0046C);
774
- color: var(--emfe-w-color-primary-50, #FBECF4);
773
+ background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
774
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
775
775
  font-size: 16px;
776
- border: 2px solid var(--emfe-w-color-primary-600, #99034F);
776
+ border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
777
777
  border-radius: 5px;
778
778
  cursor: pointer;
779
779
  transition: border 150ms ease-in-out;
@@ -818,8 +818,8 @@
818
818
  &Label {
819
819
  font-size: 11px;
820
820
  padding: 3px;
821
- background-color: var(--emfe-w-color-primary, #D0046C);
822
- color: var(--emfe-w-color-primary-50, #FBECF4);
821
+ background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
822
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
823
823
  font-weight: bold;
824
824
  text-transform: uppercase;
825
825
  border-radius: 5px;