@everymatrix/lottery-program-wof 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c051cd4a69abbebb6c006b4f794bc831e92cd08"
+  "gitHead": "5ba32db088ec6ebf8eb6110b6172d8c9409b9f70"
 }

package/src/LotteryProgramWof.svelte

@@ -5,8 +5,10 @@
   import './private.tabs.svelte'
   import './private.outcomes.svelte'
   import './private.item.svelte'
+  import './private.loader.svelte'
 
   import { onMount } from 'svelte';
+  import { _, setLocale, setLocaleWhenInit } from './i18n';
 
   // types
   import { Lang } from './types';
@@ -22,8 +24,6 @@
   export let endpoint: string = ''
   export let session: string = ''
 
-  export let theme: string = '0'
-
   export let spinduration: string = '3'
   export let spinrotation: string = '3'
 
@@ -34,6 +34,8 @@
     return () => isMounted = false
   })
 
+  setLocaleWhenInit()
+
   let lotteryProgramsForPlayer: LotteryProgramForPlayer[] = []
   let lotteryProgram: LotteryProgram;
   let loading: boolean = true;
@@ -52,18 +54,24 @@
     _postMessage({type: 'wof-private-message-lotteryProgramsForPlayer', lotteryProgramsForPlayer })
   }
 
+  const setLangReactive = () => {
+    setLocale(lang)
+    init()
+  }
+
   $: session && init()
   $: endpoint && init()
+  $: lang && setLangReactive()
 
 </script>
 
 <div {...classWithPart("Root")}>
 
-  <lottery-program-wof-private-tabs>
+  <lottery-program-wof-private-tabs {lang}>
     <div slot="tab-Program">
       <div {...classWithPart('CommonContainer')}>
         {#if loading}
-          <div>Loading...</div>
+          <wof-loader />
         {:else}
           {#if lotteryProgramsForPlayer.length}
             {#each lotteryProgramsForPlayer as _l}
@@ -71,13 +79,12 @@
                 lang,
                 endpoint,
                 session,
-                theme,
                 lotteryprogramforplayer: JSON.stringify(_l)
               }} />
             {/each}
           {:else}
             <div {...classWithPart("NoContent")}>
-              <p>You are not allowed to any lottery program.</p>
+              <p>{$_('wof.NoContent')}</p>
             </div>
           {/if}
         {/if}

package/src/business.dom.ts

@@ -1,121 +1,3 @@
-import { createSVGElement } from "./calc";
-import { getPropsForPartitionInfo } from "./calc.point";
-import { setProps } from "./util";
-
-export const getSvgImageProps = (ratio, index, radius, center, length, pointermode, arrowmode) => {
-  const sizeImage = radius / 8 // this.sizeImage
-
-  const width = sizeImage
-  const height = sizeImage
-
-  const offset = {
-    center: -1 * sizeImage / 2,
-    transform: {
-      x: sizeImage / 2,
-      y: sizeImage / 2,
-    },
-    position: {
-      x: 0,
-      y: 0,
-    }
-  }
-  return {
-    ...getPropsForPartitionInfo(ratio, radius, center, index, length, pointermode, arrowmode, offset),
-    width,
-    height,
-  }
-}
-
-export const getSvgTextProps = (ratio, index, radius, center, length, pointermode, arrowmode) => {
-
-  const offset = {
-    center: 0,
-    position: {
-      x: 0, //option.name.length * 4,
-      y: 0
-    },
-    
-    transform: {
-      x: 0,
-      y: 0,
-    }
-  }
-
-  return {
-    ...getPropsForPartitionInfo(ratio, radius, center, index, length, pointermode, arrowmode, offset),
-  }
-}
-
-export const renderPartitionInfo = (ratio, svg, options, radius, center, pointermode, arrowmode) => {
-  const container = svg.querySelector("g#Images")
-  container.innerHTML = null
-  
-  options.map((option, index) => {
-    
-    let partitionAppearence: SVGElement
-
-    if(option.image){      
-
-      const image = option.image as SVGImageElement
-        
-      const sizeImage = radius / 8 // this.sizeImage
-
-      const width = sizeImage
-      const height = sizeImage
-
-      const offset = {
-        center: -1 * sizeImage / 2,
-        transform: {
-          x: sizeImage / 2,
-          y: sizeImage / 2,
-        },
-        position: {
-          x: 0,
-          y: 0,
-        }
-      }
-
-      setProps(image, {
-        ...getPropsForPartitionInfo(ratio, radius, center, index, options.length, pointermode, arrowmode, offset),
-        width,
-        height,
-      })
-
-      partitionAppearence = image
-
-    }else if(option.name){
-
-      const text = createSVGElement("text")
-
-      const offset = {
-        center: 0,
-        position: {
-          x: option.name.length * 4,
-          y: 0
-        },
-        
-        transform: {
-          x: 0,
-          y: 0,
-        }
-      }
-
-      setProps(text, {
-        ...getPropsForPartitionInfo(ratio, radius, center, index, options.length, pointermode, arrowmode, offset),
-
-      })
-
-      text.innerHTML = option.name
-      
-      partitionAppearence = text
-      
-    }else{
-      throw new Error('please set name for partition')
-    }
-
-    container.appendChild(partitionAppearence)
-  })
-}
 
 export const getPropsOfBackgroundCircle = (radius, rRingOuter, rRingInner) => ({
   cx: radius,

package/src/business.ts

@@ -1,6 +1,5 @@
 import type { WheelOfFortunePartition } from './api';
-import { getExceptionData } from './business.fake';
-import { findDeg, randomInSection } from './calc';
+import { findDeg } from './calc';
 import { getStatePropsForSpin } from './css.state';
 import fakeDraw from './fakeDraw';
 import fakeResult from './fakeResult';
@@ -8,6 +7,16 @@ import { _postMessage } from './message';
 import { Api, ApiConfigs, Lang, PointerMode } from './types';
 import type { LotteryProgramForPlayer } from './types.business';
 import { delay, fetcher, imageLoaderSvg, setProps } 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 interface Option {
   image: SVGElement | string,
@@ -92,7 +101,7 @@ export const getOptionsFromPartitions = (partitions: WheelOfFortunePartition[],
 		const partitionLang = {}
 		Object.keys(_partition).map((_key) => {
 			if(['name', 'image1', 'image2', 'image3'].includes(_key)){
-				partitionLang[_key] = _partition[_key][lang === 'en' ? '*' : lang] || ''
+				partitionLang[_key] = _partition[_key][lang] || _partition[_key]['*']
 			}
 		})
 
@@ -107,7 +116,7 @@ export const getOptionsFromPartitions = (partitions: WheelOfFortunePartition[],
   partitions.map(partition => probabilityAll += Number(partition.probability))
   if(probabilityAll < 1){
     options.push({
-      image: '',
+      image: Thankyou1Svg,
       name: 'Thank you'
     })
   }
@@ -171,7 +180,7 @@ export const api = {
       return lotteryProgramForPlayers
     },
   draw: 
-    async (endpoint: string, session: string, id: string, guid, options: Option[], pointermode: PointerMode) => {
+    async (endpoint: string, session: string, id: string, guid, options: Option[]) => {
 
       let data = await fetcherApi(Api.draw, endpoint, { id, session, guid })
       
@@ -183,7 +192,7 @@ export const api = {
       
       if(!index){
         index = options.length - 1
-        message = `OOPs! You are close to a prize!`
+        message = _('wof.Loss')
       }else{
         message = {
           mode: 'gift',
@@ -203,23 +212,24 @@ export const api = {
     },
 }
 
-export const getMessageByCurrent = (current) => {
+// export const getMessageByCurrent = (current) => {
 
-	const { maxImplicitTickets, usedImplicitTickets, activeTickets } = current
+// 	const { maxImplicitTickets, usedImplicitTickets, activeTickets } = current
 
-	const conditionImplicitTickets = usedImplicitTickets < maxImplicitTickets
-  const conditionActiveTickets = activeTickets > 0
+// 	const conditionImplicitTickets = usedImplicitTickets < maxImplicitTickets
+//   const conditionActiveTickets = activeTickets > 0
 
-  if(conditionImplicitTickets){
-    return `You have ${maxImplicitTickets - usedImplicitTickets}/${maxImplicitTickets} Implicit Tickets`
-  }
+//   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`
-  }
+//   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.`
-}
+//   return `You not have any more tickets, please check T&C to get a chance.`
+// }
 
 export const checkIfNowIsBetween = (current) => {
 	

package/src/calc.point.ts

@@ -115,56 +115,6 @@ export const getTrianglePoints =
     return pointsValue
   }
 
-  export const getPartitionProps = 
-  (
-    index: number,
-    number: number,
-    rRingInner: number,
-    r: number,
-  ) => {
-
-    const rPoint = getSymmetricalPointFromScalar(r)
-    const rRingInnerPoint = getSymmetricalPointFromScalar(rRingInner)
-
-    const { point, pointNext } = getPointWithNext(index, number, rRingInner, r)
-
-    const ds = [
-      `M`, 
-        ...mapObjectValueToTuple(rPoint),
-      `L`, 
-        ...mapObjectValueToTuple(point),
-      `A`, 
-        ...mapObjectValueToTuple(rRingInnerPoint),
-        `0 0 1`,
-        ...mapObjectValueToTuple(pointNext),
-      `Z`,
-    ]
-
-    return {
-      d: ds.join(' ')
-    }
-  }
-
-export const getRingImageProps = (index, length, rRingOuter, rRingInner, center, ratio) => {
-  
-  const aver = (rRingOuter + rRingInner) / 2
-  const diff = (rRingOuter - rRingInner) / 2 + 4 * ratio
-
-  const { point } = getPointWithNext(index, length, aver, center)
-
-  const radius = diff * 2
-
-  return {
-    x: point.x - diff,
-    y: point.y - diff,
-    width: radius,
-    height: radius,
-    // style: `stroke-width: ${radius * ratioGoldenMean(6)}px`,
-    class: "RingImage",
-    part: "RingImage",
-  }
-}
-
 export const getImagePartitionProps = (index, length, radius) => {
 
   const multiple = 1.5
@@ -196,27 +146,6 @@ export const getImagePartitionProps = (index, length, radius) => {
   }
 }
 
-export const getImageProps = (length, radius, center) => {
-
-  const multiple = 1
-
-  const size = {
-    width:  multiple * 2 * radius * Math.sin(2 * Math.PI / length /2),
-    height: multiple * radius,
-  }
-
-  return {
-    x: center,
-    y: center,
-    ...size,
-    style: `transform: translate(${[
-      size.width / 2,
-      size.height
-      // * (1 - 168/197)
-    ].map(s => `${s * -1}px`).join(',')})`,
-  }
-}
-
 export const getRingCircleProps = (index, length, rRingOuter, rRingInner, r) => {
   
   const aver = (rRingOuter + rRingInner) / 2
@@ -236,80 +165,14 @@ export const getRingCircleProps = (index, length, rRingOuter, rRingInner, r) =>
   }
 }
 
-const angleTransform = (pointermode, arrowmode) => {
-  switch(pointermode){
-    case PointerMode.Arrow:
-      switch(arrowmode){
-        case ArrowMode.DownFromTop:
-        case ArrowMode.UpFromCenter:
-          return - Math.PI / 2
-
-        case ArrowMode.DownFromCenter:
-        case ArrowMode.UpFromBottom: 
-          return Math.PI / 2
-      }
 
-    case PointerMode.Partition:
-      return - Math.PI / 2
-  }
-}
-
-enum RotateDirection {
-  clockwise = 1,
-  anticlockwise = -1,
-}
-
-const pointMinus = (point1: Point, point2: Point): Point => ({
+export const pointMinus = (point1: Point, point2: Point): Point => ({
   x: point1.x - point2.x,
   y: point1.y - point2.y
 })
 
-const pointPlus = (point1: Point, point2: Point): Point => ({
+export const pointPlus = (point1: Point, point2: Point): Point => ({
   x: point1.x + point2.x,
   y: point1.y + point2.y
 })
 
-const getPropsCommonTransform = (ratio: number, index: number, length: number, point: Point, offset: Point, direction: RotateDirection) => {
-  
-  const angleSelf = 360 * index / length * direction -90
-  
-  const transformOrigin: Point = pointPlus(point, offset)
-
-  return {
-    style: [
-      `font-size: ${13 * ratio}px`,
-      `transform: rotate(${angleSelf}deg)`,
-      `transform-origin: ${transformOrigin.x}px ${transformOrigin.y}px`,
-    ].join(';')
-  }
-}
- 
-export const getPropsForPartitionInfo = (
-  ratio: number,
-  radius: number,
-  center: number, 
-  index: number, 
-  length: number, 
-  pointermode: PointerMode, 
-  arrowmode: ArrowMode, 
-  offset: any
-) => {
-  
-  const direction = RotateDirection.clockwise
-  
-  const angle = 
-    angleTransform(pointermode, arrowmode) +
-    direction * index * 2 * Math.PI / length
-
-  const point = getPointOnCircle(radius - 9 * ratio, angle, center + offset.center)
-
-  return {
-    ...pointMinus(point, offset.position),
-    ...(pointermode === PointerMode.Arrow || true ? 
-      getPropsCommonTransform(ratio, index, length, point, offset.transform, direction) 
-      : 
-      {}
-    )
-  }
-}
-

package/src/class.process.ts

@@ -0,0 +1,64 @@
+import { api } from "./business"
+import { _postMessage } from "./message"
+import { setMessage as setMessageBase } from './business';
+
+
+export class Process {
+
+  id
+  halter
+  afterSuccess
+  afterSetMessage
+  fetcher
+
+  constructor(params){
+    this.id = params.id
+    this.afterSetMessage = params.afterSetMessage
+    this.halter = params.halter
+    this.afterSuccess = params.afterSuccess
+    this.fetcher = params.fetcher
+  }
+
+  handleHaltProcess(index, message, fn = () => {}){
+      _postMessage({ id: this.id, type: 'wof-private-message-spin-before' })
+
+    const cb = () => {
+      setTimeout(() => {
+        _postMessage({ id: this.id, type: 'wof-private-message-spin-after' })
+        fn()
+        this.setMessage(message)
+      }, 1000)
+    }
+
+    // spinner.halt(calc.getDeg(index), cb)
+    this.halter(index, cb)
+  }
+  
+  async drawer (guid, frequency: number = 0){
+
+    let index
+
+    try {
+      const { data, message, index: _index } = await this.fetcher(guid)
+      index = _index
+      
+      if(!data.success)                 throw new Error()
+      if(data.item.state === "drawn")   throw new Error()
+
+      this.handleHaltProcess(index, message, this.afterSuccess)
+      
+    } catch (e) {
+      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)
+      }
+    }
+  }
+
+  setMessage(entry: string | object) {
+    setMessageBase(this.id, entry)
+    this.afterSetMessage()
+  }
+}

package/src/class.spinner.ts

@@ -3,9 +3,9 @@ import { easing, easingGrad, params, SpinStep, Easing, easingGradX } from "./cla
 export class Spinner {
 
   deg: number = 0
+  fps: number;
   // spinable: boolean = true
   degTarget: number = undefined
-  container: HTMLElement = undefined
   step: SpinStep = undefined
   tick
   cb
@@ -14,6 +14,10 @@ export class Spinner {
 
   param = params[2]
 
+  constructor(inits){
+    this.tick = inits.tick
+  }
+
   public launch(){
     this.shouldHalt = undefined
     this.step = SpinStep.launch
@@ -32,22 +36,24 @@ export class Spinner {
     }
   }
 
-  private continueRepeat = () => requestAnimationFrame(this.ticker)
+  private continueRepeat = () => setTimeout(() => this.ticker(), 30)
   private ticker = () => {
     
     const linkSpeed = this.param.loopSpeed
 
     const easingDuration = (deg: number) => 
-      30 * easingGrad[this.easingType] * deg / this.param.loopSpeed
+      33 * easingGrad[this.easingType] * deg / this.param.loopSpeed
 
     const animations = {
       launch: () => {
-        const t = easingDuration(360 * this.param.launchTurns - this.deg)
-        this.animate(t, this.deg, 360 * this.param.launchTurns - this.deg, easing.in[this.easingType], easingGradX.in[this.easingType])
+        const degTar = 360 * this.param.launchTurns - this.deg
+        const t = easingDuration(degTar)
+        
+        this.animateF(t, this.deg, degTar, easing.in[this.easingType], easingGradX.in[this.easingType])
       },
       halt: () => {
         const t = easingDuration(this.degTarget)
-        this.animate(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType])
+        this.animateF(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType])
       },
       loop: () => {
         this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType])
@@ -115,6 +121,32 @@ export class Spinner {
     this.tick(deg, speed)
   }
 
+  animateF = (duration: number, startAngle, target: number, easing, _easingGrad) => {
+    let start = null
+
+    const step = () => {
+      let timestamp = new Date().getTime()
+      if(!start){
+        start = timestamp
+      }
+      const progress = timestamp - start
+      
+      const translation = target * easing(progress / duration) + startAngle;
+      const speedCur = Math.abs(_easingGrad(progress / duration))
+      //const speedRealCur = target / duration * Math.abs(_easingGrad(progress / duration)) * 33
+      //console.log(this.param.loopSpeed, speedRealCur);
+      
+      this.setDeg(translation, speedCur)
+
+      if (progress < duration) {
+        setTimeout(() => step(), 30)
+      }else{
+        this.cb()
+      }
+    }
+    step()
+  }
+
   animate = (duration: number, startAngle, target: number, easing, _easingGrad) => {
 
     let animationId = null;

package/src/class.spinner.util.ts

@@ -85,7 +85,7 @@ export const params = [
   {
     launchTurns: 6,
     launchSpeed: 1.38,
-    loopSpeed: 60,
+    loopSpeed: 45,
     haltTurns: 6,
     haltSpeed: 0.50,
   },