npm - @everymatrix/casino-jackpot-banner - Versions diffs - 1.16.1 - Mend

@everymatrix/casino-jackpot-banner 1.16.1

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

package/README.md +30 -0
package/dist/casino-jackpot-banner.js +660 -0
package/dist/casino-jackpot-banner.js.map +1 -0
package/dist/jackpot-banner.js +660 -0
package/dist/jackpot-banner.js.map +1 -0
package/documentation.md +71 -0
package/gitlab-logo-400.png +0 -0
package/index.html +53 -0
package/index.js +1 -0
package/mock.json +3 -0
package/mock_rsrc/background0.jpg +0 -0
package/mock_rsrc/background0.png +0 -0
package/mock_rsrc/background_egypt.png +0 -0
package/mock_rsrc/background_egypt.svg +343 -0
package/mock_rsrc/background_egypt_mobile.png +0 -0
package/mock_rsrc/egypt_icon0.svg +3 -0
package/mock_rsrc/icon0.svg +3 -0
package/mock_rsrc/icon1.svg +3 -0
package/mock_rsrc/icon2.svg +10 -0
package/mock_rsrc/icon3.svg +10 -0
package/mock_rsrc/jackpots_logo.svg +9 -0
package/mock_rsrc/vendor_logo.png +0 -0
package/package.json +39 -0
package/public/favicon.png +0 -0
package/public/reset.css +48 -0
package/rollup.config.js +59 -0
package/src/CasinoJackpotBanner.svelte +515 -0
package/src/i18n.js +27 -0
package/src/index.ts +4 -0
package/src/translations.js +23 -0
package/tsconfig.json +6 -0

package/documentation.md ADDED Viewed

@@ -0,0 +1,71 @@
+# Installation
+## Installing via NPM
+Installing the jackpot banner widget via NPM is the recommended way of adding it to your project, if you want to use it in a bundle. Since the widgets are versioned, you can load a specific version - or the latest version - based on your needs, from the `package.json file`, simply by adding it as a dependency and then installing the packages by running `npm install`:
+```json
+"dependencies": {
+"@everymatrix/casino-winners": "^0.0.xxx"
+},
+```
+### Displaying the widget
+After the widget is imported inside your project either the NPM way or via CND, in order to display the widget you simply need to place the `<casino-jackpot-banner></casino-jackpot-banner>` tag (along with the appropriate attributes) on the page or in the specific container you would like to have it displayed. Please see the example below:
+*note that the values below are hardcoded for the purposes of clarifying what type of data we expect*
+```html
+<casino-jackpot-banner
+visualstructure="typeSpread"
+lang="gr"
+title="Jackpot Cards"
+backgroundsrc="https://imgsource.background.png"
+backgroundsrcmobile="https://imgsource.backgroundmobile.png"
+currency="EUR"
+gameid="999"
+endpoint="https://api.everymatrix.com/v1/casino/jackpots"
+caticon0="https://imgsource.icon0.png"
+caticon1="https://imgsource.icon1.png"
+caticon2="https://imgsource.icon2.png"
+caticon3="https://imgsource.icon3.png"
+iconlabels="platinum, gold, silver, bronze"
+clientstyling=".class{property: value}"
+clientstylingurl="/media/examples/link-element-example.css"
+>
+</casino-jackpot-banner>
+```
+## Parameters of the widget
+___
+| parameter | mandatory | description |
+|---|:---:|---|
+| visualstructure | yes | current options: "typeSpread", "typeLeft". Determines the visual structure of the widget |
+| lang | no | user language |
+| title | yes | string displayed on the widget. Keep char count ≤ 14 for maintaining design and ≤ 36 to avoid overflow |
+| backgroundsrc | yes | img source of the background for desktop |
+| backgroundsrcmobile | no | img source of the background for mobile. If left empty, will use the desktop source for mobile as well |
+| currency | yes | currency of the logged in user. If logged out, a default currency |
+| gameid | yes | current options: "998", "999". The id of the game for which to display jackpots |
+| endpoint | yes | NWA API |
+| caticon0...3 | yes | img source for each of the four icons |
+| iconlabels | no | ex. format: "platinum, gold, silver, bronze". Single string containing labels separated by a comma ',' to be displayed below each jackpot in order |
+| clientstyling | no | inline styling string. Ex.:".class{property: value}"  |
+| clientstylingurl | no | external css file. Ex.: "/media/examples/link-element-example.css" |
+## Widget Events
+___
+The widget can send Javascript events to the template website through postMessage().
+The widget currently supports the following events:
+| EventName | Description | Params |
+| ------ | ------ | ------ |
+| JackpotBannerClicked | The event is triggered when the widget (any part of it) is clicked| none |

package/gitlab-logo-400.png ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<title>
+    casino-jackpot-banner
+  </title>
+  <link rel="stylesheet" href="public/reset.css">
+  <script src='dist/casino-jackpot-banner.js'></script>
+</head>
+<body>
+  <style>
+    html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
+    .header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
+    .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
+    .header__name { color: #fff; }
+    .header__name span { margin-right: 10px; font-weight: bold; }
+    .webcomponent { padding: 10px 20px; }
+  </style>
+  <!-- <header class="header">
+    <div class="header__logo">
+      <svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
+    </div>
+    <h1 class="header__name">
+      <span>WEBCOMPONENT:</span> casino-jackpot-banner
+    </h1>
+  </header> -->
+  <div class="webcomponent" style="padding: 0 0px;">
+    <casino-jackpot-banner
+      visualstructure="typeSpread"
+      lang="gr"
+      title="Jackpot Cards"
+      backgroundsrc="../mock_rsrc/background0.png"
+      backgroundsrcmobile=""
+      currency = "EUR"
+      gameid = "999"
+      endpoint = "https://winmasters-ro.nwacdn.com/v1"
+      titlelogopath = "../mock_rsrc/jackpots_logo.svg"
+      caticon0="../mock_rsrc/icon0.svg"
+      caticon1="../mock_rsrc/icon1.svg"
+      caticon2="../mock_rsrc/icon2.svg"
+      caticon3="../mock_rsrc/icon3.svg"
+    >
+    </casino-jackpot-banner>
+  </div>
+</body>
+</html>

package/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './dist/casino-jackpot-banner.js';

package/mock.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "backgroundImg" : "../background0"
+}

package/mock_rsrc/background0.jpg ADDED Viewed

Binary file

package/mock_rsrc/background0.png ADDED Viewed

Binary file

package/mock_rsrc/background_egypt.png ADDED Viewed

Binary file