@everymatrix/lottery-program-wof 1.3.2

package/src/private.message.svelte

@@ -0,0 +1,167 @@
+<svelte:options tag={'lottery-program-wof-private-message-panel'} />
+
+<script lang="ts">
+  // @ts-ignore
+  import giftSvg from './images/gift.svg'
+  import { onMountMessageLifeCycle, _postMessage } from './message';
+
+  export let x = 0
+  export let r = 0
+  export let id: string = undefined
+
+  let topOffset: number = 0
+
+  let renderValue: any = ''
+  let icon: string = ''
+  let isShown: boolean = false
+  let mode: string = ''
+  let modeValue: any
+
+  let root: HTMLElement;
+
+  onMountMessageLifeCycle({
+    'wof-private-message-open': (data) => {
+      if(data.id !== id) return;
+
+      mode = data.mode
+      modeValue = data.modeValue
+
+      isShown = true
+    }
+  })
+
+  const _postMessageScoped = (props) => _postMessage({ ...props, id })
+  
+  const eventButton = () => {
+    isShown = false
+    _postMessageScoped({ type: 'wof-private-message-close' })
+  }
+
+  const getTimeString = (_d) => {
+    const d: Date = new Date(_d)
+    
+    return [
+      [
+        d.toLocaleString('en-us', {year: 'numeric'}),
+        d.toLocaleString('en-us', {month: '2-digit'}),
+        d.toLocaleString('en-us', {day: '2-digit'}),
+      ].join('-'),
+      d.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', second: 'numeric' }),
+    ].join(' ')
+  }
+
+  const setTopOffset = () => {
+    setTimeout(() => {
+      topOffset = root.offsetHeight / 2 * -1
+      
+    }, 1)
+  }
+
+  $: mode && setTopOffset()
+
+  $: width = r*2 + 5
+  $: left = x
+  
+</script>
+
+
+{#if isShown}
+<div 
+  bind:this={root}
+  class="MessagePanel" 
+  style={[
+    `margin-top: ${r + topOffset}px`,
+    `left: ${left}px`,
+    `width: ${width}px`,
+    isShown ? 'opacity: 1' : '',
+  ].join(';')}
+>
+
+  {#if mode === 'normal' || mode === 'init-failed'}
+  <p>{modeValue}</p>
+  {/if}
+
+  {#if mode === 'spin-failed'}
+  <p>We are sorry that you</p>
+  <p>don't have any Wheels available, </p>
+  <p>please <strong>check T&C</strong> here </p>
+  <p>to get a chance!</p>
+  {/if}
+
+  {#if mode === 'show-next'}
+  <p>The Wheel will be available on</p>
+  <p>
+    <strong>
+      {getTimeString(modeValue?.startTime)}
+    </strong>
+  </p>
+  <p>please wait till it is open</p>
+  {/if}
+
+  {#if mode === 'gift'}
+  <p>
+    <img src={giftSvg} alt="">
+  </p>
+  <p>Congratulations! You won a prize!</p>
+  <!-- <p>{modeValue}</p> -->
+  {/if}
+
+  {#if mode !== 'init-failed'}
+  <div>
+    <button class="MessagePanelButton" on:click={eventButton}>OK</button>
+  </div>
+  {/if}
+</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';
+    position: absolute;
+    width: 100%;
+  }
+
+  *,
+  *::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;
+
+  .MessagePanel {
+    position: absolute;
+    background-color: #FFFFFF;
+    padding: 15px 30px;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 16px;
+    opacity: .3;
+    
+    // border: 3px solid rgb(80, 80, 80);
+    box-shadow: 0 0 1px #a1a1a1;
+
+    transform: translateX(-50%);
+    transition: margin-top opacity .3s ease-out;
+  }
+
+  .MessagePanelButton { 
+    padding: 4px 24px;
+    margin-top: 40px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #FFFFFF;
+    background: #FF0000;
+    border-radius: 5px;
+    font-weight: 700;
+    border: 0;
+    box-shadow: 0 0 3px #ff0000;
+    cursor: pointer;
+  }
+</style>

package/src/private.outcomes.svelte

@@ -0,0 +1,163 @@
+<svelte:options tag={'lottery-program-wof-private-outcomes'} />
+
+<script lang="ts">
+  import type { WheelOfFortunePartition } from "./api";
+  import { api } from "./business";
+  import { onMountMessageLifeCycle } from "./message";
+  import type { LotteryProgramForPlayer } from "./types.business";
+  import { classWithPart } from "./util";
+
+  export let endpoint: string = ''
+  export let session: string = ''
+
+  interface RenderReady {
+    id: string,
+  }
+
+  interface PartitionsRenderReady extends RenderReady {
+    partitions: WheelOfFortunePartition[]
+  }
+
+  let lotteryProgramsForPlayer: LotteryProgramForPlayer[] 
+  let partitionsList: PartitionsRenderReady[] = []
+  let ids: string[] = []
+  let outcomesAll: any[] = [];
+  
+  const getName = (objectI18n: any) => objectI18n.name['*']
+
+  const getPrize = (outcome, id) => {
+    const partitions = partitionsList.filter(partitionsItem => partitionsItem.id === id)[0].partitions
+    const index = outcome.draw.result?.wheelOfFortunePartitionIndex
+    
+    return !index ? 'Loss' : getName(partitions[index])
+  }
+
+  const eventShowOutcome = async () => {
+
+    outcomesAll = []
+    ids.map(id => {
+      outcomesAll.push({
+        id,
+        outcomes: []
+      })
+    })
+
+    ids.map(async id => {
+      const result = await api.outcome(endpoint, session, id)
+      const outcomes = result.items
+      outcomesAll = outcomesAll.map(o => {
+        if(o.id === id){
+          return {
+            ...o,
+            outcomes,
+          }
+        }else{
+          return o
+        }
+      })
+    })
+
+    
+  }
+
+  onMountMessageLifeCycle({
+    'wof-private-message-lotteryProgramsForPlayer': (data) => {
+      lotteryProgramsForPlayer = data.lotteryProgramsForPlayer
+      ids = lotteryProgramsForPlayer.map(l => l.program.id)
+      partitionsList = lotteryProgramsForPlayer.map(l => ({
+        id: l.program.id,
+        partitions: l.program.wheelOfFortune.partitions,
+      }))
+    },
+    'wof-private-message-outcomes': () => {
+      eventShowOutcome()
+    }
+  })
+
+</script>
+
+<section>
+  {#each outcomesAll as outcomesItem}
+    <div {...classWithPart("Outcomes")}>
+      <div {...classWithPart("OutcomeTitle")}>{getName(lotteryProgramsForPlayer.filter(l => l.program.id === outcomesItem.id)[0].program)}</div>
+        
+        <div {...classWithPart("TableContainer")}>
+          {#if !outcomesItem.outcomes || outcomesItem.outcomes.length === 0}
+            <div {...classWithPart("OutcomeNoContent")}>No outcomes</div>
+          {:else}
+          <table>
+            <thead>
+              <tr>
+                <th>Prize</th>
+                <th>Status</th>
+                <th>Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each outcomesItem.outcomes as outcome}
+              <tr>
+                <td>{getPrize(outcome, outcomesItem.id)}</td>
+                <td>{outcome.draw.state}</td>
+                <td>{(new Date(outcome.draw.time).toLocaleString(undefined, { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }))}</td>
+              </tr>
+              {/each}
+            </tbody>
+          </table>
+          {/if}
+        </div>
+    </div>
+  {/each}
+</section>
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    width: 100%;
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .Outcomes {
+    
+    width: 80%;
+    margin: 30px auto;
+  }
+
+  .OutcomeTitle {
+    color: #FFF;
+    font-weight: 700;
+    padding: 20px 0;
+  }
+  .OutcomeNoContent {
+    color: #FFF;
+    font-weight: 700;
+    padding: 20px 20px;
+  }
+
+  .TableContainer {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  table {
+    
+    color: #FFFFFF;
+    width: 100%;
+    text-align: center;
+    tr {
+      margin-top: 10px;
+      line-height: normal;
+    }
+
+  }
+</style>

package/src/private.tabs.svelte

@@ -0,0 +1,92 @@
+<svelte:options tag={'lottery-program-wof-private-tabs'} />
+
+<script lang="ts">
+  import { _postMessage } from "./message";
+  import { Tab } from "./types";
+
+  let tab: Tab = Tab.Program;
+
+</script>
+
+<section id="TabBar" part="TabBar">
+  <ul>
+    {#each Object.keys(Tab) as _tab, i}
+    <li class={_tab === tab ? 'active' : ''}>
+      <span 
+        on:click={() => {
+          switch(_tab){
+            case Tab.Program: 
+              break;
+            case Tab.Outcomes:
+              _postMessage({type: 'wof-private-message-outcomes'})
+              break;
+          }
+
+          //@ts-ignore
+          tab = _tab
+        }}
+      >
+        {_tab}
+      </span>
+    </li>
+    {/each}
+  </ul>
+</section>
+
+{#each Object.keys(Tab) as _tab}
+  {#if tab === _tab}
+    <slot name={`tab-${_tab}`} />
+  {/if}
+{/each}
+
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    width: 100%;
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  #TabBar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 20px 0;
+
+    ul {
+      max-width: 600px;
+      width: 100%;
+
+      li {
+        color: #FFFFFF;
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+
+    ul {
+      border-bottom: 3px #ccc solid;
+
+      li {
+        padding: 6px;
+        cursor: pointer;
+        &.active {
+          border-bottom: 3px #d46666 solid;
+          margin-bottom: -6px;
+        }
+      }
+    }
+  }
+</style>

package/src/themes.partitions.ts

@@ -0,0 +1,174 @@
+export const partitions1 = {
+  colorSchema: [
+    [
+      {
+        color: '#009C9C',
+        offset: 0,
+      },
+      {
+        color: '#002634',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#AA00BF',
+        offset: 0,
+      },
+      {
+        color: '#3B0031',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#0068CD',
+        offset: 0,
+      },
+      {
+        color: '#150D42',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#DA005B',
+        offset: 0,
+      },
+      {
+        color: '#400021',
+        offset: 1,
+      }
+    ],
+  ]
+}
+
+export const partitions2 = {
+  colorSchema: [
+    [
+      {
+        color: '#006666',
+        offset: 0, 
+      },
+      {
+        color: '#007F76',
+        offset: 0.13, 
+      },
+      {
+        color: '#00B59B',
+        offset: 0.42, 
+      },
+      {
+        color: '#00DDB5',
+        offset: 0.67, 
+      },
+      {
+        color: '#00F6C6',
+        offset: 0.88, 
+      },
+      {
+        color: '#00FFCC',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#580065',
+        offset: 0.23, 
+      },
+      {
+        color: '#D453FF',
+        offset: 0.91,
+      }
+    ],
+    [
+      {
+        color: '#FFE767',
+        offset: 0, 
+      },
+      {
+        color: '#F28F00',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#900A42',
+        offset: 1 / 100 * 22.59,
+      },
+      {
+        color: '#960A44',
+        offset: 1 / 100 * 23.94,
+      },
+      {
+        color: '#B60B53',
+        offset: 1 / 100 * 31.36,
+      },
+      {
+        color: '#D00C5E',
+        offset: 1 / 100 * 39.45,
+      },
+      {
+        color: '#E40D67',
+        offset: 1 / 100 * 48.22,
+      },
+      {
+        color: '#F30D6E',
+        offset: 1 / 100 * 57.66,
+      },
+      {
+        color: '#FB0D71',
+        offset: 1 / 100 * 69.8,
+      },
+      {
+        color: '#FE0E73',
+        offset: 1 / 100 * 90.03,
+      },
+    ]
+  ]
+}
+
+export const partitions3 = {
+  colorSchema: [
+    [
+      { 
+        color: '#3B0031',
+        offset: 0, 
+      },
+      {
+        color: '#7E008E',
+        offset: 1, 
+      },
+    ],
+    [
+      {
+        color: '#5A005F',
+        offset: 0, 
+      },
+      {
+        color: '#EA53FF',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#B300C3',
+        offset: 0, 
+      },
+      {
+        color: '#4D003B',
+        offset: 1,
+      }
+    ],
+    [
+      {
+        color: '#59007B',
+        offset: 0,
+      },
+      {
+        color: '#B753FF',
+        offset: 1,
+      },
+    ]
+  ]
+}