@everymatrix/lottery-program-wof 1.4.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-program-wof",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "be1fa07132bd9efec772e8532a8bc54c82eb1cb6"
+  "gitHead": "c0184ad3edaaa8f9ce54289cf544bb0589ef1fbe"
 }

package/src/LotteryProgramWof.svelte

@@ -56,32 +56,34 @@
   $: endpoint && init()
 
 </script>
-  
-<div {...classWithPart("LotteryProgramWof")}>
+
+<div {...classWithPart("Root")}>
 
   <lottery-program-wof-private-tabs>
     <div slot="tab-Program">
-      {#if loading}
-        <div>Loading...</div>
-      {:else}
-        {#if lotteryProgramsForPlayer.length}
-          {#each lotteryProgramsForPlayer as _l}
-            <lottery-program-wof-private-item {...{ 
-              lang,
-              endpoint,
-              session,
-              theme,
-              lotteryprogramforplayer: JSON.stringify(_l)
-            }} />
-          {/each}
+      <div {...classWithPart('CommonContainer')}>
+        {#if loading}
+          <div>Loading...</div>
         {:else}
-          <div {...classWithPart("LotteryProgramWofNoContent")}>
-            <p>You are not allowed to any lottery program.</p>
-          </div>
+          {#if lotteryProgramsForPlayer.length}
+            {#each lotteryProgramsForPlayer as _l}
+              <lottery-program-wof-private-item {...{ 
+                lang,
+                endpoint,
+                session,
+                theme,
+                lotteryprogramforplayer: JSON.stringify(_l)
+              }} />
+            {/each}
+          {:else}
+            <div {...classWithPart("NoContent")}>
+              <p>You are not allowed to any lottery program.</p>
+            </div>
+          {/if}
         {/if}
-      {/if}
+      </div>
     </div>
-    <div slot="tab-Outcomes">
+    <div slot="tab-History">
       <lottery-program-wof-private-outcomes
         {...{ 
           endpoint, session,
@@ -95,6 +97,11 @@
 
 <style lang="scss">
 
+  lottery-program-wof-private-item {
+    width: 480px;
+    display: inline-block;
+  }
+
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
@@ -110,15 +117,15 @@
     box-sizing: border-box;
   }
 
-  .LotteryProgramWof {
-    background: var(--emfe-w-color-contrast, #07072A);
+  .Root {
     display: flex;
     align-items: center;
     flex-direction: column;
     padding: 20px 0;
+    background: var(--emfe-w-color-contrast, #07072A);
   }
 
-  .LotteryProgramWofNoContent {
+  .NoContent {
     color: rgb(255, 255, 255);
     min-height: 300px;
     display: flex;
@@ -126,4 +133,10 @@
     align-items: center;
     font-size: 16px;
   }
+  
+  .CommonContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
 </style>

package/src/private.item.svelte

@@ -111,7 +111,7 @@
   <div {...classWithPart("LotteryProgramWof")}>
           
     <div {...classWithPart("FortuneContainer")}>
-      <main bind:this={main}>
+      <main bind:this={main} {...classWithPart("Main")}>
         
         {#if size}
           <lottery-program-wof-private-item-svg {...{ 
@@ -126,8 +126,8 @@
 
         <lottery-program-wof-private-message-panel {...{
           id,
-          x: main?.offsetLeft + mainWidth/2,
           r: radius || mainWidth /2,
+          h: main?.clientHeight,
         }} />
           
       </main>
@@ -147,6 +147,10 @@
 
 <style lang="scss">
 
+  lottery-program-wof-private-message-panel {
+    position: absolute;
+  }
+
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
@@ -166,7 +170,6 @@
   $outlineWidth: 2px;
 
   .LotteryProgramWof {
-    background: var(--emfe-w-color-contrast, #07072A);
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -181,6 +184,10 @@
     min-height: 200px;
   }
 
+  .Main {
+    position: relative;
+  }
+
   svg {
     transition: opacity 0.3s;
   }

package/src/private.item.svg.svelte

@@ -427,7 +427,7 @@
     <g id="Images">
       <defs>
         <filter id="f1" x="0" y="0">
-          <feGaussianBlur in="SourceGraphic" stdDeviation={2 * speed} />
+          <feGaussianBlur in="SourceGraphic" stdDeviation={pointermode === PointerMode.Arrow ? 2 * speed : 0} />
         </filter>
       </defs>
       {#each options as option,index}

package/src/private.message.svelte

@@ -5,7 +5,7 @@
   import giftSvg from './images/gift.svg'
   import { onMountMessageLifeCycle, _postMessage } from './message';
 
-  export let x = 0
+  export let h = 0
   export let r = 0
   export let id: string = undefined
 
@@ -60,8 +60,9 @@
   $: mode && setTopOffset()
 
   $: width = r*2 + 5
-  $: left = x
-  
+  $: left = r/2
+  $: top = h / 2 - root?.clientHeight / 2
+
 </script>
 
 
@@ -70,7 +71,8 @@
   bind:this={root}
   class="MessagePanel" 
   style={[
-    `margin-top: ${r + topOffset}px`,
+    // `margin-top: ${r + topOffset}px`,
+    `top: ${top}px`,
     `left: ${left}px`,
     `width: ${width}px`,
     isShown ? 'opacity: 1' : '',
@@ -147,7 +149,7 @@
     // border: 3px solid rgb(80, 80, 80);
     box-shadow: 0 0 1px #a1a1a1;
 
-    transform: translateX(-50%);
+    // transform: translateX(-50%);
     transition: margin-top opacity .3s ease-out;
   }
 

package/src/private.outcomes.svelte

@@ -38,7 +38,8 @@
     ids.map(id => {
       outcomesAll.push({
         id,
-        outcomes: []
+        outcomes: [],
+        isLoading: true,
       })
     })
 
@@ -50,6 +51,7 @@
           return {
             ...o,
             outcomes,
+            isLoading: false,
           }
         }else{
           return o
@@ -77,36 +79,43 @@
 </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("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>
+            {#each outcomesAll as outcomesItem}
+              {#if outcomesItem.isLoading}
+                <div>Loading...</div>
+              {:else}
+                {#if !outcomesItem.outcomes || outcomesItem.outcomes.length === 0}
+                  <div {...classWithPart("OutcomeNoContent")}>No histories</div>
+                {:else}
+                <div>
+                  <tr>{getName(lotteryProgramsForPlayer.filter(l => l.program.id === outcomesItem.id)[0].program)}</tr>
+                </div>
+                <thead>
+                  <tr>
+                    <th>Rewards</th>
+                    <th>Status</th>
+                    <th>Time</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each outcomesItem.outcomes as outcome,index}
+                  <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>
+                {/if}
+              {/if}
+            {/each}
           </table>
-          {/if}
         </div>
     </div>
-  {/each}
 </section>
 
 <style lang="scss">
@@ -144,10 +153,10 @@
     padding: 20px 20px;
   }
 
-  .TableContainer {
-    max-height: 300px;
-    overflow-y: auto;
-  }
+  // .TableContainer tbody {
+  //   max-height: 300px;
+  //   overflow-y: auto;
+  // }
 
   table {
     
@@ -160,4 +169,18 @@
     }
 
   }
+
+  table tbody {
+    display: block;
+    max-height: 300px;
+    overflow-y: scroll;
+    margin: 30px 0;
+  }
+
+  table thead, table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+
 </style>

package/src/private.tabs.svelte

@@ -17,7 +17,7 @@
           switch(_tab){
             case Tab.Program: 
               break;
-            case Tab.Outcomes:
+            case Tab.History:
               _postMessage({type: 'wof-private-message-outcomes'})
               break;
           }

package/src/types.ts

@@ -65,7 +65,7 @@ export interface Partition {
 
 export enum Tab {
   Program = 'Program',
-  Outcomes = 'Outcomes'
+  History = 'History'
 }