@everymatrix/lottery-program-wof 1.3.2

package/src/images/light.svg

@@ -0,0 +1,19 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.13725 6.59296C-1.06246 11.7081 1.3605 17.6636 6.54907 19.8949C11.7376 22.1261 17.727 19.7883 19.9267 14.6732C22.1264 9.55803 19.7035 3.60256 14.5149 1.37127C9.32636 -0.860015 3.33697 1.47782 1.13725 6.59296Z" fill="url(#paint0_radial_4318_413)"/>
+<defs>
+<radialGradient id="paint0_radial_4318_413" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.4878 10.6315) rotate(-156.73) scale(10.1906 10.0463)">
+<stop offset="0.3" stop-color="white"/>
+<stop offset="0.3099" stop-color="#FFFCDB"/>
+<stop offset="0.3232" stop-color="#FFF9B2"/>
+<stop offset="0.3381" stop-color="#FFF68C"/>
+<stop offset="0.3543" stop-color="#FFF36C"/>
+<stop offset="0.3722" stop-color="#FFF150"/>
+<stop offset="0.3925" stop-color="#FFEF3A"/>
+<stop offset="0.4161" stop-color="#FFEE29"/>
+<stop offset="0.4453" stop-color="#FFED1E"/>
+<stop offset="0.4863" stop-color="#FFEC17"/>
+<stop offset="0.6" stop-color="#FFEC15"/>
+<stop offset="1" stop-color="#FFEC15" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

package/src/images/partition1.svg

@@ -0,0 +1,10 @@
+
+<svg width="112" height="128" viewBox="0 0 112 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M111.284 12.6811C94.4942 4.55217 75.65 0 55.7416 0C35.8333 0 16.989 4.55217 0.199219 12.6811C1.98757 11.8238 3.80549 10.9962 5.6234 10.2128L55.7416 127.727L105.86 10.2128C107.678 10.9962 109.496 11.809 111.284 12.6811Z" fill="url(#paint0_linear_4318_319)"/>
+  <defs>
+  <linearGradient id="paint0_linear_4318_319" x1="55.7416" y1="0" x2="55.7416" y2="127.742" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#002634"/>
+  <stop offset="1" stop-color="#009C9C"/>
+  </linearGradient>
+  </defs>
+</svg>

package/src/images/pointerArrow.svg

@@ -0,0 +1,24 @@
+<svg width="42" height="46" viewBox="0 0 42 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4318_419)">
+<path d="M21 38.0002L8.00962 8.00025L33.9904 8.00025L21 38.0002Z" fill="url(#paint0_linear_4318_419)"/>
+</g>
+<defs>
+<filter id="filter0_d_4318_419" x="0.00976562" y="0.000244141" width="41.9805" height="46" 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="4"/>
+<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_419"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_419" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4318_419" x1="27.7905" y1="-3.26818" x2="6.23495" y2="34.4541" 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>

package/src/images/pointerArrow3.svg

@@ -0,0 +1,25 @@
+<svg width="48" height="63" viewBox="0 0 48 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4318_464)">
+<path d="M24 55L8 29.0689L18.6577 29.0689L16.35 8L24 8L31.65 8L29.3423 29.0689L40 29.0689L24 55Z" fill="url(#paint0_linear_4318_464)"/>
+</g>
+<defs>
+<filter id="filter0_d_4318_464" x="0" y="0" width="48" height="63" 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="4"/>
+<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_464"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4318_464" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4318_464" x1="23.9916" y1="8.77629" x2="23.9916" y2="47.4768" 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/spin.svg

@@ -0,0 +1,13 @@
+<svg width="54" height="27" viewBox="0 0 54 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_f_4318_348)">
+    <path d="M9.98663 20.179C9.33863 20.179 8.74463 20.107 8.20463 19.963C7.67663 19.819 7.22663 19.627 6.85463 19.387V16.975C7.21463 17.167 7.56263 17.335 7.89863 17.479C8.24663 17.623 8.59463 17.737 8.94263 17.821C9.29063 17.893 9.64463 17.929 10.0046 17.929C10.3046 17.929 10.5806 17.905 10.8326 17.857C11.0846 17.797 11.3006 17.707 11.4806 17.587C11.6726 17.467 11.8226 17.323 11.9306 17.155C12.0386 16.975 12.0926 16.765 12.0926 16.525C12.0926 16.189 12.0266 15.907 11.8946 15.679C11.7626 15.451 11.5826 15.241 11.3546 15.049C11.1266 14.857 10.8566 14.653 10.5446 14.437C10.1846 14.173 9.83663 13.879 9.50063 13.555C9.16463 13.231 8.88863 12.853 8.67263 12.421C8.45663 11.977 8.34863 11.461 8.34863 10.873C8.34863 10.297 8.45063 9.77502 8.65463 9.30702C8.85863 8.82702 9.15263 8.41302 9.53663 8.06502C9.93263 7.71702 10.4006 7.44702 10.9406 7.25502C11.4806 7.06302 12.0866 6.96702 12.7586 6.96702C13.4306 6.96702 14.0486 7.03902 14.6126 7.18302C15.1766 7.32702 15.7226 7.54302 16.2506 7.83102L15.2966 9.88302C14.8406 9.66702 14.4026 9.50502 13.9826 9.39702C13.5746 9.28902 13.1666 9.23502 12.7586 9.23502C12.5186 9.23502 12.2966 9.27102 12.0926 9.34302C11.9006 9.40302 11.7266 9.49902 11.5706 9.63102C11.4266 9.75102 11.3126 9.90102 11.2286 10.081C11.1446 10.261 11.1026 10.459 11.1026 10.675C11.1026 10.975 11.1626 11.233 11.2826 11.449C11.4146 11.665 11.5946 11.869 11.8226 12.061C12.0626 12.241 12.3506 12.445 12.6866 12.673C13.1666 12.985 13.5626 13.321 13.8746 13.681C14.1866 14.029 14.4206 14.413 14.5766 14.833C14.7326 15.241 14.8106 15.697 14.8106 16.201C14.8106 16.873 14.6846 17.461 14.4326 17.965C14.1806 18.457 13.8326 18.871 13.3886 19.207C12.9446 19.531 12.4286 19.777 11.8406 19.945C11.2646 20.101 10.6466 20.179 9.98663 20.179ZM16.5076 19.999L19.2256 7.14702H22.8076C23.8516 7.14702 24.6856 7.30302 25.3096 7.61502C25.9456 7.92702 26.4016 8.36502 26.6776 8.92902C26.9656 9.49302 27.1096 10.147 27.1096 10.891C27.1096 11.659 26.9656 12.325 26.6776 12.889C26.4016 13.453 26.0116 13.927 25.5076 14.311C25.0036 14.683 24.4096 14.965 23.7256 15.157C23.0416 15.337 22.3036 15.427 21.5116 15.427H20.1436L19.1896 19.999H16.5076ZM21.7276 13.195C22.2676 13.195 22.7356 13.111 23.1316 12.943C23.5396 12.763 23.8516 12.505 24.0676 12.169C24.2956 11.833 24.4096 11.431 24.4096 10.963C24.4096 10.423 24.2656 10.027 23.9776 9.77502C23.6896 9.51102 23.2636 9.37902 22.6996 9.37902H21.4396L20.6296 13.195H21.7276ZM26.5039 19.999L26.8279 18.451L28.4659 17.731L30.2299 9.41502L28.8979 8.69502L29.2219 7.14702H34.9099L34.5859 8.69502L32.9119 9.41502L31.1479 17.731L32.5159 18.451L32.1919 19.999H26.5039ZM34.3845 19.999L37.1025 7.14702H40.2345L43.2225 16.615H43.2945C43.3305 16.423 43.3665 16.189 43.4025 15.913C43.4505 15.637 43.4985 15.343 43.5465 15.031C43.6065 14.707 43.6665 14.389 43.7265 14.077C43.7865 13.765 43.8405 13.483 43.8885 13.231L45.1845 7.14702H47.5965L44.8785 19.999H41.8725L38.7405 10.279H38.6505C38.6385 10.351 38.6145 10.525 38.5785 10.801C38.5425 11.065 38.4945 11.383 38.4345 11.755C38.3865 12.127 38.3265 12.511 38.2545 12.907C38.1945 13.291 38.1345 13.639 38.0745 13.951L36.7965 19.999H34.3845Z" fill="#FFF8BA"/>
+  </g>
+  <path d="M9.98663 20.179C9.33863 20.179 8.74463 20.107 8.20463 19.963C7.67663 19.819 7.22663 19.627 6.85463 19.387V16.975C7.21463 17.167 7.56263 17.335 7.89863 17.479C8.24663 17.623 8.59463 17.737 8.94263 17.821C9.29063 17.893 9.64463 17.929 10.0046 17.929C10.3046 17.929 10.5806 17.905 10.8326 17.857C11.0846 17.797 11.3006 17.707 11.4806 17.587C11.6726 17.467 11.8226 17.323 11.9306 17.155C12.0386 16.975 12.0926 16.765 12.0926 16.525C12.0926 16.189 12.0266 15.907 11.8946 15.679C11.7626 15.451 11.5826 15.241 11.3546 15.049C11.1266 14.857 10.8566 14.653 10.5446 14.437C10.1846 14.173 9.83663 13.879 9.50063 13.555C9.16463 13.231 8.88863 12.853 8.67263 12.421C8.45663 11.977 8.34863 11.461 8.34863 10.873C8.34863 10.297 8.45063 9.77502 8.65463 9.30702C8.85863 8.82702 9.15263 8.41302 9.53663 8.06502C9.93263 7.71702 10.4006 7.44702 10.9406 7.25502C11.4806 7.06302 12.0866 6.96702 12.7586 6.96702C13.4306 6.96702 14.0486 7.03902 14.6126 7.18302C15.1766 7.32702 15.7226 7.54302 16.2506 7.83102L15.2966 9.88302C14.8406 9.66702 14.4026 9.50502 13.9826 9.39702C13.5746 9.28902 13.1666 9.23502 12.7586 9.23502C12.5186 9.23502 12.2966 9.27102 12.0926 9.34302C11.9006 9.40302 11.7266 9.49902 11.5706 9.63102C11.4266 9.75102 11.3126 9.90102 11.2286 10.081C11.1446 10.261 11.1026 10.459 11.1026 10.675C11.1026 10.975 11.1626 11.233 11.2826 11.449C11.4146 11.665 11.5946 11.869 11.8226 12.061C12.0626 12.241 12.3506 12.445 12.6866 12.673C13.1666 12.985 13.5626 13.321 13.8746 13.681C14.1866 14.029 14.4206 14.413 14.5766 14.833C14.7326 15.241 14.8106 15.697 14.8106 16.201C14.8106 16.873 14.6846 17.461 14.4326 17.965C14.1806 18.457 13.8326 18.871 13.3886 19.207C12.9446 19.531 12.4286 19.777 11.8406 19.945C11.2646 20.101 10.6466 20.179 9.98663 20.179ZM16.5076 19.999L19.2256 7.14702H22.8076C23.8516 7.14702 24.6856 7.30302 25.3096 7.61502C25.9456 7.92702 26.4016 8.36502 26.6776 8.92902C26.9656 9.49302 27.1096 10.147 27.1096 10.891C27.1096 11.659 26.9656 12.325 26.6776 12.889C26.4016 13.453 26.0116 13.927 25.5076 14.311C25.0036 14.683 24.4096 14.965 23.7256 15.157C23.0416 15.337 22.3036 15.427 21.5116 15.427H20.1436L19.1896 19.999H16.5076ZM21.7276 13.195C22.2676 13.195 22.7356 13.111 23.1316 12.943C23.5396 12.763 23.8516 12.505 24.0676 12.169C24.2956 11.833 24.4096 11.431 24.4096 10.963C24.4096 10.423 24.2656 10.027 23.9776 9.77502C23.6896 9.51102 23.2636 9.37902 22.6996 9.37902H21.4396L20.6296 13.195H21.7276ZM26.5039 19.999L26.8279 18.451L28.4659 17.731L30.2299 9.41502L28.8979 8.69502L29.2219 7.14702H34.9099L34.5859 8.69502L32.9119 9.41502L31.1479 17.731L32.5159 18.451L32.1919 19.999H26.5039ZM34.3845 19.999L37.1025 7.14702H40.2345L43.2225 16.615H43.2945C43.3305 16.423 43.3665 16.189 43.4025 15.913C43.4505 15.637 43.4985 15.343 43.5465 15.031C43.6065 14.707 43.6665 14.389 43.7265 14.077C43.7865 13.765 43.8405 13.483 43.8885 13.231L45.1845 7.14702H47.5965L44.8785 19.999H41.8725L38.7405 10.279H38.6505C38.6385 10.351 38.6145 10.525 38.5785 10.801C38.5425 11.065 38.4945 11.383 38.4345 11.755C38.3865 12.127 38.3265 12.511 38.2545 12.907C38.1945 13.291 38.1345 13.639 38.0745 13.951L36.7965 19.999H34.3845Z" fill="white"/>
+  <defs>
+    <filter id="filter0_f_4318_348" x="0.854492" y="0.966797" width="52.7422" height="25.2124" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_4318_348"/>
+    </filter>
+  </defs>
+</svg>

package/src/index.ts

@@ -0,0 +1,4 @@
+import LotteryProgramWof from './LotteryProgramWof.svelte';
+// @ts-ignore
+!customElements.get('lottery-program-wof') && customElements.define('lottery-program-wof', LotteryProgramWof);
+export default LotteryProgramWof;

package/src/message.ts

@@ -0,0 +1,28 @@
+import { onMount } from "svelte"
+
+export const _postMessage = (message) => window.postMessage(message, window.location.href);
+
+const composeMessageHandler = (listeners) => {
+  const handler = e => {
+    Object.keys(listeners).map(key => {
+      if (e.data && e.data.type == key) {
+        const {type, ...restData} = e.data
+        listeners[key](restData)
+      }
+    })
+  }
+
+  return handler
+}
+
+export const onMountMessageLifeCycle = (messageRegisters) => {
+  
+  const messageHandler = composeMessageHandler(messageRegisters)
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler);
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  })
+}

package/src/private.item.svelte

@@ -0,0 +1,279 @@
+<svelte:options tag={'lottery-program-wof-private-item'} />
+
+<script lang="ts">
+  import './private.message.svelte'
+  import './private.tabs.svelte'
+  import './private.outcomes.svelte'
+  import './private.item.svg.svelte'
+
+  import { onMount } from 'svelte';
+
+  // types
+  import { Lang } from './types';
+  import { getCurrentInfo, Option, setMessage } from './business';
+  import { getOptions, api } from './business';
+  import { onMountMessageLifeCycle, _postMessage } from './message';
+  import type { LotteryProgramForPlayer } from './types.business';
+  import { classWithPart } from './util';
+
+  // properties
+  export let lang: Lang = Lang.en
+  export let endpoint: string = ''
+  export let session: string = ''
+
+  export let theme: string = '0'
+
+  export let lotteryprogramforplayer: string = undefined
+
+  export let spinduration: string = '3'
+  export let spinrotation: string = '3'
+
+  // binds
+  let main: HTMLElement;
+
+  // states
+  let size: number = 0;
+  let mainWidth: number = 0;
+
+  let options: Option[] = [];
+  let lotteryProgramForPlayer: LotteryProgramForPlayer
+  let lotteryProgramForPlayerNew: LotteryProgramForPlayer
+  
+  $: lotteryProgramForPlayer = lotteryprogramforplayer && (JSON.parse(lotteryprogramforplayer)) as LotteryProgramForPlayer
+  $: id = lotteryProgramForPlayer?.program?.id
+
+  // lifecycles
+  const init = async () => {
+    await fetcher()
+      
+    // if(getSpinCondition(lotteryProgramForPlayer)){
+    //   setMessage(id, {
+    //     mode: 'spin-failed'
+    //   })
+    // }
+    mainWidth = main?.clientWidth
+  }
+
+  const refetcher = async () => {
+    const LotteryProgramsForPlayer = await api.lotteries(endpoint, session)
+    return LotteryProgramsForPlayer.filter(l => l.program.id === id)[0]
+  }
+
+  const fetcher = async () => {
+    try {
+      if(!lotteryProgramForPlayer) return;
+      
+      if(!options.length){
+        options = await getOptions(lotteryProgramForPlayer.program.wheelOfFortune.partitions, lang)
+      }
+
+      render()
+    } catch (e) {
+      setMessage(id, e.message)
+    }
+  }
+
+  const render = () => {
+    if(!main) return;
+  }
+
+  onMount(() => {
+    window.addEventListener('resize', render)
+    return () => window.removeEventListener('resize', render)  
+  })
+  
+  onMountMessageLifeCycle({
+    'wof-private-message-spin-after': (data) => {
+      if(data.id !== id) return;
+      lotteryProgramForPlayer = lotteryProgramForPlayerNew
+    },
+
+    'wof-private-message-spin-before': async (data) => {
+      if(data.id !== id) return;
+      lotteryProgramForPlayerNew = await refetcher()
+    },
+  })
+
+  // reactives
+  $: lotteryProgramForPlayer && init()
+  //
+
+  $: size = mainWidth
+
+  // ratio
+  $: ratio = size / 375
+  $: radius = 247 / 2 * ratio
+  
+</script>
+
+{#if lotteryProgramForPlayer}
+
+  <div {...classWithPart("LotteryProgramWof")}>
+          
+    <div {...classWithPart("FortuneContainer")}>
+      <main bind:this={main}>
+        
+        {#if size}
+          <lottery-program-wof-private-item-svg {...{ 
+            id,
+            endpoint, session,
+            sizeraw: size,
+            themeindex: theme,
+            optionsraw: JSON.stringify(options),
+            lotteryprogramforplayer: JSON.stringify(lotteryProgramForPlayer),
+          }} />
+        {/if}
+
+        <lottery-program-wof-private-message-panel {...{
+          id,
+          x: main?.offsetLeft + mainWidth/2,
+          r: radius || mainWidth /2,
+        }} />
+          
+      </main>
+
+      
+      {#if lotteryProgramForPlayer.current}
+      <div {...classWithPart("Current")}>
+        <p>Active tickets: {getCurrentInfo(lotteryProgramForPlayer, 'active')}</p>
+        <p>Implicit tickets: {getCurrentInfo(lotteryProgramForPlayer, 'implicit')}</p>
+        <p>Remaining Times: {getCurrentInfo(lotteryProgramForPlayer, 'remainingTimes')}</p>
+      </div>
+      {/if}
+
+    </div>
+  </div>
+{/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 {
+    
+    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 {
+      cursor: pointer;
+      fill: #FFFFFF;
+    }
+  }
+
+  .PointerPartition {
+    opacity: 0.3;
+    fill: lightgoldenrodyellow;
+    stroke: red;
+    stroke-width: 6px;
+    stroke-dasharray: 12;
+  }
+
+  .PointerArrow {
+    fill: #064CA0;
+  }
+
+  .Current {
+    color: #FFFFFF;
+  }
+
+  .PartitionText {
+    fill: #FFFFFF;
+    font-style: normal;
+    font-weight: 700;
+    text-anchor: end;
+    text-shadow: 0px 2px #000;
+  }
+
+  .PartitionShadow {
+    background-blend-mode: multiply;
+    mix-blend-mode: multiply;
+  }
+</style>