@everymatrix/lottery-program-wof 1.44.0 → 1.45.3

package/src/message.ts

@@ -1,28 +0,0 @@
-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

@@ -1,172 +0,0 @@
-<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'
-
-  // types
-  import { ContentDirection, Lang } from './types';
-  import { getCurrentInfo, isBonusInvalid } from './business';
-  import { api } from './business';
-  import { onMountMessageLifeCycle, _postMessage } from './message';
-  import { CurrentInfo, LotteryProgramForPlayer } from './types.business';
-  import { _ } from './i18n';
-  import { setClientStyling } from './widget';
-
-  // properties common
-  export let lang: Lang = Lang.en
-  export let endpoint: string = ''
-  export let session: string = ''
-  export let clientstyling:string = ''
-  export let currentinfo: string = CurrentInfo.RemainingTimes
-  export let giftimagesrc: string = ''
-  export let contentdirection: keyof typeof ContentDirection = 'anticlockwise'
-  export let size: string = '480'
-  
-  // properties
-  export let id: string = ''
-
-  let rootContainer: HTMLElement
-  $: clientstyling && rootContainer && setClientStyling(rootContainer, clientstyling);
-
-  $: commonProps = {
-    endpoint,
-    lang,
-    session,
-    clientstyling,
-  }
-
-  let bonus: LotteryProgramForPlayer
-  let bonusNew: LotteryProgramForPlayer
-  let currentInfoKeys: CurrentInfo[]
-  let isOptionsReady: boolean = false
-  let checkableValid: boolean = true
-
-  const refetcher = async () => {
-    const LotteryProgramsForPlayer = await api.lotteries(endpoint, session)
-    return LotteryProgramsForPlayer.filter(l => l.program.id === id)[0]
-  }
-  
-  onMountMessageLifeCycle({
-    'wof-private-options-ready': (data) => {
-      if(data.id !== id) return;
-      isOptionsReady = true
-    },
-    'wof-private-bonuses': (data) => {
-      const bonusFound = data.bonuses.find(l => l.program.id === id)
-      if(bonusFound){
-        bonus = bonusFound
-      }
-    },
-    'wof-private-message-spin-after': (data) => {
-      if(data.id !== id) return;
-      if(!bonusNew) return;
-      bonus = bonusNew
-      _postMessage({type: 'wof-private-bonus', bonus: bonusNew, id })
-    },
-
-    'wof-private-message-spin-before': async (data) => {
-      if(data.id !== id) return;
-      checkableValid = false
-      bonusNew = await refetcher()
-    },
-
-    'wof-private-message-close': (data) => {
-      if(data.id !== id) return;
-      _postMessage({type: 'wof-private-checking', bonus, id })
-      setTimeout(() => {
-        checkableValid = true
-      }, 1000);
-    },
-  })
-
-  // reactives
-  $: _size = Number(size) || 480
-  $: radius = 0.62 * _size / 2;
-  
-  // @ts-ignore
-  $: currentInfoKeys = currentinfo ? currentinfo.split(',') : [CurrentInfo.RemainingTimes]
-</script>
-
-<div 
-  class="LotteryItem" 
-  class:Invalid={isBonusInvalid(bonus) && checkableValid}
-  bind:this={rootContainer}
->
-  <lottery-program-wof-private-item-svg {...{ 
-    ...commonProps,
-    id,
-    size: _size,
-    radius,
-    contentdirection,
-  }} />
-
-  <lottery-program-wof-private-message-panel {...{
-    ...commonProps,
-    id,
-    size: _size,
-    r: radius,
-    giftimagesrc,
-  }} />
-  
-  {#if bonus?.current && isOptionsReady}
-  <div class="Current">
-    {#each currentInfoKeys as CurrentInfoKey}
-      <p class={CurrentInfoKey}>
-        {$_(`wof.${CurrentInfoKey}`)}: {getCurrentInfo(bonus, CurrentInfoKey)}
-      </p>
-    {/each}
-  </div>
-  {/if}
-
-</div>
-
-<style lang="scss">
-  @mixin FortuneContainer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  lottery-program-wof-private-message-panel {
-    position: absolute;
-    top: 0;
-  }
-
-
-
-  *,
-  *::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;
-
-  .LotteryItem {
-    @include FortuneContainer;
-    margin: 20px 0;
-
-    position: relative;
-    max-width: 600px;
-    justify-content: space-around;
-    min-height: 200px;
-
-    &.Invalid { 
-      display: none;
-    }
-  }
-
-  .Current {
-    color: #FFFFFF;
-  }
-</style>

package/src/private.item.svg.scss

@@ -1,302 +0,0 @@
-
-: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;
-}
-
-.FortuneContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.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 {
-  color: #FFFFFF;
-  font-style: normal;
-  font-weight: 700;
-  text-anchor: end;
-  text-shadow: 0px 3px #000;
-  dominant-baseline: central;
-}
-
-.PartitionsShadow {
-  background-blend-mode: multiply;
-  mix-blend-mode: multiply;
-}
-
-.PartitionTextEntityContainer {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.PartitionTextEntity {
-  width: 100%;
-}
-
-.PartitionTextEntity.Anticlockwise {
-  text-align: end;
-}
-
-// Themed Bottom
-
-.theme1, .theme4, .theme5 {
-  foreignObject.Bottom div {
-    background-image: var(--img-theme1-bg3), var(--img-theme-BgBlackRing), var(--img-theme-BgHalo);
-    background-position: center, center, center;
-    background-size: calc(var(--radius) * 2px + var(--ratio) * 7px), calc(var(--radius) * 2px + var(--ratio) * 37px), calc(var(--radius) * 2px + var(--ratio) * 130px);
-  }
-}
-
-.theme2, .theme6 {
-  foreignObject.Bottom div {
-    background-image: var(--img-theme2-bg3), var(--img-theme-BgHalo), var(--img-theme-BgBlackRing);
-    background-position: center, center, center;
-    background-size: calc(var(--radius) * 2px + var(--ratio) * 8px), calc(var(--radius) * 2px + var(--ratio) * 123px), calc(var(--radius) * 2px + var(--ratio) * 37px);
-  }
-}
-
-.theme3 {
-  foreignObject.Bottom div {
-    background-image: var(--img-theme3-bg2), var(--img-theme3-bg1);
-    background-position: center, center;
-    background-size: calc(var(--radius) * 2px + var(--ratio) * 57px), calc(var(--radius) * 2px + var(--ratio) * 125px);
-  }
-}
-
-.theme7 {
-  foreignObject.Bottom div {
-    background-image: var(--img-theme7-bg3), var(--img-theme7-bg2), var(--img-theme7-bg1);
-    background-position: center, center calc(var(--size) * 1px - var(--ratio) * 95px), calc(var(--ratio) * 42px) calc(var(--ratio) * -5px);
-    background-size: calc(var(--radius) * 2px + 35px), calc(var(--radius) * 2px * 0.6), calc(var(--radius) * 2.7px);
-  }
-}
-
-// Themed Middle
-.theme1, .theme4 {
-  foreignObject.Middle div {
-    background-image: var(--img-theme-center1);
-    background-position: center;
-  }
-}
-
-.theme2 {
-  foreignObject.Middle div {
-    background-image: var(--img-theme2-center), var(--img-theme2-arrow);
-    background-position: center, center 60px;
-  }
-}
-
-.theme3 {
-  foreignObject.Middle div {
-    background-image: var(--img-theme3-center), var(--img-theme3-arrow);
-    background-position: center, center 39px;
-  }
-}
-
-.theme5, .theme6 {
-  foreignObject.Middle div {
-    background-image: var(--img-theme-center2);
-    background-position: center;
-  }
-}
-
-.theme7 {
-  foreignObject.Middle div {
-    background-image: var(--img-theme7-center), var(--img-theme7-arrow);
-    background-position: center, center 36px;
-  }
-}
-
-// Themed Top
-.theme7 {
-  foreignObject.Top div {
-    background-image: var(--img-theme7-light);
-    background-position: 294px 135px;
-  }
-}
-
-.theme1, .theme2, .theme3, .theme4, .theme5, .theme6 {
-  foreignObject.Top {
-    mix-blend-mode: multiply;
-  }
-
-  foreignObject.Top div {
-    background-image: var(--img-theme-shadow);
-    background-position: center;
-    background-size: calc(var(--radius) * 2px);
-  }
-}
-
-// Themed Partition
-
-.theme2 {
-  foreignObject.Partition1 div {
-    background-image: var(--img-theme-partition-light);
-    background-position: center calc((var(--size) / 2 - var(--radius)) * 1px - calc(var(--ratio) * 22px));
-    transform: rotate(calc(var(--index) * 360deg / var(--length)));
-  }
-  foreignObject.Partition2 div {
-    background-image: var(--img-theme-partition-light);
-    background-position: center calc((var(--size) / 2 - var(--radius)) * 1px - calc(var(--ratio) * 22px));
-    transform: rotate(calc((var(--index) + 0.5) * 360deg / var(--length)));
-  }
-}
-
-foreignObject.PointerArea {
-  mix-blend-mode: screen;
-}
-foreignObject.PointerArea div {
-  background-image: var(--img-theme-pointer-area);
-  background-position: center -3px;
-  background-size: 51%;
-}
-
-foreignObject.Partition1 div, foreignObject.Partition2 div {
-  transform-origin: center;
-}
-.PartitionsCustomable1 div, .PartitionsCustomable2 div {
-  visibility: hidden;
-  &.active {
-    visibility: visible;
-  }
-}
-
-foreignObject.Customable {
-  overflow: visible;
-}
-
-foreignObject.Customable div {
-  background-repeat: no-repeat;
-}
-
-.PartitionBackground div {
-  background-size: calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);
-  background-position: center;
-}
-
-.theme1, .theme2 {
-  .PartitionBackground:nth-child(4n+1) { div { background-image: radial-gradient(#009C9C 0%, #002634 100%) }}
-  .PartitionBackground:nth-child(4n+2) { div { background-image: radial-gradient(#AA00BF 0%, #3B0031 100%) }}
-  .PartitionBackground:nth-child(4n+3) { div { background-image: radial-gradient(#0068CD 0%, #150D42 100%) }}
-  .PartitionBackground:nth-child(4n+4) { div { background-image: radial-gradient(#DA005B 0%, #400021 100%) }}
-}
-
-.theme3 {
-  .PartitionBackground:nth-child(4n+1) { div { background-image: radial-gradient(#066 0%, #007F76 13%, #00B59B 42%, #00DDB5 67.01%, #00F6C6 88.01%, #0FC 100.01%) }}
-  .PartitionBackground:nth-child(4n+2) { div { background-image: radial-gradient(#580065 22.67%, #D453FF 91.3%) }}
-  .PartitionBackground:nth-child(4n+3) { div { background-image: radial-gradient(#FFE767 -0.01%, #F28F00 100%) }}
-  .PartitionBackground:nth-child(4n+4) { div { background-image: radial-gradient(#900A42 22.59%, #960A44 23.94%, #B60B53 31.36%, #D00C5E 39.45%, #E40D67 48.22%, #F30D6E 57.66%, #FB0D71 69.8%, #FE0E73 90.03%) }}
-}
-
-.theme4, .theme5, .theme6 {
-  .PartitionBackground:nth-child(4n+1) div { background: radial-gradient(#3B0031 0%, #7E008E 100.01%) }
-  .PartitionBackground:nth-child(4n+2) div { background: radial-gradient(#5A005F 22.67%, #EA53FF 91.3%) }
-  .PartitionBackground:nth-child(4n+3) div { background: radial-gradient(#B300C3 -0.01%, #4D003B 100%) }
-  .PartitionBackground:nth-child(4n+4) div { background: radial-gradient(#59007B 22.59%, #B753FF 90.03%) }
-}
-
-.theme7 {
-  .PartitionBackground:nth-child(2n+1) div { background: linear-gradient(90.23deg, #F6AD3F 16.59%, #AF8531 99.8%) }
-  .PartitionBackground:nth-child(2n+2) div { background: linear-gradient(90deg, #323234 -0.01%, #272425 54.99%, #231F1F 99.99%) }
-}
-
-.PartitionBackground div {
-  transform-origin: center;
-}
-
-
-// Themed Partition Background Stroke
-.PartitionBackgroundStroke {
-  fill: transparent;
-  stroke-width: 0.5px;
-  stroke-dasharray: var(--radius) calc(2 * pi / var(--length) * var(--radius));
-}
-.theme1, .theme2 {
-  .PartitionBackgroundStroke {
-    stroke: #FCD755;
-  }
-}
-
-.PointerPartitionFrame {
-  stroke: #FFDD64;
-  fill: transparent;
-  stroke-dasharray: var(--radius) calc(2 * pi / var(--length) * var(--radius));
-  stroke-width: 0px;
-
-  &.active {
-    stroke-width: 3px;
-  }
-}