@everymatrix/lottery-program-wof 1.11.0 → 1.12.0

package/src/private.item.svg.svelte

@@ -1,56 +1,19 @@
 <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 { PointerMode, Lang } from './types';
+  import { getOptions, getSpinCondition, getSpinContainerSelector, Option } from './business';
   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 { classWithPart, setProps } from './util';
   import { Spinner } from './class.spinner';
+  import { SvgCalc } from './class.svgcalc';
+  import { Process } from './class.process';
+  import { _ } from './i18n';
 
   // properties
   export let lang: Lang = Lang.en
@@ -58,11 +21,6 @@
   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'
@@ -74,36 +32,40 @@
 
   // binds
   let svg: SVGElement;
+  let container
+
+  let spinner = new Spinner({
+    tick: (deg, _speed) => {
+      setProps(container, {
+        transform: `rotate(${deg})`,
+      })
+      speed = _speed * 0.5
+    }
+  })
 
   // states
   let spinable = true;
   let isShowPrizeArea = false;
-  let pointermode: PointerMode = PointerMode.Partition;
-  let spinner = new Spinner
+  let messageShown: boolean = false;
   let shownFirstCheck = false
+
   let speed: number = 0
 
   $: lotteryProgramForPlayer = lotteryprogramforplayer && (JSON.parse(lotteryprogramforplayer)) as LotteryProgramForPlayer
-  
-  let messageShown: boolean = false;
+  $: lotteryProgramForPlayer && (async () => {
 
-  $: 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
+    if(!options.length){
+      options = await getOptions(lotteryProgramForPlayer.program.wheelOfFortune.partitions, lang)
     }
   })()
+  
+  $: themeIndex = lotteryProgramForPlayer?.program?.metadata?.template || 0
   $: theme = themes[themeIndex]
-
-  const setMessage = (entry: string | object) => {
-    setMessageBase(id, entry)
-    messageShown = true
-  }
+  $: calc = new SvgCalc({
+    size, 
+    length: options.length, 
+    themeIndex,
+  })
 
   $: lotteryProgramForPlayer && checkSpinable()
 
@@ -113,92 +75,37 @@
     
     if(spinable){
       if(getSpinCondition(lotteryProgramForPlayer)){
-        setMessage({
+        process.setMessage({
           mode: 'spin-failed'
         })
       }else if(getSpinCondition(lotteryProgramForPlayer) && !lotteryProgramForPlayer.next){
-        setMessage(`You don't have any spins available. Please check T&C`)
+        process.setMessage($_('wof.NoNext'))
       }
     }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
+  $: process = new Process({
+    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)
+  })
 
   // events
   const eventSpin = async () => {
     if(!spinable) return;
 
-    if(!lotteryProgramForPlayer.current.remainingTimes){
+    if(!lotteryProgramForPlayer.current?.remainingTimes){
       if(lotteryProgramForPlayer.next){
-        setMessage({
+        process.setMessage({
           mode: 'show-next',
           modeValue: lotteryProgramForPlayer.next
         })
       }else{
-        setMessage(`You don't have any spins available. Please check T&C`)
+        process.setMessage($_('wof.NoNext'))
       }
       return;
     }
@@ -206,12 +113,10 @@
     spinable = false
     isShowPrizeArea = false
 
-    container = svg.querySelector(getSpinContainerSelector(pointermode))
+    container = svg.querySelector(getSpinContainerSelector(theme.pointerMode))
 
     spinner.launch()
-    const guid = `userid-${id}-${new Date().getTime()}`
-    drawer(guid)
-    
+    process.drawer(`userid-${id}-${new Date().getTime()}`)
   }
   onMountMessageLifeCycle({
     'wof-private-message-close': (data) => {
@@ -222,442 +127,157 @@
     },
   })
 
-  $: propsSpinner = {
-    transform: `rotate(${convertArcToDeg(0)})`, //arcStart
-    "transform-origin": `${centerPoint.x} ${centerPoint.y}`,
+  const renderImage = (node: SVGElement, index) => {
+    const image = options[index].image as SVGImageElement
+    setProps(image, calc.getSvgImageProps(index))
+    node.innerHTML = null
+    node.appendChild(image)
   }
 
-  $: 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)
-  })()
+  $: optionFilter = theme.pointerMode === PointerMode.Arrow && speed > 0.3 ? `blur(${speed}px)` : null
 </script>
 
         
-{#if size}
+{#if size && options.length}
 <svg
   bind:this={svg}
   width={size}
   height={size}
-  style={[
-    `${messageShown ? 'opacity: .3': ''}`,
-  ].join(';')}
-  
+  style:opacity={messageShown ? '.3': ''}
 >
-<!-- <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)`
-    }} />
-
+    {#each calc.backgroundCirclePropsArray() as props}
+      <circle {...props} />
+    {/each}
   </g>
     
-  <g {...classWithPart("Partitions")} {...propsSpinner}>
+  <g {...classWithPart("Partitions")} {...calc.getSpinnerProps()}>
     <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>
+      {#each options as option, index}
         <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)`}: {})
-          }}
+          {...classWithPart("PartitionBackground")}
+          {...calc.getPartitionBackgroundProp(index)}
         />
-
       {/each}
     </g>
 
-    <g id="Images">
-      <defs>
-        <filter id="f1" x="0" y="0">
-          <feGaussianBlur in="SourceGraphic" stdDeviation={pointermode === PointerMode.Arrow ? 2 * speed : 0} />
-        </filter>
-      </defs>
+    <g {...classWithPart("PartitionsEntity")}>
       {#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),
-          }}>
+        {#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>
-        {: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,
-      })
+      ...classWithPart("PartitionsShadow"),
+      ...calc.getShadowImage()
     }} />
   </g>
 
-  {#if pointermode === PointerMode.Partition && options[0]}
-  <g {...classWithPart("Pointer")} {...propsSpinner}>
+  {#if theme.pointerMode === PointerMode.Partition}
+  <g {...classWithPart("Pointer")} {...calc.getSpinnerProps()}>
     <image
       {...{
         ...classWithPart("HighLightAreaBackground"),
-        href: areaSecSvg,
-        ...getImageProps(options.length, radius, center),
+        ...calc.getBackgroundImageProps(0),
       }}
     />
     <image
       {...{
         ...classWithPart("HighLightArea"),
-        href: areaSvg,
-        ...getImageProps(options.length, radius, center),
+        ...calc.getBackgroundImageProps(1),
       }}
     />
     
-    
-    <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)}`,
-      }}
+      {...classWithPart("PointerPartitionFrame")}
+      {...calc.getPartitionFrame()}
+      {...{'stroke-width': isShowPrizeArea ? '3px' : '0px'}}
     />
   </g>
   {/if}
 
-
-  <g {...classWithPart("Center", spinable ? '' : 'disabled')}
+  <g
+    {...classWithPart("Center")}
+    class:disabled={!spinable}
     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}
+    {#each calc.getThemedCenterImages() as themedImage}
+      <image {...calc.getThemedImageProp(themedImage)} />
+    {/each}
   </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
-          )
-        }
-      />
+      <image {...classWithPart("RingImage")} {...calc.getRingImageProps(index)} />
+      <image {...classWithPart("RingImage")} {...calc.getRingImageProps(index + 1/2)} />
     {/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}
+  {#if theme.pointerMode === PointerMode.Arrow}
+  <g {...classWithPart("Pointer")} {...calc.getSpinnerProps()}>
+    {#each calc.getThemedPointerImages() as themedImage}
+      <image {...calc.getThemedImageProp(themedImage)} />
+    {/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}
 
@@ -782,9 +402,10 @@
     font-weight: 700;
     text-anchor: end;
     text-shadow: 0px 3px #000;
+    dominant-baseline: central;
   }
 
-  .PartitionShadow {
+  .PartitionsShadow {
     background-blend-mode: multiply;
     mix-blend-mode: multiply;
   }