Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

MainMenu angefangen

Browse Source
This commit is contained in:
silas
2018-09-22 16:50:24 +02:00
parent a6f7fa8c3e
commit 7393ea00ba
15 changed files with 789 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/module/Application/pwa/html/application/menu.html Normal file
View File

@@ -0,0 +1,77 @@
<div class='max-height flex-center'>
<b>WordRotator</b>
<div class="segment segment-parent layer-2 rotate-360">
<div class="child-container">
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">W</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
</div>
</div>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">D</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
</div>
</div>
<br>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">T</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">A</div>
</div>
</div>
</div>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">T</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
</div>
</div>
</div>
</div>
<button class='button' data-translation="play" id='play-button'></button>
</div>

69
src/module/Application/pwa/js/site/LevelSite.js
View File

@@ -12,8 +12,6 @@ import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
export class LevelSite extends WordRotatorBaseSite {
constructor(siteManager) {
super(siteManager, "html/application/level.html");
this.levelScaler = () => {
};
}
createActionBarMenu(menu) {
@@ -31,12 +29,27 @@ export class LevelSite extends WordRotatorBaseSite {
onConstruct(args) {
this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
this.levelScaler = () => {
};
this.wonParams = {
aborted: false,
coinCounterTimer: null,
audio: new Audio()
};
this.wonParams.audioPromise = Promise.race([new Promise(resolve => {
this.wonParams.audio.addEventListener('loadeddata', resolve);
}),
new Promise(resolve => {
this.wonParams.audio.addEventListener('error', resolve);
})
]);
this.wonParams.audio.src = Helper.basePath("sound/single_coin_fall_on_concrete_.mp3");
return super.onConstruct(args);
}
async onFirstStart() {
super.onFirstStart();
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
let parentSegmentTemplate = this.findBy("#segment-parent-template");
let rowSegmentTemplate = this.findBy("#segment-row-template");
@@ -92,7 +105,7 @@ export class LevelSite extends WordRotatorBaseSite {
let currentLevelInfo = localStorage.getItem("currentLevel");
if (currentLevelInfo !== null) {
currentLevelInfo = JSON.parse(currentLevelInfo);
console.log("LevelID: ", currentLevelInfo["id"]);
// console.log("LevelID: ", currentLevelInfo["id"]);
const db = WordRotatorDb.getInstance();
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
@@ -163,6 +176,9 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0"));
this.coinAction.redraw();
this.wonParams.aborted = true;
clearTimeout(this.wonParams.coinCounterTimer);
}
catch (e) {
console.error(e);
@@ -206,33 +222,36 @@ export class LevelSite extends WordRotatorBaseSite {
let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
let audio = new Audio();
let coinPromise = Promise.all([new Promise((r) => {
setTimeout(r, 500)
}),
new Promise(r => {
audio.addEventListener('loadeddata', r);
})
]);
audio.src = Helper.basePath("sound/single_coin_fall_on_concrete_.mp3");
setTimeout(() => {
r(continueButton.fadeIn());
}, 500)
}), this.wonParams.audioPromise]);
this.wonParams.aborted = false;
let audio = this.wonParams.audio;
for (let i = 0; i < coinsPerLevel; i++) {
let coinElem = Helper.cloneNode(this.coinTemplate);
this.coinContainer.appendChild(coinElem);
coinPromise = coinPromise.then(() => {
return new Promise(r => {
let timeout = 350;
coinElem.fadeIn(timeout / 1000);
if (audio !== null) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
setTimeout(() => {
this.coinAction.setTitle(coinsBefore++);
this.coinAction.redraw();
}, timeout / 2);
if (!this.wonParams.aborted) {
coinElem.fadeIn(timeout / 1000);
if (audio !== null) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
this.wonParams.coinCounterTimer = setTimeout(() => {
this.coinAction.setTitle(coinsBefore++);
this.coinAction.redraw();
}, timeout / 2);
}
//Always do the next promise for garbage collection
setTimeout(r, timeout);
})
});
@@ -242,9 +261,9 @@ export class LevelSite extends WordRotatorBaseSite {
this.continueButtonScaler();
this.levelScaler();
coinPromise.then(() => {
continueButton.fadeIn();
});
// coinPromise.then(() => {
// continueButton.fadeIn();
// });
await savePromise;
}
catch (e) {

15
src/module/Application/pwa/js/site/MenuSite.js Normal file
View File

@@ -0,0 +1,15 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {LevelSite} from "./LevelSite";
export class MenuSite extends WordRotatorBaseSite{
constructor(siteManager) {
super(siteManager, "html/application/menu.html");
}
onFirstStart() {
super.onFirstStart();
this.findBy("#play-button").addEventListener("click", () => {
this.startSite(LevelSite);
})
}
}

4
src/module/Application/pwa/js/site/SynchronizeSite.js
View File

@@ -3,6 +3,7 @@ import {DataManager} from "../../../../../js/lib/pwa-core";
import {WordRotatorDb} from "../WordRotatorDb";
import {LevelSite} from "./LevelSite";
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {MenuSite} from "./MenuSite";
export class SynchronizeSite extends WordRotatorBaseSite {
@@ -18,7 +19,8 @@ export class SynchronizeSite extends WordRotatorBaseSite {
onFirstStart() {
super.onFirstStart();
this.startSite(LevelSite);
this.startSite(MenuSite);
this.finish();
}
async loadLevels() {