@everymatrix/lottery-program-wof 1.3.2

package/src/private.item.svg.svelte

@@ -0,0 +1,791 @@
+<svelte:options tag={'lottery-program-wof-private-item-svg'} />
+
+<script lang="ts">
+  // @ts-ignore
+  import lightSvg from './images/light.svg'
+  // @ts-ignore
+  import areaSvg from './images/area.svg'
+  // @ts-ignore
+  import areaSecSvg from './images/areaSec.svg'
+  // @ts-ignore
+  import centerArrowSvg from './images/centerArrow.svg'
+  // @ts-ignore
+  import centerArrow3Svg from './images/centerArrow3.svg'
+  // @ts-ignore
+  import spinSvg from './images/spin.svg'
+  // @ts-ignore
+  import backgroundShadowSvg from './images/backgroundShadow.svg'
+  // @ts-ignore
+  import centerPackSvg from './images/centerPack.svg'
+  // @ts-ignore
+  import centerText3Svg from './images/centerText3.svg'
+  // @ts-ignore
+  import centerBackground2Svg from './images/centerBackground2.svg'
+  // @ts-ignore
+  import pointerArrowSvg from './images/pointerArrow.svg'
+  // @ts-ignore
+  import pointerArrow3Svg from './images/pointerArrow3.svg'
+  // @ts-ignore
+  import centerCircleSvg from './images/centerCircle.svg'
+  // @ts-ignore
+  import centerArrowBgSvg from './images/centerArrowBg.svg'
+
+  // types
+  import { ArrowMode, PointerMode, Lang } from './types';
+  import { findDegWithPointerMode, getSpinCondition, getSpinContainerSelector, Option } from './business';
+  import { setMessage as setMessageBase } from './business';
+  import { getColorSchema, getSvgImageProps, getSvgTextProps } from './business.dom';
+  import { api } from './business';
+  import { convertArcToDeg, getArcLength } from './calc';
+  import { 
+    getTrianglePoints,
+    getPartitionProps, 
+    getRingImageProps,
+    getImageProps,
+    getTwoPointsOfLineGradient,
+    getSymmetricalPointFromScalar,
+  } from './calc.point';
+  import { onMountMessageLifeCycle, _postMessage } from './message';
+  import type { LotteryProgramForPlayer } from './types.business';
+  import { themes } from './themes';
+  import { renderSvgImageProps } from './calc.image';
+  import { classWithPart, delay, setProps } from './util';
+  import { Spinner } from './class.spinner';
+
+  // properties
+  export let lang: Lang = Lang.en
+  export let endpoint: string = ''
+  export let session: string = ''
+
+  export let lotteryprogramforplayer: string = undefined
+  export let themeindex: string = '0'
+
+  export let arrowmode: ArrowMode = ArrowMode.DownFromTop;
+  export let spinduration: string = '3'
+  export let spinrotation: string = '3'
+
+  export let id: string = undefined
+  export let sizeraw: string = '0'
+  $: size = Number(sizeraw) || 0;
+
+  export let optionsraw: string = '[]'
+  let options: Option[] = []
+  $: options = JSON.parse(optionsraw);
+
+  // binds
+  let svg: SVGElement;
+
+  // states
+  let spinable = true;
+  let isShowPrizeArea = false;
+  let pointermode: PointerMode = PointerMode.Partition;
+  let spinner = new Spinner
+  let shownFirstCheck = false
+  let speed: number = 0
+
+  $: lotteryProgramForPlayer = lotteryprogramforplayer && (JSON.parse(lotteryprogramforplayer)) as LotteryProgramForPlayer
+  
+  let messageShown: boolean = false;
+
+  $: themeIndex = Number(themeindex)
+  $: pointermode = (() => {
+    switch (themeIndex) {
+      case 0: return PointerMode.Partition
+      case 1: return PointerMode.Arrow
+      case 2: return PointerMode.Arrow
+      case 3: return PointerMode.Partition
+      case 4: return PointerMode.Arrow
+      case 5: return PointerMode.Arrow
+    }
+  })()
+  $: theme = themes[themeIndex]
+
+  const setMessage = (entry: string | object) => {
+    setMessageBase(id, entry)
+    messageShown = true
+  }
+
+  $: lotteryProgramForPlayer && checkSpinable()
+
+  const checkSpinable = () => {
+    if(shownFirstCheck) return;
+    shownFirstCheck = true
+    
+    if(spinable){
+      if(getSpinCondition(lotteryProgramForPlayer)){
+        setMessage({
+          mode: 'spin-failed'
+        })
+      }else if(getSpinCondition(lotteryProgramForPlayer) && !lotteryProgramForPlayer.next){
+        setMessage(`You don't have any spins available. Please check T&C`)
+      }
+    }else{
+      // hasQueuedMessage = true
+    }
+  }
+
+  const getDeg = (index?: number) => findDegWithPointerMode(index || options.length - 1, options.length, pointermode)
+
+  const drawer = async (guid, frequency: number = 0) => {
+
+    let index
+
+    const stage = {
+      success: (message) => {
+        _postMessage({ id, type: 'wof-private-message-spin-before' })
+
+        const cb = () => {
+          setTimeout(() => {
+            _postMessage({ id, type: 'wof-private-message-spin-after' })
+            isShowPrizeArea = true
+            setMessage(message)
+          }, 1000)
+        }
+
+        spinner.halt(getDeg(index), cb)
+      },
+      failed: () => {
+        _postMessage({ id, type: 'wof-private-message-spin-before' })
+        
+        const cb = () => {
+          setTimeout(() => {
+            setMessage('There was a problem to grant the reward. Please contact support')
+            _postMessage({ id, type: 'wof-private-message-spin-after' })
+          }, 1000)
+        }
+
+        spinner.halt(getDeg(index), cb)
+      }
+    }
+
+    try {
+      const { data, message, index: _index } = await api.draw(endpoint, session, id, guid, options, pointermode)
+      index = _index
+      
+      if(!data.success)                 throw new Error()
+      if(data.item.state === "drawn")   throw new Error()
+
+      stage.success(message)
+      
+    } catch (e) {
+      if(frequency < 4){
+        drawer(guid, frequency + 1)
+      }else{
+        stage.failed()
+      }
+    }
+
+    
+  }
+
+  let container
+  const setDeg = (deg, _speed) => {
+    setProps(container, {
+      transform: `rotate(${deg})`,
+    })
+    speed = _speed * 0.5
+  }
+  spinner.tick = setDeg
+
+  // events
+  const eventSpin = async () => {
+    if(!spinable) return;
+
+    if(!lotteryProgramForPlayer.current.remainingTimes){
+      if(lotteryProgramForPlayer.next){
+        setMessage({
+          mode: 'show-next',
+          modeValue: lotteryProgramForPlayer.next
+        })
+      }else{
+        setMessage(`You don't have any spins available. Please check T&C`)
+      }
+      return;
+    }
+    
+    spinable = false
+    isShowPrizeArea = false
+
+    container = svg.querySelector(getSpinContainerSelector(pointermode))
+
+    spinner.launch()
+    const guid = `userid-${id}-${new Date().getTime()}`
+    drawer(guid)
+    
+  }
+  onMountMessageLifeCycle({
+    'wof-private-message-close': (data) => {
+      if(data.id !== id) return;
+      
+      spinable = true
+      messageShown = false
+    },
+  })
+
+  $: propsSpinner = {
+    transform: `rotate(${convertArcToDeg(0)})`, //arcStart
+    "transform-origin": `${centerPoint.x} ${centerPoint.y}`,
+  }
+
+  $: rCircleCenter = radius / 5;
+  $: arrowPoints = getTrianglePoints(size/2, size/20, size/13, arrowmode, rCircleCenter)
+
+  $: center = size / 2
+  $: centerPoint = getSymmetricalPointFromScalar(center)
+
+  // ratio
+  $: ratio = size / 375
+  $: radius     = theme.size.radius     / 2 * ratio
+  $: rRingInner = theme.size.rRingInner / 2 * ratio
+  $: rRingOuter = theme.size.rRingOuter / 2 * ratio
+  
+  $: size && (() => {
+
+    // console.log('sizeraw changed');
+    setTimeout(() => {
+      // console.log('spinner.deg', spinner.deg);
+      
+      if(container){
+        // setDeg(spinner.deg)
+      }
+
+    }, 50)
+  })()
+</script>
+
+        
+{#if size}
+<svg
+  bind:this={svg}
+  width={size}
+  height={size}
+  style={[
+    `${messageShown ? 'opacity: .3': ''}`,
+  ].join(';')}
+  
+>
+<!-- <defs>
+  <linearGradient id="paint0_linear_4318_345" x1="246.941" y1="47.0578" x2="35.8266" y2="258.172" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#000604"/>
+  <stop offset="0.4" stop-color="#303030"/>
+  <stop offset="1" stop-color="#000604"/>
+  </linearGradient>
+</defs> -->
+  <!-- <svg width="375" height="387" viewBox="0 0 375 387" fill="none" xmlns="http://www.w3.org/2000/svg">
+    
+    <g filter="url(#filter0_d_4318_362)">
+      <path d="M89.0632 89.8008C31.5247 143.881 28.7204 234.398 82.8008 291.936C136.881 349.475 227.398 352.279 284.936 298.199C342.475 244.118 345.291 153.614 291.199 96.0631C237.107 38.5124 146.614 35.7089 89.0632 89.8008Z" fill="url(#paint0_linear_4318_362)"/>
+    </g>
+
+    <defs>
+      <filter id="filter0_d_4318_362" x="-5.99414" y="0.99707" width="385.992" height="385.997" 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_362"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_362" result="shape"/>
+      </filter>
+
+      <linearGradient id="paint0_linear_4318_362" x1="136.465" y1="52.147" x2="243.827" y2="336.838" gradientUnits="userSpaceOnUse">
+        <stop offset="0.00312487" stop-color="#454545"/>
+        <stop offset="0.310417"/>
+        <stop offset="0.628125" stop-color="#575757"/>
+        <stop offset="1"/>
+      </linearGradient>
+    </defs>
+  </svg> -->
+  <!-- <svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M139.993 0.000244141C62.6744 0.000244141 0 62.6746 0 139.993C0 217.312 62.6744 280 139.993 280C217.312 280 280 217.312 280 139.993C280 62.6746 217.312 0.000244141 139.993 0.000244141ZM139.993 257.893C74.8826 257.893 22.093 205.118 22.093 139.993C22.093 74.8687 74.8826 22.0933 139.993 22.0933C205.103 22.0933 257.893 74.8828 257.893 139.993C257.893 205.104 205.117 257.893 139.993 257.893Z" fill="url(#paint0_linear_4318_363)"/>
+    <defs>
+    <linearGradient id="paint0_linear_4318_363" x1="76.6217" y1="288.879" x2="197.5" y2="5.00024" gradientUnits="userSpaceOnUse">
+    <stop offset="0.0604165" stop-color="#FFB915"/>
+    <stop offset="0.2375" stop-color="#B6820A"/>
+    <stop offset="0.477083" stop-color="#FFE685"/>
+    <stop offset="0.721875" stop-color="#FFB915"/>
+    <stop offset="1" stop-color="#FFD600"/>
+    </linearGradient>
+    </defs>
+    </svg> -->
+
+  
+  <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>
+  
+  <g {...classWithPart("BackgroundCircleGroup")} filter="url(#BgHalo)">
+    
+    <defs>
+      <linearGradient {...{
+        id: "BgRingBaseLinearGradient" ,
+        gradientTransform: "rotate(0)",
+        gradientUnits: "userSpaceOnUse",
+      }}>
+        {#each theme.background.base.linearGradient.steps as step, index}
+          <stop offset={step.offset} stop-color={step.color} />
+        {/each}
+      </linearGradient>
+    </defs>
+    <circle {...{
+      fill: `url(#BgRingBaseLinearGradient)`,
+      cx: center,
+      cy: center,
+      r: theme.size.rBg1 / 2 * ratio,
+      style: `transform-origin: ${center}px ${center}px; transform: rotate(135deg)`
+    }} />
+
+    <defs>
+      <linearGradient {...{
+        id: "BgRingSmallLinearGradient",
+        gradientTransform: "rotate(0)",
+        radientUnits: "userSpaceOnUse",
+      }}>
+        {#each theme.background.small.linearGradient.steps as step, index}
+          <stop offset={step.offset} stop-color={step.color} />
+        {/each}
+      </linearGradient>
+    </defs>
+    <circle {...{
+      fill: `url(#BgRingSmallLinearGradient)`,
+      cx: center,
+      cy: center,
+      r: rRingOuter,
+    }} />
+
+    <circle {...{
+      fill: `url(#BgRingBaseLinearGradient)`,
+      cx: center,
+      cy: center,
+      r: rRingInner,
+      style: `transform-origin: ${center}px ${center}px; transform: rotate(45deg)`
+    }} />
+
+  </g>
+    
+  <g {...classWithPart("Partitions")} {...propsSpinner}>
+    <g {...classWithPart("PartitionsBackground")}>
+      <defs>
+      <linearGradient
+        id="LGPartitionStroke"
+        gradientUnits="userSpaceOnUse"
+        {... {
+          gradientTransform: "rotate(45)",
+        }}
+      >
+        <stop stop-color="#F28F00"/>
+        <stop offset="0.27" stop-color="#F5A318"/>
+        <stop offset="0.85" stop-color="#FCD755"/>
+        <stop offset="1" stop-color="#FFE767"/>
+      </linearGradient>
+      </defs>
+      {#each options as option,index}
+      
+        <defs>
+          <linearGradient 
+            id={`grad${index}`} 
+            {...getTwoPointsOfLineGradient(center, index, options.length, -1 * Math.PI / 2)}
+            gradientUnits="userSpaceOnUse" 
+          >
+            {#each getColorSchema(index, options.length, theme.partitions.colorSchema) as _colorSchema}
+              <stop offset={_colorSchema.offset} stop-color={_colorSchema.color} />
+            {/each}
+          </linearGradient>
+        </defs>
+        <path
+          {...{
+            ...classWithPart("PartitionBackground"),
+            ...getPartitionProps(index, options.length, radius, center),
+            fill: `url(#grad${index})`,
+            strokeWidth: '0.5px',
+            'stroke-dasharray': `${radius} ${getArcLength(radius, 360 / options.length)}`,
+            ...((themeIndex === 0 || themeIndex) === 1 ? {stroke: `url(#LGPartitionStroke)`}: {})
+          }}
+        />
+
+      {/each}
+    </g>
+
+    <g id="Images">
+      <defs>
+        <filter id="f1" x="0" y="0">
+          <feGaussianBlur in="SourceGraphic" stdDeviation={2 * speed} />
+        </filter>
+      </defs>
+      {#each options as option,index}
+
+        {#if option.name}
+          <text filter="url(#f1)" dominant-baseline="central" {...{
+            ...classWithPart("PartitionText"),
+            ...getSvgTextProps(ratio, index, radius, center, options.length, pointermode, arrowmode),
+          }}>
+            {option.name}
+          </text>
+        {:else if option.image}
+          <image {...{
+            ...classWithPart("PartitionImage"),
+            ...getSvgImageProps(ratio, index, radius, center, options.length, pointermode, arrowmode)
+          }} />
+        {/if}
+      {/each}
+    </g>
+    
+    <!-- Background Shadow -->
+    <image {...{
+      ...classWithPart("PartitionShadow"),
+      ...renderSvgImageProps(center, backgroundShadowSvg, { 
+        width: (rRingInner - 3.2 * ratio) * 2, 
+        height: (rRingInner - 3.2 * ratio) * 2,
+      })
+    }} />
+  </g>
+
+  {#if pointermode === PointerMode.Partition && options[0]}
+  <g {...classWithPart("Pointer")} {...propsSpinner}>
+    <image
+      {...{
+        ...classWithPart("HighLightAreaBackground"),
+        href: areaSecSvg,
+        ...getImageProps(options.length, radius, center),
+      }}
+    />
+    <image
+      {...{
+        ...classWithPart("HighLightArea"),
+        href: areaSvg,
+        ...getImageProps(options.length, radius, center),
+      }}
+    />
+    
+    
+    <defs>
+      <linearGradient id="GPointerPartitionFrame" x1="50.7564" y1="-9.24463" x2="50.7564" y2="115.67" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E7A60D"/>
+      <stop offset="0.378125" stop-color="#FFDD64"/>
+      <stop offset="1" stop-color="#FFF100"/>
+      </linearGradient>
+    </defs>
+    <path
+      {...{
+        ...classWithPart("PointerPartitionFrame"),
+        ...getPartitionProps(0, options.length, radius, center),
+        fill: `transparent`,
+        stroke: `url(#GPointerPartitionFrame)`,
+        'stroke-width': isShowPrizeArea ? '3px' : '0px',
+        'stroke-dasharray': `${radius} ${getArcLength(radius, 360 / options.length)}`,
+      }}
+    />
+  </g>
+  {/if}
+
+
+  <g {...classWithPart("Center", spinable ? '' : 'disabled')}
+    on:click={() => eventSpin()}
+  >
+
+    <defs>
+      <!-- <filter 
+        {...{
+          width: 122 * ratio,
+          height: 122 * ratio,
+        }}
+        id="FilterCenterCircle" x="-0.000488281" y="-0.000976562" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="FilterCenterCircleBackgroundImageFix"/>
+        <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="15"/>
+        <feComposite in2="hardAlpha" operator="out"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+        <feBlend mode="normal" in2="FilterCenterCircleBackgroundImageFix" result="FilterCenterCircleeffect1_dropShadow_4318_347"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="FilterCenterCircleeffect1_dropShadow_4318_347" result="shape"/>
+      </filter> -->
+      <linearGradient id="LGCenterCircle" x1="86.7076" y1="35.306" x2="24.1663" y2="97.8472" gradientUnits="userSpaceOnUse">
+      <stop offset="0.28" stop-color="#303030"/>
+      <stop offset="1" stop-color="#000604"/>
+      </linearGradient>
+    </defs>
+    <g 
+      {...{
+        // filter: "url(#FilterCenterCircle)",
+      }}
+    >
+      <circle {...{
+        fill: `url(#LGCenterCircle)`,
+        cx: center,
+        cy: center,
+        r: 66 / 2 * ratio,
+      }} />
+    </g>
+
+
+    {#if themeIndex === 0 || themeIndex === 3}
+      <!-- Center Ring Arrow -->
+      <image {...renderSvgImageProps(center, centerArrowSvg, { 
+        width: 96 * ratio, 
+        height: 96 * ratio
+      })} />
+
+    {/if}
+    {#if themeIndex === 0 || themeIndex === 3 || themeIndex === 4 || themeIndex === 5}
+      <!-- Center Spin Text Background -->
+      <image {...renderSvgImageProps(center, spinSvg, { 
+        width:  1.3 * 42 * ratio, 
+        height: 1.3 * 25 * ratio
+      })} />
+    {/if}
+    {#if themeIndex === 4 || themeIndex === 5}
+
+      <image {...renderSvgImageProps(center, centerArrowBgSvg, { 
+        width:  28 * ratio, 
+        height: 24 * ratio
+      }, {
+        x: 0,
+        y: 45 * ratio
+      })} />
+      <image {...renderSvgImageProps(center, centerCircleSvg, { 
+        width:  88 * ratio, 
+        height: 104 * ratio
+      }, {
+        x: 0,
+        y: 6 * ratio
+      })} />
+    {/if}
+    {#if themeIndex === 1}
+      <!-- Center Background2 -->
+      <image {...renderSvgImageProps(center, centerBackground2Svg, { 
+        width: 128 * ratio, 
+        height: 128 * ratio
+      })} />
+      <!-- Center Spin Text Background -->
+      <image {...renderSvgImageProps(center, centerPackSvg, { 
+        width:  76 * ratio, 
+        height: 76 * ratio
+      })} />
+    {/if}
+    {#if themeIndex === 2}
+      <image {...renderSvgImageProps(center, centerArrow3Svg, { 
+        width: 92 * ratio, 
+        height: 92 * ratio
+      })} />
+      <image {...renderSvgImageProps(center, centerText3Svg, { 
+        width:  42 * ratio, 
+        height: 25 * ratio
+      })} />
+      
+    {/if}
+  </g>
+
+  {#if theme.background.isShowingBulb}
+  <g id="RingCirclesGroup">
+    {#each options as option,index}
+      <image
+        href={lightSvg}
+        {...getRingImageProps(
+            index, 
+            options.length, rRingOuter, rRingInner, center, ratio
+          )
+        }
+      />
+      <image
+        href={lightSvg}
+        {...getRingImageProps(
+            index + 1/2, 
+            options.length, rRingOuter, rRingInner, center, ratio
+          )
+        }
+      />
+    {/each}
+  </g>
+  {/if}
+
+  
+  {#if pointermode === PointerMode.Arrow}
+  <g {...classWithPart("Pointer")} {...propsSpinner}>
+
+      {#if themeIndex === 1}
+      <image
+        {...{
+          ...classWithPart("PointerArrow"),
+          href: pointerArrowSvg,
+          x: center - 60 / 2 / 2 * ratio,
+          y: center - (rRingOuter + rRingInner) / 2 - 80 / 2 / 2 * ratio,
+          width: 60 / 2 * ratio,
+          height: 80 / 2 * ratio,
+        }}
+      />
+      {:else if themeIndex === 2}
+        <image
+          {...renderSvgImageProps(center, pointerArrow3Svg, {
+            width: 2.8 * 32 / 2 * ratio,
+            height: 2.8 * 48 / 2 * ratio,
+          }, {
+            x: 0,
+            y: (rRingOuter + rRingInner) / 2,
+          })}
+          {...{
+            ...classWithPart("PointerArrow"),
+          }}
+        />
+      {:else if themeIndex === 4 || themeIndex === 5}
+        
+  
+      {:else}
+        <polygon {...{
+          ...classWithPart("PointerArrow"),
+          points: arrowPoints,
+          fill: 'blue',
+        }} />
+      {/if}
+  </g>
+  {/if}
+
+</svg>
+{/if}
+
+<style lang="scss">
+
+  :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;
+  }
+
+  .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;
+  }
+
+  .PartitionShadow {
+    background-blend-mode: multiply;
+    mix-blend-mode: multiply;
+  }
+</style>