@everymatrix/player-active-bonuses 0.0.245 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-active-bonuses",
-  "version": "0.0.245",
+  "version": "0.0.249",
   "main": "dist/player-active-bonuses",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d96554d716d8c3b41f947c85c9b8cae8f03aa5bf"
+  "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
 }

package/src/PlayerActiveBonuses.svelte

@@ -183,31 +183,31 @@
 </script>
 
 {#if isLoading}
-  <div class="ModalLoader"></div>
+  <div class="ModalLoader" part="ModalLoader"></div>
 {:else}
-  <div class="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}">
+  <div class="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}" part="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}">
     {#if isMobile}
-      <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+      <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
           <g transform="translate(20 158)">
             <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
           </g></g>
         </svg>
-        <h2 class="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
+        <h2 class="ActiveBonusesTitleMobile" part="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
       </div>
     {/if}
-    <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
-    <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
+    <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}" part="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
+    <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}" part="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
       <label for="BonusCode">{$_('activeBonuses.bonusCode')}</label>
-      <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
-        <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
-        <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
+      <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}" part="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
+        <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" part="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
+        <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" part="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
       </div>
       {#if invalidBonusCode}
-        <p class="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
+        <p class="InvalidBonusCodeMessage" part="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
       {/if}
     </div>
-    <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
+    <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}" part="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
       {#if activeBonusesList.length === 0}
         <p>{$_('activeBonuses.noActiveBonuses')}</p>
       {:else}
@@ -240,28 +240,28 @@
       {/if}
     </div>
     {#if activeBonusesList.length !== 0}
-      <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
-        <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(0)}>&vert;&lt;</span>
-        <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesPrevPage)}>&lt;</span>
+      <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
+        <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(0)}>&vert;&lt;</span>
+        <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesPrevPage)}>&lt;</span>
         {#each Array(numberOfPages) as _, i}
-          <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getActiveBonuses(i*bonusesPerPage)}>{i+1}</span>
+          <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getActiveBonuses(i*bonusesPerPage)}>{i+1}</span>
         {/each}
-        <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesNextPage)}>&gt;</span>
-        <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesLastPage)}>&gt;&vert;</span>
+        <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesNextPage)}>&gt;</span>
+        <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesLastPage)}>&gt;&vert;</span>
       </div>
     {/if}
   </div>
   {#if bonusModal}
-  <div class="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}">
-    <div class="ModalContent">
+  <div class="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}" part="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}">
+    <div class="ModalContent" part="ModalContent">
       {#if !isMobile}
-        <span class="ModalClose" on:click={closeBonusModal} />
+        <span class="ModalClose" part="ModalClose" on:click={closeBonusModal} />
       {/if}
-      <div class="ModalBody">
-        <p class="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
-        <div class="ModalButtons">
-          <button class="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
-          <button class="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
+      <div class="ModalBody" part="ModalBody">
+        <p class="ModalText" part="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
+        <div class="ModalButtons" part="ModalButtons">
+          <button class="ModalCancel" part="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
+          <button class="ModalConfirm" part="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
         </div>
       </div>
     </div>