@everymatrix/casino-tournaments-page-controller 0.0.259 → 0.0.262

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-page-controller",
-  "version": "0.0.259",
+  "version": "0.0.262",
   "main": "dist/casino-tournaments-page-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e26e42bac250a646d98bd80910b234522350fd6"
+  "gitHead": "63a3c79f8f47451d7ca7f8c1dc77bb78bee91df2"
 }

package/src/CasinoTournamentsPageController.svelte

@@ -1,16 +1,23 @@
 <svelte:options tag={null}/>
 
 <script lang="ts">
-  import {onMount} from 'svelte';
-  import {isMobile, getDevice, checkSession} from 'rvhelper';
-  import {_, addNewMessages, setLocale, setupI18n} from './i18n';
-  import {TournamentsPageTranslations} from './translations';
-  import {EventSourcePolyfill} from 'event-source-polyfill';
+  import { onMount } from 'svelte';
+  import moment from 'moment';
+  import { isMobile, getDevice, checkSession } from 'rvhelper';
+  import { _, addNewMessages, date, setLocale, setupI18n } from './i18n';
+  import { TournamentsPageTranslations } from './translations';
+  import { EventSourcePolyfill } from 'event-source-polyfill';
+
+  import gameCasinoSvg from './images/game-casino.svg';
+  import gameSportsSvg from './images/game-sports.svg'
 
   import '@everymatrix/casino-tournaments-page';
   import '@everymatrix/casino-tournaments-details';
   import '@everymatrix/casino-tournaments-thumbnail-controller';
   import '@everymatrix/casino-tournaments-table';
+  import '@everymatrix/casino-tournaments-tab';
+  import '@everymatrix/casino-tournaments-thumbnail-rule';
+  import '@everymatrix/casino-tournaments-rank';
 
   export let session: string = '';
   export let userid: string = '';
@@ -24,6 +31,11 @@
   export let tablelimit: string = '30';
   export let namemask: string = '';
   export let mobiletablelimit:string = '15';
+  export let updatetableintime:string = 'true';
+  export let viewmode:string = '';
+
+  export let leaderboardoffset:string = '0';
+  export let leaderboardlimit:string = '15';
   // Variables of topics for communication
   let sessionTopic;
 
@@ -32,6 +44,7 @@
   let playerID: string = '';
   let isLoading: boolean = true;
   let tournamentDescription: Array<any> = [];
+  let tournamentProducts:any;
 
   let tournamentDetails: any = undefined;
   let tournamentTableData: any = undefined;
@@ -42,10 +55,17 @@
   let firstRowData: any = {};
   let firstRowAvailable: boolean = false;
 
-  let tableUpdateEventSource: EventSourcePolyfill;
+  let tableUpdateEventSource: any;
+  let tournamentUpdateEventSource:EventSourcePolyfill;
 
   let currentUserData:any = {};
   let currentUserInPage:Boolean = false;
+  let activeTab = 'leaderboard';
+  let overallRank:number;
+  let latestRank:number;
+  let isMiniMode:boolean;
+  let shownStatus:any = '';
+
   setupI18n({ withLocale: 'en', translations: {}});
 
   Object.keys(TournamentsPageTranslations).forEach((item: any) => {
@@ -54,7 +74,6 @@
 
   // @TODO this must be configurable
   const tableColumns = ['Rank', 'Player', 'Points','Prize'];
-
   // data for current user
   const transFormCurrentUserData = (item:any) => {
     let userData = {
@@ -64,6 +83,7 @@
       Prize: item.prizeName,
       Unqualified: item.unqualified,
       BetCount: item.betCount,
+      userID: item.userID
     };
     return userData;
   }
@@ -74,46 +94,85 @@
 
     if (data && data.length > 0) {
       data.forEach((item:any) => {
-        if (item.unqualified == false) {
-          if(item.userID == playerID){
-            currentUserData = item;
-            currentUserInPage = true;
-          }
-          // added duplicated properties for mobile version, requirement more information for desktop version 
-          tableData.push({
-            Rank: item.rank,
-            Player: item.shortName,
-            Points: item.score,
-            Prize: item.prizeName,
-            Unqualified: item.unqualified,
-            BetCount: item.betCount,
-            userID: item.userID
-          });
+        if(item.userID == playerID){
+          currentUserData = item;
+          currentUserInPage = true;
         }
+        tableData.push({
+          Rank: item.rank,
+          Player: item.shortName,
+          Points: item.score,
+          Prize: item.prizeName,
+          Unqualified: item.unqualified,
+          BetCount: item.betCount,
+          userID: item.userID
+        });
       });
     }
 
-      return tableData;
+    return tableData;
+  },
+    tournamentUpdateMessageHandler= (message:any) =>{
+      if(!message.data){
+        return;
+      }
+      try{
+        let messagDataAsJson = JSON.parse(message.data);
+        if(messagDataAsJson.messageType == 'TournamentUpdate'){
+          window.postMessage({type: 'UpdateTournamentView', tournamentData: messagDataAsJson.item}, window.location.href);
+          tournamentDetails = messagDataAsJson.item;
+          transformTournamentData(messagDataAsJson.item);
+          matchStatus();
+        }
+      }catch (e){
+        console.error(e);
+      }
+    },
+    startupTournamentUpdateListener = (tournamentID: string, searchParams:any)=>{
+      let endpointURL:string = `${endpoint}/tournaments/updates?filter=id=${tournamentID}&${searchParams.toString()}&XSessionId=${session}`;
+      if(!EventSource){
+        tournamentUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
+      }else{
+        tournamentUpdateEventSource = new EventSource(endpointURL);
+      }
+      if (!typeof (tournamentUpdateEventSource) != 'undefined'){
+        tournamentUpdateEventSource.addEventListener('message', tournamentUpdateMessageHandler);
+      }
     },
-    tableUpdateMessageHandler = (message: any) => {
-      if (!message.data) {
+    tableUpdateMessageHandler = (message:any)=>{
+      if(!message.data){
         return;
       }
-      try {
-        let messageData: any = message.data;
-        let updateTableData: any = JSON.parse(messageData);
-        if (!updateTableData || !updateTableData.Items) {
+      try{
+        let messageData:any = message.data;
+        let updateTableData:any = JSON.parse(messageData);
+        if(!updateTableData || !updateTableData.items){
           return;
         }
-        let newTableData = transformTableData(updateTableData.Items);
+        let newTableData: Array<LeaderboardRow> = transformTableData(updateTableData.items);
+        window.postMessage({ type: 'CasinoTableData', tableData: newTableData }, window.location.href);
+        currentUserInPage = newTableData.filter((item)=>{
+          return item.userID = playerID;
+        }).length > 0;
         if(updateTableData.item && !currentUserInPage){
           firstRowAvailable = true;
           firstRowData = transFormCurrentUserData(updateTableData.item);
+          if(firstRowData){
+            window.postMessage({ type: 'CasinoTableFirstRowData', tableData: firstRowData }, window.location.href);
+          }
         }
-        if(firstRowAvailable && firstRowData){
-          window.postMessage({ type: 'CasinoTableFirstRowData', tableData: firstRowData }, window.location.href);
+
+        let newUserRank = currentUserInPage ? currentUserData.Rank : firstRowData.Rank;
+        if(newUserRank != latestRank || overallRank != updateTableData.items.length){
+          overallRank = updateTableData.items.length;//new player joined and spined
+          window.postMessage({type: `TournamentRankInfo_${tourid}`, rankInfo:{
+              rank: newUserRank,
+              overallRank: overallRank,
+              prize: currentUserInPage ? (currentUserData.Prize || '-') : (firstRowData.Prize  || '-')
+            }});
+          latestRank = newUserRank;
         }
-        window.postMessage({ type: 'CasinoTableDataUpdate', tableData:  newTableData}, window.location.href);
+
         if(currentUserInPage){
           window.postMessage({ type: 'CasinoTableCurrentUserData', tableData: currentUserData }, window.location.href);
         }
@@ -122,27 +181,50 @@
       }
     },
     startupTableDataChangeListener = (tournamentID: String, searchParams: any) => {
-      let endpointURL: String = `${endpoint}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&`;
-      endpointURL += searchParams.toString();
-      tableUpdateEventSource = new EventSourcePolyfill(endpointURL, {
-        headers: {
-          'accept': 'text/event-stream',
-          'X-SessionID': session
-        }
-      });
+      let endpointURL: String = `${endpoint}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&XSessionId=${session}`;
+      if(tableUpdateEventSource){
+        return;
+      }
+      if(!EventSource){
+        tableUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
+      }else{
+        tableUpdateEventSource = new EventSource(endpointURL);
+      }
       if (typeof (tableUpdateEventSource) != "undefined") {
+        tableUpdateEventSource.addEventListener('open', tableUpdateMessageHandler);
         tableUpdateEventSource.addEventListener('message', tableUpdateMessageHandler);
+        tableUpdateEventSource.addEventListener('error', tableUpdateMessageHandler);
       }
-    };
+  },
+    transformTournamentData = (data:any)=>{
+      let productInfo={};
+      if(data.wallet){
+        let wallet = data.wallet;
+        if(wallet.casino){
+          productInfo['casino'] = {
+            name: 'Casino',
+            minbet: wallet.casino.minStake && wallet.casino.minStake.amount ? wallet.casino.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
+            maxbet: wallet.casino.maxStake && wallet.casino.maxStake.amount ? wallet.casino.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
+          }
+        }
+        if(wallet.sports){
+          productInfo['sports'] = {
+            name: 'Sports',
+            minbet: wallet.sports.minStake && wallet.sports.minStake.amount ? wallet.sports.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
+            maxbet: wallet.sports.maxStake && wallet.sports.maxStake.amount ? wallet.sports.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
+          }
+        }
+        tournamentProducts = productInfo;
+      }
+    }
 
   const getData = (endpointURL: String, tourID: String) => {
     let url = new URL(endpointURL + `/tournaments/${tourID}`);
-    let reqHeaders = new Headers();
+    let reqHeaders = new Headers({'X-SessionId': session});
 
     url.searchParams.append('expand', 'games');
     url.searchParams.append('language', lang);
-
-    reqHeaders.append('platform', getDevice(userAgent));
+    url.searchParams.append('platform', getDevice(userAgent));
 
     let requestOptions = {
       method: 'GET',
@@ -153,6 +235,8 @@
       .then((res: any) => res.json())
       .then((res: any) => {
         tournamentDetails = res.item;
+        transformTournamentData(tournamentDetails);
+        startupTournamentUpdateListener(tourid, url.searchParams);
       });
   }
 
@@ -169,9 +253,10 @@
     if (session) {
       let limit = isMobile(userAgent) == true? mobiletablelimit : tablelimit;
       url.searchParams.append('pagination', `offset=0,limit=${limit}`);
-      reqHeaders.append('X-SessionID', session);
+      reqHeaders.append('X-SessionId', session);
     }
-    reqHeaders.append('platform', getDevice(userAgent));
+
+    url.searchParams.append('platform', getDevice(userAgent));
 
     let requestOptions = {
       method: 'GET',
@@ -187,6 +272,8 @@
           firstRowData = transFormCurrentUserData(res.item);
         }
         showTable = true;
+        latestRank = currentUserInPage ? currentUserData.Rank : firstRowData.Rank
+        overallRank = res.total;
 
         // @TODO data is not iterable error fix
         window.postMessage({
@@ -197,7 +284,9 @@
         if (firstRowAvailable) {
           window.postMessage({type: 'CasinoTableFirstRowData', tableData: firstRowData}, window.location.href);
         }
-        startupTableDataChangeListener(tourID, url.searchParams);
+        if(updatetableintime === 'true'){
+          startupTableDataChangeListener(tourID, url.searchParams);
+        }
         if (currentUserInPage){
           window.postMessage({ type: 'CasinoTableCurrentUserData', tableData: currentUserData }, window.location.href);
         }
@@ -213,6 +302,23 @@
     if (e.data && e.data.type == 'PlayerID') {
       playerID = e.data.playerID;
     }
+    if(e.data && e.data.type == 'TournamentsTabSwitch'){
+      activeTab = e.data.tab;
+    }
+  }
+
+  const matchStatus = () => {
+    if (tournamentDetails.state == 'Unstarted') {
+      shownStatus = $_('tournamentsPage.scheduled');
+    }
+
+    if (tournamentDetails.state == 'Running') {
+      shownStatus = $_('tournamentsPage.ongoing');
+    }
+
+    if (tournamentDetails.state == 'Closed' || tournamentDetails.state == 'Closing') {
+      shownStatus = $_('tournamentsPage.finished');
+    }
   }
 
   const goBack = () => {
@@ -225,6 +331,12 @@
       window.history.back();
     }
   }
+  const closeThumbnail = () =>{
+    window.postMessage({ type: 'OnCloseThumbnail' }, window.location.href);
+  }
+  const gotoFromTournamentsPage = (pageType: string) =>{
+    window.postMessage({ type: 'GotoFromTournamentsPage', pageType }, window.location.href);
+  }
 
   const setSession = () => {
     if (session.length > 0 && session != 'false') {
@@ -255,13 +367,24 @@
         }
       });
   }
+  const initTabTitle= () =>{
+    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'leaderboard', 'text': $_('tournamentsPage.leaderBoard')}, window.location.href)
+    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'rules', 'text': $_('tournamentsPage.rules')}, window.location.href)
+    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'games', 'text': $_('tournamentsPage.games')}, window.location.href)
+  }
 
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
-
     return () => {
       window.removeEventListener('message', messageHandler);
-      tableUpdateEventSource.removeEventListener('message', tableUpdateMessageHandler);
+      if(tableUpdateEventSource){
+        tableUpdateEventSource.removeEventListener('open', tableUpdateMessageHandler);
+        tableUpdateEventSource.removeEventListener('message', tableUpdateMessageHandler);
+        tableUpdateEventSource.removeEventListener('error', tableUpdateMessageHandler);
+      }
+      if(tournamentUpdateEventSource){
+        tournamentUpdateEventSource.removeEventListener('message', tournamentUpdateMessageHandler);
+      }
     }
   });
 
@@ -270,11 +393,13 @@
   $: initialParameters = tourid && endpoint && session && lang;
   $: initialParameters && initialLoad();
   $: tourid && cmsendpoint && getDataFromCMS();
+  $: isMiniMode = (viewmode == 'miniThumbnail') && isMobile(userAgent); // forward this page from tournamentslider
 </script>
 
 {#if isLoading}
   <p>{$_('tournamentsPage.loading')}</p>
-{:else}
+{/if}
+{#if !isMiniMode}
   <div class="TournamentsPage" part="TournamentsPage">
     <div class="TournamentsSectionWrapper" part="TournamentsSectionWrapper">
 
@@ -342,7 +467,81 @@
     </div>
   </div>
 {/if}
+{#if isMiniMode }
+  <div class="TournamentsPage MiniMode {tournamentDetails ? 'hidden':''}" part="MiniTournamentPage">
+    <div class="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}" part="TournamentContentDetails">
+      <div class="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? ' TournamentCardDetails' : ' FullSize'}" part="MobileTournamentCardDetails">
+        {#if !tournamentDetails}
+          <div class="Thumbnail MiniMode" part="MiniThumbnail">
+            <img part="CardImg" class="CardImg {(status == 'Closing' || status == 'Closed') ? 'CardImgFinished' : ''}" src="https://i.stack.imgur.com/y9DpT.jpg"
+                 width="65px" height="40px"  title="">
+            <div class="MobileRight" part="ThumbnailRight">
+              <div class="Title"> </div>
+              <div>
+              </div>
+            </div>
+            <div class="CloseButton" part="CloseButton" on:click='{()=>closeThumbnail()}'>X</div>
+          </div>
+          <casino-tournaments-rank prize="-"></casino-tournaments-rank>
+        {/if}
+        {#if tournamentDetails}
+          <div class="Thumbnail MiniMode" part="MiniThumbnail">
+            {#if tournamentDetails.thumbnail}
+              <img use:matchStatus part="CardImg" class="Mobile CardImg {(tournamentDetails.state == 'Closing' || tournamentDetails.state == 'Closed') ? 'CardImgFinished' : ''}"
+                   src="{tournamentDetails.thumbnail}" width="65px" height="40px" title="{tournamentDetails.nameOrTitle}">
+            {:else}
+              <img use:matchStatus part="CardImg" class="CardImg {(tournamentDetails.state == 'Closing' || tournamentDetails.state == 'Closed') ? 'CardImgFinished' : ''}" src="https://i.stack.imgur.com/y9DpT.jpg"
+                   width="65px" height="40px"  title="{tournamentDetails.nameOrTitle}">
+            {/if}
+            <div class="MobileRight" part="ThumbnailRight">
+              <div class="Title" part="ThumbnailRight_Title">{tournamentDetails.nameOrTitle}</div>
+              <div part="ThumbnailRight_Period">
+                {#if tournamentDetails.startTime}
+                  {$_('tournamentsPage.activePeriod', {values: {startdate: moment(tournamentDetails.startTime).format('DD/MM/YYYY HH:mm'), enddate:moment(tournamentDetails.endTime).format('DD/MM/YYYY HH:mm')}})}
+                {/if}
+              </div>
+            </div>
+            <div class="CloseButton" part="CloseButton" on:click='{()=>closeThumbnail()}'>X</div>
+          </div>
 
+          <casino-tournaments-rank part="ThumbnailRank" userrank="{currentUserInPage ? currentUserData.Rank : firstRowData.Rank}" overallrank="{overallRank}"
+                                   prize="{currentUserInPage ? (currentUserData.Prize || '-') : (firstRowData.Prize || '-')}" tournamentid="{tourid}" ></casino-tournaments-rank>
+        {/if}
+      </div>
+      <casino-tournaments-tab part="ThumbnailTab" use:initTabTitle tabs="leaderboard,rules,games" tab="leaderboard"></casino-tournaments-tab>
+      <div class="TabContent {showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'} { activeTab != 'leaderboard' ? 'hidden' : ''}" part="ThumbnailTabContent">
+        <casino-tournaments-table firstrow="true" sortable="false" {lang}></casino-tournaments-table>
+      </div>
+      <div class="TabContent Rules { activeTab != 'rules' ? 'hidden' : ''}" part="ThumbnailTabContent">
+        {#if tournamentDetails}
+          <casino-tournaments-thumbnail-rule lang="{lang}" tcurl="{tournamentDetails.termsUrl||'#'}" scorecriterial="{tournamentDetails.scoreCriteria}" betcount="{tournamentDetails.minBetCount || $_('tournamentsPage.unlimited')}"
+                                             starttime="{moment(tournamentDetails.startTime).format('DD/MM/YYYY HH:mm:ss')}"
+                                             endtime="{moment(tournamentDetails.endTime).format('DD/MM/YYYY HH:mm:ss')}"
+                                             products="{tournamentProducts}"></casino-tournaments-thumbnail-rule>
+        {/if}
+      </div>
+      <div class="TabContent Games { activeTab != 'games' ? 'hidden' : ''}" part="ThumbnailTabContent">
+        {#if tournamentProducts}
+          <div class="GameItems {tournamentProducts.casino && tournamentProducts.sports ? 'TwoGames' : 'OneGame'}" part="ThumbnailTabContent_Games">
+            {#if tournamentProducts.casino}
+              <div part="ThumbnailTabContent_Casino">
+                <img class="svg"  part="ThumbnailTabContent_Games_Casino_Svg" src="{gameCasinoSvg}" width="78" height="75"/>
+                <span part="ThumbnailTabContent_Games_Casino_Label" on:click='{() => gotoFromTournamentsPage("Casino")}'>{$_('tournamentsPage.forwardCasino')}</span>
+              </div>
+            {/if}
+            {#if tournamentProducts.sports}
+              <div class="SportsItems" part="ThumbnailTabContent_Sports">
+                <img class="svg" part="ThumbnailTabContent_Games_Sports_Svg" src="{gameSportsSvg}" width="68" height="65"/>
+                <span  part="ThumbnailTabContent_Games_Sports_Label" on:click='{() => gotoFromTournamentsPage("Sports")}'>{$_('tournamentsPage.forwardSports')}</span>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <div class="BottomButton" part="ThumbnailGotoTournamentsButton" on:click='{()=>{gotoFromTournamentsPage("MyTournaments")}}' >{$_('tournamentsPage.forwardMyTournaments')}</div>
+    </div>
+  </div>
+{/if}
 <style lang="scss">
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -446,5 +645,139 @@
   .TournamentTableDetails {
     width: 100%;
   }
+  .TournamentsPage.MiniMode{
+    height: max-content;
+    .MobileClass.TournamentCardDetails{
+      padding: 5px 5px 0px 5px;
+      background-color: #333333;
+      padding-bottom: 12px;
+      casino-tournaments-rank{display: block;}
+    }
+    .CloseButton{position: absolute; right: 3px; top: 3px; font-size: 11px; cursor: pointer}
+    casino-tournaments-rank::part(Rank), casino-tournaments-rank::part(Prize){
+      color: #0a0c19;
+      font-size: 12px;
+      margin: 0px 0px 0px 5px;
+      padding: 2px;
+    }
+    casino-tournaments-rank::part(Rank){margin-left: 0px; }
+    casino-tournaments-rank::part(Prize){margin-right: 0px;}
+    casino-tournaments-rank::part(RankText), casino-tournaments-rank::part(PrizeText){font-weight: 400;}
+
+    .hidden{display: none}
+    casino-tournaments-thumbnail-controller::part(TournamentCard){
+      padding: 5px 5px 0px 5px;
+      background-color: #333333;
+    }
+    casino-tournaments-tab::part(LiText){
+      height: 22px;
+      top: calc(50% - 22px/2);
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 22px;
+      text-align: center;
+      letter-spacing: -0.1px;
+    }
+    casino-tournaments-tab::part(CustomStylingContainer){
+      margin-top: 0px;
+      cursor: pointer;
+    }
+    .TabContent, casino-tournaments-tab{padding:  0 16px}
+    .TabContent.Rules{
+      padding-bottom: 28px;
+    }
+    .TabContent.Games{
+      padding-bottom: 30px;
+      .GameItems{
+        &.OneGame{width: 100%;}
+        &.TwoGames{width: 100%; display: flex; div{width: 50%}}
+        text-align: center;
+        margin: auto;
+        margin-top: 39px;
+        span{color: #FF8364; font-size: 12px; text-align: center; text-decoration-line: underline; cursor: pointer; margin-top: 5px}
+        svg, .svg{height: 70px;display: block;margin: auto;}
+        svg.ball, .svg.ball{width: 98px}
+      }
+    }
+    .BottomButton{
+      font-weight: 600;
+      font-size: 15px;
+      text-align: center;
+      height: 35px;
+      width: 60%;
+      margin:20px auto;
+      align-items: center;
+      padding: 8.72351px 12.6887px;
+      background: #FF8364;
+      box-shadow: 0px 0.793047px 2.37914px rgba(0, 0, 0, 0.1), 0px 1.58609px 0.793047px rgba(0, 0, 0, 0.06), 0px 0.793047px 0.793047px rgba(0, 0, 0, 0.07);
+      border-radius: 4.75828px;
+    }
+
+    .Thumbnail {
+      position: relative;
+      &.Mobile{border: 0px none;
+        padding: 6px 5px 10px;
+        background: #333333;}
+      &.MiniMode .CardImg{margin-bottom: 5px; width: 65px; height: 40px}
+
+      .CardImg {
+        height: 300px;
+        width: 100%;
+        background: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: auto;
+        &.CardImgFinished {
+          filter: grayscale(1);
+        }
+        &.Mobile{
+          width: 65px;
+          height: 40px;
+          display: inline-block;
+        }
+      }
+      .MobileRight{
+        display: inline-block;
+        line-height: 20px;
+        font-size: 11px;
+        padding: 2px 3px;
+        vertical-align: top;
+        width: calc(100% - 70px);
+        .Title{text-transform: capitalize; font-size: 14px; font-weight: 600}
+      }
+
+      .Status {
+        background: #000000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        min-height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        text-transform: uppercase;
+        z-index: 1;
+      }
+
+      .Enrolled {
+        background: #2B2B5D;
+        color: #aaaabe;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        min-height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        text-transform: uppercase;
+        z-index: 1;
+      }
+    }
+  }
 
 </style>

package/src/i18n.js

@@ -1,6 +1,7 @@
 import {
   dictionary,
   locale,
+  date,
   addMessages,
   _
 } from 'svelte-i18n';
@@ -24,4 +25,4 @@ function setLocale(_locale) {
   locale.set(_locale);
 }
 
-export { _, setupI18n, addNewMessages, setLocale };
+export { _, setupI18n, addNewMessages, setLocale , date};