@everymatrix/lottery-program-wof 1.28.8 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.28.8",
+  "version": "1.29.0",
   "main": "dist/lottery-program-wof.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c7e4f0fb90648211b55dc99a72de2fe600016137"
+  "gitHead": "97cea3025cb353ba5ec695d9a2ac6fe4825d7fba"
 }

package/src/business.ts

@@ -170,7 +170,7 @@ export const api = {
 export const getSpinContainerSelector = (pointerMode: PointerMode) => {
   switch(pointerMode){
     case PointerMode.Arrow: return 'g.PartitionsContainer'
-    case PointerMode.Partition: return 'g.PointerContainer'
+    case PointerMode.Partition: return '.PointerArea > div'
   }
 }
 

package/src/private.item.svg.scss

@@ -113,7 +113,7 @@ svg {
 // Themed Bottom
 
 .theme1, .theme4, .theme5 {
-  foreignObject.Bottom {
+  foreignObject.Bottom div {
     background-image: var(--img-theme1-bg3), var(--img-theme-BgBlackRing), var(--img-theme-BgHalo);
     background-position: center, center, center;
     background-size: calc(var(--radius) * 2px + var(--ratio) * 7px), calc(var(--radius) * 2px + var(--ratio) * 37px), calc(var(--radius) * 2px + var(--ratio) * 130px);
@@ -121,7 +121,7 @@ svg {
 }
 
 .theme2, .theme6 {
-  foreignObject.Bottom {
+  foreignObject.Bottom div {
     background-image: var(--img-theme2-bg3), var(--img-theme-BgHalo), var(--img-theme-BgBlackRing);
     background-position: center, center, center;
     background-size: calc(var(--radius) * 2px + var(--ratio) * 8px), calc(var(--radius) * 2px + var(--ratio) * 123px), calc(var(--radius) * 2px + var(--ratio) * 37px);
@@ -129,7 +129,7 @@ svg {
 }
 
 .theme3 {
-  foreignObject.Bottom {
+  foreignObject.Bottom div {
     background-image: var(--img-theme3-bg2), var(--img-theme3-bg1);
     background-position: center, center;
     background-size: calc(var(--radius) * 2px + var(--ratio) * 57px), calc(var(--radius) * 2px + var(--ratio) * 125px);
@@ -137,7 +137,7 @@ svg {
 }
 
 .theme7 {
-  foreignObject.Bottom {
+  foreignObject.Bottom div {
     background-image: var(--img-theme7-bg3), var(--img-theme7-bg2), var(--img-theme7-bg1);
     background-position: center, center calc(var(--size) * 1px - var(--ratio) * 95px), calc(var(--ratio) * 42px) calc(var(--ratio) * -5px);
     background-size: calc(var(--radius) * 2px + 35px), calc(var(--radius) * 2px * 0.6), calc(var(--radius) * 2.7px);
@@ -146,35 +146,35 @@ svg {
 
 // Themed Middle
 .theme1, .theme4 {
-  foreignObject.Middle {
+  foreignObject.Middle div {
     background-image: var(--img-theme-center1);
     background-position: center;
   }
 }
 
 .theme2 {
-  foreignObject.Middle {
+  foreignObject.Middle div {
     background-image: var(--img-theme2-center), var(--img-theme2-arrow);
     background-position: center, center 60px;
   }
 }
 
 .theme3 {
-  foreignObject.Middle {
+  foreignObject.Middle div {
     background-image: var(--img-theme3-center), var(--img-theme3-arrow);
     background-position: center, center 39px;
   }
 }
 
 .theme5, .theme6 {
-  foreignObject.Middle {
+  foreignObject.Middle div {
     background-image: var(--img-theme-center2);
     background-position: center;
   }
 }
 
 .theme7 {
-  foreignObject.Middle {
+  foreignObject.Middle div {
     background-image: var(--img-theme7-center), var(--img-theme7-arrow);
     background-position: center, center 36px;
   }
@@ -182,7 +182,7 @@ svg {
 
 // Themed Top
 .theme7 {
-  foreignObject.Top {
+  foreignObject.Top div {
     background-image: var(--img-theme7-light);
     background-position: 294px 135px;
   }
@@ -190,9 +190,12 @@ svg {
 
 .theme1, .theme2, .theme3, .theme4, .theme5, .theme6 {
   foreignObject.Top {
+    mix-blend-mode: multiply;
+  }
+
+  foreignObject.Top div {
     background-image: var(--img-theme-shadow);
     background-position: center;
-    mix-blend-mode: multiply;
     background-size: calc(var(--radius) * 2px);
   }
 }
@@ -200,12 +203,12 @@ svg {
 // Themed Partition
 
 .theme2 {
-  foreignObject.Partition1 {
+  foreignObject.Partition1 div {
     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) * 360deg / var(--length)));
   }
-  foreignObject.Partition2 {
+  foreignObject.Partition2 div {
     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)));
@@ -213,16 +216,18 @@ svg {
 }
 
 foreignObject.PointerArea {
+  mix-blend-mode: screen;
+}
+foreignObject.PointerArea div {
   background-image: var(--img-theme-pointer-area);
   background-position: center -3px;
-  mix-blend-mode: screen;
   background-size: 51%;
 }
 
-foreignObject.Partition1, foreignObject.Partition2 {
+foreignObject.Partition1 div, foreignObject.Partition2 div {
   transform-origin: center;
 }
-.PartitionsCustomable1, .PartitionsCustomable2 {
+.PartitionsCustomable1 div, .PartitionsCustomable2 div {
   visibility: hidden;
   &.active {
     visibility: visible;
@@ -231,41 +236,44 @@ foreignObject.Partition1, foreignObject.Partition2 {
 
 foreignObject.Customable {
   overflow: visible;
+}
+
+foreignObject.Customable div {
   background-repeat: no-repeat;
 }
 
-.PartitionBackground {
+.PartitionBackground div {
   background-size: calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);
   background-position: center;
 }
 
 .theme1, .theme2 {
-  .PartitionBackground:nth-child(4n+1) { background-image: radial-gradient(#009C9C 0%, #002634 100%) }
-  .PartitionBackground:nth-child(4n+2) { background-image: radial-gradient(#AA00BF 0%, #3B0031 100%) }
-  .PartitionBackground:nth-child(4n+3) { background-image: radial-gradient(#0068CD 0%, #150D42 100%) }
-  .PartitionBackground:nth-child(4n+4) { background-image: radial-gradient(#DA005B 0%, #400021 100%) }
+  .PartitionBackground:nth-child(4n+1) { div { background-image: radial-gradient(#009C9C 0%, #002634 100%) }}
+  .PartitionBackground:nth-child(4n+2) { div { background-image: radial-gradient(#AA00BF 0%, #3B0031 100%) }}
+  .PartitionBackground:nth-child(4n+3) { div { background-image: radial-gradient(#0068CD 0%, #150D42 100%) }}
+  .PartitionBackground:nth-child(4n+4) { div { background-image: radial-gradient(#DA005B 0%, #400021 100%) }}
 }
 
 .theme3 {
-  .PartitionBackground:nth-child(4n+1) { background-image: radial-gradient(#066 0%, #007F76 13%, #00B59B 42%, #00DDB5 67.01%, #00F6C6 88.01%, #0FC 100.01%) }
-  .PartitionBackground:nth-child(4n+2) { background-image: radial-gradient(#580065 22.67%, #D453FF 91.3%) }
-  .PartitionBackground:nth-child(4n+3) { background-image: radial-gradient(#FFE767 -0.01%, #F28F00 100%) }
-  .PartitionBackground:nth-child(4n+4) { background-image: radial-gradient(#900A42 22.59%, #960A44 23.94%, #B60B53 31.36%, #D00C5E 39.45%, #E40D67 48.22%, #F30D6E 57.66%, #FB0D71 69.8%, #FE0E73 90.03%) }
+  .PartitionBackground:nth-child(4n+1) { div { background-image: radial-gradient(#066 0%, #007F76 13%, #00B59B 42%, #00DDB5 67.01%, #00F6C6 88.01%, #0FC 100.01%) }}
+  .PartitionBackground:nth-child(4n+2) { div { background-image: radial-gradient(#580065 22.67%, #D453FF 91.3%) }}
+  .PartitionBackground:nth-child(4n+3) { div { background-image: radial-gradient(#FFE767 -0.01%, #F28F00 100%) }}
+  .PartitionBackground:nth-child(4n+4) { div { background-image: radial-gradient(#900A42 22.59%, #960A44 23.94%, #B60B53 31.36%, #D00C5E 39.45%, #E40D67 48.22%, #F30D6E 57.66%, #FB0D71 69.8%, #FE0E73 90.03%) }}
 }
 
 .theme4, .theme5, .theme6 {
-  .PartitionBackground:nth-child(4n+1) { background: radial-gradient(#3B0031 0%, #7E008E 100.01%) }
-  .PartitionBackground:nth-child(4n+2) { background: radial-gradient(#5A005F 22.67%, #EA53FF 91.3%) }
-  .PartitionBackground:nth-child(4n+3) { background: radial-gradient(#B300C3 -0.01%, #4D003B 100%) }
-  .PartitionBackground:nth-child(4n+4) { background: radial-gradient(#59007B 22.59%, #B753FF 90.03%) }
+  .PartitionBackground:nth-child(4n+1) div { background: radial-gradient(#3B0031 0%, #7E008E 100.01%) }
+  .PartitionBackground:nth-child(4n+2) div { background: radial-gradient(#5A005F 22.67%, #EA53FF 91.3%) }
+  .PartitionBackground:nth-child(4n+3) div { background: radial-gradient(#B300C3 -0.01%, #4D003B 100%) }
+  .PartitionBackground:nth-child(4n+4) div { background: radial-gradient(#59007B 22.59%, #B753FF 90.03%) }
 }
 
 .theme7 {
-  .PartitionBackground:nth-child(2n+1) { background: linear-gradient(90.23deg, #F6AD3F 16.59%, #AF8531 99.8%) }
-  .PartitionBackground:nth-child(2n+2) { background: linear-gradient(90deg, #323234 -0.01%, #272425 54.99%, #231F1F 99.99%) }
+  .PartitionBackground:nth-child(2n+1) div { background: linear-gradient(90.23deg, #F6AD3F 16.59%, #AF8531 99.8%) }
+  .PartitionBackground:nth-child(2n+2) div { background: linear-gradient(90deg, #323234 -0.01%, #272425 54.99%, #231F1F 99.99%) }
 }
 
-.PartitionBackground {
+.PartitionBackground div {
   transform-origin: center;
 }
 

package/src/private.item.svg.svelte

@@ -65,7 +65,11 @@
   let spinner = new Spinner({
     tick: (deg, _speed) => {
       setProps(spinContainer, {
-        transform: `rotate(${deg})`,
+        style: [
+          `transform: rotate(${deg}deg)`,
+          `height: ${size}px`,
+          `width: ${size}px`,
+        ].join(';'), //mix-blend-mode: screen; background-blend-mode: screen;
       })
       speed = _speed * 0.5
     }
@@ -195,8 +199,12 @@
     node.appendChild(image)
   }
 
+
   $: optionFilter = theme.pointerMode === PointerMode.Arrow && speed > 0.3 ? `blur(${speed}px)` : null
   $: sizeProps = { height: size, width: size}
+  $: foreignObjectAgentProps = {
+    style: Object.keys(sizeProps).map(key => `${key}: ${sizeProps[key]}px`).join(';')
+  } 
 </script>
 
 <div
@@ -212,7 +220,9 @@
     on:click={() => isSafari() && eventSpin()}
     style:opacity={messageShown ? '.3': ''}
   >
-    <foreignObject {...sizeProps} class="Bottom Customable" />
+    <foreignObject {...sizeProps} class="Bottom Customable">
+      <div {...foreignObjectAgentProps} />
+    </foreignObject>
 
     <g class="PartitionsContainer" {...calc.getSpinnerProps()}>
       <g class="PartitionsBackgrounds">
@@ -223,7 +233,9 @@
             style={`--index: ${index}`}
             width={size}
             height={size}
-          />
+            >
+            <div {...foreignObjectAgentProps} />
+          </foreignObject>
         {/each}
       </g>
       <g class="PartitionsBackgroundStrokes">
@@ -269,7 +281,9 @@
         class="Partition1 Customable"
         style={`--index: ${index}`}
         {...sizeProps}
-      />
+        >
+        <div {...foreignObjectAgentProps} />
+      </foreignObject>
       {/each}
     </g>
     <g class="PartitionsCustomable2" class:active={isPartitionsCustomableReady}>
@@ -278,14 +292,18 @@
         class="Partition2 Customable"
         style={`--index: ${index}`}
         {...sizeProps}
-      />
+        >
+        <div {...foreignObjectAgentProps} />
+      </foreignObject>
       {/each}
     </g>
 
     {#if theme.pointerMode === PointerMode.Partition}
     <g class="PointerContainer" {...calc.getSpinnerProps()}>
 
-      <foreignObject class="PointerArea Customable" {...sizeProps} />
+      <foreignObject class="PointerArea Customable" {...sizeProps}>
+        <div {...foreignObjectAgentProps} />
+      </foreignObject>
 
       <path
         class="PointerPartitionFrame"
@@ -295,8 +313,12 @@
     </g>
     {/if}
 
-    <foreignObject class="Middle Customable" {...sizeProps} />
-    <foreignObject class="Top Customable" {...sizeProps} />
+    <foreignObject class="Middle Customable" {...sizeProps}>
+      <div {...foreignObjectAgentProps} />
+    </foreignObject>
+    <foreignObject class="Top Customable" {...sizeProps}>
+      <div {...foreignObjectAgentProps} />
+    </foreignObject>
 
     <g
       class="Center"