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