@everymatrix/casino-jackpot-banner 1.16.1

package/public/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

package/rollup.config.js

@@ -0,0 +1,59 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import serve from 'rollup-plugin-dev-server';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+const production = process.env.NODE_ENV === 'production';
+const dev = process.env.NODE_ENV === 'development';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    sourcemap: true,
+    format: 'umd',
+    name: 'app',
+    file: 'dist/casino-jackpot-banner.js'
+  },
+  plugins: [
+    svelte({
+      preprocess: sveltePreprocess(),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        customElement: true,
+        dev: !production
+      }
+    }),
+    commonjs(),
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    dev && serve({
+      open: true,
+      verbose: true,
+      allowCrossOrigin: true,
+      historyApiFallback: false,
+      host: 'localhost',
+      port: 5050,
+    }),
+    dev && livereload({ watch: ['', 'dist'] }),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && 
+    terser({
+      output: {
+        comments: "all"
+      },
+    })
+  ],
+  watch: {
+    clearScreen: false
+  }
+};

package/src/CasinoJackpotBanner.svelte

@@ -0,0 +1,515 @@
+<svelte:options tag={null} />
+<script lang="ts">
+
+import { isMobile } from 'rvhelper';
+import { _, addNewMessages, setLocale } from './i18n';
+import { TRANSLATIONS } from './translations';
+
+// Type decides the visual structure of the widget, as per the requirements
+export let visualstructure:string = '';
+export let title:string = '';
+// Exposing these attributes individually as the links could get pretty long and difficult to discern for a human parsing the HTML.
+export let caticon0:string = '';
+export let caticon1:string = '';
+export let caticon2:string = '';
+export let caticon3:string = '';
+// Exposing the labels as a single string since the input is short and concise
+export let iconlabels:string = '';
+export let backgroundsrc:string='';
+export let currency:string='';
+// If mobile background is not given, the desktop one is used instead
+export let backgroundsrcmobile:string='';
+export let titlelogopath = '';
+export let lang:string ='en';
+export let clientstyling:string = '';
+export let clientstylingurl:string = '';
+export let translationurl:string = '';
+
+export let endpoint:string = '';
+export let gameid:string = ''; // which game's data to pull
+
+
+let userAgent:any = window.navigator.userAgent;
+let mobileView:boolean = false;
+let tabletView:boolean = false;
+
+let vendorIcon:string = ``;
+
+let jackpotValues:Array<number> = [];
+let validGameIds:Array<string> = [];
+let formattedJackpotValues:Array<string> = [];
+let formattedLabels:Array<string> = [];
+let caticons:Array<string> =[];
+let backgroundImg:string = "";
+let titleLogoImg:string = "";
+let customStylingContainer: HTMLElement;
+let displayNone:boolean = false;
+
+let isLoading:boolean = true;
+let hasErrors:boolean = false;
+let receivedJackpotData:any;
+
+const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+
+ Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+const availableTypes = ['typeSpread', 'typeLeft'];
+
+const setJackpotValues = (jackpotData:any):void => {
+  const valuesObj = jackpotData?.items[0]?.additionalData;
+
+  if(valuesObj) Object.values(valuesObj).forEach(value => jackpotValues.push(+value));
+}
+
+const setVendorLogo = (jackpotLogoData):void => {
+  vendorIcon = jackpotLogoData?.items[0]?.vendorLogo || '';
+}
+
+const getJackpotData = () => {
+  if(endpoint && lang && currency) {
+    let url:URL = new URL(`${endpoint}/casino/jackpots`);
+
+    url.searchParams.append('filter', `id=${gameid}`);
+    url.searchParams.append('language', lang);
+    url.searchParams.append('additionalDataCurrency', currency);
+
+    fetch(url.href)
+    .then((res:any) =>
+      res.json().then((data:any) => {
+        isLoading = false;
+
+        receivedJackpotData = data;
+
+        if(validGameIds.includes(gameid)) {
+          setJackpotValues(receivedJackpotData);
+          setVendorLogo(receivedJackpotData);
+        }
+      }).catch((err:any) => {
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(err);
+      })
+    )
+  }
+}
+
+const getJackpotConfig = () => {
+  let url:URL = new URL(`${endpoint}/casino/jackpots/config`);
+
+  fetch(url.href)
+    .then((res:any) => res.json())
+    .then((configData:any) =>{
+      validGameIds = configData.egtJackpotIds.map(id => id);
+    })
+}
+
+const initialize = ():void => {
+  // Also checking that ratio is above 1 to work with edge cases where the ratio is landscape but the userAgent comes back as mobile
+  mobileView = isMobile(userAgent) && window.innerHeight / window.innerWidth > 1;
+  tabletView = isTablet();
+
+  // Format jackpot values & labels
+  if(jackpotValues.length !== 0) {
+    formattedJackpotValues = formatJackpotValues(jackpotValues);
+  }
+
+  formattedLabels = iconlabels ? iconlabels.split(',').map(label => label.trim().toUpperCase()) : new Array(4).fill('');
+
+  // check if visualtype passed is correct (longer string prone to errors. maybe shorten the strings to be less descriptive, but also less error prone?)
+  if (availableTypes.includes(visualstructure.trim())) {
+    visualstructure = visualstructure.trim();
+  } else {
+    console.warn(`Invalid Attribute Value: "${visualstructure}" is not a valid value for the "visualstructure" attribute. Defaulting to "${availableTypes[0]}"`);
+    visualstructure = availableTypes[0];
+  }
+
+  backgroundImg = backgroundsrcmobile && mobileView && !tabletView ? backgroundsrcmobile : backgroundsrc;
+  titleLogoImg = titlelogopath;
+  caticons = [caticon0, caticon1, caticon2, caticon3]; // This isn't pretty, we could move to caticons as a list, but it'll look bad in the DOM since they can hold long URLs
+}
+
+const formatJackpotValues = (jackpotValues:Array<number>):Array<string> => {
+  return jackpotValues.map(val => Intl.NumberFormat("en-US", {maximumFractionDigits: 2}).format(val));
+};
+
+
+const isTablet = ():boolean => {
+  const ratio = window.innerHeight / window.innerWidth;
+  return 0.75 < ratio && ratio < 1.6;
+};
+
+const handleClick = ():void => {
+  window.postMessage({ type: 'JackpotBannerClicked', gameid }, window.location.href);
+
+  //Analytics event
+  if(typeof gtag == 'function'){
+    gtag('event', 'JackpotBannerClicked', {
+      'context': 'JackpotBanner',
+      'gameId' : `${gameid}`
+    });
+  }
+}
+
+const setClientStyling = ():void => {
+  let sheet = document.createElement('style');
+  sheet.innerHTML = clientstyling;
+  customStylingContainer.appendChild(sheet);
+}
+
+const setClientStylingURL = ():void => {
+  displayNone = true;
+
+  let url:URL = new URL(clientstylingurl);
+  let cssFile:HTMLElement = document.createElement('style');
+
+  fetch(url.href)
+    .then((res:any) => res.text())
+    .then((data:any) => {
+      cssFile.innerHTML = data
+
+      setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      setTimeout(() => { displayNone = false; }, 500);
+    });
+}
+
+const setActiveLanguage = () => {
+    setLocale(lang);
+}
+
+$: endpoint && getJackpotConfig();
+$: customStylingContainer && clientstyling && setClientStyling();
+$: customStylingContainer && clientstylingurl && setClientStylingURL();
+$: (endpoint && lang && currency) && validGameIds.length > 0 && getJackpotData();
+$: currency && lang && !isLoading && initialize();
+$: lang && setActiveLanguage();
+$: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  {#if hasErrors}
+    <p>500 Server error</p>
+  {:else if isLoading}
+    <div class="LoadingSpinner" part="LoadingSpinner"></div>
+  {:else}
+    <div class={displayNone ? 'DisplayNone' : ''} part="{displayNone ? 'DisplayNone' : ''}">
+      <div class="jackpotBanner" on:click={() => handleClick()}>
+        <div class="mainWrapper {visualstructure} {mobileView && !tabletView ? 'mobile' : tabletView ? 'tablet' : ''}" style="background: url({backgroundImg});" >
+          <div class="vendorLogo"><img src="{vendorIcon}" alt=""></div>
+          <div class="displayContainer">
+            {#if !tabletView}
+              {#each Array(4) as _, i}
+              <div class="displayCard"><div class="iconWrapper"><img class="displayCardIcon" src="{caticons[i]}" alt=""><span class="cardLabel">{formattedLabels[i]}</span></div><span class="cardTextWrapper"><span class="jackpotValue">{formattedJackpotValues[i] ?? ''}</span> <span class="jackpot-currency">{currency}</span></span></div>
+              {/each}
+            {:else}
+            <!-- Building these by looping would be a bit unreadable and require a higher scope counting variable for correct array access. I can do that, but this approach, while not DRY, is easier to parse -->
+            <div class="pairWrapper">
+              <div class="displayCard"><div class="iconWrapper"><img class="displayCardIcon" src="{caticons[0]}" alt=""><span class="cardLabel">{formattedLabels[0]}</span></div><span class="cardTextWrapper"><span class="jackpotValue">{formattedJackpotValues[0]}</span> <span class="jackpot-currency">{currency}</span></span></div>
+              <div class="displayCard"><div class="iconWrapper"><img class="displayCardIcon" src="{caticons[1]}" alt=""><span class="cardLabel">{formattedLabels[1]}</span></div><span class="cardTextWrapper"><span class="jackpotValue">{formattedJackpotValues[1]}</span> <span class="jackpot-currency">{currency}</span></span></div>
+            </div>
+            <div class="pairWrapper">
+              <div class="displayCard"><div class="iconWrapper"><img class="displayCardIcon" src="{caticons[2]}" alt=""><span class="cardLabel">{formattedLabels[2]}</span></div><span class="cardTextWrapper"><span class="jackpotValue">{formattedJackpotValues[2]}</span> <span class="jackpot-currency">{currency}</span></span></div>
+              <div class="displayCard"><div class="iconWrapper"><img class="displayCardIcon" src="{caticons[3]}" alt=""><span class="cardLabel">{formattedLabels[3]}</span></div><span class="cardTextWrapper"><span class="jackpotValue">{formattedJackpotValues[3]}</span> <span class="jackpot-currency">{currency}</span></span></div>
+            </div>
+            {/if}
+          </div>
+          <div class="title">
+            <img src={titleLogoImg} alt=""/>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+:host {
+  font-family: "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  color: #fff;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.mainWrapper {
+  padding: 33px 3vw;
+  // For some reason the browser overrides these values unless !important, despite them not being set anywhere else in this document
+  background-repeat: no-repeat !important;
+  background-size: cover !important;
+  border-radius: 7px;
+
+  display: grid;
+  grid-gap: 0.5rem;
+
+  z-index: 0;
+}
+
+.vendorLogo {
+  grid-area: vendorLogo;
+  height: 24px;
+  width: auto;
+
+  display: flex;
+  align-items: center;
+
+  img {
+    height: 100%;
+    width: auto;
+  }
+}
+
+.displayCard {
+  position: relative;
+  background: #1c2136;
+  height: Max(0.5vw, 1rem);
+  padding: 10px 20px 10px 24px;
+  margin: 0 8px;
+
+  box-sizing: content-box;
+  border-radius: 7px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid #ffc052;
+
+  .iconWrapper {
+    width: 44px;
+    height: 44px;
+
+    position: absolute;
+    left: -24px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .displayCardIcon {
+    height: 100%;
+    width: auto;
+  }
+
+  .cardLabel {
+    font-size: 0.8rem;
+    font-style: italic;
+  }
+
+  .cardTextWrapper {
+    display: flex;
+    justify-content: center;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+  }
+}
+
+.title {
+  grid-area: title;
+  display: flex;
+  align-items: center;
+  img {
+    height: 50px;
+  }
+}
+
+.displayContainer {
+  grid-area: displayArea;
+  padding: 0 0 0 20px;
+
+  display: flex;
+  gap: 40px;
+  justify-content: space-between;
+  align-items: center;
+
+  .jackpotValue {
+    font-size: 1.2rem;
+    font-weight: 400;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .jackpot-currency {
+    font-weight: 400;
+    font-style: italic;
+    font-size: 8px;
+
+    padding-left: 2px;
+    display: flex;
+    align-items: flex-end;
+  }
+}
+
+.pairWrapper {
+  width: 100%;
+  padding-left: 4%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 30px;
+}
+
+.typeSpread {
+  grid-template-columns: 1fr 2.5fr 1fr;
+  grid-template-areas: "title displayArea vendorLogo";
+  align-items: center;
+
+  &.mobile {
+    grid-template-areas:
+      "title"
+      "vendorLogo"
+      "displayArea";
+    margin-top: 25px;
+  }
+
+  .pairWrapper {
+    justify-content: center;
+  }
+
+  .vendorLogo {
+    justify-content: flex-end;
+  }
+
+  .title {
+    justify-content: flex-start;
+  }
+
+  .displayContainer {
+    justify-content: space-evenly;
+  }
+}
+
+.typeLeft {
+  grid-template-columns: 1fr 4fr;
+  grid-template-areas:
+    "title displayArea"
+    "vendorLogo displayArea";
+  padding: 44px 33px;
+
+  &.mobile {
+    grid-template-areas:
+      "title"
+      "vendorLogo"
+      "displayArea";
+    padding: 33px;
+
+    .displayContainer {
+      margin-top: 50px;
+      gap:2.6rem;
+    }
+  }
+
+  .displayContainer {
+    padding-left: 2rem;
+    width: auto;
+    gap: 2rem;
+  }
+
+  .pairWrapper {
+    justify-content: space-evenly;
+  }
+
+  .title {
+    align-items: flex-end;
+  }
+
+  .vendorLogo {
+    height: 24px;
+    width: auto;
+  }
+}
+
+.mobile {
+  grid-template-columns: 1fr;
+  grid-gap: 1rem;
+
+  .title {
+    justify-content: center;
+    align-items: center;
+    img {
+      height: 80px;
+    }
+  }
+
+  .displayContainer {
+    // this padding coutners the left movement of the absolutely positioned card icons on mobile, in order to make them look centered, despite being offset
+    padding-left: 26px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .vendorLogo {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .displayCard {
+    width: 40vw;
+  }
+}
+
+.tablet {
+  .displayContainer {
+    flex-wrap: wrap;
+  }
+}
+
+.DisplayNone {
+    display: none;
+  }
+
+.loadingPrompt {
+  color: #333;
+}
+
+  .LoadingSpinner {
+    display: block;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto
+  }
+  .LoadingSpinner:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid var(--emfe-w-color-primary, #D0046C);
+    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
+    animation: LoadingSpinner 1.2s linear infinite;
+  }
+@keyframes LoadingSpinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -0,0 +1,4 @@
+import CasinoJackpotBanner from './CasinoJackpotBanner.svelte';
+
+!customElements.get('casino-jackpot-banner') && customElements.define('casino-jackpot-banner', CasinoJackpotBanner);
+export default CasinoJackpotBanner;

package/src/translations.js

@@ -0,0 +1,23 @@
+export const TRANSLATIONS = {
+  "en": {
+    "loadingText": "Loading, please wait..."
+  },
+  "zh-hk": {
+    "loadingText": "加载请稍候 ..."
+  },
+  "fr": {
+    "loadingText": "Chargement, veuillez patienter..."
+  },
+  "ro": {
+    "loadingText": "Se incarca, va rugam asteptati..."
+  },
+  "es": {
+    "loadingText": "Cargando"
+  },
+  "pt": {
+    "loadingText": "Carregando, por favor espere..."
+  },
+  "de": {
+    "loadingText": "Laden, bitte warten..."
+  }
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}