@everymatrix/lottery-program-wof 1.22.5 → 1.22.7

package/src/private.item.svg.scss

@@ -37,24 +37,6 @@ 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;
@@ -64,10 +46,10 @@ svg {
 
 .Center {
   cursor: pointer;
-  
+
   transition: filter;
   transition-duration: 1s;
-  
+
   &.disabled {
     filter: grayscale(80%);
   }
@@ -127,3 +109,180 @@ svg {
 .PartitionTextEntity.Anticlockwise {
   text-align: end;
 }
+
+// Themed Bottom
+
+.theme1, .theme4, .theme5 {
+  foreignObject.Bottom {
+    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);
+  }
+}
+
+.theme2, .theme6 {
+  foreignObject.Bottom {
+    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);
+  }
+}
+
+.theme3 {
+  foreignObject.Bottom {
+    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);
+  }
+}
+
+.theme7 {
+  foreignObject.Bottom {
+    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);
+  }
+}
+
+// Themed Middle
+.theme1, .theme4 {
+  foreignObject.Middle {
+    background-image: var(--img-theme-center1);
+    background-position: center;
+  }
+}
+
+.theme2 {
+  foreignObject.Middle {
+    background-image: var(--img-theme2-center), var(--img-theme2-arrow);
+    background-position: center, center 60px;
+  }
+}
+
+.theme3 {
+  foreignObject.Middle {
+    background-image: var(--img-theme3-center), var(--img-theme3-arrow);
+    background-position: center, center 39px;
+  }
+}
+
+.theme5, .theme6 {
+  foreignObject.Middle {
+    background-image: var(--img-theme-center2);
+    background-position: center;
+  }
+}
+
+.theme7 {
+  foreignObject.Middle {
+    background-image: var(--img-theme7-center), var(--img-theme7-arrow);
+    background-position: center, center 36px;
+  }
+}
+
+// Themed Top
+.theme7 {
+  foreignObject.Top {
+    background-image: var(--img-theme7-light);
+    background-position: 294px 135px;
+  }
+}
+
+.theme1, .theme2, .theme3, .theme4, .theme5, .theme6 {
+  foreignObject.Top {
+    background-image: var(--img-theme-shadow);
+    background-position: center;
+    mix-blend-mode: multiply;
+    background-size: calc(var(--radius) * 2px);
+  }
+}
+
+// Themed Partition
+
+.theme2 {
+  foreignObject.Partition1 {
+    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 {
+    background-image: var(--img-theme-partition-light), 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)));
+  }
+}
+
+foreignObject.PointerArea {
+  background-image: var(--img-theme-pointer-area);
+  background-position: center -3px;
+  mix-blend-mode: screen;
+  background-size: 51%;
+}
+
+foreignObject.Partition1, foreignObject.Partition2 {
+  transform-origin: center;
+}
+
+foreignObject.Customable {
+  overflow: visible;
+  background-repeat: no-repeat;
+}
+
+.PartitionBackground {
+  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%) }
+}
+
+.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%) }
+}
+
+.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%) }
+}
+
+.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 {
+  transform-origin: center;
+}
+
+
+// Themed Partition Background Stroke
+.PartitionBackgroundStroke {
+  fill: transparent;
+  stroke-width: 0.5px;
+  stroke-dasharray: var(--radius) calc(2 * pi / var(--length) * var(--radius));
+}
+.theme1, .theme2 {
+  .PartitionBackgroundStroke {
+    stroke: #FCD755;
+  }
+}
+
+.PointerPartitionFrame {
+  stroke: #FFDD64;
+  fill: transparent;
+  stroke-dasharray: var(--radius) calc(2 * pi / var(--length) * var(--radius));
+  stroke-width: 0px;
+
+  &.active {
+    stroke-width: 3px;
+  }
+}

package/src/private.item.svg.svelte

@@ -8,7 +8,7 @@
   import { api } from './business';
   import { onMountMessageLifeCycle, _postMessage } from './message';
   import type { LotteryProgramForPlayer } from './types.business';
-  import { shadowSteps, themes } from './themes';
+  import { themes } from './themes';
   import { setProps } from './util';
   import { Spinner } from './class.spinner';
   import { SvgCalc } from './class.svgcalc';
@@ -16,7 +16,6 @@
   import { _ } from './i18n';
   import { setClientStyling } from './widget';
   import { defines } from './themes.image.center';
-  import { themedCssPointer } from './themes.image.pointer';
 
   // properties common
   export let lang: Lang = Lang.en
@@ -25,19 +24,20 @@
   export let clientstyling:string = ''
   export let contentdirection: keyof typeof ContentDirection = 'anticlockwise'
   export let partitiondivisor: string = ''
-  
+
   let rootContainer: HTMLElement
   $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
 
   // properties
   export let id: string = undefined
   export let size: string = ''
+  export let radius: string = ''
 
   let bonus: LotteryProgramForPlayer
   const updateOptions = async () => {
     if(!options.length){
       options = await getOptions(bonus, lang)
-      
+
       _postMessage({ type: 'wof-private-options-ready', id })
     }
   }
@@ -66,12 +66,13 @@
   let shownFirstCheck = false
 
   let speed: number = 0
-  
+
   $: themeIndex = bonus?.program?.metadata?.template || 0
   $: theme = themes[themeIndex] || themes[0]
   $: calc = new SvgCalc({
-    size, 
-    options, 
+    size,
+    radius,
+    options,
     themeIndex,
     contentdirection,
   })
@@ -90,7 +91,7 @@
 
   const setImageProps = () => {
     if(!rootContainer) return;
-    
+
     for ( let index = 0; index <= options.length; index++ ) {
       const image = rootContainer.querySelector(`.PartitionImage.PartitionImage${index} image`)
       if(image) {
@@ -119,14 +120,16 @@
           modeValue: bonus.next
         })
       }else{
-        process.setMessage('NoNext')
+        process.setMessage({
+          mode: 'NoNext',
+        })
       }
     }
   }
 
   $: process = new Process({
-    id, 
-    afterSetMessage: () => messageShown = true, 
+    id,
+    afterSetMessage: () => messageShown = true,
     halter: (index, cb) => spinner.halt(calc.getDeg(index), cb),
     afterSuccess: () => isShowPrizeArea = true,
     fetcher: async (guid) => await api.draw(endpoint, session, id, guid, options)
@@ -156,7 +159,7 @@
     },
     'wof-private-message-close': (data) => {
       if(data.id !== id) return;
-      
+
       isSpinning = false
       setTimeout(() => updateSpinable(), 1)
       messageShown = false
@@ -174,10 +177,10 @@
   $: sizeProps = { height: size, width: size}
 </script>
 
-<div 
-  class={`WheelContainer theme${Number(themeIndex) + 1}`} 
+<div
+  class={`WheelContainer theme${Number(themeIndex) + 1}`}
   bind:this={rootContainer}
-  style={defines()}
+  style={`${defines()} --length: ${options.length}; --radius: ${radius}; --ratio: ${Number(size) / 480}; --size: ${size}`}
 >
   {#if size && options.length}
   <svg
@@ -187,126 +190,97 @@
     style:opacity={messageShown ? '.3': ''}
   >
     <foreignObject {...sizeProps} class="Bottom Customable" />
-      
+
     <g class="PartitionsContainer" {...calc.getSpinnerProps()}>
       <g class="PartitionsBackgrounds">
         {#each options as option, index}
-          <path
-            class="PartitionsBackground"
-            {...calc.getPartitionBackgroundProp(index)}
+          <foreignObject
+            clip-path={`url(#clip${index})`}
+            class="PartitionBackground Customable"
+            style={`--index: ${index}`}
+            width={size}
+            height={size}
           />
         {/each}
       </g>
+      <g class="PartitionsBackgroundStrokes">
+        {#each options as option, index}
+        <path
+          class="PartitionBackgroundStroke"
+          {...calc.getPartitionDraw(index)}
+          width={size}
+          height={size}
+        />
+        {/each}
+      </g>
 
-      <g class="Partitions">
+      <g class="Partitions" style:filter={optionFilter}>
         {#each options as option,index}
 
           {#if option.image}
             <g
               class={`PartitionImage PartitionImage${index}`}
               use:renderImage={index}
-              style:filter={optionFilter}
             />
           {/if}
 
           {#if option.name}
-            <foreignObject 
+            <foreignObject
               class="PartitionText"
               {...calc.getSvgTextPropsAdjustedByImage(index)}
-              style:filter={optionFilter}
             >
               <div class="PartitionTextEntityContainer">
                 <p class={`PartitionTextEntity${calc.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`}>{option.name}</p>
               </div>
             </foreignObject>
           {/if}
+
         {/each}
       </g>
-      
-      {#if themeIndex != 6}
-      <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"
-      />
-      {/if}
-      
+
     </g>
 
+    <g class="PartitionsCustomable1">
+      {#each options as option,index}
+      <foreignObject
+        class="Partition1 Customable"
+        style={`--index: ${index}`}
+        {...sizeProps}
+      />
+      {/each}
+    </g>
+    <g class="PartitionsCustomable2">
+      {#each options as option,index}
+      <foreignObject
+        class="Partition2 Customable"
+        style={`--index: ${index}`}
+        {...sizeProps}
+      />
+      {/each}
+    </g>
 
     {#if theme.pointerMode === PointerMode.Partition}
     <g class="PointerContainer" {...calc.getSpinnerProps()}>
-      {#if themeIndex == 6}
-      <foreignObject  
-        class="Partition"
-        width={size}
-        height={size}
-      />
-      {/if}
-      <image
-        {...{
-          class: "HighLightAreaBackground",
-          ...calc.getBackgroundImageProps(0),
-        }}
-      />
-      <image
-        {...{
-          class: "HighLightArea",
-          ...calc.getBackgroundImageProps(1),
-        }}
-      />
-      
+
+      <foreignObject class="PointerArea Customable" {...sizeProps} />
+
       <path
         class="PointerPartitionFrame"
-        {...calc.getPartitionFrame()}
-        {...{'stroke-width': isShowPrizeArea ? '3px' : '0px'}}
-      />
-    </g>
-    {/if}
-  
-    <foreignObject  
-      class="Top Customable"
-      width={size}
-      height={size}
-    />
-
-    {#if theme.pointerMode === PointerMode.Arrow}
-    <g class="PointerContainer" {...calc.getSpinnerProps()}>
-      <foreignObject  
-        class="Customable"
-        width={size}
-        height={size}
-        style={themedCssPointer(Number(themeIndex))}
+        class:active={isShowPrizeArea}
+        {...calc.getPartitionDraw(0)}
       />
     </g>
     {/if}
 
-    <foreignObject  
-      class="Middle Customable"
-      width={size}
-      height={size}
-    />
+    <foreignObject class="Middle Customable" {...sizeProps} />
+    <foreignObject class="Top Customable" {...sizeProps} />
 
     <g
       class="Center"
       class:disabled={isSpinning}
-      x="240"
-      y="240"
       on:click={() => eventSpin()}
     >
-      <foreignObject  
-        class="Customable"
+      <foreignObject
         x={Number(size)/2 - 100/2}
         y={Number(size)/2 - 100/2}
         width={100}
@@ -314,119 +288,18 @@
       />
     </g>
 
-    {#if theme.background.isShowingBulb}
-    <g class="RingCirclesGroup">
-      {#each options as option,index}
-        <image class="RingImage" {...calc.getRingImageProps(index)} />
-        <image class="RingImage" {...calc.getRingImageProps(index + 1/2)} />
+    <!-- defs -->
+    <g>
+      {#each options as option, index}
+      <clipPath {...{id: `clip${index}`}}>
+        <path {...calc.getPartitionDraw(index)} />
+      </clipPath>
       {/each}
     </g>
-    {/if}
-
-    <!-- defs -->
-
-    {#each calc.getDefs() as def}
-    <defs>
-      <linearGradient {...def.props}>
-        {#each def.steps as step}
-          <stop offset={step.offset} stop-color={step.color} />
-        {/each}
-      </linearGradient>
-    </defs>
-    {/each}
-    <defs>
-      <linearGradient id="GPointerPartitionFrame" x1="50.7564" y1="-9.24463" x2="50.7564" y2="115.67" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#E7A60D"/>
-      <stop offset="0.378125" stop-color="#FFDD64"/>
-      <stop offset="1" stop-color="#FFF100"/>
-      </linearGradient>
-    </defs>
   </svg>
   {/if}
 </div>
 
 <style lang="scss">
   @import './private.item.svg.scss';
-
-  // Themed Bottom
-
-  .theme1, .theme4, .theme5 {
-    foreignObject.Bottom {
-      background-image: var(--img-theme1-bg3), var(--img-theme-BgBlackRing), var(--img-theme-BgHalo);
-      background-position: center, center, center;
-      background-size: 68%, 77%, 98%;
-    }
-  }
-
-  .theme2, .theme6 {
-    foreignObject.Bottom {
-      background-image: var(--img-theme2-bg3), var(--img-theme-BgHalo), var(--img-theme-BgBlackRing);
-      background-position: center, center, center;
-      background-size: 69%, 92%, 76%;
-    }
-  }
-
-  .theme3 {
-    foreignObject.Bottom {
-      background-image: var(--img-theme3-bg2), var(--img-theme3-bg1);
-      background-position: center, center;
-      background-size: 78%, 93%;
-    }
-  }
-
-  .theme7 {
-    foreignObject.Bottom {
-      background-image: var(--img-theme7-bg3), var(--img-theme7-bg2), var(--img-theme7-bg1);
-      background-position: center, center 404px, 13px -31px;
-    }
-  }
-
-  // Themed Middle
-  .theme1, .theme4 {
-    foreignObject.Middle {
-      background-image: var(--img-theme-center1);
-      background-position: center;
-    }
-  }
-
-  .theme2 {
-    foreignObject.Middle {
-      background-image: var(--img-theme2-center);
-      background-position: center;
-    }
-  }
-  
-  .theme3 {
-    foreignObject.Middle {
-      background-image: var(--img-theme3-center);
-      background-position: center;
-    }
-  }
-  
-  .theme5, .theme6 {
-    foreignObject.Middle {
-      background-image: var(--img-theme-center2);
-      background-position: center;
-    }
-  }
-
-  .theme7 {
-    foreignObject.Middle {
-      background-image: var(--img-theme7-center);
-      background-position: center;
-    }
-  }
-
-  // Themed Top
-  .theme7 {
-    foreignObject.Top {
-      background-image: var(--img-theme7-light);
-      background-position: 303px 135px;
-    }
-  }
-
-  foreignObject.Customable {
-    overflow: visible;
-    background-repeat: no-repeat;
-  }
-</style>
+</style>

package/src/private.message.svelte

@@ -79,6 +79,14 @@
 
   $: prizeSrc = modeValue?.prizeSrc || giftimagesrc || giftSvg
 
+  const handlerTC = () => _postMessage({ type: "OnTCClicked", WofProgramID: id })
+
+  let holderTC: HTMLElement
+  const bindEventTC = () => {
+    holderTC.querySelector('a').addEventListener('click', handlerTC)
+  }
+
+  $: holderTC && bindEventTC()
 </script>
 
 
@@ -102,6 +110,10 @@
   <p>{@html $_('wof.ShowNext', {values: { startTime }})}</p>
   {/if}
 
+  {#if mode === 'NoNext'}
+  <p bind:this={holderTC}>{@html $_(`wof.NoNext`)}</p>
+  {/if}
+
   {#if mode === 'gift'}
   <p>
     <img src={prizeSrc} alt="" class="GiftImage">
@@ -123,7 +135,7 @@
   <p>{@html $_('wof.Loss')}</p>
   {/if}
 
-  {#if !['init-failed', 'show-next'].includes(mode) && !(mode === 'normal' && modeValue === 'NoNext')}
+  {#if !['init-failed', 'show-next', 'NoNext'].includes(mode)}
   <div>
     <button
       class="MessagePanelButton"

package/src/private.outcomes.svelte

@@ -15,6 +15,7 @@
   export let endpoint: string = ''
   export let session: string = ''
   export let clientstyling:string = ''
+  export let id: string = ''
   
   let rootContainer: HTMLElement
   $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);