@everymatrix/lottery-program-wof 1.22.11 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.22.11",
+  "version": "1.23.0",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1ec5c9d222dc5546dc0ef485ea93807daa2bb50c"
+  "gitHead": "e1f96f1273bd4af5ca8e311c90006f51ca00a642"
 }

package/src/private.item.svelte

@@ -42,6 +42,7 @@
   let bonusNew: LotteryProgramForPlayer
   let currentInfoKeys: CurrentInfo[]
   let isOptionsReady: boolean = false
+  let checkableValid: boolean = true
 
   const refetcher = async () => {
     const LotteryProgramsForPlayer = await api.lotteries(endpoint, session)
@@ -67,8 +68,16 @@
 
     'wof-private-message-spin-before': async (data) => {
       if(data.id !== id) return;
+      checkableValid = false
       bonusNew = await refetcher()
     },
+
+    'wof-private-message-close': (data) => {
+      if(data.id !== id) return;
+      setTimeout(() => {
+        checkableValid = true
+      }, 1000);
+    },
   })
 
   // reactives
@@ -79,7 +88,11 @@
   $: currentInfoKeys = currentinfo ? currentinfo.split(',') : [CurrentInfo.RemainingTimes]
 </script>
 
-<div class="LotteryItem" bind:this={rootContainer}>
+<div 
+  class="LotteryItem" 
+  class:Invalid={bonus?.current.remainingTimes == 0 && !bonus?.next && checkableValid}
+  bind:this={rootContainer}
+>
   <lottery-program-wof-private-item-svg {...{ 
     ...commonProps,
     id,
@@ -145,6 +158,10 @@
     max-width: 600px;
     justify-content: space-around;
     min-height: 200px;
+
+    &.Invalid { 
+      display: none;
+    }
   }
 
   .Current {

package/src/private.item.svg.scss

@@ -206,7 +206,7 @@ svg {
     transform: rotate(calc(var(--index) * 360deg / var(--length)));
   }
   foreignObject.Partition2 {
-    background-image: var(--img-theme-partition-light), var(--img-theme-partition-light);
+    background-image: var(--img-theme-partition-light);
     background-position: center calc((var(--size) / 2 - var(--radius)) * 1px - calc(var(--ratio) * 22px));
     transform: rotate(calc((var(--index) + 0.5) * 360deg / var(--length)));
   }
@@ -222,6 +222,12 @@ foreignObject.PointerArea {
 foreignObject.Partition1, foreignObject.Partition2 {
   transform-origin: center;
 }
+.PartitionsCustomable1, .PartitionsCustomable2 {
+  visibility: hidden;
+  &.active {
+    visibility: visible;
+  }
+}
 
 foreignObject.Customable {
   overflow: visible;

package/src/private.item.svg.svelte

@@ -33,12 +33,25 @@
   export let size: string = ''
   export let radius: string = ''
 
+  let isPartitionsCustomableReady: boolean = false
+  // temp way to make sure transform-origin effects on safari
+  const handleSafariIssue = (trigger) => {
+    trigger(-1)
+    setTimeout(() => {
+      trigger(1)
+      isPartitionsCustomableReady = true
+    }, 100)
+  }
+
   let bonus: LotteryProgramForPlayer
   const updateOptions = async () => {
     if(!options.length){
       options = await getOptions(bonus, lang)
 
       _postMessage({ type: 'wof-private-options-ready', id })
+
+      const trigger = (amount: number) => size = String(Number(size) + amount)
+      handleSafariIssue(trigger)
     }
   }
   $: bonus && lang && updateOptions()
@@ -182,7 +195,7 @@
   bind:this={rootContainer}
   style={`${defines()} --length: ${options.length}; --radius: ${radius}; --ratio: ${Number(size) / 480}; --size: ${size}`}
 >
-  {#if size && options.length}
+  {#if Number(size) && options.length}
   <svg
     bind:this={svg}
     width={size}
@@ -241,7 +254,7 @@
 
     </g>
 
-    <g class="PartitionsCustomable1">
+    <g class="PartitionsCustomable1" class:active={isPartitionsCustomableReady}>
       {#each options as option,index}
       <foreignObject
         class="Partition1 Customable"
@@ -250,7 +263,7 @@
       />
       {/each}
     </g>
-    <g class="PartitionsCustomable2">
+    <g class="PartitionsCustomable2" class:active={isPartitionsCustomableReady}>
       {#each options as option,index}
       <foreignObject
         class="Partition2 Customable"