@everymatrix/lottery-program-wof 1.22.8 → 1.22.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.22.8",
+  "version": "1.22.10",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3950da5f5790b1e4270c8674a930025443f50ff5"
+  "gitHead": "38495c8b7fed86d85f3362fe6419369936e0a28a"
 }

package/src/business.partition.ts

@@ -10,7 +10,7 @@ import Thankyou3Svg from './images/Thankyou_3.svg'
 import Thankyou4Svg from './images/Thankyou_4.svg'
 import type { Lang } from './types'
 import type { LotteryProgramForPlayer } from './types.business'
-import { imageLoaderSvg } from './util'
+import { imageLoaderSvg, isSafari } from './util'
 
 export interface Option {
   image: SVGElement | string,
@@ -69,12 +69,30 @@ 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))
-    }))
-  )
+  let options: Option[] = getOptionsFromPartitions(partitions, lang)
+
+  if(isSafari()){
+    options = options.map(option => {
+      if(option.image){
+        let img = document.createElementNS("http://www.w3.org/2000/svg", "image")
+        img.href.baseVal = option.image as string
+        
+        return {
+          ...option,
+          image: img
+        }
+      }else{
+        return option
+      }
+    })
+  }else{
+    options = await Promise.all(
+      options.map(async o => ({
+        ...o, 
+        ...(await preloadImage(o.image as string))
+      }))
+    )
+  }
 
   return options
 }

package/src/class.svgcalc.ts

@@ -76,7 +76,7 @@ export class SvgCalc {
     }
 
     return {
-      ...this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius),
+      ...this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward),
       width: sizeImage,
       height: sizeImage,
     }
@@ -148,8 +148,11 @@ export class SvgCalc {
     return RotateDirection.clockwise
   }
 
-  getAngleSelf (index) {
-    return 360 * index / this.length * this.direction + 90 * ContentDirection[this.contentdirection]
+  getAngleSelf (index, contentDirection?: ContentDirection) {
+    const baseAngle = 360 * index / this.length * this.direction
+    const fixerAngle = 90 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection])
+    const resultAngle = baseAngle + fixerAngle
+    return resultAngle
   }
 
   getPartitionPositions (index, baseRadius, offset) {
@@ -171,7 +174,8 @@ export class SvgCalc {
   getPropsForPartitionInfo (
     index: number, 
     offset: any,
-    baseRadius?: number
+    baseRadius?: number,
+    contentDirection?: ContentDirection
   ) {
     
     const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset)
@@ -183,7 +187,7 @@ export class SvgCalc {
       ...point,
       style: [
         `font-size: ${13 * this.ratio}px`,
-        `transform: rotate(${this.getAngleSelf(index)}deg)`,
+        `transform: rotate(${this.getAngleSelf(index, contentDirection)}deg)`,
         `transform-origin: ${getTransformOriginString(transformOrigin)}`,
       ].join(';')
     }

package/src/private.item.svg.svelte

@@ -9,7 +9,7 @@
   import { onMountMessageLifeCycle, _postMessage } from './message';
   import type { LotteryProgramForPlayer } from './types.business';
   import { themes } from './themes';
-  import { setProps } from './util';
+  import { isSafari, setProps } from './util';
   import { Spinner } from './class.spinner';
   import { SvgCalc } from './class.svgcalc';
   import { Process } from './class.process';
@@ -187,6 +187,7 @@
     bind:this={svg}
     width={size}
     height={size}
+    on:click={() => isSafari() && eventSpin()}
     style:opacity={messageShown ? '.3': ''}
   >
     <foreignObject {...sizeProps} class="Bottom Customable" />
@@ -230,7 +231,7 @@
               {...calc.getSvgTextPropsAdjustedByImage(index)}
             >
               <div class="PartitionTextEntityContainer">
-                <p class={`PartitionTextEntity${calc.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`}>{option.name}</p>
+                <p class={`PartitionTextEntity${calc.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`}>{@html option.name}</p>
               </div>
             </foreignObject>
           {/if}
@@ -278,7 +279,7 @@
     <g
       class="Center"
       class:disabled={isSpinning}
-      on:click={() => eventSpin()}
+      on:click={() => isSafari() || eventSpin()}
     >
       <foreignObject
         x={Number(size)/2 - 100/2}

package/src/private.message.svelte

@@ -119,7 +119,7 @@
     <img src={prizeSrc} alt="" class="GiftImage">
   </p>
     {#if modeValue.prizeText}
-      {modeValue.prizeText}
+      {@html modeValue.prizeText}
     {:else}
       {@html $_('wof.Congratulation', {values: { prize: modeValue.prize }})}
     {/if}

package/src/private.outcomes.svelte

@@ -122,7 +122,7 @@
           <tbody style={outcomesItem.outcomes.length <= 5 ? 'overflow: hidden;' : ''}>
             {#each outcomesItem.outcomes as outcome}
             <tr>
-              <td>{getPrize(outcome, outcomesItem.id)}</td>
+              <td>{@html getPrize(outcome, outcomesItem.id)}</td>
               <td>{outcome.draw.state}</td>
               <td>{(new Date(outcome.draw.time).toLocaleString(undefined, { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }))}</td>
             </tr>

package/src/types.ts

@@ -72,6 +72,7 @@ export enum Tab {
 export enum ContentDirection {
   clockwise = 1,
   anticlockwise = -1,
+  outward = 0,
 }
 
 

package/src/util.ts

@@ -82,4 +82,9 @@ export const fetchBase = async (input: RequestInfo | URL, init: RequestInit = {}
   }
 
   return res
+}
+
+export const isSafari = () => {
+  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  return isSafari;
 }