@everymatrix/lottery-program-wof 1.13.8 → 1.13.10

package/src/private.item.svg.scss

@@ -0,0 +1,126 @@
+
+:host {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+$outlineColor: rgb(150, 54, 88);
+$outlineWidth: 2px;
+
+.LotteryProgramWof {
+  background: var(--emfe-w-color-contrast, #07072A);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px 0;
+}
+
+main {
+  max-width: 600px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  min-height: 200px;
+}
+
+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;
+  align-items: center;
+  flex-direction: column;
+}
+
+.Center {
+  cursor: pointer;
+  
+  transition: filter;
+  transition-duration: 1s;
+  
+  &.disabled {
+    filter: grayscale(80%);
+  }
+
+  .CenterCircle {
+    fill: #3CE4BB;
+    stroke: $outlineColor;
+    stroke-width: $outlineWidth;
+    cursor: pointer;
+
+    transition: fill;
+    transition-duration: 1s;
+
+  }
+
+  .CenterText {
+    fill: #FFFFFF;
+  }
+}
+
+.PointerPartition {
+  opacity: 0.3;
+  fill: lightgoldenrodyellow;
+  stroke: red;
+  stroke-width: 6px;
+  stroke-dasharray: 12;
+}
+
+.Current {
+  color: #FFFFFF;
+}
+
+.PartitionText {
+  color: #FFFFFF;
+  font-style: normal;
+  font-weight: 700;
+  text-anchor: end;
+  text-shadow: 0px 3px #000;
+  dominant-baseline: central;
+}
+
+.PartitionsShadow {
+  background-blend-mode: multiply;
+  mix-blend-mode: multiply;
+}
+
+.PartitionTextEntityContainer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.PartitionTextEntity {
+  width: 100%;
+  text-align: end;
+}

package/src/private.item.svg.svelte

@@ -9,34 +9,43 @@
   import { onMountMessageLifeCycle, _postMessage } from './message';
   import type { LotteryProgramForPlayer } from './types.business';
   import { themes } from './themes';
-  import { classWithPart, setProps } from './util';
+  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';
 
-  // properties
+  // properties common
   export let lang: Lang = Lang.en
   export let endpoint: string = ''
   export let session: string = ''
+  export let clientstyling:string = ''
+  
+  let rootContainer: HTMLElement
+  $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
 
-  export let lotteryprogramforplayer: string = undefined
-
+  // properties
   export let id: string = undefined
-  export let sizeraw: string = '0'
-  $: size = Number(sizeraw) || 0;
+  export let size
+
+  let bonus: LotteryProgramForPlayer
+  const updateOptions = async () => {
+    if(!options.length){
+      options = await getOptions(bonus, lang)
+    }
+  }
+  $: bonus && lang && updateOptions()
 
-  export let optionsraw: string = '[]'
   let options: Option[] = []
-  $: options = JSON.parse(optionsraw);
 
   // binds
   let svg: SVGElement;
-  let container
+  let spinContainer
 
   let spinner = new Spinner({
     tick: (deg, _speed) => {
-      setProps(container, {
+      setProps(spinContainer, {
         transform: `rotate(${deg})`,
       })
       speed = _speed * 0.5
@@ -50,16 +59,8 @@
   let shownFirstCheck = false
 
   let speed: number = 0
-
-  $: lotteryProgramForPlayer = lotteryprogramforplayer && (JSON.parse(lotteryprogramforplayer)) as LotteryProgramForPlayer
-  $: lotteryProgramForPlayer && (async () => {
-
-    if(!options.length){
-      options = await getOptions(lotteryProgramForPlayer.program.wheelOfFortune.partitions, lang)
-    }
-  })()
   
-  $: themeIndex = lotteryProgramForPlayer?.program?.metadata?.template || 0
+  $: themeIndex = bonus?.program?.metadata?.template || 0
   $: theme = themes[themeIndex]
   $: calc = new SvgCalc({
     size, 
@@ -67,22 +68,23 @@
     themeIndex,
   })
 
-  $: lotteryProgramForPlayer && checkSpinable()
+  $: bonus && checkSpinable()
 
   const checkSpinable = () => {
     if(shownFirstCheck) return;
     shownFirstCheck = true
     
     if(spinable){
-      if(getSpinCondition(lotteryProgramForPlayer)){
+
+      const isNoTimeToSpin = getSpinCondition(bonus)
+
+      if(isNoTimeToSpin){
         process.setMessage({
           mode: 'spin-failed'
         })
-      }else if(getSpinCondition(lotteryProgramForPlayer) && !lotteryProgramForPlayer.next){
+      }else if(!isNoTimeToSpin && !bonus.next){
         process.setMessage($_('wof.NoNext'))
       }
-    }else{
-      // hasQueuedMessage = true
     }
   }
 
@@ -98,11 +100,11 @@
   const eventSpin = async () => {
     if(!spinable) return;
 
-    if(!lotteryProgramForPlayer.current?.remainingTimes){
-      if(lotteryProgramForPlayer.next){
+    if(!bonus.current?.remainingTimes){
+      if(bonus.next){
         process.setMessage({
           mode: 'show-next',
-          modeValue: lotteryProgramForPlayer.next
+          modeValue: bonus.next
         })
       }else{
         process.setMessage($_('wof.NoNext'))
@@ -113,12 +115,15 @@
     spinable = false
     isShowPrizeArea = false
 
-    container = svg.querySelector(getSpinContainerSelector(theme.pointerMode))
+    spinContainer = svg.querySelector(getSpinContainerSelector(theme.pointerMode))
 
     spinner.launch()
     process.drawer(`userid-${id}-${new Date().getTime()}`)
   }
   onMountMessageLifeCycle({
+    'wof-private-bonuses': (data) => {
+      bonus = data.bonuses.find(_bonus => _bonus.program.id === id)
+    },
     'wof-private-message-close': (data) => {
       if(data.id !== id) return;
       
@@ -137,274 +142,162 @@
   $: optionFilter = theme.pointerMode === PointerMode.Arrow && speed > 0.3 ? `blur(${speed}px)` : null
 </script>
 
-        
-{#if size && options.length}
-<svg
-  bind:this={svg}
-  width={size}
-  height={size}
-  style:opacity={messageShown ? '.3': ''}
->
-  
-  <g {...classWithPart("BackgroundCircleGroup")} filter="url(#BgHalo)">
-    {#each calc.backgroundCirclePropsArray() as props}
-      <circle {...props} />
-    {/each}
-  </g>
+<div class="WheelContainer" bind:this={rootContainer}>
+  {#if size && options.length}
+  <svg
+    bind:this={svg}
+    width={size}
+    height={size}
+    style:opacity={messageShown ? '.3': ''}
+  >
     
-  <g {...classWithPart("Partitions")} {...calc.getSpinnerProps()}>
-    <g {...classWithPart("PartitionsBackground")}>
-      {#each options as option, index}
-        <path
-          {...classWithPart("PartitionBackground")}
-          {...calc.getPartitionBackgroundProp(index)}
-        />
+    <g class="BackgroundCircleGroup" filter="url(#BgHalo)">
+      {#each calc.backgroundCirclePropsArray() as props}
+        <circle {...props} />
+      {/each}
+    </g>
+      
+    <g class="PartitionsContainer" {...calc.getSpinnerProps()}>
+      <g class="PartitionsBackgrounds">
+        {#each options as option, index}
+          <path
+            class="PartitionsBackground"
+            {...calc.getPartitionBackgroundProp(index)}
+          />
+        {/each}
+      </g>
+
+      <g class="Partitions">
+        {#each options as option,index}
+
+          {#if option.image}
+            <g
+              use:renderImage={index}
+              style:filter={optionFilter}
+            />
+          {:else if option.name}
+            <foreignObject 
+              class="PartitionText"
+              {...(() => {
+                const props = calc.getSvgTextProps(index)
+                return {
+                  ...props,
+                  x: props.x - 100,
+                  y: props.y - 50,
+                }
+              })()}
+              style:filter={optionFilter}
+              width={100}
+              height={100}
+            >
+              <div class="PartitionTextEntityContainer">
+                <p class="PartitionTextEntity">{option.name}</p>
+              </div>
+            </foreignObject>
+          {/if}
+        {/each}
+      </g>
+      
+      <image {...{
+        class: "PartitionsShadow",
+        ...calc.getShadowImage()
+      }} />
+    </g>
+
+    {#if theme.pointerMode === PointerMode.Partition}
+    <g class="PointerContainer" {...calc.getSpinnerProps()}>
+      <image
+        {...{
+          class: "HighLightAreaBackground",
+          ...calc.getBackgroundImageProps(0),
+        }}
+      />
+      <image
+        {...{
+          class: "HighLightArea",
+          ...calc.getBackgroundImageProps(1),
+        }}
+      />
+      
+      <path
+        class="PointerPartitionFrame"
+        {...calc.getPartitionFrame()}
+        {...{'stroke-width': isShowPrizeArea ? '3px' : '0px'}}
+      />
+    </g>
+    {/if}
+
+    <g
+      class="Center"
+      class:disabled={!spinable}
+      on:click={() => eventSpin()}
+    >
+      {#each calc.getThemedCenterImages() as themedImage}
+        <image {...calc.getThemedImageProp(themedImage)} />
       {/each}
     </g>
 
-    <g {...classWithPart("PartitionsEntity")}>
+    {#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}
+    </g>
+    {/if}
 
-        {#if option.image}
-          <g
-            use:renderImage={index}
-            style:filter={optionFilter}
-          />
-        {:else if option.name}
-          <text 
-            {...classWithPart("PartitionText")}
-            {...calc.getSvgTextProps(index)}
-            style:filter={optionFilter}
-          >
-            {option.name}
-          </text>
-        {/if}
+    {#if theme.pointerMode === PointerMode.Arrow}
+    <g class="PointerContainer" {...calc.getSpinnerProps()}>
+      {#each calc.getThemedPointerImages() as themedImage}
+        <image {...calc.getThemedImageProp(themedImage)} />
       {/each}
     </g>
-    
-    <image {...{
-      ...classWithPart("PartitionsShadow"),
-      ...calc.getShadowImage()
-    }} />
-  </g>
-
-  {#if theme.pointerMode === PointerMode.Partition}
-  <g {...classWithPart("Pointer")} {...calc.getSpinnerProps()}>
-    <image
-      {...{
-        ...classWithPart("HighLightAreaBackground"),
-        ...calc.getBackgroundImageProps(0),
-      }}
-    />
-    <image
-      {...{
-        ...classWithPart("HighLightArea"),
-        ...calc.getBackgroundImageProps(1),
-      }}
-    />
-    
-    <path
-      {...classWithPart("PointerPartitionFrame")}
-      {...calc.getPartitionFrame()}
-      {...{'stroke-width': isShowPrizeArea ? '3px' : '0px'}}
-    />
-  </g>
-  {/if}
+    {/if}
 
-  <g
-    {...classWithPart("Center")}
-    class:disabled={!spinable}
-    on:click={() => eventSpin()}
-  >
-    {#each calc.getThemedCenterImages() as themedImage}
-      <image {...calc.getThemedImageProp(themedImage)} />
-    {/each}
-  </g>
 
-  {#if theme.background.isShowingBulb}
-  <g id="RingCirclesGroup">
-    {#each options as option,index}
-      <image {...classWithPart("RingImage")} {...calc.getRingImageProps(index)} />
-      <image {...classWithPart("RingImage")} {...calc.getRingImageProps(index + 1/2)} />
-    {/each}
-  </g>
-  {/if}
+    <!-- defs -->
 
-  {#if theme.pointerMode === PointerMode.Arrow}
-  <g {...classWithPart("Pointer")} {...calc.getSpinnerProps()}>
-    {#each calc.getThemedPointerImages() as themedImage}
-      <image {...calc.getThemedImageProp(themedImage)} />
+    {#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}
-  </g>
+    <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}
-
-
-  <!-- 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">
-
-
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  $outlineColor: rgb(150, 54, 88);
-  $outlineWidth: 2px;
-
-  .LotteryProgramWof {
-    background: var(--emfe-w-color-contrast, #07072A);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding: 20px 0;
-  }
-
-  main {
-    max-width: 600px;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    min-height: 200px;
-  }
-
-  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;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .BackgroundCircle {
-    fill: #FFFFFF;
-    animation: color-animation 1s infinite linear alternate;
-  }
-
-  .RingCirclesGroup {
-    .RingCircle {
-      fill: #FFFFFF;
-      stroke: #FFFFFF;
-    }
-  }
-
-  .Center {
-    cursor: pointer;
-    
-    transition: filter;
-    transition-duration: 1s;
-    
-    &.disabled {
-      filter: grayscale(80%);
-    }
-
-    .CenterCircle {
-      fill: #3CE4BB;
-      stroke: $outlineColor;
-      stroke-width: $outlineWidth;
-      cursor: pointer;
-
-      transition: fill;
-      transition-duration: 1s;
-
-    }
-
-    .CenterText {
-      fill: #FFFFFF;
-    }
-  }
-
-  .PointerPartition {
-    opacity: 0.3;
-    fill: lightgoldenrodyellow;
-    stroke: red;
-    stroke-width: 6px;
-    stroke-dasharray: 12;
-  }
-
-  .Current {
-    color: #FFFFFF;
-  }
-
-  .PartitionText {
-    fill: #FFFFFF;
-    font-style: normal;
-    font-weight: 700;
-    text-anchor: end;
-    text-shadow: 0px 3px #000;
-    dominant-baseline: central;
-  }
-
-  .PartitionsShadow {
-    background-blend-mode: multiply;
-    mix-blend-mode: multiply;
-  }
+  @import './private.item.svg.scss';
 </style>