npm - @everymatrix/casino-my-games - Versions diffs - 1.4.0 - Mend

@everymatrix/casino-my-games 1.4.0

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 (16) hide show

package/README.md +30 -0
package/dist/casino-my-games.js +1466 -0
package/dist/casino-my-games.js.map +1 -0
package/index.html +38 -0
package/index.js +1 -0
package/package.json +40 -0
package/public/favicon.png +0 -0
package/public/reset.css +48 -0
package/rollup.config.js +59 -0
package/src/CasinoMyGames.svelte +274 -0
package/src/CasinoMyGames.types.ts +92 -0
package/src/i18n.js +27 -0
package/src/index.ts +4 -0
package/src/translations.js +107 -0
package/stories/CasinoMyGames.stories.js +13 -0
package/tsconfig.json +6 -0

package/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<title>
+    casino-my-games
+  </title>
+  <link rel="stylesheet" href="public/reset.css">
+	<script src='dist/casino-my-games.js'></script>
+</head>
+<body>
+  <casino-my-games
+  userid="3997218"
+  session="581a62a9-e7f2-4b15-a55e-d7a03e357a2a"
+  endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
+  datasource="RNG"
+  lang="en"
+  currency="USD"
+  favorites="true"
+  clientstyling=""
+  clientstylingurl=""
+  livecasino="false"
+  visiblegames="9"
+  gamepagemodalurl="true"
+  integratedgameframedesktop="true"
+  integratedgameframemobile="true"
+  translationurl=""
+  mostplayed=""
+  lastplayed=""
+  filteredcategories=""
+  activecategory=""></casino-my-games>
+</body>
+</html>

package/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './dist/casino-my-games.js';

package/package.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "name": "@everymatrix/casino-my-games",
+  "version": "1.4.0",
+  "main": "dist/casino-my-games.js",
+  "svelte": "src/index.ts",
+  "scripts": {
+    "start": "sirv public",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
+    "validate": "svelte-check",
+    "test": "echo"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "node-sass": "^5.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-dev-server": "^0.4.3",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "sirv-cli": "^1.0.0",
+    "svelte": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "be1fa07132bd9efec772e8532a8bc54c82eb1cb6"
+}

package/public/favicon.png ADDED Viewed

Binary file

package/public/reset.css ADDED Viewed

@@ -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 ADDED Viewed

@@ -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-my-games.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/CasinoMyGames.svelte ADDED Viewed

@@ -0,0 +1,274 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { isMobile, getDevice } from 'rvhelper';
+  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
+  import { Translations } from './translations';
+  import { onMount } from 'svelte';
+  import '@everymatrix/casino-favorites-section';
+  import '@everymatrix/casino-last-played-section';
+  import '@everymatrix/casino-most-played-section';
+  export let userid:string = '';
+  export let session:string = '';
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = '';
+  export let currency:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let livecasino:string = '';
+  export let visiblegames:string = '';
+  export let gamepagemodalurl:string = '';
+  export let integratedgameframedesktop:string = '';
+  export let integratedgameframemobile:string = '';
+  export let translationurl:string = '';
+  export let favorites:string = 'false';
+  export let mostplayed:string = 'false';
+  export let lastplayed:string = 'false';
+  export let activecategory:string = '';
+  export let categorybackground:string = '';
+  export let casinomygames:string = 'false';
+  let userAgent:any = window.navigator.userAgent;
+  // CasinoPage loading state
+  let isLoading:boolean = false;
+  let hasErrors:boolean = false;
+  let error:string = '';
+  let customStylingContainer:HTMLElement;
+  let gamesType:string = '';
+  let mobile:boolean = false;
+  let tabsArray:Array<string> = ['', '', ''];
+  setupI18n({ withLocale: 'en', translations: {}});
+  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) => {
+    addNewMessages(item, Translations[item]);
+  });
+  const toggleTab = (type:string):void => {
+    if (gamesType === type) return
+    gamesType = type;
+  }
+  const initialSetup = ():void => {
+    gamesType = (favorites === 'true') ? 'Favorites' : (mostplayed === 'true') ? 'MostPlayed' : (lastplayed === 'true') ? 'LastPlayed' : ''
+    tabsArray[0] = (favorites === 'true') ? 'Favorites' : '';
+    tabsArray[1] = (mostplayed === 'true') ? 'MostPlayed' : '';
+    tabsArray[2] = (lastplayed === 'true') ? 'LastPlayed' : '';
+    isLoading = true;
+    setLocale(lang);
+  }
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+  const setClientStylingURL = ():void => {
+    let cssFile:HTMLElement = document.createElement('style');
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }
+  onMount(() => {
+    mobile = isMobile(userAgent);
+  });
+  $: endpoint && datasource && lang && initialSetup();
+  $: favorites && mostplayed && lastplayed && initialSetup();
+  $: translationurl && setTranslationUrl();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+</script>
+<div bind:this={customStylingContainer}>
+  {#if hasErrors}
+    <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
+  {:else}
+    {#if casinomygames}
+      <div class="CasinoMyGames { mobile ? 'Mobile' : '' }">
+        <div class="MyGamesHeader">
+          <div class="MyGamesButtonsContainer">
+            {#each tabsArray as tab}
+              {#if tab == 'Favorites'}
+                <button class="MyGamesButton {gamesType == 'Favorites' ? 'Active' : ''} { favorites == 'false' ? 'Off': ''}" on:click={() => toggleTab('Favorites')}>
+                  {$_('Translations.favorites')}
+                </button>
+              {/if}
+              {#if tab == 'MostPlayed'}
+                <button class="MyGamesButton {gamesType == 'MostPlayed' ? 'Active' : ''} {mostplayed == 'false' ? 'Off': ''}" on:click={() => toggleTab('MostPlayed')}>
+                  {$_('Translations.mostPlayed')}
+                </button>
+              {/if}
+              {#if tab == 'LastPlayed'}
+                <button class="MyGamesButton {gamesType == 'LastPlayed' ? 'Active' : ''} {lastplayed == 'false' ? 'Off': ''}" on:click={() => toggleTab('LastPlayed')}>
+                  {$_('Translations.recentlyPlayed')}
+                </button>
+              {/if}
+            {/each}
+          </div>
+        </div>
+        <div>
+          {#if gamesType == 'Favorites'}
+            <casino-favorites-section
+            session={session}
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            lang={lang}
+            currency={currency}
+            favorites={favorites}
+            categoryid={"FAVORITES"}
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+            {casinomygames} />
+          {:else if gamesType == 'MostPlayed'}
+            <casino-most-played-section
+            endpoint={endpoint}
+            datasource={datasource}
+            lang={lang}
+            currency={currency}
+            session={session}
+            userid={userid}
+            favorites={favorites}
+            categoryindex="0"
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+            {casinomygames} />
+          {:else if  gamesType == 'LastPlayed'}
+            <casino-last-played-section
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            favorites={favorites}
+            lang={lang}
+            currency={currency}
+            session={session}
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+            {casinomygames} />
+          {/if}
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>
+<style lang="scss">
+  .CasinoMyGames {
+    background-color: var(--emfe-w-color-contrast, #07072A);
+    width: 100%;
+    margin: 50px 0;
+    &.Mobile {
+      padding: 25px 10px;
+    }
+  }
+  .MyGamesHeader {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+  }
+  .MyGamesButton {
+    border: none;
+    background: none;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 20px;
+    font-weight: 500;
+    margin-right: 60px;
+    transition: linear 100ms;
+    cursor: pointer;
+      &:hover {
+        border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
+        line-height: 36px;
+      }
+      &:focus {
+        color: var(--emfe-w-color-primary, #D0046C);
+        line-height: 36px;
+      }
+      &.Active {
+        border-bottom: 2px solid #D0046C;
+        padding-bottom: 10px;
+        color: var(--emfe-w-color-primary, #D0046C);
+      }
+      &.Active {
+        border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
+        color: var(--emfe-w-color-primary, #D0046C);
+        line-height: 36px;
+      }
+  }
+  .ButtonsContainerNone {
+    display: none;
+  }
+  .Mobile {
+    .CasinoMyGames {
+      margin: 30px 0;
+    }
+    .CasinoMyGames {
+      width: 320px;
+      max-width: 320px;
+    }
+    .MyGamesHeader {
+      justify-content: flex-start;
+    }
+    .MyGamesButton {
+      font-size: 16px;
+      white-space: nowrap;
+      margin-right: 10px;
+      &.Active {
+        padding-bottom: 4px;
+      }
+    }
+  }
+</style>

package/src/CasinoMyGames.types.ts ADDED Viewed

@@ -0,0 +1,92 @@
+export interface CasinoMyGames {
+  count: number,
+  items: Array<CategoriesItems>,
+  pages: CategoriesPages,
+  total: number ,
+}
+export interface CategoriesItems {
+  id: number,
+  name: String,
+  href: String,
+  games: Array<GamesItem>
+};
+interface GamesItem {
+  count: number,
+  items: Array<Object>,
+  pages: PagesItem,
+  total: number
+}
+interface PagesItem {
+  first: String,
+  last: String,
+  next: String,
+  previous: String
+}
+interface CategoriesPages {
+  first: String,
+  last: String,
+  next: String,
+  previous: String,
+}
+export interface CasinoData {
+  count: number,
+  items: CasinoItems[],
+  pages: CasinoPages,
+  total: number
+}
+export interface CasinoItems {
+  name: string,
+  games: CasinoGames,
+  moreBtn?: boolean
+}
+interface CasinoGames {
+  count: number,
+  items: [{href: string}],
+  pages: CasinoPages,
+  total: number
+}
+interface CasinoPages {
+  first: string,
+  last: string,
+  next: null,
+  previous: null
+}
+export interface CasinoGameData {
+  backgroundImageUrl: string,
+  categories: CasinoBaseData,
+  defaultThumbnail: string,
+  groups: CasinoGroups,
+  hasAnonymousFunMode: boolean,
+  hasFunMode: boolean,
+  href: string,
+  id: string,
+  isNew: boolean,
+  launchURL: string,
+  name: string,
+  platform: string[],
+  popularity: number,
+  thumbnail: string,
+  vendor: {href: string, name:string},
+  cellSize?: string
+}
+interface CasinoBaseData {
+  count: number,
+  items: [{href: string}],
+  pagination: CasinoPages,
+  total: number
+}
+interface CasinoGroups {
+  count: number,
+  items: string[]
+}

package/src/i18n.js ADDED Viewed

@@ -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 ADDED Viewed

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

package/src/translations.js ADDED Viewed

@@ -0,0 +1,107 @@
+export const Translations = {
+  en: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  zh: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  de: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  it: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  fr: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  es: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  tr: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  ru: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  ro: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  hr: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  hu: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  pl: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  pt: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  sl: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  },
+  sr: {
+    Translations: {
+      favorites: 'Favorites',
+      mostPlayed: 'Most Played',
+      recentlyPlayed: 'Last Played'
+    }
+  }
+};