lib/layers/nextlevel.js

  1. import { default as tmplNextLevel } from '../../templates/NextLevel.html';
  2. import { SocialButtons } from './social';
  3. import { AMP } from './amp';
  5. import { levelSummary } from '../tools/summary';
  6. /**
  7.  * NextLevel Layer, creates content of transition layer between levels
  8.  */
  9. export class NextLevel {
  10.   /**
  11.    *
  12.    * @param {{}} owner  An instance of {@link MiniMemory}
  13.    */
  14.   constructor(owner) {
  15.     this.owner = owner;
  16.     this.html = tmplNextLevel;
  17.     this.ampMarkup = '';
  18.   }
  19.   /**
  20.    * Initialize class after html insert.
  21.    */
  22.   init() {
  23.     this.owner.shadowRoot
  24.       .querySelector('#nextlevel #continue')
  25.       .addEventListener('click', this.hide.bind(this));
  26.   }
  27.   /**
  28.    * Shows nextlevel layer
  29.    */
  30.   show() {
  31.     const layer = this.owner.shadowRoot.querySelector('#nextlevel');
  32.     const summary = this.owner.shadowRoot.querySelector('#summary');
  33.     const footer = this.owner.shadowRoot.querySelector('#nextlevel .footer');
  34.     const btnContinue = this.owner.shadowRoot.querySelector('#continue');
  36.     if (
  37.       Object.keys(this.owner.settings.scores.currentPlayer.scores).length === 0
  38.     ) {
  39.       btnContinue.setAttribute('data-i18n', 'PLAY');
  40.     } else {
  41.       btnContinue.setAttribute('data-i18n', 'CONTINUE');
  42.     }
  44.     summary.innerHTML = levelSummary(
  45.       this.owner.settings.scores.currentPlayer.scores
  46.     );
  47.     layer.classList.add('active');
  48.     layer.style.opacity = '1';
  49.     this.owner.i18n.update(this.owner.shadowRoot);
  51.     footer.innerHTML = this.getAmpMarkup();
  52.     new SocialButtons().html().then((html) => {
  53.       footer.innerHTML += html;
  54.     });
  55.   }
  56.   /**
  57.    * Hides nextlevel layer
  58.    */
  59.   hide() {
  60.     const layer = this.owner.shadowRoot.querySelector('#nextlevel');
  61.     layer.style.opacity = '0';
  62.     setTimeout(() => {
  63.       layer.classList.remove('active');
  64.     }, 300);
  65.   }
  66.   /**
  67.    * get AMP markup from AMP library.
  68.    * @return {String} returns the required markup if available,
  69.    * empty otherwise
  70.    *
  71.    */
  72.   getAmpMarkup() {
  73.     if (!this.owner.manifest || !this.owner.manifest.amp) {
  74.       return '';
  75.     }
  76.     const amp = new AMP(this.owner.manifest.amp);
  77.     return amp.markup();
  78.   }
  79. }