@everymatrix/lottery-program-wof 1.22.2 → 1.22.5

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,18 +58,22 @@
     ].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)
 
@@ -72,12 +82,11 @@
 </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`,
@@ -114,7 +123,7 @@
   <p>{@html $_('wof.Loss')}</p>
   {/if}
 
-  {#if mode !== 'init-failed'}
+  {#if !['init-failed', 'show-next'].includes(mode) && !(mode === 'normal' && modeValue === 'NoNext')}
   <div>
     <button
       class="MessagePanelButton"

package/src/themes.image.base.ts

@@ -1,4 +1,3 @@
-import { pointPlus } from "./calc.point"
 
 interface ImageSize {
   width: number
@@ -12,58 +11,3 @@ export const renderSvgImageProps = (center: number, href: string, size: ImageSiz
   height: size.height,
   href,
 })
-
-export const themedImagesUpdater = (
-  images, imagesData, imagesConfig, ratio, fn, offset?
-) => {
-
-  let centerImagesComposed = {}
-
-  Object.keys(images).map(k => {
-
-    let _offset = {
-      x: 0,
-      y: 0
-    }
-
-    if(imagesData[k].offset){
-      _offset = pointPlus(_offset, imagesData[k].offset)
-    }
-
-    if(offset){
-      _offset = pointPlus(_offset, offset)
-    }
-
-    const rationalize = (object) => {
-      let _object = JSON.parse(JSON.stringify(object))
-
-      Object.keys(object).map(_key => {
-        _object[_key] = object[_key] * ratio
-      })
-
-      return _object
-    }
-
-    centerImagesComposed[k] = {
-      src: images[k],
-      props: rationalize(imagesData[k].props),
-      ... ( _offset ? {
-        offset: rationalize(_offset)
-      } : {})
-    }
-  })
-
-  const themedCenterImagesList = imagesConfig.map(i => {
-    return i.map(j => centerImagesComposed[j])
-  })
-
-  fn(themedCenterImagesList)
-}
-
-export const themedImageProps = (center, themedImage) => 
-  renderSvgImageProps(
-    center, 
-    themedImage.src, 
-    themedImage.props, 
-    themedImage.offset
-  )

package/src/themes.image.center.ts

@@ -1,141 +1,41 @@
+// @ts-nocheck
+import themeBgHaloSvg from './images/theme.bg.halo.svg'
+import themeBgBlackRingSvg from './images/theme.bg.blackring.svg'
+import themeCenter1 from './images/themeCenter1.svg'
+import themeCenter2 from './images/themeCenter2.svg'
 
-// @ts-ignore
-import spinSvg from './images/spin.svg'
-// @ts-ignore
-import centerArrowSvg from './images/centerArrow.svg'
-// @ts-ignore
-import centerArrow3Svg from './images/centerArrow3.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 centerBackground1Svg from './images/centerBackground1.svg'
-// @ts-ignore
-import centerCircleSvg from './images/centerCircle.svg'
-// @ts-ignore
-import centerArrowBgSvg from './images/centerArrowBg.svg'
+import theme1Bg3Svg from './images/theme1Bg3.svg'
+import theme2Bg3Svg from './images/theme2Bg3.svg'
 
-import { themedImagesUpdater } from './themes.image.base'
+import theme3Bg1 from './images/theme3Bg1.svg'
+import theme3Bg2 from './images/theme3Bg2.svg'
 
-export const centerImages = {
-  centerArrowSvg,
-  centerArrow3Svg,
-  centerText3Svg,
-  centerBackground2Svg,
-  centerPackSvg,
-  spinSvg,
-  centerArrowBgSvg,
-  centerCircleSvg,
-  centerBackground1Svg, 
-}
+import theme7Bg1 from './images/theme7Bg1.svg'
+import theme7Bg2 from './images/theme7Bg2.svg'
+import theme7Bg3 from './images/theme7Bg3.svg'
 
-export const centerImagesData = {
-  centerArrow3Svg: {
-    props: {
-      width: 92, 
-      height: 92
-    },
-  },
-  centerText3Svg: {
-    props: {
-      width:  42, 
-      height: 25
-    },
-  },
-  centerBackground2Svg: {
-    props: {
-      width: 128, 
-      height: 128
-    },
-  },
-  centerBackground1Svg: {
-    props: {
-      width: 128, 
-      height: 128
-    },
-  },
-  centerPackSvg: {
-    props: {
-      width:  76, 
-      height: 76
-    },
-  },
-  centerArrowSvg: {
-    props: {
-      width: 96, 
-      height: 96
-    },
-  },
-  spinSvg: {
-    props: {
-      width:  1.3 * 42, 
-      height: 1.3 * 25
-    },
-  },
-  centerArrowBgSvg: {
-    props: {
-      width:  28, 
-      height: 24,
-    },
-    offset: {
-      x: 0,
-      y: 45
-    }
-  },
-  centerCircleSvg: {
-    props: {
-      width:  88, 
-      height: 104,
-    },
-    offset: {
-      x: 0,
-      y: 6
-    }
-  }
-}
+import theme2Center from './images/theme2Center.svg'
+import theme3Center from './images/theme3Center.svg'
+import theme7Center from './images/theme7Center.svg'
+import theme7Light  from './images/theme7Light.svg'
 
+export const defines = () => `
+  --img-theme-BgBlackRing: url("${themeBgBlackRingSvg}");
+  --img-theme-BgHalo: url("${themeBgHaloSvg}");
+  --img-theme1-bg3: url("${theme1Bg3Svg}");
+  --img-theme2-bg3: url("${theme2Bg3Svg}");
+  --img-theme3-bg2: url("${theme3Bg2}");
+  --img-theme3-bg1: url("${theme3Bg1}");
+  --img-theme7-bg3: url("${theme7Bg3}");
+  --img-theme7-bg2: url("${theme7Bg2}");
+  --img-theme7-bg1: url("${theme7Bg1}");
+  
+  --img-theme-center1: url("${themeCenter1}");
+  --img-theme-center2: url("${themeCenter2}");
 
-export const centerImagesConfig = [
-  [ // 0
-    'centerBackground1Svg', 
-    'centerArrowSvg', 
-    'spinSvg'
-  ],
-  [ // 1
-    'centerBackground2Svg', 
-    'centerPackSvg'
-  ],
-  [ // 2
-    'centerBackground1Svg', 
-    'centerArrow3Svg', 
-    'centerText3Svg'
-  ],
-  [ // 3
-    'centerBackground1Svg', 
-    'centerArrowSvg', 
-    'spinSvg'
-  ],
-  [ // 4
-    'centerBackground1Svg', 
-    'spinSvg',
-    'centerArrowBgSvg',
-    'centerCircleSvg',
-  ],
-  [ // 5
-    'centerBackground1Svg', 
-    'spinSvg',
-    'centerArrowBgSvg',
-    'centerCircleSvg',
-  ]
-]
-
-export const themedCenterImagesUpdater = (ratio, fn, offset?) => 
-  themedImagesUpdater(
-    centerImages, 
-    centerImagesData, 
-    centerImagesConfig,
-    ratio, fn, offset
-  )
+  --img-theme2-center: url("${theme2Center}");
+  --img-theme3-center: url("${theme3Center}");
+  --img-theme7-center: url("${theme7Center}");
+  --img-theme7-light: url("${theme7Light}");
+  
+`

package/src/themes.image.pointer.ts

@@ -3,49 +3,27 @@
 import pointerArrowSvg from './images/pointerArrow.svg'
 // @ts-ignore
 import pointerArrow3Svg from './images/pointerArrow3.svg'
-import { themedImagesUpdater } from './themes.image.base'
+// @ts-ignore
+import pointerArrow6Svg from './images/pointerArrow6.svg'
   
-export const pointerImages = {
-  pointerArrowSvg,
-  pointerArrow3Svg,
-}
+export const themedCssPointer = (themeIndex: number) => {
 
-export const pointerImagesData = {
-  pointerArrowSvg: {
-    props: {
-      width: 60 / 2, 
-      height: 60 / 2
-    },
-  },
-  pointerArrow3Svg: {
-    props: {
-      width: 2.8 * 32 / 2, 
-      height: 2.8 * 48 / 2
-    },
+  switch(themeIndex){
+    case 1: 
+      return `
+        background-image: url("${pointerArrowSvg}");
+        background-position: center 46px;
+      `
+    case 2: 
+      return `
+        background-image: url("${pointerArrow3Svg}");
+        background-position: center 18px;
+      `
+    case 6:
+      return `
+        background-image: url("${pointerArrow6Svg}");
+        background-position: center 15px;
+      `
+    default: return ``
   }
-}
-
-export const pointerImagesConfig = [
-  [ // 0
-  ],
-  [ // 1
-    'pointerArrowSvg', 
-  ],
-  [ // 2
-    'pointerArrow3Svg', 
-  ],
-  [ // 3
-  ],
-  [ // 4
-  ],
-  [ // 5
-  ]
-]
-
-export const themedPointerImagesUpdater = (ratio, fn, offset?) => 
-  themedImagesUpdater(
-    pointerImages, 
-    pointerImagesData, 
-    pointerImagesConfig,
-    ratio, fn, offset
-  )
+}

package/src/themes.partitions.ts

@@ -190,4 +190,33 @@ export const partitions3 = {
       },
     ]
   ]
+}
+
+export const partitions4 = {
+  colorSchema: [
+    [
+      { 
+        color: '#F6AD3F',
+        offset: 0.17, 
+      },
+      {
+        color: '#AF8531',
+        offset: 1, 
+      },
+    ],
+    [
+      {
+        color: '#323234',
+        offset: 0, 
+      },
+      {
+        color: '#272425',
+        offset: 0.55,
+      },
+      {
+        color: '#231F1F',
+        offset: 1, 
+      }
+    ],
+  ]
 }

package/src/themes.ts

@@ -1,4 +1,4 @@
-import { partitions1, partitions2, partitions3 } from "./themes.partitions"
+import { partitions1, partitions2, partitions3, partitions4 } from "./themes.partitions"
 import { PointerMode } from "./types"
 
 const sizeSchema1 = {
@@ -14,6 +14,12 @@ const sizeSchema2 = {
   rRingOuter: 280,
   rBg1: 286,
 }
+const sizeSchema3 = {
+  radius    : 270,
+  rRingInner: 275,
+  rRingOuter: 280,
+  rBg1: 286,
+}
 
 const backgroundSchema1 = {
   isShowingBulb: false,
@@ -210,6 +216,12 @@ export const themes = [
     partitions: partitions3,
     pointerMode: PointerMode.Arrow,
   },
+  {
+    size: sizeSchema3,
+    background: backgroundSchema1,
+    partitions: partitions4,
+    pointerMode: PointerMode.Arrow,
+  },
 ]
 
 export const shadowSteps1 = [
@@ -264,12 +276,4 @@ export const shadowSteps = [
     offset: "1",
     color: "#899BAD",
   },
-]
-
-
-// <stop offset="0.81"
-// <stop offset="0.87"
-// <stop offset="0.91"
-// <stop offset="0.94"
-// <stop offset="0.97"
-// <stop offset="1"
+]

package/src/translations.js

@@ -9,7 +9,7 @@ export const translations = {
       ActiveTickets: `Active Tickets`,
       ImplicitTickets: `Implicit Tickets`,
       RemainingTimes: `Remaining Times`,
-      ShowNext: `The Wheel will be available on <strong>{startTime}</strong>. please wait till it is open.`,
+      ShowNext: `The Wheel will be available on<br /> <strong>{startTime}</strong> <br />Please wait till it is open.`,
       SpinFailed: `We are sorry that you don't have any Wheels available, please <strong>check T&C</strong> here to get a chance!`,
       DrawFailed: 'There was a problem to grant the reward. Please contact support',
       Congratulation: `Congratulations! You won a {prize}!`,

package/src/images/background.svg

@@ -1,27 +0,0 @@
-<svg width="375" height="400" viewBox="0 0 375 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_4318_310)">
-<path d="M337 200.999C337 283.839 269.855 350.999 187 350.999C104.145 350.999 37 283.839 37 200.999C37 118.158 100.302 54.9152 179.817 51.1611C182.197 51.0577 184.606 50.9985 187 50.9985C189.394 50.9985 191.803 51.0429 194.183 51.1611C273.683 54.9152 337 120.552 337 200.984V200.999Z" fill="url(#paint0_linear_4318_310)"/>
-</g>
-<defs>
-  <filter id="filter0_d_4318_310" x="-13" y="0.998535" width="400" height="400" 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>
-  <linearGradient id="paint0_linear_4318_310" x1="114.86" y1="325.947" x2="267.254" y2="61.9799" gradientUnits="userSpaceOnUse">
-  <stop stop-color="#FFB915"/>
-  <stop offset="0.24" stop-color="#BF8500"/>
-  <stop offset="0.41" stop-color="#FFE26A"/>
-  <stop offset="0.46" stop-color="#FFDD63"/>
-  <stop offset="0.53" stop-color="#FFCF51"/>
-  <stop offset="0.58" stop-color="#FFC13F"/>
-  <stop offset="0.82" stop-color="#FFB915"/>
-  <stop offset="1" stop-color="#FFF100"/>
-  </linearGradient>
-</defs>
-</svg>

package/src/images/background3.svg

@@ -1,13 +0,0 @@
-<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M320 159.992C320 248.353 248.368 320 160.008 320C71.6473 320 0 248.353 0 159.992C0 71.6319 67.5153 4.17827 152.33 0.169598C154.874 0.0616719 157.433 0 159.992 0C162.552 0 165.111 0.0462539 167.655 0.169598C252.454 4.17827 319.985 74.1913 319.985 159.992H320Z" fill="url(#paint0_linear_4318_430)"/>
-<defs>
-<linearGradient id="paint0_linear_4318_430" x1="268.812" y1="51.1877" x2="38.9458" y2="281.039" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEDC31"/>
-<stop offset="0.09" stop-color="#FDC347"/>
-<stop offset="0.27" stop-color="#FC8682"/>
-<stop offset="0.52" stop-color="#FA2CD7"/>
-<stop offset="0.76" stop-color="#987CDB"/>
-<stop offset="1" stop-color="#33D0E0"/>
-</linearGradient>
-</defs>
-</svg>

package/src/images/centerArrow.svg

@@ -1,50 +0,0 @@
-<svg width="89" height="92" viewBox="0 0 89 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_4318_351)">
-<path d="M66.3025 20.3267L61.3808 20.977C69.2141 26.4307 74.4018 35.4464 74.4905 45.7183C74.6383 62.5525 61.1148 76.3125 44.2806 76.4603C40.0388 76.5046 35.9744 75.6622 32.2942 74.1251L33.9939 70.0311L26.6336 70.9917L21.7119 71.6421L29.2496 81.5002L30.9493 77.3914C35.0581 79.1059 39.5807 80.037 44.325 79.9926C63.1101 79.8301 78.1855 64.4739 78.0229 45.6888C77.9342 35.5498 73.4116 26.4898 66.3173 20.3267H66.3025Z" fill="url(#paint0_linear_4318_351)"/>
-</g>
-<g filter="url(#filter1_d_4318_351)">
-<path d="M58.7797 10.4835L57.0653 14.5923C52.9565 12.8779 48.4339 11.9467 43.7043 11.9911C24.9192 12.1537 9.82907 27.5098 10.0064 46.2949C10.0951 56.4339 14.6177 65.4791 21.6972 71.6423L26.6189 70.992C18.7856 65.5382 13.6127 56.5226 13.524 46.2506C13.3762 29.4164 26.8997 15.6565 43.7339 15.5087C47.9757 15.4643 52.0254 16.3068 55.7203 17.8439L54.0206 21.9379L61.381 20.9772L66.3026 20.3269H66.3174L58.7797 10.4688V10.4835Z" fill="url(#paint1_linear_4318_351)"/>
-</g>
-<defs>
-<filter id="filter0_d_4318_351" x="11.7119" y="10.3267" width="76.3125" height="81.1733" 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="5"/>
-<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="BackgroundImageFix" result="effect1_dropShadow_4318_351"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_351" result="shape"/>
-</filter>
-<filter id="filter1_d_4318_351" x="0.00488281" y="0.46875" width="76.3125" height="81.1733" 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="5"/>
-<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="BackgroundImageFix" result="effect1_dropShadow_4318_351"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_351" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_4318_351" x1="71.8306" y1="24.4421" x2="40.2832" y2="80.2084" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFB915"/>
-<stop offset="0.24" stop-color="#BF8500"/>
-<stop offset="0.41" stop-color="#FFE26A"/>
-<stop offset="0.46" stop-color="#FFDD63"/>
-<stop offset="0.53" stop-color="#FFCF51"/>
-<stop offset="0.58" stop-color="#FFC13F"/>
-<stop offset="0.82" stop-color="#FFB915"/>
-<stop offset="1" stop-color="#FFF100"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4318_351" x1="17.448" y1="65.3064" x2="47.3802" y2="12.3922" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFB915"/>
-<stop offset="0.24" stop-color="#BF8500"/>
-<stop offset="0.41" stop-color="#FFE26A"/>
-<stop offset="0.46" stop-color="#FFDD63"/>
-<stop offset="0.53" stop-color="#FFCF51"/>
-<stop offset="0.58" stop-color="#FFC13F"/>
-<stop offset="0.82" stop-color="#FFB915"/>
-<stop offset="1" stop-color="#FFF100"/>
-</linearGradient>
-</defs>
-</svg>

package/src/images/centerArrow1.svg

@@ -1,18 +0,0 @@
-<svg width="89" height="92" viewBox="0 0 89 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-  
-    <linearGradient id="paint0_linear_4318_351" x1="71.8306" y1="24.4421" x2="40.2832" y2="80.2084" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#FFB915"/>
-    <stop offset="0.24" stop-color="#BF8500"/>
-    <stop offset="0.41" stop-color="#FFE26A"/>
-    <stop offset="0.46" stop-color="#FFDD63"/>
-    <stop offset="0.53" stop-color="#FFCF51"/>
-    <stop offset="0.58" stop-color="#FFC13F"/>
-    <stop offset="0.82" stop-color="#FFB915"/>
-    <stop offset="1" stop-color="#FFF100"/>
-    </linearGradient>
-  </defs>
-  <g filter="url(#filter0_d_4318_351)">
-    <path d="M66.3025 20.3267L61.3808 20.977C69.2141 26.4307 74.4018 35.4464 74.4905 45.7183C74.6383 62.5525 61.1148 76.3125 44.2806 76.4603C40.0388 76.5046 35.9744 75.6622 32.2942 74.1251L33.9939 70.0311L26.6336 70.9917L21.7119 71.6421L29.2496 81.5002L30.9493 77.3914C35.0581 79.1059 39.5807 80.037 44.325 79.9926C63.1101 79.8301 78.1855 64.4739 78.0229 45.6888C77.9342 35.5498 73.4116 26.4898 66.3173 20.3267H66.3025Z" fill="url(#paint0_linear_4318_351)"/>
-  </g>
-</svg>

package/src/images/centerArrow2.svg

@@ -1,5 +0,0 @@
-<svg width="89" height="92" viewBox="0 0 89 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g filter="url(#filter1_d_4318_351)">
-    <path d="M58.7797 10.4835L57.0653 14.5923C52.9565 12.8779 48.4339 11.9467 43.7043 11.9911C24.9192 12.1537 9.82907 27.5098 10.0064 46.2949C10.0951 56.4339 14.6177 65.4791 21.6972 71.6423L26.6189 70.992C18.7856 65.5382 13.6127 56.5226 13.524 46.2506C13.3762 29.4164 26.8997 15.6565 43.7339 15.5087C47.9757 15.4643 52.0254 16.3068 55.7203 17.8439L54.0206 21.9379L61.381 20.9772L66.3026 20.3269H66.3174L58.7797 10.4688V10.4835Z" fill="url(#paint1_linear_4318_351)"/>
-  </g>
-</svg>

package/src/images/centerArrow3.svg

@@ -1,46 +0,0 @@
-<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_4318_451)">
-<path d="M61.7341 10.0813L59.9148 14.3521C55.644 12.5328 50.9415 11.5152 45.9924 11.5152C26.3961 11.5152 10.5156 27.3957 10.5156 46.992C10.5156 57.5687 15.141 67.0507 22.48 73.5417L27.6296 72.9096C19.5043 67.1433 14.2005 57.692 14.2005 46.9765C14.2005 29.4155 28.4313 15.1847 45.9924 15.1847C50.4173 15.1847 54.6419 16.0943 58.4655 17.7287L56.6616 21.984L64.3398 21.0435L69.4894 20.4114H69.5048L61.7341 10.0659V10.0813Z" fill="url(#paint0_linear_4318_451)"/>
-</g>
-<g filter="url(#filter1_d_4318_451)">
-<path d="M69.4892 20.4272L64.3396 21.0594C72.4648 26.8257 77.784 36.2769 77.784 46.9924C77.784 64.5535 63.5532 78.7843 45.9922 78.7843C41.5672 78.7843 37.3427 77.8746 33.5036 76.2403L35.3075 71.9849L27.614 72.9254L22.4644 73.5576L30.235 83.903L32.0543 79.6323C36.3251 81.4516 41.043 82.4692 45.9768 82.4692C65.573 82.4692 81.4535 66.5886 81.4535 46.9924C81.4535 36.4157 76.8281 26.9336 69.4737 20.4272H69.4892Z" fill="url(#paint1_linear_4318_451)"/>
-</g>
-<defs>
-<filter id="filter0_d_4318_451" x="0.515625" y="0.065918" width="78.9893" height="83.4756" 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="5"/>
-<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 0.6 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4318_451"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_451" result="shape"/>
-</filter>
-<filter id="filter1_d_4318_451" x="2.46436" y="0.427246" width="98.9893" height="103.476" 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="10"/>
-<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 0 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4318_451"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_451" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_4318_451" x1="40.0256" y1="11.1298" x2="40.0256" y2="63.4275" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F8DA36"/>
-<stop offset="0.09" stop-color="#F8C14C"/>
-<stop offset="0.28" stop-color="#F88485"/>
-<stop offset="0.52" stop-color="#FA2CD7"/>
-<stop offset="0.76" stop-color="#987CDB"/>
-<stop offset="1" stop-color="#33D0E0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4318_451" x1="51.9743" y1="82.8546" x2="51.9743" y2="30.5877" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEDC31"/>
-<stop offset="0.09" stop-color="#FDC347"/>
-<stop offset="0.27" stop-color="#FC8682"/>
-<stop offset="0.52" stop-color="#FA2CD7"/>
-<stop offset="0.76" stop-color="#987CDB"/>
-<stop offset="1" stop-color="#33D0E0"/>
-</linearGradient>
-</defs>
-</svg>

package/src/images/centerArrowBg.svg

@@ -1,12 +0,0 @@
-<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 0L27.8564 24H0.143594L14 0Z" fill="url(#paint0_linear_4318_563)"/>
-<defs>
-<linearGradient id="paint0_linear_4318_563" x1="6.75676" y1="33.0147" x2="21.251" y2="-0.805239" gradientUnits="userSpaceOnUse">
-<stop offset="0.0604165" stop-color="#FFB915"/>
-<stop offset="0.2375" stop-color="#C48A02"/>
-<stop offset="0.477083" stop-color="#FFE067"/>
-<stop offset="0.721875" stop-color="#FFB915"/>
-<stop offset="1" stop-color="#FFF100"/>
-</linearGradient>
-</defs>
-</svg>