@everymatrix/lottery-program-wof 1.22.2 → 1.22.6

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,13 +8,14 @@
   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';
   import { Process } from './class.process';
   import { _ } from './i18n';
   import { setClientStyling } from './widget';
+  import { defines } from './themes.image.center';
 
   // properties common
   export let lang: Lang = Lang.en
@@ -22,18 +23,22 @@
   export let session: string = ''
   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
+  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 })
     }
   }
   $: bonus && lang && updateOptions()
@@ -61,12 +66,13 @@
   let shownFirstCheck = false
 
   let speed: number = 0
-  
+
   $: themeIndex = bonus?.program?.metadata?.template || 0
-  $: theme = themes[themeIndex]
+  $: theme = themes[themeIndex] || themes[0]
   $: calc = new SvgCalc({
-    size, 
-    options, 
+    size,
+    radius,
+    options,
     themeIndex,
     contentdirection,
   })
@@ -85,11 +91,11 @@
 
   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))
+        setProps(image, calc.getSvgImageProps(index, partitiondivisor))
       }
     }
   }
@@ -114,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)
@@ -151,7 +159,7 @@
     },
     'wof-private-message-close': (data) => {
       if(data.id !== id) return;
-      
+
       isSpinning = false
       setTimeout(() => updateSpinable(), 1)
       messageShown = false
@@ -166,9 +174,14 @@
   }
 
   $: optionFilter = theme.pointerMode === PointerMode.Arrow && speed > 0.3 ? `blur(${speed}px)` : null
+  $: sizeProps = { height: size, width: size}
 </script>
 
-<div class="WheelContainer" bind:this={rootContainer}>
+<div
+  class={`WheelContainer theme${Number(themeIndex) + 1}`}
+  bind:this={rootContainer}
+  style={`${defines()} --length: ${options.length}; --radius: ${radius}; --ratio: ${Number(size) / 480}; --size: ${size}`}
+>
   {#if size && options.length}
   <svg
     bind:this={svg}
@@ -176,176 +189,117 @@
     height={size}
     style:opacity={messageShown ? '.3': ''}
   >
-    
-    <g class="BackgroundCircleGroup" filter="url(#BgHalo)">
-      {#each calc.backgroundCirclePropsArray() as props}
-        <circle {...props} />
-      {/each}
-    </g>
-      
+    <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"
-              {...(() => {
-                const props = calc.getSvgTextProps(index)
-                const size = option.image ? 80 : 100
-
-                const objectSize = {
-                  width: size,
-                  height: size,
-                }
-                
-                return {
-                  ...props,
-                  ...objectSize,
-                  x: calc.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width,
-                  y: props.y - objectSize.height / 2,
-                }
-              })()}
-              style:filter={optionFilter}
+              {...calc.getSvgTextPropsAdjustedByImage(index)}
             >
               <div class="PartitionTextEntityContainer">
                 <p class={`PartitionTextEntity${calc.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`}>{option.name}</p>
               </div>
             </foreignObject>
           {/if}
+
         {/each}
       </g>
-      
-      <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>
+
+    <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()}>
-      <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'}}
+        class:active={isShowPrizeArea}
+        {...calc.getPartitionDraw(0)}
       />
     </g>
     {/if}
 
+    <foreignObject class="Middle Customable" {...sizeProps} />
+    <foreignObject class="Top Customable" {...sizeProps} />
+
     <g
       class="Center"
       class:disabled={isSpinning}
       on:click={() => eventSpin()}
     >
-      {#each calc.getThemedCenterImages() as themedImage}
-        <image {...calc.getThemedImageProp(themedImage)} />
-      {/each}
-    </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)} />
-      {/each}
+      <foreignObject
+        x={Number(size)/2 - 100/2}
+        y={Number(size)/2 - 100/2}
+        width={100}
+        height={100}
+      />
     </g>
-    {/if}
 
-    {#if theme.pointerMode === PointerMode.Arrow}
-    <g class="PointerContainer" {...calc.getSpinnerProps()}>
-      {#each calc.getThemedPointerImages() as themedImage}
-        <image {...calc.getThemedImageProp(themedImage)} />
+    <!-- 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>
-
-    <defs>
-      <filter 
-        {...{
-          width: size,
-          height: size,
-          x: 0,
-          y: 0,
-        }}
-        id="BgHalo" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"
-      >
-        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-        <feOffset/>
-        <feGaussianBlur stdDeviation="25"/>
-        <feComposite in2="hardAlpha" operator="out"/>
-        <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.972917 0 0 0 0 0.729167 0 0 0 0.5 0"/>
-        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4318_310"/>
-        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_310" result="shape"/>
-      </filter>
-    </defs>
   </svg>
   {/if}
 </div>
 
 <style lang="scss">
   @import './private.item.svg.scss';
-</style>
+</style>

package/src/private.message.svelte

@@ -8,6 +8,7 @@
   import { setClientStyling } from './widget';
 
   export let r = 0
+  export let size = 0
   export let id: string = undefined
   export let clientstyling:string = ''
   export let giftimagesrc: string = ''
@@ -20,8 +21,13 @@
   let isShown: boolean = false
   let mode: string = ''
   let modeValue: any
+  let isOptionsReady: boolean = false
 
   onMountMessageLifeCycle({
+    'wof-private-options-ready': (data) => {
+      if(data.id !== id) return;
+      isOptionsReady = true
+    },
     'wof-private-message-open': (data) => {
       if(data.id !== id) return;
 
@@ -52,32 +58,43 @@
     ].join(' ')
   }
 
-  const setTopOffset = () => {
-    setTimeout(() => {
-      topOffset = rootContainer.offsetHeight / 2 * -1
-      
-    }, 1)
+  const setObserver = () => {
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.map(entry => {
+        if(entry.target === rootContainer) {
+          topOffset = entry.target.clientHeight / 2
+        }
+      })
+    })
+    resizeObserver.observe(rootContainer)
   }
 
-  $: mode && setTopOffset()
+  $: rootContainer && setObserver()
 
-  $: width = r*2 + 5
-  $: left = r/2
-  $: top = r
+  $: width = r * 2
+  $: left = size / 2 - width / 2
+  $: top = size / 2 - topOffset
 
   $: startTime = modeValue?.startTime && getTimeString(modeValue?.startTime)
 
   $: 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>
 
 
-{#if isShown}
+{#if isShown && isOptionsReady}
 <div 
   bind:this={rootContainer}
   class="MessagePanel" 
   style={[
-    // `margin-top: ${r + topOffset}px`,
     `top: ${top}px`,
     `left: ${left}px`,
     `width: ${width}px`,
@@ -93,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">
@@ -114,7 +135,7 @@
   <p>{@html $_('wof.Loss')}</p>
   {/if}
 
-  {#if mode !== 'init-failed'}
+  {#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);