@everymatrix/lottery-program-wof 1.20.8 → 1.20.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.20.8",
+  "version": "1.20.10",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4a16a48b4b373f277887e6630034f139df224ee0"
+  "gitHead": "90ba6c4378f429df47a59fecc6bc15675ebcfbf9"
 }

package/src/api/api.ts

@@ -218,6 +218,8 @@ export interface ILotteryProgramRecurrence {
      * @memberof ILotteryProgramRecurrence
      */
     activeTickets?: number;
+
+    remainingTimes?: number;
 }
 /**
  * 
@@ -285,6 +287,9 @@ export interface LotteryProgram {
      * @memberof LotteryProgram
      */
     time?: Date;
+    metadata?: {
+        [key: string]: string
+    }
 }
 /**
  * 

package/src/business.partition.ts

@@ -0,0 +1,80 @@
+import type { WheelOfFortunePartition } from './api'
+
+// @ts-ignore
+import Thankyou1Svg from './images/Thankyou_1.svg'
+// @ts-ignore
+import Thankyou2Svg from './images/Thankyou_2.svg'
+// @ts-ignore
+import Thankyou3Svg from './images/Thankyou_3.svg'
+// @ts-ignore
+import Thankyou4Svg from './images/Thankyou_4.svg'
+import type { Lang } from './types'
+import type { LotteryProgramForPlayer } from './types.business'
+import { imageLoaderSvg } from './util'
+
+export interface Option {
+  image: SVGElement | string,
+  name: string,
+  prizeText: string,
+  prizeImage: string
+}
+
+const optionCompliment = {
+  image: Thankyou1Svg,
+  name: 'Thank you',
+  prizeText: '',
+  prizeImage: '',
+}
+
+const getSumProbability = (partitions) => {
+  let probabilityAll = 0
+  partitions.map(partition => {
+    probabilityAll += Number(partition.probability)
+  })
+  return probabilityAll
+}
+
+const getOptionsFromPartitions = (partitions: WheelOfFortunePartition[], lang: Lang): Option[] => {
+  const options = partitions.map(_partition => {
+    const option = {}
+    Object.keys(_partition).map((_key) => {
+      if(
+        typeof _partition[_key] === 'object' && 
+        (_partition[_key] as Object).hasOwnProperty('*')
+      ){
+        const targetKey = _key === 'image1' ? 'image' : _key
+        option[targetKey] = _partition[_key][lang] || _partition[_key]['*']
+      }
+    })
+
+    return option as Option
+  })
+
+  if(getSumProbability(partitions) < 1){
+    options.push(optionCompliment)
+  }
+
+  return options
+}
+
+const preloadImage = async (src: string) => {
+  if(!src) return {}
+
+  return { 
+    image: await imageLoaderSvg(src) as SVGImageElement
+  }
+}
+
+export const getOptions = async (bonus: LotteryProgramForPlayer, lang: Lang) => {
+
+  const { partitions } = bonus.program.wheelOfFortune
+
+  const options: Option[] = await Promise.all(
+    getOptionsFromPartitions(partitions, lang).map(async o => ({
+      ...o, 
+      ...(await preloadImage(o.image as string))
+    }))
+  )
+
+  return options
+}

package/src/business.ts

@@ -1,30 +1,15 @@
-import type { WheelOfFortunePartition } from './api';
 import { findDeg } from './calc';
-import { getStatePropsForSpin } from './css.state';
 import { _postMessage } from './message';
-import { Api, ApiConfigs, Lang, PointerMode } from './types';
-import type { LotteryProgramForPlayer } from './types.business';
+import { Api, ApiConfigs, PointerMode } from './types';
+import type { LotteryProgramForPlayer, ApiDrawResult, ApiLotteriesResult } from './types.business';
 import { CurrentInfo } from './types.business';
-import { delay, fetcher, imageLoaderSvg, setProps } from './util';
+import { fetcher } from './util';
 import { _ } from './i18n';
 
-// @ts-ignore
-import Thankyou1Svg from './images/Thankyou_1.svg'
-// @ts-ignore
-import Thankyou2Svg from './images/Thankyou_2.svg'
-// @ts-ignore
-import Thankyou3Svg from './images/Thankyou_3.svg'
-// @ts-ignore
-import Thankyou4Svg from './images/Thankyou_4.svg'
+export * from './business.partition'
+import type { Option } from './business.partition'
 
-export interface Option {
-  image: SVGElement | string,
-  name: string,
-  prizeText: string,
-  prizeImage: string
-}
-
-const fetcherApi = async <T extends Api>(api: T, endpoint: string, config: ApiConfigs[T]) => {
+const fetcherApi = async <T extends Api>(api: Api, endpoint: string, config: ApiConfigs[T]) => {
 
   const { session } = config
 
@@ -86,44 +71,6 @@ const fetcherApi = async <T extends Api>(api: T, endpoint: string, config: ApiCo
   return await fetcher(args)
 }
 
-export const getSumProbability = (partitions) => {
-  let probabilityAll = 0
-  partitions.map(partition => {
-    probabilityAll += Number(partition.probability)
-  })
-  return probabilityAll
-}
-
-export const getOptionsFromPartitions = (partitions: WheelOfFortunePartition[], lang: Lang): Option[] => {
-	let options = partitions.map((_partition, index) => {
-		const partitionLang = {}
-		Object.keys(_partition).map((_key) => {
-			if(['name', 'image1', 'image2', 'image3', 'prizeText', 'prizeImage'].includes(_key)){
-				partitionLang[_key] = _partition[_key][lang] || _partition[_key]['*']
-			}
-		})
-
-		const option: Option = {
-			image: partitionLang['image1'],
-			name: partitionLang['name'],
-      prizeText: partitionLang['prizeText'],
-      prizeImage: partitionLang['prizeImage'],
-		}
-		return option
-	})
-
-  if(getSumProbability(partitions) < 1){
-    options.push({
-      image: Thankyou1Svg,
-      name: 'Thank you',
-      prizeText: '',
-      prizeImage: '',
-    })
-  }
-
-	return options
-}
-
 export const setMessage = (id: string, entry: string | object) => {
   const _postMessageScoped = (props) => _postMessage({ ...props, id })
   switch(typeof entry) {
@@ -136,28 +83,6 @@ export const setMessage = (id: string, entry: string | object) => {
   }
 }
 
-export const getOptions = async (bonus: LotteryProgramForPlayer, lang: Lang) => {
-
-  const { partitions } = bonus.program.wheelOfFortune
-
-  const preloadImage = async (src: string) => {
-    if(!src) return {}
-
-    return { 
-      image: await imageLoaderSvg(src) as SVGImageElement
-    }
-  }
-
-  const options: Option[] = await Promise.all(
-		getOptionsFromPartitions(partitions, lang).map(async o => ({
-			...o, 
-      ...(await preloadImage(o.image as string))
-		}))
-	)
-
-  return options
-}
-
 export const getCurrentInfo = (
   lotteryProgramForPlayer: LotteryProgramForPlayer, 
   key: CurrentInfo
@@ -186,7 +111,7 @@ export const api = {
   lotteries: 
     async (endpoint: string, session: string) => {
 
-      const data = await fetcherApi(Api.lotteries, endpoint, { session })
+      const data = await fetcherApi(Api.lotteries, endpoint, { session }) as ApiLotteriesResult
 
       const lotteryProgramForPlayers = data.items as LotteryProgramForPlayer[] || []
 
@@ -195,7 +120,7 @@ export const api = {
   draw: 
     async (endpoint: string, session: string, id: string, guid, options: Option[]) => {
 
-      let data = await fetcherApi(Api.draw, endpoint, { id, session, guid })
+      let data = await fetcherApi(Api.draw, endpoint, { id, session, guid }) as ApiDrawResult
       
       // data = getExceptionData(data)
 
@@ -203,26 +128,25 @@ export const api = {
 
       let message: any
       
+      const option = options[index]
+      const imageSrc = (option.image as SVGAElement)?.href?.baseVal
+
       if(!index){
         index = options.length - 1
         message = {
           mode: 'nogift',
           modeValue: {
-            image: options[index].image?.href?.baseVal
+            image: imageSrc
           }
         }
       }else{
-        const modeValue =  {
-          index,
-          prizeText: options[index].prizeText,
-          prizeImage: options[index].prizeImage,
-          name: options[index].name,
-          image: options[index].prizeImage || options[index].image?.href?.baseVal
-        }
-
         message = {
           mode: 'gift',
-          modeValue
+          modeValue: {
+            prize: option.name || 'prize',
+            prizeText: option.prizeText,
+            prizeSrc: option.prizeImage || imageSrc
+          }
         }
       }
     
@@ -238,38 +162,6 @@ export const api = {
     },
 }
 
-// export const getMessageByCurrent = (current) => {
-
-// 	const { maxImplicitTickets, usedImplicitTickets, activeTickets } = current
-
-// 	const conditionImplicitTickets = usedImplicitTickets < maxImplicitTickets
-//   const conditionActiveTickets = activeTickets > 0
-
-//   if(conditionImplicitTickets){
-//     const implicitTickets = `${maxImplicitTickets - usedImplicitTickets}/${maxImplicitTickets}`
-//     return `You have ${implicitTickets} Implicit Tickets`
-//   }
-
-//   if(conditionActiveTickets){
-//     return `You used all Implicit Tickets in this period, but you have ${activeTickets} active Tickets`
-//   }
-  
-//   return `You not have any more tickets, please check T&C to get a chance.`
-// }
-
-export const checkIfNowIsBetween = (current) => {
-	
-	const { startTime, endTime } = current
-
-	const getTime = (timeString: string) => (new Date(timeString)).getTime()
-	const nowTime = (new Date()).getTime()
-
-	const condition = 
-		getTime(startTime) < nowTime && nowTime < getTime(endTime)
-
-	return condition
-}
-
 export const getSpinContainerSelector = (pointerMode: PointerMode) => {
   switch(pointerMode){
     case PointerMode.Arrow: return 'g.PartitionsContainer'
@@ -284,29 +176,4 @@ export const findDegWithPointerMode = (index: number, length: number, pointerMod
     case PointerMode.Partition:
       return findDeg(index, length)
   }
-}
-
-export const spin = async (container: Element, deg: number, rotation: string, duration: string) => {
-
-  const _duration = Number(duration)
-  const _rotation = Number(rotation)
-    
-  const props = getStatePropsForSpin(deg, _rotation, _duration)
-
-  setProps(container, props.before)
-
-  await delay(_duration)
-
-  setProps(container, props.after)
-}
-
-export const getSpinCondition = (lotteryProgramForPlayer: LotteryProgramForPlayer) => {
-  const { current } = lotteryProgramForPlayer
-  if(!current) return false;
-  
-  const condition = 
-    current.activeTickets === 0 && 
-    current.usedImplicitTickets === current.maxImplicitTickets
-
-  return condition
 }

package/src/class.process.ts

@@ -51,8 +51,7 @@ export class Process {
       if(frequency < 4){
         this.drawer(guid, frequency + 1)
       }else{
-        const messageError = 'There was a problem to grant the reward. Please contact support'
-        this.handleHaltProcess(index, messageError)
+        this.handleHaltProcess(index, 'DrawFailed')
       }
     }
   }

package/src/private.item.svelte

@@ -42,6 +42,7 @@
 
   let bonus: LotteryProgramForPlayer
   let bonusNew: LotteryProgramForPlayer
+  let currentInfoKeys: CurrentInfo[]
 
   // lifecycles
   const init = async () => {
@@ -57,11 +58,15 @@
   
   onMountMessageLifeCycle({
     'wof-private-bonuses': (data) => {
-      bonus = data.bonuses.find(l => l.program.id === id)
+      const bonusFound = data.bonuses.find(l => l.program.id === id)
+      if(bonusFound){
+        bonus = bonusFound
+      }
     },
     'wof-private-message-spin-after': (data) => {
       if(data.id !== id) return;
       bonus = bonusNew
+      _postMessage({type: 'wof-private-bonus', bonus: bonusNew, id })
     },
 
     'wof-private-message-spin-before': async (data) => {
@@ -75,6 +80,8 @@
   $: ratio = size / 375
   $: radius = 247 / 2 * ratio
   
+  // @ts-ignore
+  $: currentInfoKeys = currentinfo ? currentinfo.split(',') : [CurrentInfo.RemainingTimes]
 </script>
 
 <div class="LotteryItem" bind:this={rootContainer}>
@@ -94,7 +101,7 @@
   
   {#if bonus?.current}
   <div class="Current">
-    {#each currentinfo ? currentinfo.split(',') : [CurrentInfo.RemainingTimes] as CurrentInfoKey}
+    {#each currentInfoKeys as CurrentInfoKey}
       <p class={CurrentInfoKey}>
         {$_(`wof.${CurrentInfoKey}`)}: {getCurrentInfo(bonus, CurrentInfoKey)}
       </p>

package/src/private.item.svg.svelte

@@ -4,7 +4,7 @@
 
   // types
   import { PointerMode, Lang, ContentDirection } from './types';
-  import { getOptions, getSpinCondition, getSpinContainerSelector, Option } from './business';
+  import { getOptions, getSpinContainerSelector, Option } from './business';
   import { api } from './business';
   import { onMountMessageLifeCycle, _postMessage } from './message';
   import type { LotteryProgramForPlayer } from './types.business';
@@ -55,6 +55,7 @@
 
   // states
   let spinable = true;
+  let isSpinning = false;
   let isShowPrizeArea = false;
   let messageShown: boolean = false;
   let shownFirstCheck = false
@@ -72,7 +73,7 @@
   $: options && updateCalcOptions()
   $: (contentdirection || !contentdirection) && updateCalcContentDirection()
 
-  $: bonus && checkSpinable()
+  $: bonus && runFirstCheck()
 
   const updateCalcOptions = () => {
     calc.options = options
@@ -93,20 +94,27 @@
     }
   }
 
-  const checkSpinable = () => {
+  const runFirstCheck = () => {
     if(shownFirstCheck) return;
     shownFirstCheck = true
-    
-    if(spinable){
+    updateSpinable()
+  }
 
-      const isNoTimeToSpin = getSpinCondition(bonus)
+  const updateSpinable = () => {
+    const isSpinable = !!bonus.current && bonus.current.remainingTimes > 0
 
-      if(isNoTimeToSpin){
+    if(isSpinable){
+      spinable = true
+    }else{
+      spinable = false;
+
+      if(bonus.next){
         process.setMessage({
-          mode: 'spin-failed'
+          mode: 'show-next',
+          modeValue: bonus.next
         })
-      }else if(!isNoTimeToSpin && !bonus.next){
-        process.setMessage($_('wof.NoNext'))
+      }else{
+        process.setMessage('NoNext')
       }
     }
   }
@@ -121,21 +129,11 @@
 
   // events
   const eventSpin = async () => {
+    updateSpinable();
     if(!spinable) return;
+    if(isSpinning) return;
 
-    if(!bonus.current?.remainingTimes){
-      if(bonus.next){
-        process.setMessage({
-          mode: 'show-next',
-          modeValue: bonus.next
-        })
-      }else{
-        process.setMessage($_('wof.NoNext'))
-      }
-      return;
-    }
-    
-    spinable = false
+    isSpinning = true
     isShowPrizeArea = false
 
     spinContainer = svg.querySelector(getSpinContainerSelector(theme.pointerMode))
@@ -147,10 +145,15 @@
     'wof-private-bonuses': (data) => {
       bonus = data.bonuses.find(_bonus => _bonus.program.id === id)
     },
+    'wof-private-bonus': (data) => {
+      if(data.id !== id) return;
+      bonus = data.bonus
+    },
     'wof-private-message-close': (data) => {
       if(data.id !== id) return;
       
-      spinable = true
+      isSpinning = false
+      setTimeout(() => updateSpinable(), 1)
       messageShown = false
     },
   })
@@ -274,7 +277,7 @@
 
     <g
       class="Center"
-      class:disabled={!spinable}
+      class:disabled={isSpinning}
       on:click={() => eventSpin()}
     >
       {#each calc.getThemedCenterImages() as themedImage}

package/src/private.message.svelte

@@ -67,8 +67,7 @@
 
   $: startTime = modeValue?.startTime && getTimeString(modeValue?.startTime)
 
-  $: prize = modeValue?.name || 'prize'
-  $: prizeSrc = modeValue?.prizeImage || giftimagesrc || modeValue?.image || giftSvg
+  $: prizeSrc = modeValue?.prizeSrc || giftimagesrc || giftSvg
 
 </script>
 
@@ -87,11 +86,7 @@
 >
 
   {#if mode === 'normal' || mode === 'init-failed'}
-  <p>{modeValue}</p>
-  {/if}
-
-  {#if mode === 'spin-failed'}
-  <p>{$_('wof.SpinFailed')}</p>
+  <p>{$_(`wof.${modeValue}`)}</p>
   {/if}
 
   {#if mode === 'show-next'}
@@ -105,7 +100,7 @@
     {#if modeValue.prizeText}
       {modeValue.prizeText}
     {:else}
-      {@html $_('wof.Congratulation', {values: { prize }})}
+      {@html $_('wof.Congratulation', {values: { prize: modeValue.prize }})}
     {/if}
   <p>
 

package/src/translations.js

@@ -10,7 +10,8 @@ export const translations = {
       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!`,
+      SpinFailed: `We are sorry that you don't have any Wheels available, please <strong>check T&C</strong> here to get a chance!`,
+      DrawFailed: 'There was a problem to grant the reward. Please contact support',
       Congratulation: `Congratulations! You won a {prize}!`,
       OK: `OK`,
       Rewards: `Rewards`,
@@ -49,4 +50,4 @@ export const translations = {
       
     }
   }
-};
+};

package/src/types.business.ts

@@ -1,4 +1,8 @@
-import type { LotteryProgramILotteryProgramForPlayer } from "./api";
+import type { 
+  LotteryProgramDraw,
+  LotteryProgramILotteryProgramForPlayer, 
+  LotteryProgramIQueryLotteryProgramForPlayerResult 
+} from "./api";
 
 
 export type LotteryProgramForPlayer = LotteryProgramILotteryProgramForPlayer
@@ -7,4 +11,10 @@ export enum CurrentInfo {
   ActiveTickets   = 'ActiveTickets',
   ImplicitTickets = 'ImplicitTickets',
   RemainingTimes  = 'RemainingTimes',
+}
+
+export type ApiLotteriesResult = LotteryProgramIQueryLotteryProgramForPlayerResult
+
+export interface ApiDrawResult {
+  item?: LotteryProgramDraw;
 }

package/src/types.ts

@@ -40,6 +40,7 @@ export interface ApiConfigs {
   [Api.draw]: {
     session?: string
     id: string
+    guid: string
   },
   
 }

package/src/css.state.ts

@@ -1,13 +0,0 @@
-
-export const getStatePropsForSpin = (deg: number, rotation: number, duration: number) => {
-  return {
-    before: {
-      style: `transition-timing-function: ease-in-out; transition-duration: ${duration}s;`,
-      transform: `rotate(${deg + 360 * rotation})`,
-    },
-    after: {
-      style: '',
-      transform: `rotate(${deg})`,
-    }
-  }
-}