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

Tutorial fertig gestellt, Theme geupdated, Tests angepasst

Browse Source
This commit is contained in:
silas
2018-09-27 22:08:07 +02:00
parent 9678354c92
commit e34a3e865f
35 changed files with 481 additions and 6680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/module/Application/pwa/html/application/level.html
View File

@@ -12,15 +12,18 @@
<div id='segment-triangle-template' class='segment segment-triangle'>
<div class='child-container'></div>
</div>
<div id = 'tutorial-pointer'></div>
<!-- Site Content -->
<div class='max-height fill-me'>
<div class="text-right max-width">
<button class="button show-while-playing" id='help-button' data-translation="help"></button>
</div>
<div class = 'height-20 tutorial-text center flex-center hidden'>
<div class = 'height-20 no-transition tutorial-text center flex-center hidden'>
<div class = 'step-1 hidden' data-translation="tutorial-step-1"></div>
<div class = 'step-2 hidden' data-translation="tutorial-step-2"></div>
<div class = 'step-3 hidden' data-translation="tutorial-step-3"></div>
<div class = 'step-4 hidden' data-translation="tutorial-step-4"></div>
</div>
<div class='height-20 show-when-won center flex-center fill-me'>
<div class = 'grow max-width'>

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

@@ -152,6 +152,7 @@ export class LevelSite extends WordRotatorBaseSite {
if (nextLevelJson === null) {
this.startSite(EndSite);
this.finish();
return;
}
const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
@@ -233,9 +234,14 @@ export class LevelSite extends WordRotatorBaseSite {
}).then(() => {
return Promise.all([new Promise((r) => {
setTimeout(() => {
r(continueButton.fadeIn());
console.log("fadeIn");
r(continueButton.fadeIn().then(() => {
console.log("fade in ended!")
}));
}, 500)
}), audioOptions.loadedPromise.catch(e => {
}), audioOptions.loadedPromise.then(() => {
console.log("audio loaded")
}).catch(e => {
console.error(e)
})]);
});
@@ -248,7 +254,7 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinPromise = this.coinPromise.then(() => {
return new Promise(r => {
let timeout = 350;
console.log("coinPromise - won", this.wonParams);
if (!this.wonParams.aborted) {
coinElem.fadeIn(timeout / 1000);
soundManager.play(SoundManager.CHANNELS.SOUND);
@@ -259,17 +265,19 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinAction.redraw();
}
}, timeout / 2);
setTimeout(r, timeout);
}
else {
r();
}
//Always do the next promise for garbage collection
setTimeout(r, timeout);
})
});
}
this.coinPromise = this.coinPromise.catch((e) => {console.error(e)});
this.coinPromise = this.coinPromise.catch((e) => {
console.error(e)
});
this.wonTextScaler();
this.continueButtonScaler();
@@ -342,6 +350,8 @@ export class LevelSite extends WordRotatorBaseSite {
this._siteContent.classList.remove("step-2");
localStorage.removeItem("tutorial-step");
this.coinPromise = this.coinPromise.then(() => {
console.log("coinPromise - tutorial", this.wonParams);
FlashMessenger.addMessage("extra-coins-after-first-level");
localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")) + 50);
this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0"));
@@ -359,18 +369,18 @@ export class LevelSite extends WordRotatorBaseSite {
else if (this.level.id === LevelSite.TUTORIAL.SECOND_LEVEL) {
let currentStep = Helper.nonNull(localStorage.getItem("tutorial-step"), "3");
let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
switch (currentStep) {
case "3": {
let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let eventListener = () => {
this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-2");
localStorage.removeItem("tutorial-step");
this._siteContent.classList.remove("step-3");
localStorage.setItem("tutorial-step", "4");
this.findBy("#help-button").removeEventListener("click", eventListener);
};
this.findBy("#help-button").addEventListener("click", eventListener);
@@ -381,10 +391,45 @@ export class LevelSite extends WordRotatorBaseSite {
}
}
}
else if (this.level.id === LevelSite.TUTORIAL.BIG_SEGMENT_LEVEL) {
let currentStep = Helper.nonNull(localStorage.getItem("tutorial-step"), "4");
switch (currentStep) {
case "4": {
let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let rotatableSegments = this.level.getRotatableSegments();
let firstSegment = rotatableSegments[0];
let pointer = this.findBy("#tutorial-pointer");
pointer.remove();
firstSegment.element.appendChild(pointer);
this.level.setSegmentClickedListener((segment) => {
if (firstSegment === segment) {
this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-4");
localStorage.setItem("tutorial-step", "5");
}
});
let textElem = this.findBy(".tutorial-text .step-4");
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
break;
}
}
}
}
}
LevelSite.TUTORIAL = {
FIRST_LEVEL: 67,
SECOND_LEVEL: 15,
BIG_SEGMENT_LEVEL: 341
};

1
src/module/Application/pwa/translations/de.json
View File

@@ -13,5 +13,6 @@
"tutorial-step-1": "Klicke auf ein Feld, um dieses rotieren zu lassen!",
"tutorial-step-2": "Um zu gewinnen, drehe die Segmente so, dass du zwei Wörter lesen kannst.",
"tutorial-step-3": "Durch die Hilfe kannst du ein Segment lösen lassen. Die Hilfe kostet aber 25 Münzen. Probiere jetzt die Hilfe aus.",
"tutorial-step-4": "Große Segmente drehst du, indem du diese ziehst.",
"extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!"
}