@everymatrix/lottery-program-wof 1.22.2 → 1.22.6

package/src/themes.image.center.ts

@@ -1,141 +1,68 @@
+// @ts-nocheck
+import themeBgHalo from './images/theme.bg.halo.svg'
+import themeBgBlackRing from './images/theme.bg.blackring.svg'
+import themeCenter1 from './images/themeCenter1.svg'
+import themeCenter2 from './images/themeCenter2.svg'
+import themePartitionLight from './images/themePartitionLight.svg'
+import themePointerArea from './images/themePointerArea.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 theme1Bg3 from './images/theme1Bg3.svg'
+import theme2Bg3 from './images/theme2Bg3.svg'
+import theme2Arrow from './images/theme2Arrow.svg'
 
-import { themedImagesUpdater } from './themes.image.base'
+import theme3Bg1 from './images/theme3Bg1.svg'
+import theme3Bg2 from './images/theme3Bg2.svg'
+import theme3Arrow from './images/theme3Arrow.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'
+import theme7Arrow from './images/theme7Arrow.svg'
 
+import themeShadow from './images/themeShadow.svg'
 
-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',
-  ]
-]
+const defineBottom = () => `
+  --img-theme-BgBlackRing: url("${themeBgBlackRing}");
+  --img-theme-BgHalo: url("${themeBgHalo}");
+  --img-theme1-bg3: url("${theme1Bg3}");
+  --img-theme2-bg3: url("${theme2Bg3}");
+  --img-theme3-bg2: url("${theme3Bg2}");
+  --img-theme3-bg1: url("${theme3Bg1}");
 
-export const themedCenterImagesUpdater = (ratio, fn, offset?) => 
-  themedImagesUpdater(
-    centerImages, 
-    centerImagesData, 
-    centerImagesConfig,
-    ratio, fn, offset
-  )
+  --img-theme7-bg3: url("${theme7Bg3}");
+  --img-theme7-bg2: url("${theme7Bg2}");
+  --img-theme7-bg1: url("${theme7Bg1}");
+
+`
+
+const defineMiddle = () => `
+  --img-theme-center1: url("${themeCenter1}");
+  --img-theme2-center: url("${theme2Center}");
+  --img-theme2-arrow: url("${theme2Arrow}");
+  --img-theme3-center: url("${theme3Center}");
+  --img-theme3-arrow: url("${theme3Arrow}");
+  --img-theme7-arrow: url("${theme7Arrow}");
+  --img-theme-center2: url("${themeCenter2}");
+  --img-theme7-center: url("${theme7Center}");
+`
+
+const defineTop = () => `
+  --img-theme-shadow: url("${themeShadow}");
+  --img-theme7-light: url("${theme7Light}");
+`
+ 
+export const defines = () => 
+  [
+    defineBottom(),
+    defineMiddle(),
+    defineTop(),
+    `  
+      --img-theme-partition-light: url("${themePartitionLight}");
+      --img-theme-pointer-area: url("${themePointerArea}");
+    `
+  ].join(' ')

package/src/themes.ts

@@ -1,4 +1,3 @@
-import { partitions1, partitions2, partitions3 } from "./themes.partitions"
 import { PointerMode } from "./types"
 
 const sizeSchema1 = {
@@ -9,267 +8,45 @@ const sizeSchema1 = {
 }
 
 const sizeSchema2 = {
-  radius    : 253,
+  radius    : 247,
   rRingInner: 259,
   rRingOuter: 280,
   rBg1: 286,
 }
-
-const backgroundSchema1 = {
-  isShowingBulb: false,
-  base: {
-    linearGradient: {
-      steps: [
-        {
-          offset: 0,
-          color: '#FFB915',
-        },
-        {
-          offset: 0.24,
-          color: '#BF8500',
-        },
-        {
-          offset: 0.41,
-          color: '#FFE26A',
-        },
-        {
-          offset: 0.46,
-          color: '#FFDD63',
-        },
-        {
-          offset: 0.53,
-          color: '#FFCF51',
-        },
-        {
-          offset: 0.58,
-          color: '#FFC13F',
-        },
-        {
-          offset: 0.82,
-          color: '#FFB915',
-        },
-        {
-          offset: 1,
-          color: '#FFF100',
-        },
-      ]
-    }
-  },
-  small: {
-    linearGradient: {
-      steps: [
-        {
-          offset: 0.4, 
-          color: "#303030",
-        },
-        {
-          offset: 1, 
-          color: "#000604",
-        },
-      ]
-    }
-  }
-
-  
-}
-
-const backgroundSchema2 = {
-  isShowingBulb: true,
-  base: {
-    linearGradient: {
-      steps: [
-        {
-          offset: "0.00312487",
-          color: "#454545",
-        },
-        {
-          offset: "0.310417",
-        },
-        {
-          offset: "0.628125",
-          color: "#575757",
-        },
-        {
-          offset: "1",
-        },
-      ]
-    }
-  },
-  small: {
-    linearGradient: {
-      steps: [
-        {
-          offset: "0.0604165",
-          color: "#FFB915",
-        },
-        {
-          offset: "0.2375",
-          color: "#B6820A",
-        },
-        {
-          offset: "0.477083",
-          color: "#FFE685",
-        },
-        {
-          offset: "0.721875",
-          color: "#FFB915",
-        },
-        {
-          offset: "1",
-          color: "#FFD600",
-        },
-      ]
-    }
-  }
-}
-
-const backgroundSchema3 = {
-  isShowingBulb: false,
-  base: {
-    linearGradient: {
-      steps: [
-        {
-          offset: 0,
-          color: '#FEDC31',
-        },
-        {
-          offset: 0.09,
-          color: '#FDC347',
-        },
-        {
-          offset: 0.27,
-          color: '#FC8682',
-        },
-        {
-          offset: 0.52,
-          color: '#FA2CD7',
-        },
-        {
-          offset: 0.76,
-          color: '#987CDB',
-        },
-        {
-          offset: 1,
-          color: '#33D0E0',
-        },
-      ]
-    }
-  },
-  small: {
-    linearGradient: {
-      steps: [
-        {
-          offset: 0.4, 
-          color: "#303030",
-        },
-        {
-          offset: 1, 
-          color: "#000604",
-        },
-      ]
-    }
-  }
-
-  
+const sizeSchema3 = {
+  radius    : 247,
+  rRingInner: 275,
+  rRingOuter: 280,
+  rBg1: 286,
 }
 
 export const themes = [
   {
     size: sizeSchema1,
-    background: backgroundSchema1,
-    partitions: partitions1,
     pointerMode: PointerMode.Partition,
   },
   {
     size: sizeSchema2,
-    background: backgroundSchema2,
-    partitions: partitions1,
     pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema1,
-    background: backgroundSchema3,
-    partitions: partitions2,
     pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema1,
-    background: backgroundSchema1,
-    partitions: partitions3,
     pointerMode: PointerMode.Partition,
   },
   {
     size: sizeSchema1,
-    background: backgroundSchema1,
-    partitions: partitions3,
     pointerMode: PointerMode.Arrow,
   },
   {
     size: sizeSchema2,
-    background: backgroundSchema2,
-    partitions: partitions3,
     pointerMode: PointerMode.Arrow,
   },
-]
-
-export const shadowSteps1 = [
-  {
-    offset: "0.41",
-    color: "white",
-  },
-  {
-    offset: "0.57",
-    color: "#FCFCFD",
-  },
-  {
-    offset: "0.61",
-    color: "#F3F4F6",
-  },
   {
-    offset: "0.74",
-    color: "#E9ECF0",
-  },
-  {
-    offset: "0.87",
-    color: "#B9C3CE",
-  },
-  {
-    offset: "1",
-    color: "#899BAD",
-  },
-]
-
-export const shadowSteps = [
-  {
-    offset: "0.81",
-    color: "white",
-  },
-  {
-    offset: "0.87",
-    color: "#FCFCFD",
-  },
-  {
-    offset: "0.91",
-    color: "#F3F4F6",
-  },
-  {
-    offset: "0.94",
-    color: "#E9ECF0",
-  },
-  {
-    offset: "0.97",
-    color: "#B9C3CE",
-  },
-  {
-    offset: "1",
-    color: "#899BAD",
+    size: sizeSchema3,
+    pointerMode: PointerMode.Arrow,
   },
 ]
-
-
-// <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

@@ -2,14 +2,14 @@ export const translations = {
   en: {
     wof: {
       NoContent: `You don't have any lottery programs available now.`,
-      NoNext: `You don't have any spins available. Please check T&C`,
+      NoNext: `You don't have any spins available. Please check <a href="javascript:void(0)">Terms and Conditions</a>`,
       NoHistories: `No histories`,
       Program: `Program`,
       History: `History`,
       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/business.dom.test.ts

@@ -1,34 +0,0 @@
-import { getColorSchema } from "./business.dom"
-import { partitions3, partitions2, partitions1 } from "./themes.partitions"
-
-const partitionsList = {
-  partitions1,
-  partitions2,
-  partitions3,
-}
-
-const maxLength = 12
-
-const tester = (iLength, partitions) => {
-
-  const color = (i) => getColorSchema(i, iLength, partitions.colorSchema)[0].color
-  
-  const colors = []
-
-  for(let i = 0; i < iLength; i++){
-    colors.push(color(i))
-  }
-
-  expect(colors[0]).not.toEqual((colors[iLength - 1]))
-}
-
-describe("check if first color is not equal last color", () => {
-  Object.keys(partitionsList).map(key => {
-    const partitions = partitionsList[key]
-    describe("for " + key, () => {
-      for(let length = 2; length < maxLength; length ++){
-        test('length ' + length, () => tester(length, partitions))
-      }
-    })
-  })
-})

package/src/business.dom.ts

@@ -1,21 +0,0 @@
-
-export const getPropsOfBackgroundCircle = (radius, rRingOuter, rRingInner) => ({
-  cx: radius,
-  cy: radius, 
-  r: rRingInner, 
-  'stroke-width': `${(rRingOuter - rRingInner) * 2}px`
-})
-
-// color schema length must be greater than 2
-export const getColorSchema = (index, length, colorSchema) => {
-  if(
-    length > colorSchema.length &&
-    length % colorSchema.length === 1 &&
-    index === length - 1
-  ){
-    return colorSchema[1 % colorSchema.length]
-  }
-
-  return colorSchema[index % colorSchema.length]
-  
-}