@everymatrix/lottery-program-wof 1.13.9 → 1.13.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.13.9",
+  "version": "1.13.10",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -9,14 +9,17 @@
     "build:watch": "cross-env NODE_ENV=\"production\" && rollup -c -w",
     "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
     "validate": "svelte-check",
-    "test": "echo"
+    "test": "jest"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.22.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
     "@tsconfig/svelte": "^1.0.0",
+    "@types/jest": "^29.5.2",
+    "jest": "^29.5.0",
     "rollup": "^2.3.4",
     "rollup-plugin-dev-server": "^0.4.3",
     "rollup-plugin-livereload": "^2.0.0",
@@ -36,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92bb59e79a581b4130638d57db5ee581120ac2ba"
+  "gitHead": "69efa1a2cb1937db6469dfd017c41c5334952c84"
 }

package/src/LotteryProgramWof.svelte

@@ -12,20 +12,36 @@
 
   // types
   import { Lang } from './types';
-  import type { LotteryProgram } from './api';
   import { api } from './business';
 
   import { _postMessage } from './message';
-  import type { LotteryProgramForPlayer } from './types.business';
-  import { classWithPart } from './util';
+  import { CurrentInfo, LotteryProgramForPlayer } from './types.business';
+  import { setClientStyling, setClientStylingURL, setTranslationUrl } from './widget';
 
   // properties
   export let lang: Lang = Lang.en
   export let endpoint: string = ''
   export let session: string = ''
-
-  export let spinduration: string = '3'
-  export let spinrotation: string = '3'
+  export let clientstyling: string = ''
+  export let clientstylingurl: string = ''
+  export let translationurl: string = ''
+  export let loginevent: string = ''
+  export let loginurl: string = ''
+  export let currentinfo: CurrentInfo = CurrentInfo.RemainingTimes
+  export let giftimagesrc: string = ''
+  export let isshowhistory: string = 'true'
+  
+  let rootContainer: HTMLElement
+  $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
+  $: clientstylingurl && rootContainer && setClientStylingURL(clientstylingurl, (_clientstyling) => clientstyling = _clientstyling);
+  $: translationurl && setTranslationUrl(translationurl);
+
+  $: commonProps = {
+    endpoint,
+    lang,
+    session,
+    clientstyling,
+  }
 
   let isMounted = false
   $: isMounted && init()
@@ -36,11 +52,17 @@
 
   setLocaleWhenInit()
 
-  let lotteryProgramsForPlayer: LotteryProgramForPlayer[] = []
-  let lotteryProgram: LotteryProgram;
+  let bonuses: LotteryProgramForPlayer[] = []
   let loading: boolean = true;
 
+  $: hasSession = session && session !== 'false'
+
   const init = async () => {
+    loading = true
+    if(!hasSession) {
+      loginAction(loginevent, loginurl)
+      return;
+    }
     
     if(!isMounted || !lang || !session || !endpoint) return;
     
@@ -50,8 +72,18 @@
   }
 
   const fetcher = async () => {
-    lotteryProgramsForPlayer = await api.lotteries(endpoint, session)
-    _postMessage({type: 'wof-private-message-lotteryProgramsForPlayer', lotteryProgramsForPlayer })
+    bonuses = await api.lotteries(endpoint, session)
+    _postMessage({type: 'wof-private-bonuses', bonuses })
+  }
+
+  const loginAction = (loginevent, loginurl) => {
+    if (loginevent) {
+      window.postMessage({ type: loginevent, transition: 'Login' }, window.location.href);
+    }
+    
+    if (loginurl) {
+      window.location = loginurl;
+    }
   }
 
   const setLangReactive = () => {
@@ -65,25 +97,24 @@
 
 </script>
 
-<div {...classWithPart("Root")}>
-
-  <lottery-program-wof-private-tabs {lang}>
+<div class="WofContainer" bind:this={rootContainer}>
+  <lottery-program-wof-private-tabs {...commonProps} {isshowhistory}>
     <div slot="tab-Program">
-      <div {...classWithPart('CommonContainer')}>
+      <div class="CommonContainer">
         {#if loading}
           <wof-loader />
         {:else}
-          {#if lotteryProgramsForPlayer.length}
-            {#each lotteryProgramsForPlayer as _l}
-              <lottery-program-wof-private-item {...{ 
-                lang,
-                endpoint,
-                session,
-                lotteryprogramforplayer: JSON.stringify(_l)
+          {#if bonuses.length}
+            {#each bonuses as _l}
+              <lottery-program-wof-private-item {...{
+                ...commonProps,
+                id: _l.program.id,
+                currentinfo,
+                giftimagesrc,
               }} />
             {/each}
           {:else}
-            <div {...classWithPart("NoContent")}>
+            <div class="NoContent">
               <p>{$_('wof.NoContent')}</p>
             </div>
           {/if}
@@ -91,12 +122,7 @@
       </div>
     </div>
     <div slot="tab-History">
-      <lottery-program-wof-private-outcomes
-        {...{ 
-          endpoint, session,
-          partitions: lotteryProgram?.wheelOfFortune.partitions ? JSON.stringify(lotteryProgram?.wheelOfFortune.partitions) : '[]',
-        }}
-      />
+      <lottery-program-wof-private-outcomes {...commonProps} />
     </div>
   </lottery-program-wof-private-tabs>
 </div>
@@ -122,7 +148,7 @@
     box-sizing: border-box;
   }
 
-  .Root {
+  .WofContainer {
     display: flex;
     align-items: center;
     flex-direction: column;

package/src/business.dom.test.ts

@@ -0,0 +1,34 @@
+import { getColorSchema } from "./business.dom"
+import { partitions3, partitions2, partitions1 } from "./themes.partitions"
+
+const partitionsList = {
+  partitions1,
+  partitions2,
+  partitions3,
+}
+
+const maxLength = 12
+
+const tester = (iLength, partitions) => {
+
+  const color = (i) => getColorSchema(i, iLength, partitions.colorSchema)[0].color
+  
+  const colors = []
+
+  for(let i = 0; i < iLength; i++){
+    colors.push(color(i))
+  }
+
+  expect(colors[0]).not.toEqual((colors[iLength - 1]))
+}
+
+describe("check if first color is not equal last color", () => {
+  Object.keys(partitionsList).map(key => {
+    const partitions = partitionsList[key]
+    describe("for " + key, () => {
+      for(let length = 2; length < maxLength; length ++){
+        test('length ' + length, () => tester(length, partitions))
+      }
+    })
+  })
+})

package/src/business.dom.ts

@@ -6,7 +6,16 @@ export const getPropsOfBackgroundCircle = (radius, rRingOuter, rRingInner) => ({
   'stroke-width': `${(rRingOuter - rRingInner) * 2}px`
 })
 
-
+// color schema length must be greater than 2
 export const getColorSchema = (index, length, colorSchema) => {
-  return colorSchema[index % Math.ceil(length / 2)]
+  if(
+    length > colorSchema.length &&
+    length % colorSchema.length === 1 &&
+    index === length - 1
+  ){
+    return colorSchema[1 % colorSchema.length]
+  }
+
+  return colorSchema[index % colorSchema.length]
+  
 }

package/src/business.ts

@@ -1,11 +1,10 @@
 import type { WheelOfFortunePartition } from './api';
 import { findDeg } from './calc';
 import { getStatePropsForSpin } from './css.state';
-import fakeDraw from './fakeDraw';
-import fakeResult from './fakeResult';
 import { _postMessage } from './message';
 import { Api, ApiConfigs, Lang, PointerMode } from './types';
 import type { LotteryProgramForPlayer } from './types.business';
+import { CurrentInfo } from './types.business';
 import { delay, fetcher, imageLoaderSvg, setProps } from './util';
 import { _ } from './i18n';
 
@@ -23,19 +22,8 @@ export interface Option {
   name: string
 }
 
-const isUsingFakeData: boolean = false
-
 const fetcherApi = async <T extends Api>(api: T, endpoint: string, config: ApiConfigs[T]) => {
 
-
-  if(isUsingFakeData){
-    switch (api) {
-      case Api.lotteries: return fakeResult
-      case Api.draw:      return fakeDraw
-    }
-  }
-
-
   const { session } = config
 
   const options = {
@@ -136,7 +124,9 @@ export const setMessage = (id: string, entry: string | object) => {
   }
 }
 
-export const getOptions = async (partitions: WheelOfFortunePartition[], lang: Lang) => {
+export const getOptions = async (bonus: LotteryProgramForPlayer, lang: Lang) => {
+
+  const { partitions } = bonus.program.wheelOfFortune
 
   const preloadImage = async (src: string) => {
     if(!src) return {}
@@ -157,16 +147,27 @@ export const getOptions = async (partitions: WheelOfFortunePartition[], lang: La
 }
 
 export const getCurrentInfo = (
-  lotteryProgramForPlayer: LotteryProgramForPlayer, key: 'active'|'implicit'
+  lotteryProgramForPlayer: LotteryProgramForPlayer, 
+  key: CurrentInfo
 ) => {
 
   const { current } = lotteryProgramForPlayer
 
-  return {
-    active: current.activeTickets,
-    implicit: `${current.maxImplicitTickets - current.usedImplicitTickets}/${current.maxImplicitTickets}`,
-    remainingTimes: current.remainingTimes,
-  }[key]
+  switch (key) {
+    case CurrentInfo.ActiveTickets:
+      return current.activeTickets
+
+    case CurrentInfo.ImplicitTickets:
+      const { 
+        maxImplicitTickets: max, 
+        usedImplicitTickets: used,
+      } = current
+
+      return `${max - used}/${max}`
+
+    case CurrentInfo.RemainingTimes:
+      return current.remainingTimes
+  }
 }
 
 export const api = {
@@ -246,8 +247,8 @@ export const checkIfNowIsBetween = (current) => {
 
 export const getSpinContainerSelector = (pointerMode: PointerMode) => {
   switch(pointerMode){
-    case PointerMode.Arrow: return 'g.Partitions'
-    case PointerMode.Partition: return 'g.Pointer'
+    case PointerMode.Arrow: return 'g.PartitionsContainer'
+    case PointerMode.Partition: return 'g.PointerContainer'
   }
 }
 

package/src/class.spinable.ts

@@ -20,8 +20,6 @@ export abstract class Spinnable {
     if(!this.spinable) return;
 
     this.spinable = false
-    console.log('x', this.arcStart);
-    console.log('x', this.spinAngleStart);
     this.spinTimeTotal = 1000
     this.spinTime = 0;
     this.spinTick(fn)
@@ -44,11 +42,9 @@ export abstract class Spinnable {
         this.spinAngleStart, 
         this.spinTimeTotal
       );
-    console.log('ease', spinAngle);
     
 
     this.arcStart += convertDegToArc(spinAngle);
-    console.log('arcStart', this.arcStart);
     
     this.tick()
     this.spinTimeout = setTimeout(this.spinTick.bind(this, fn), 10);
@@ -56,7 +52,6 @@ export abstract class Spinnable {
 
   private stop (fn){
     clearTimeout(this.spinTimeout);
-    console.log(this.arcStart);
     
     this.afterStop()
     this.spinable = true

package/src/class.spinner.ts

@@ -134,7 +134,6 @@ export class Spinner {
       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)
 

package/src/private.item.svelte

@@ -6,136 +6,113 @@
   import './private.outcomes.svelte'
   import './private.item.svg.svelte'
 
-  import { onMount } from 'svelte';
-
   // types
   import { Lang } from './types';
-  import { getCurrentInfo, Option, setMessage } from './business';
+  import { getCurrentInfo } from './business';
   import { api } from './business';
   import { onMountMessageLifeCycle, _postMessage } from './message';
-  import type { LotteryProgramForPlayer } from './types.business';
-  import { classWithPart } from './util';
+  import { CurrentInfo, LotteryProgramForPlayer } from './types.business';
   import { _ } from './i18n';
+  import { setClientStyling } from './widget';
 
-  // properties
+  // properties common
   export let lang: Lang = Lang.en
   export let endpoint: string = ''
   export let session: string = ''
+  export let clientstyling:string = ''
+  export let currentinfo: string = CurrentInfo.RemainingTimes
+  export let giftimagesrc: string = ''
+  
+  // properties
+  export let id: string = ''
 
-  export let lotteryprogramforplayer: string = undefined
-
-  export let spinduration: string = '3'
-  export let spinrotation: string = '3'
+  let rootContainer: HTMLElement
+  $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
 
-  // binds
-  let main: HTMLElement;
+  $: commonProps = {
+    endpoint,
+    lang,
+    session,
+    clientstyling,
+  }
 
   // states
   let size: number = 0;
-  let mainWidth: number = 0;
 
-  let options: Option[] = [];
-  let lotteryProgramForPlayer: LotteryProgramForPlayer
-  let lotteryProgramForPlayerNew: LotteryProgramForPlayer
-  
-  $: lotteryProgramForPlayer = lotteryprogramforplayer && (JSON.parse(lotteryprogramforplayer)) as LotteryProgramForPlayer
-  $: id = lotteryProgramForPlayer?.program?.id
+  let bonus: LotteryProgramForPlayer
+  let bonusNew: LotteryProgramForPlayer
 
   // lifecycles
   const init = async () => {
-    await fetcher()
-      
-    mainWidth = main?.clientWidth
+    setTimeout(() => {
+      size = rootContainer?.clientWidth
+    }, 1)
   }
 
   const refetcher = async () => {
     const LotteryProgramsForPlayer = await api.lotteries(endpoint, session)
     return LotteryProgramsForPlayer.filter(l => l.program.id === id)[0]
   }
-
-  const fetcher = async () => {
-    try {
-      if(!lotteryProgramForPlayer) return;
-      render()
-    } catch (e) {
-      setMessage(id, e.message)
-    }
-  }
-
-  const render = () => {
-    if(!main) return;
-  }
-
-  onMount(() => {
-    window.addEventListener('resize', render)
-    return () => window.removeEventListener('resize', render)  
-  })
   
   onMountMessageLifeCycle({
+    'wof-private-bonuses': (data) => {
+      bonus = data.bonuses.find(l => l.program.id === id)
+    },
     'wof-private-message-spin-after': (data) => {
       if(data.id !== id) return;
-      lotteryProgramForPlayer = lotteryProgramForPlayerNew
+      bonus = bonusNew
     },
 
     'wof-private-message-spin-before': async (data) => {
       if(data.id !== id) return;
-      lotteryProgramForPlayerNew = await refetcher()
+      bonusNew = await refetcher()
     },
   })
 
   // reactives
-  $: lotteryProgramForPlayer && init()
-  //
-
-  $: size = mainWidth
-
-  // ratio
+  $: bonus && init()
   $: ratio = size / 375
   $: radius = 247 / 2 * ratio
   
 </script>
 
-{#if lotteryProgramForPlayer}
-
-  <div {...classWithPart("LotteryProgramWof")}>
-          
-    <div {...classWithPart("FortuneContainer")}>
-      <main bind:this={main} {...classWithPart("Main")}>
-        
-        {#if size}
-          <lottery-program-wof-private-item-svg {...{ 
-            id,
-            endpoint, session,
-            sizeraw: size,
-            lang,
-            optionsraw: JSON.stringify(options),
-            lotteryprogramforplayer: JSON.stringify(lotteryProgramForPlayer),
-          }} />
-        {/if}
-
-        <lottery-program-wof-private-message-panel {...{
-          id,
-          r: radius,
-        }} />
-          
-      </main>
-      
-      {#if lotteryProgramForPlayer.current}
-      <div {...classWithPart("Current")}>
-        <p>{$_('wof.ActiveTickets')}: {getCurrentInfo(lotteryProgramForPlayer, 'active')}</p>
-        <p>{$_('wof.ImplicitTickets')}: {getCurrentInfo(lotteryProgramForPlayer, 'implicit')}</p>
-        <p>{$_('wof.RemainingTimes')}: {getCurrentInfo(lotteryProgramForPlayer, 'remainingTimes')}</p>
-      </div>
-      {/if}
-
-    </div>
+<div class="LotteryItem" bind:this={rootContainer}>
+  <lottery-program-wof-private-item-svg {...{ 
+    ...commonProps,
+    id,
+    size,
+  }} />
+
+  <lottery-program-wof-private-message-panel {...{
+    ...commonProps,
+    id,
+    r: radius,
+    giftimagesrc,
+  }} />
+  
+  {#if bonus?.current}
+  <div class="Current">
+    {#each currentinfo ? currentinfo.split(',') : [CurrentInfo.RemainingTimes] as CurrentInfoKey}
+      <p class={CurrentInfoKey}>
+        {$_(`wof.${CurrentInfoKey}`)}: {getCurrentInfo(bonus, CurrentInfoKey)}
+      </p>
+    {/each}
   </div>
-{/if}
+  {/if}
+
+</div>
 
 <style lang="scss">
+  @mixin FortuneContainer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
 
   lottery-program-wof-private-message-panel {
     position: absolute;
+    top: 0;
   }
 
 
@@ -154,118 +131,17 @@
   $outlineColor: rgb(150, 54, 88);
   $outlineWidth: 2px;
 
-  .LotteryProgramWof {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  .LotteryItem {
+    @include FortuneContainer;
     padding: 20px 0;
-  }
 
-  main {
+    position: relative;
     max-width: 600px;
-    width: 100%;
-    display: flex;
     justify-content: space-around;
     min-height: 200px;
   }
 
-  .Main {
-    position: relative;
-  }
-
-  svg {
-    transition: opacity 0.3s;
-  }
-
-  .HighLightArea {
-    mix-blend-mode: color-dodge;
-  }
-
-  .HighLightAreaBackground {
-    mix-blend-mode: screen;
-    opacity: 0.41;
-  }
-
-  .HighLightAreaV1 {
-    background: radial-gradient(72.02% 62.64% at 50% 84.62%, rgba(255, 184, 47, 0.7) 0%, rgba(255, 184, 47, 0.384271) 30.52%, rgba(255, 184, 47, 0.165346) 52.4%, rgba(255, 184, 47, 0) 100%);
-    filter: blur(9px);
-  }
-  .HighLightAreaV2 {
-    background: radial-gradient(87.18% 75.82% at 50% 84.62%, rgba(255, 248, 186, 0.7) 0%, rgba(255, 248, 186, 0.384271) 29.48%, rgba(255, 248, 186, 0) 100%);
-    filter: blur(9px);
-  }
-
-  .FortuneContainer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .BackgroundCircle {
-    fill: #FFFFFF;
-    animation: color-animation 1s infinite linear alternate;
-  }
-
-  .RingCirclesGroup {
-    .RingCircle {
-      fill: #FFFFFF;
-      stroke: #FFFFFF;
-    }
-  }
-
-  .Center {
-    
-    transition: filter;
-    transition-duration: 1s;
-    
-    &.disabled {
-      filter: grayscale(80%);
-    }
-
-    .CenterCircle {
-      fill: #3CE4BB;
-      stroke: $outlineColor;
-      stroke-width: $outlineWidth;
-      cursor: pointer;
-
-      transition: fill;
-      transition-duration: 1s;
-
-    }
-
-    .CenterText {
-      cursor: pointer;
-      fill: #FFFFFF;
-    }
-  }
-
-  .PointerPartition {
-    opacity: 0.3;
-    fill: lightgoldenrodyellow;
-    stroke: red;
-    stroke-width: 6px;
-    stroke-dasharray: 12;
-  }
-
-  .PointerArrow {
-    fill: #064CA0;
-  }
-
   .Current {
     color: #FFFFFF;
   }
-
-  .PartitionText {
-    fill: #FFFFFF;
-    font-style: normal;
-    font-weight: 700;
-    text-anchor: end;
-    text-shadow: 0px 2px #000;
-  }
-
-  .PartitionShadow {
-    background-blend-mode: multiply;
-    mix-blend-mode: multiply;
-  }
 </style>