@everymatrix/lottery-program-wof 1.13.22 → 1.13.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.13.22",
+  "version": "1.13.24",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07a124adef4703b4a19619953a0221dbd6299859"
+  "gitHead": "cde0044a9c4c9152ef07e47cb9284338748f0078"
 }

package/src/LotteryProgramWof.svelte

@@ -11,7 +11,7 @@
   import { _, setLocale, setLocaleWhenInit } from './i18n';
 
   // types
-  import { Lang } from './types';
+  import { ContentDirection, Lang } from './types';
   import { api } from './business';
 
   import { _postMessage } from './message';
@@ -30,6 +30,7 @@
   export let currentinfo: CurrentInfo = CurrentInfo.RemainingTimes
   export let giftimagesrc: string = ''
   export let isshowhistory: string = 'true'
+  export let contentdirection: keyof typeof ContentDirection = 'anticlockwise'
   
   let rootContainer: HTMLElement
   $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
@@ -111,6 +112,7 @@
                 id: _l.program.id,
                 currentinfo,
                 giftimagesrc,
+                contentdirection,
               }} />
             {/each}
           {:else}

package/src/business.ts

@@ -84,6 +84,14 @@ 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 = {}
@@ -100,9 +108,7 @@ export const getOptionsFromPartitions = (partitions: WheelOfFortunePartition[],
 		return option
 	})
 
-  let probabilityAll = 0
-  partitions.map(partition => probabilityAll += Number(partition.probability))
-  if(probabilityAll < 1){
+  if(getSumProbability(partitions) < 1){
     options.push({
       image: Thankyou1Svg,
       name: 'Thank you'
@@ -193,11 +199,20 @@ export const api = {
       
       if(!index){
         index = options.length - 1
-        message = _('wof.Loss')
+        message = {
+          mode: 'nogift',
+          modeValue: {
+            image: options[index].image?.href?.baseVal
+          }
+        }
       }else{
         message = {
           mode: 'gift',
-          modeValue: options[index].name,
+          modeValue: {
+            index,
+            name: options[index].name,
+            image: options[index].image?.href?.baseVal
+          },
         }
       }
     

package/src/class.svgcalc.ts

@@ -5,7 +5,7 @@ import { renderSvgImageProps, themedImageProps } from "./themes.image.base"
 import { themedCenterImagesUpdater } from "./themes.image.center"
 import { themedPointerImagesUpdater } from "./themes.image.pointer"
 import { partitionStrokeSteps } from "./themes.partitions"
-import { ArrowMode, Point, PointerMode } from "./types"
+import { ArrowMode, Point, PointerMode, ContentDirection } from "./types"
 import { mapObjectValueToTuple } from "./util"
 
 // @ts-ignore
@@ -34,17 +34,22 @@ export class SvgCalc {
   rRingOuter
   theme
   themeIndex
+  options
+  contentdirection: keyof typeof ContentDirection
 
   constructor({
     size,
-    length,
+    options,
     themeIndex,
+    contentdirection,
   }){
+    this.contentdirection = contentdirection || 'anticlockwise'
     // size
     this.center = size / 2
     this.ratio = size / 375
     // options
-    this.length = length
+    this.options = options
+    this.length = options.length
     // theme
     this.themeIndex = themeIndex
     this.theme = themes[themeIndex]
@@ -66,17 +71,37 @@ export class SvgCalc {
     }
   }
 
+  getSizeImageByPartition(index) {
+    if(this.options[index].name){
+      return this.sizeImage / 2
+    }else{
+      return this.sizeImage
+    }
+  }
+
   getSvgImageProps (index){
+    const sizeImage = this.getSizeImageByPartition(index)
+
+    let baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio
     return {
-      ...this.getPropsForPartitionInfo(index, this.offsetImage, this.radius - this.sizeImage / 2 - 12 * this.ratio),
-      width: this.sizeImage,
-      height: this.sizeImage,
+      ...this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius),
+      width: sizeImage,
+      height: sizeImage,
     }
   }
 
   getSvgTextProps(index) {
+    const sizeImage = this.getSizeImageByPartition(index)
+
+    let baseRadius
+    if(this.options[index].image){
+      baseRadius = this.radius - sizeImage - 6 * this.ratio
+    }else{
+      baseRadius = this.radius - 6 * this.ratio
+    }
+
     return {
-      ...this.getPropsForPartitionInfo(index, this.offsetText),
+      ...this.getPropsForPartitionInfo(index, this.offsetText, baseRadius),
     }
   }
 
@@ -95,18 +120,18 @@ export class SvgCalc {
     }
   }
 
-  get offsetImage () {
+  getOffsetImage (sizeImage) {
     
     return {
       center: 0,
+      position: {
+        x: -1 * sizeImage / 2,
+        y: -1 * sizeImage / 2,
+      },
       transform: {
         x: 0,
         y: 0,
       },
-      position: {
-        x: this.sizeImage / 2,
-        y: this.sizeImage / 2,
-      }
     }
   }
 
@@ -114,28 +139,43 @@ export class SvgCalc {
     return RotateDirection.clockwise
   }
 
-  getPropsForPartitionInfo (
-    index: number, 
-    offset: any,
-    baseRadius?: number
-  ) {
+  getAngleSelf (index) {
+    return 360 * index / this.length * this.direction + 90 * ContentDirection[this.contentdirection]
+  }
+
+  getPartitionPositions (index, baseRadius, offset) {
     
     const angle = 
       this.angleTransform(this.arrowmode) +
       this.direction * index * 2 * Math.PI / this.length
 
     const point = getPointOnCircle(baseRadius || this.radius - 9 * this.ratio, angle, this.center + offset.center)
-
-    const angleSelf = 360 * index / this.length * this.direction -90
     
     const transformOrigin: Point = pointPlus(point, offset.transform)
+    const pointResult = pointPlus(point, offset.position)
+    return {
+      transformOrigin,
+      point: pointResult,
+    }
+  }
+
+  getPropsForPartitionInfo (
+    index: number, 
+    offset: any,
+    baseRadius?: number
+  ) {
+    
+    const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset)
+    const getTransformOriginString = 
+      (vector: Point) => 
+        Object.keys(vector).map(axis => `${vector[axis]}px`).join(' ')
     
     return {
-      ...pointMinus(point, offset.position),
+      ...point,
       style: [
         `font-size: ${13 * this.ratio}px`,
-        `transform: rotate(${angleSelf}deg)`,
-        `transform-origin: ${transformOrigin.x}px ${transformOrigin.y}px`,
+        `transform: rotate(${this.getAngleSelf(index)}deg)`,
+        `transform-origin: ${getTransformOriginString(transformOrigin)}`,
       ].join(';')
     }
   }
@@ -314,13 +354,21 @@ export class SvgCalc {
   }
 
   getShadowImage(){
-    const size = (this.rRingInner - 3.2 * this.ratio) * 2
+    const size = (this.rRingInner) * 2
     return renderSvgImageProps(this.center, backgroundShadowSvg, { 
       width: size, 
       height: size,
     })
   }
 
+  getShadowSize(){
+    return {
+      cx: this.center,
+      cy: this.center,
+      r: (this.rRingInner)
+    }
+  }
+
   getPartitionBackgroundProp(index) {
     return {
       ...this.getPartitionDraw(index),

package/src/images/backgroundShadow.svg

@@ -1,7 +1,7 @@
 <svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path 
-    style="mix-blend-mode:multiply" 
-    d="M125 250C191.718 250 250 193.271 250 125C250 55.7438 191.718 0 125 0C55.296 0 0 55.7438 0 125C0 193.271 55.296 250 125 250Z" fill="url(#paint0_radial_4318_321)"/>
+
+  <circle cx="125" cy="125" r="125" fill="url(#paint0_radial_4318_321)" style="mix-blend-mode:multiply" />
+  
   <defs>
   <radialGradient id="paint0_radial_4318_321" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(125 125) scale(125 125)">
   <!-- <stop offset="0.81" stop-color="white"/>

package/src/private.item.svelte

@@ -7,7 +7,7 @@
   import './private.item.svg.svelte'
 
   // types
-  import { Lang } from './types';
+  import { ContentDirection, Lang } from './types';
   import { getCurrentInfo } from './business';
   import { api } from './business';
   import { onMountMessageLifeCycle, _postMessage } from './message';
@@ -22,6 +22,7 @@
   export let clientstyling:string = ''
   export let currentinfo: string = CurrentInfo.RemainingTimes
   export let giftimagesrc: string = ''
+  export let contentdirection: keyof typeof ContentDirection = 'anticlockwise'
   
   // properties
   export let id: string = ''
@@ -81,6 +82,7 @@
     ...commonProps,
     id,
     size,
+    contentdirection,
   }} />
 
   <lottery-program-wof-private-message-panel {...{

package/src/private.item.svg.scss

@@ -122,5 +122,8 @@ svg {
 
 .PartitionTextEntity {
   width: 100%;
+}
+
+.PartitionTextEntity.Anticlockwise {
   text-align: end;
-}
+}

package/src/private.item.svg.svelte

@@ -3,12 +3,12 @@
 <script lang="ts">
 
   // types
-  import { PointerMode, Lang } from './types';
+  import { PointerMode, Lang, ContentDirection } from './types';
   import { getOptions, getSpinCondition, getSpinContainerSelector, Option } from './business';
   import { api } from './business';
   import { onMountMessageLifeCycle, _postMessage } from './message';
   import type { LotteryProgramForPlayer } from './types.business';
-  import { themes } from './themes';
+  import { shadowSteps, themes } from './themes';
   import { setProps } from './util';
   import { Spinner } from './class.spinner';
   import { SvgCalc } from './class.svgcalc';
@@ -21,6 +21,7 @@
   export let endpoint: string = ''
   export let session: string = ''
   export let clientstyling:string = ''
+  export let contentdirection: keyof typeof ContentDirection = 'anticlockwise'
   
   let rootContainer: HTMLElement
   $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
@@ -64,12 +65,34 @@
   $: theme = themes[themeIndex]
   $: calc = new SvgCalc({
     size, 
-    length: options.length, 
+    options, 
     themeIndex,
+    contentdirection,
   })
+  $: options && updateCalcOptions()
+  $: (contentdirection || !contentdirection) && updateCalcContentDirection()
 
   $: bonus && checkSpinable()
 
+  const updateCalcOptions = () => {
+    calc.options = options
+  }
+  const updateCalcContentDirection = () => {
+    calc.contentdirection = contentdirection || 'anticlockwise'
+    setImageProps()
+  }
+
+  const setImageProps = () => {
+    if(!rootContainer) return;
+    
+    for ( let index = 0; index <= options.length; index++ ) {
+      const image = rootContainer.querySelector(`.PartitionImage.PartitionImage${index} image`)
+      if(image) {
+        setProps(image, calc.getSvgImageProps(index))
+      }
+    }
+  }
+
   const checkSpinable = () => {
     if(shownFirstCheck) return;
     shownFirstCheck = true
@@ -172,36 +195,58 @@
 
           {#if option.image}
             <g
+              class={`PartitionImage PartitionImage${index}`}
               use:renderImage={index}
               style:filter={optionFilter}
             />
-          {:else if option.name}
+          {/if}
+
+          {#if option.name}
             <foreignObject 
               class="PartitionText"
               {...(() => {
                 const props = calc.getSvgTextProps(index)
+                const size = option.image ? 80 : 100
+
+                const objectSize = {
+                  width: size,
+                  height: size,
+                }
+                
                 return {
                   ...props,
-                  x: props.x - 100,
-                  y: props.y - 50,
+                  ...objectSize,
+                  x: calc.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width,
+                  y: props.y - objectSize.height / 2,
                 }
               })()}
               style:filter={optionFilter}
-              width={100}
-              height={100}
             >
               <div class="PartitionTextEntityContainer">
-                <p class="PartitionTextEntity">{option.name}</p>
+                <p class={`PartitionTextEntity${calc.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`}>{option.name}</p>
               </div>
             </foreignObject>
           {/if}
         {/each}
       </g>
       
-      <image {...{
-        class: "PartitionsShadow",
-        ...calc.getShadowImage()
-      }} />
+      <defs>
+        <radialGradient 
+          id="shadow-fill"
+          gradientUnits="userSpaceOnUse"
+          {...calc.getShadowSize()}
+        >
+          {#each shadowSteps as step}
+            <stop offset={step.offset} stop-color={step.color}/>
+          {/each}
+        </radialGradient>
+      </defs>
+      <circle 
+        {...calc.getShadowSize()}
+        fill="url(#shadow-fill)"
+        style="mix-blend-mode:multiply"
+      />
+      
     </g>
 
     {#if theme.pointerMode === PointerMode.Partition}

package/src/private.message.svelte

@@ -67,6 +67,9 @@
 
   $: startTime = modeValue?.startTime && getTimeString(modeValue?.startTime)
 
+  $: prize = modeValue?.name || 'prize'
+  $: prizeSrc = giftimagesrc || modeValue?.image || giftSvg
+
 </script>
 
 
@@ -97,10 +100,16 @@
 
   {#if mode === 'gift'}
   <p>
-    <img src={giftimagesrc || giftSvg} alt="" class="GiftImage">
+    <img src={prizeSrc} alt="" class="GiftImage">
+  </p>
+  <p>{@html $_('wof.Congratulation', {values: { prize }})}</p>
+  {/if}
+
+  {#if mode === 'nogift'}
+  <p>
+    <img src={modeValue.image} alt="" class="GiftImage">
   </p>
-  <p>{$_('wof.Congratulation')}</p>
-  <!-- <p>{modeValue}</p> -->
+  <p>{@html $_('wof.Loss')}</p>
   {/if}
 
   {#if mode !== 'init-failed'}
@@ -139,6 +148,7 @@
 
   .GiftImage {
     max-width: 80%;
+    height: 100px;
   }
 
   .MessagePanel {

package/src/themes.ts

@@ -210,4 +210,66 @@ export const themes = [
     partitions: partitions3,
     pointerMode: PointerMode.Arrow,
   },
-]
+]
+
+export const shadowSteps1 = [
+  {
+    offset: "0.41",
+    color: "white",
+  },
+  {
+    offset: "0.57",
+    color: "#FCFCFD",
+  },
+  {
+    offset: "0.61",
+    color: "#F3F4F6",
+  },
+  {
+    offset: "0.74",
+    color: "#E9ECF0",
+  },
+  {
+    offset: "0.87",
+    color: "#B9C3CE",
+  },
+  {
+    offset: "1",
+    color: "#899BAD",
+  },
+]
+
+export const shadowSteps = [
+  {
+    offset: "0.81",
+    color: "white",
+  },
+  {
+    offset: "0.87",
+    color: "#FCFCFD",
+  },
+  {
+    offset: "0.91",
+    color: "#F3F4F6",
+  },
+  {
+    offset: "0.94",
+    color: "#E9ECF0",
+  },
+  {
+    offset: "0.97",
+    color: "#B9C3CE",
+  },
+  {
+    offset: "1",
+    color: "#899BAD",
+  },
+]
+
+
+// <stop offset="0.81"
+// <stop offset="0.87"
+// <stop offset="0.91"
+// <stop offset="0.94"
+// <stop offset="0.97"
+// <stop offset="1"

package/src/translations.js

@@ -11,7 +11,7 @@ export const translations = {
       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!`,
+      Congratulation: `Congratulations! You won a {prize}!`,
       OK: `OK`,
       Rewards: `Rewards`,
       Status: `Status`,

package/src/types.ts

@@ -68,7 +68,10 @@ export enum Tab {
   History = 'History'
 }
 
-
+export enum ContentDirection {
+  clockwise = 1,
+  anticlockwise = -1,
+}