@everymatrix/lottery-program-wof 1.11.0 → 1.11.1

package/src/private.loader.svelte

@@ -0,0 +1,61 @@
+<svelte:options tag={'wof-loader'} />
+<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+<style lang="scss">
+
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+
+</style>

package/src/private.message.svelte

@@ -4,8 +4,8 @@
   // @ts-ignore
   import giftSvg from './images/gift.svg'
   import { onMountMessageLifeCycle, _postMessage } from './message';
+  import { _ } from './i18n';
 
-  export let h = 0
   export let r = 0
   export let id: string = undefined
 
@@ -61,7 +61,9 @@
 
   $: width = r*2 + 5
   $: left = r/2
-  $: top = h / 2 - root?.clientHeight / 2
+  $: top = r
+
+  $: startTime = modeValue?.startTime && getTimeString(modeValue?.startTime)
 
 </script>
 
@@ -84,33 +86,29 @@
   {/if}
 
   {#if mode === 'spin-failed'}
-  <p>We are sorry that you</p>
-  <p>don't have any Wheels available, </p>
-  <p>please <strong>check T&C</strong> here </p>
-  <p>to get a chance!</p>
+  <p>{$_('wof.SpinFailed')}</p>
   {/if}
 
   {#if mode === 'show-next'}
-  <p>The Wheel will be available on</p>
-  <p>
-    <strong>
-      {getTimeString(modeValue?.startTime)}
-    </strong>
-  </p>
-  <p>please wait till it is open</p>
+  <p>{@html $_('wof.ShowNext', {values: { startTime }})}</p>
   {/if}
 
   {#if mode === 'gift'}
   <p>
     <img src={giftSvg} alt="">
   </p>
-  <p>Congratulations! You won a prize!</p>
+  <p>{$_('wof.Congratulation')}</p>
   <!-- <p>{modeValue}</p> -->
   {/if}
 
   {#if mode !== 'init-failed'}
   <div>
-    <button class="MessagePanelButton" on:click={eventButton}>OK</button>
+    <button
+      class="MessagePanelButton"
+      on:click={eventButton}
+    >
+      {$_('wof.OK')}
+    </button>
   </div>
   {/if}
 </div>

package/src/private.outcomes.svelte

@@ -6,6 +6,8 @@
   import { onMountMessageLifeCycle } from "./message";
   import type { LotteryProgramForPlayer } from "./types.business";
   import { classWithPart } from "./util";
+  import { _ } from './i18n';
+  import './private.loader.svelte'
 
   export let endpoint: string = ''
   export let session: string = ''
@@ -86,23 +88,23 @@
           <table>
             {#each outcomesAll as outcomesItem}
               {#if outcomesItem.isLoading}
-                <div>Loading...</div>
+                <wof-loader />
               {:else}
                 {#if !outcomesItem.outcomes || outcomesItem.outcomes.length === 0}
-                  <div {...classWithPart("OutcomeNoContent")}>No histories</div>
+                  <div {...classWithPart("OutcomeNoContent")}>{$_('wof.NoHistories')}</div>
                 {:else}
                 <div>
                   <tr>{getName(lotteryProgramsForPlayer.filter(l => l.program.id === outcomesItem.id)[0].program)}</tr>
                 </div>
                 <thead>
                   <tr>
-                    <th>Rewards</th>
-                    <th>Status</th>
-                    <th>Time</th>
+                    <th>{$_('wof.Rewards')}</th>
+                    <th>{$_('wof.Status')}</th>
+                    <th>{$_('wof.Time')}</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {#each outcomesItem.outcomes as outcome,index}
+                  {#each outcomesItem.outcomes as outcome}
                   <tr>
                     <td>{getPrize(outcome, outcomesItem.id)}</td>
                     <td>{outcome.draw.state}</td>

package/src/private.tabs.svelte

@@ -3,9 +3,9 @@
 <script lang="ts">
   import { _postMessage } from "./message";
   import { Tab } from "./types";
+  import { _ } from './i18n';
 
   let tab: Tab = Tab.Program;
-
 </script>
 
 <section id="TabBar" part="TabBar">
@@ -26,7 +26,7 @@
           tab = _tab
         }}
       >
-        {_tab}
+        {$_(`wof.${_tab}`)}
       </span>
     </li>
     {/each}

package/src/themes.image.base.ts

@@ -0,0 +1,69 @@
+import { pointPlus } from "./calc.point"
+
+interface ImageSize {
+  width: number
+  height: number
+}
+
+export const renderSvgImageProps = (center: number, href: string, size: ImageSize, offset = {x: 0, y: 0}) => ({
+  x: center - size.width / 2 - offset.x,
+  y: center - size.height / 2 - offset.y,
+  width: size.width,
+  height: size.height,
+  href,
+})
+
+export const themedImagesUpdater = (
+  images, imagesData, imagesConfig, ratio, fn, offset?
+) => {
+
+  let centerImagesComposed = {}
+
+  Object.keys(images).map(k => {
+
+    let _offset = {
+      x: 0,
+      y: 0
+    }
+
+    if(imagesData[k].offset){
+      _offset = pointPlus(_offset, imagesData[k].offset)
+    }
+
+    if(offset){
+      _offset = pointPlus(_offset, offset)
+    }
+
+    const rationalize = (object) => {
+      let _object = JSON.parse(JSON.stringify(object))
+
+      Object.keys(object).map(_key => {
+        _object[_key] = object[_key] * ratio
+      })
+
+      return _object
+    }
+
+    centerImagesComposed[k] = {
+      src: images[k],
+      props: rationalize(imagesData[k].props),
+      ... ( _offset ? {
+        offset: rationalize(_offset)
+      } : {})
+    }
+  })
+
+  const themedCenterImagesList = imagesConfig.map(i => {
+    return i.map(j => centerImagesComposed[j])
+  })
+
+  fn(themedCenterImagesList)
+}
+
+export const themedImageProps = (center, themedImage) => 
+  renderSvgImageProps(
+    center, 
+    themedImage.src, 
+    themedImage.props, 
+    themedImage.offset
+  )

package/src/themes.image.center.ts

@@ -0,0 +1,141 @@
+
+// @ts-ignore
+import spinSvg from './images/spin.svg'
+// @ts-ignore
+import centerArrowSvg from './images/centerArrow.svg'
+// @ts-ignore
+import centerArrow3Svg from './images/centerArrow3.svg'
+// @ts-ignore
+import centerPackSvg from './images/centerPack.svg'
+// @ts-ignore
+import centerText3Svg from './images/centerText3.svg'
+// @ts-ignore
+import centerBackground2Svg from './images/centerBackground2.svg'
+// @ts-ignore
+import centerBackground1Svg from './images/centerBackground1.svg'
+// @ts-ignore
+import centerCircleSvg from './images/centerCircle.svg'
+// @ts-ignore
+import centerArrowBgSvg from './images/centerArrowBg.svg'
+
+import { themedImagesUpdater } from './themes.image.base'
+
+export const centerImages = {
+  centerArrowSvg,
+  centerArrow3Svg,
+  centerText3Svg,
+  centerBackground2Svg,
+  centerPackSvg,
+  spinSvg,
+  centerArrowBgSvg,
+  centerCircleSvg,
+  centerBackground1Svg, 
+}
+
+export const centerImagesData = {
+  centerArrow3Svg: {
+    props: {
+      width: 92, 
+      height: 92
+    },
+  },
+  centerText3Svg: {
+    props: {
+      width:  42, 
+      height: 25
+    },
+  },
+  centerBackground2Svg: {
+    props: {
+      width: 128, 
+      height: 128
+    },
+  },
+  centerBackground1Svg: {
+    props: {
+      width: 128, 
+      height: 128
+    },
+  },
+  centerPackSvg: {
+    props: {
+      width:  76, 
+      height: 76
+    },
+  },
+  centerArrowSvg: {
+    props: {
+      width: 96, 
+      height: 96
+    },
+  },
+  spinSvg: {
+    props: {
+      width:  1.3 * 42, 
+      height: 1.3 * 25
+    },
+  },
+  centerArrowBgSvg: {
+    props: {
+      width:  28, 
+      height: 24,
+    },
+    offset: {
+      x: 0,
+      y: 45
+    }
+  },
+  centerCircleSvg: {
+    props: {
+      width:  88, 
+      height: 104,
+    },
+    offset: {
+      x: 0,
+      y: 6
+    }
+  }
+}
+
+
+export const centerImagesConfig = [
+  [ // 0
+    'centerBackground1Svg', 
+    'centerArrowSvg', 
+    'spinSvg'
+  ],
+  [ // 1
+    'centerBackground2Svg', 
+    'centerPackSvg'
+  ],
+  [ // 2
+    'centerBackground1Svg', 
+    'centerArrow3Svg', 
+    'centerText3Svg'
+  ],
+  [ // 3
+    'centerBackground1Svg', 
+    'centerArrowSvg', 
+    'spinSvg'
+  ],
+  [ // 4
+    'centerBackground1Svg', 
+    'spinSvg',
+    'centerArrowBgSvg',
+    'centerCircleSvg',
+  ],
+  [ // 5
+    'centerBackground1Svg', 
+    'spinSvg',
+    'centerArrowBgSvg',
+    'centerCircleSvg',
+  ]
+]
+
+export const themedCenterImagesUpdater = (ratio, fn, offset?) => 
+  themedImagesUpdater(
+    centerImages, 
+    centerImagesData, 
+    centerImagesConfig,
+    ratio, fn, offset
+  )

package/src/themes.image.pointer.ts

@@ -0,0 +1,51 @@
+
+// @ts-ignore
+import pointerArrowSvg from './images/pointerArrow.svg'
+// @ts-ignore
+import pointerArrow3Svg from './images/pointerArrow3.svg'
+import { themedImagesUpdater } from './themes.image.base'
+  
+export const pointerImages = {
+  pointerArrowSvg,
+  pointerArrow3Svg,
+}
+
+export const pointerImagesData = {
+  pointerArrowSvg: {
+    props: {
+      width: 60 / 2, 
+      height: 60 / 2
+    },
+  },
+  pointerArrow3Svg: {
+    props: {
+      width: 2.8 * 32 / 2, 
+      height: 2.8 * 48 / 2
+    },
+  }
+}
+
+export const pointerImagesConfig = [
+  [ // 0
+  ],
+  [ // 1
+    'pointerArrowSvg', 
+  ],
+  [ // 2
+    'pointerArrow3Svg', 
+  ],
+  [ // 3
+  ],
+  [ // 4
+  ],
+  [ // 5
+  ]
+]
+
+export const themedPointerImagesUpdater = (ratio, fn, offset?) => 
+  themedImagesUpdater(
+    pointerImages, 
+    pointerImagesData, 
+    pointerImagesConfig,
+    ratio, fn, offset
+  )

package/src/themes.partitions.ts

@@ -1,3 +1,22 @@
+export const partitionStrokeSteps = [
+  {
+    offset: "0",
+    color: "#F28F00",
+  },
+  {
+    offset: "0.27",
+    color: "#F5A318",
+  },
+  {
+    offset: "0.85",
+    color: "#FCD755",
+  },
+  {
+    offset: "1",
+    color: "#FFE767",
+  },
+]
+
 export const partitions1 = {
   colorSchema: [
     [

package/src/themes.ts

@@ -1,4 +1,5 @@
 import { partitions1, partitions2, partitions3 } from "./themes.partitions"
+import { PointerMode } from "./types"
 
 const sizeSchema1 = {
   radius    : 247,
@@ -177,30 +178,36 @@ export const themes = [
     size: sizeSchema1,
     background: backgroundSchema1,
     partitions: partitions1,
+    pointerMode: PointerMode.Partition,
   },
   {
     size: sizeSchema2,
     background: backgroundSchema2,
     partitions: partitions1,
+    pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema1,
     background: backgroundSchema3,
     partitions: partitions2,
+    pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema1,
     background: backgroundSchema1,
     partitions: partitions3,
+    pointerMode: PointerMode.Partition,
   },
   {
     size: sizeSchema1,
     background: backgroundSchema1,
     partitions: partitions3,
+    pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema2,
     background: backgroundSchema2,
     partitions: partitions3,
+    pointerMode: PointerMode.Arrow,
   },
 ]

package/src/translations.js

@@ -0,0 +1,52 @@
+export const translations = {
+  en: {
+    wof: {
+      NoContent: `You don't have any lottery programs available now.`,
+      NoNext: `You don't have any spins available. Please check T&C`,
+      NoHistories: `No histories`,
+      Program: `Program`,
+      History: `History`,
+      ActiveTickets: `Active Tickets`,
+      ImplicitTickets: `Implicit Tickets`,
+      RemainingTimes: `Remaining Times`,
+      ShowNext: `The Wheel will be available on <strong>{startTime}</strong>. please wait till it is open.`,
+      SpinFaild: `We are sorry that you don't have any Wheels available, please <strong>check T&C</strong> here to get a chance!`,
+      Congratulation: `Congratulations! You won a prize!`,
+      OK: `OK`,
+      Rewards: `Rewards`,
+      Status: `Status`,
+      Time: `Time`,
+      Loss: `OOPs! You are close to a prize!`,
+    }
+  },
+  zh: {
+    wof: {
+      
+    }
+  },
+  fr: {
+    wof: {
+      
+    }
+  },
+  ro: {
+    wof: {
+      
+    }
+  },
+  es: {
+    wof: {
+      
+    }
+  },
+  pt: {
+    wof: {
+      
+    }
+  },
+  de: {
+    wof: {
+      
+    }
+  }
+};

package/src/calc.image.ts

@@ -1,13 +0,0 @@
-
-interface ImageSize {
-  width: number
-  height: number
-}
-
-export const renderSvgImageProps = (center: number, href: string, size: ImageSize, offset = {x: 0, y: 0}) => ({
-  x: center - size.width / 2 - offset.x,
-  y: center - size.height / 2 - offset.y,
-  width: size.width,
-  height: size.height,
-  href,
-})