crypto-slots/src/client/slots.js

A minimal test server is provided, see server

import define from './../../node_modules/backed/src/utils/define.js';
import CSSMixin from './../../node_modules/backed/src/mixins/css-mixin.js';
import RenderMixin from './../../node_modules/custom-renderer-mixin/src/render-mixin.js';
import './../../node_modules/custom-pages/src/custom-pages.js'


window.slotsAPI = window.slotsAPI || {};
window.slotsAPI.amount = {
  get: async () => Promise.resolve(localStorage.getItem('amount')),
  set: async amount => Promise.resolve(localStorage.setItem('amount', amount))
}

export default define(class CryptoSlots extends CSSMixin(RenderMixin(HTMLElement)) {
  
  get pages() {
    return this.shadowRoot.querySelector('custom-pages')
  }
  
  constructor() {
    super();
    window.slots = new Map();
    this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    if (super.connectedCallback) super.connectedCallback();
    (async () => {
      globalThis.loadGame = this.loadGame.bind(this)
      
      this.backToSlots()
      this.amount = await slotsAPI.amount.get();
      this.shadowRoot.querySelector('.amount').innerHTML = `${this.amount} LFC`;

      document.addEventListener('spin-end', async () => {        
        this.amount = await slotsAPI.amount.get();
        this.shadowRoot.querySelector('.amount').innerHTML =  `${this.amount} LFC`;
      });
    })();
  }
  
  async loadGame(game) {
    const tag = `${game}-slot`
    if (!await customElements.get(tag)) {
      await import(`./slots/${tag}.js`)
    }
    
    const el = document.createElement(tag)
    el.dataset.route = game
    window.slots.set('game', game === 'default' ? 'top-ten' : game)
    this.pages.appendChild(el)
    this.pages.select(game)
  }
  
  async backToSlots() {
    if (!await customElements.get('slots-view')) {
      await import('./slots-view.js')
    }
    const el = document.createElement('slots-view')    
    el.dataset.route = 'slots'
    this.pages.appendChild(el)
    this.pages.select('slots')
  }

  get template() {
    return html`
<style>
  :host {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #022e44;
    color: #fff;
    font-size: 16px;
    position: relative;
  }
  header {
    display: flex;
    height: 56px;
    width: 100%;
    align-items: center;
    background: #042434;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .hero {
    mixin(--css-hero)
    max-height: 500px;
    overflow: hidden;
  }
  a {
    text-decoration: none;
    cursor: pointer;
    color: #c5cae9;
  }
  footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 12px;
  }
  apply(--css-flex)
</style>
<header>
  <span class="flex"></span>
  <span class="amount"></span>
  <span class="flex"></span>
</header>

<custom-pages attr-for-selected="data-route">
  <slots-view></slots-view>
  <default-slot></default-slot>
  <onebythree-slot></onebythree-slot>
</custom-pages>
<footer>
  <span>&#169; 2019 Glenn Vandeuren. Code licensed under the <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC-BY-NC-SA-4.0</a> License.</span>
</footer>`;
  }
})