Tutorial angefangen
This commit is contained in:
silas
parent
4a5d41fe70
commit
d2a5489c32
@ -24,3 +24,22 @@
|
||||
2018-09-26T14:58:31+02:00 ERR (3):
|
||||
2018-09-26T14:59:27+02:00 ERR (3):
|
||||
2018-09-26T15:08:13+02:00 ERR (3):
|
||||
2018-09-26T15:16:58+02:00 ERR (3):
|
||||
2018-09-26T15:17:10+02:00 ERR (3):
|
||||
2018-09-26T15:17:50+02:00 ERR (3):
|
||||
2018-09-26T15:18:15+02:00 ERR (3):
|
||||
2018-09-26T15:18:39+02:00 ERR (3):
|
||||
2018-09-26T18:01:15+02:00 ERR (3):
|
||||
2018-09-26T18:06:35+02:00 ERR (3):
|
||||
2018-09-26T18:09:03+02:00 ERR (3):
|
||||
2018-09-27T11:48:18+02:00 ERR (3):
|
||||
2018-09-27T11:49:03+02:00 ERR (3):
|
||||
2018-09-27T11:49:24+02:00 ERR (3):
|
||||
2018-09-27T11:55:27+02:00 ERR (3):
|
||||
2018-09-27T11:56:27+02:00 ERR (3):
|
||||
2018-09-27T12:01:44+02:00 ERR (3):
|
||||
2018-09-27T12:20:36+02:00 ERR (3):
|
||||
2018-09-27T12:21:38+02:00 ERR (3):
|
||||
2018-09-27T12:29:51+02:00 ERR (3):
|
||||
2018-09-27T12:30:53+02:00 ERR (3):
|
||||
2018-09-27T12:31:24+02:00 ERR (3):
|
||||
|
||||
19
log/log.log
19
log/log.log
@ -24,3 +24,22 @@
|
||||
2018-09-26T14:58:31+02:00 ERR (3):
|
||||
2018-09-26T14:59:27+02:00 ERR (3):
|
||||
2018-09-26T15:08:13+02:00 ERR (3):
|
||||
2018-09-26T15:16:58+02:00 ERR (3):
|
||||
2018-09-26T15:17:10+02:00 ERR (3):
|
||||
2018-09-26T15:17:50+02:00 ERR (3):
|
||||
2018-09-26T15:18:15+02:00 ERR (3):
|
||||
2018-09-26T15:18:39+02:00 ERR (3):
|
||||
2018-09-26T18:01:15+02:00 ERR (3):
|
||||
2018-09-26T18:06:35+02:00 ERR (3):
|
||||
2018-09-26T18:09:03+02:00 ERR (3):
|
||||
2018-09-27T11:48:18+02:00 ERR (3):
|
||||
2018-09-27T11:49:03+02:00 ERR (3):
|
||||
2018-09-27T11:49:24+02:00 ERR (3):
|
||||
2018-09-27T11:55:27+02:00 ERR (3):
|
||||
2018-09-27T11:56:27+02:00 ERR (3):
|
||||
2018-09-27T12:01:44+02:00 ERR (3):
|
||||
2018-09-27T12:20:36+02:00 ERR (3):
|
||||
2018-09-27T12:21:38+02:00 ERR (3):
|
||||
2018-09-27T12:29:51+02:00 ERR (3):
|
||||
2018-09-27T12:30:53+02:00 ERR (3):
|
||||
2018-09-27T12:31:24+02:00 ERR (3):
|
||||
|
||||
@ -52,10 +52,11 @@ INSERT INTO `RoleAccess` (`RoleId`, `AccessId`) VALUES (3, 4); -- admin - admin
|
||||
|
||||
|
||||
INSERT INTO `Level` (`id`, `words`, `positions`, `renderer`, `lastUpdated`, `lang`, `deleted`, `difficulty`) VALUES
|
||||
(15, '["ARCHIV","CHARME"]', '[1,1,3]', 20, '2018-07-14 17:01:18', 1, 0, 20),
|
||||
(15, '["ARCHIV","CHARME"]', '[1,1,3]', 20, '2018-07-14 17:01:18', 1, 0, 2),
|
||||
(26, '["BODENSEE","ALARMRUF"]', '[3,2,0,3]', 40, '2018-07-14 17:01:18', 1, 0, 40),
|
||||
(217, '["ZEITSTRAFE","HOCHSAISON"]', '[1,0,3,3,1]', 60, '2018-07-14 17:01:18', 1, 0, 60),
|
||||
(220, '["FEINGUSS","R\\u00dcCKFALL","PHYSIKER","RESIDENZ","BERATUNG","HERZLAND"]', '[2,0,0,1,2,2,3,3,2,1,1,2,0,0]', 100, '2018-07-14 17:01:18', 1, 0, 100),
|
||||
(24, '["BETONUNG","ANBETUNG","ALLERGIE","BAUMHAUS"]', '[0,3,1,1,3,1,2,0,0,0]', 120, '2018-07-14 17:01:18', 1, 0, 120),
|
||||
(62, '["FEHLPROGNOSE","GEISTESKRAFT","ARBEITSPAUSE","BEREITSCHAFT","MOSAIKARBEIT","INFRAROTFILM"]', '[0,3,0,1,0,3,2,3,1,2,3,1,2,2,0,2,3,0,2,1,1]', 140, '2018-07-14 17:01:18', 1, 0, 140),
|
||||
(260, '["SCHREIBTISCH","URHEBERRECHT","PFLANZENKOST","OPERNKONZERT"]', '[1,3,2,1,3,0,1,2,3,0,2,0,1,0,0]', 160, '2018-07-14 17:01:18', 1, 0, 160);
|
||||
(260, '["SCHREIBTISCH","URHEBERRECHT","PFLANZENKOST","OPERNKONZERT"]', '[1,3,2,1,3,0,1,2,3,0,2,0,1,0,0]', 160, '2018-07-14 17:01:18', 1, 0, 160),
|
||||
(67,'["AHNUNG","AUSBAU"]','[0,0,1]',20,'2018-10-10 00:00:00',1,0,1);
|
||||
@ -1,6 +1,6 @@
|
||||
import {SystemSettings, Translator} from "./lib/pwa-lib";
|
||||
|
||||
SystemSettings.setBasePath("/");
|
||||
Translator.supportedLanguages = ["de", "en"];
|
||||
Translator.supportedLanguages = ["de"];
|
||||
Translator.markTranslations = false;
|
||||
Translator.markUntranslatedTranslations = false;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><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 show-when-won center flex-center fill-me"><div class="grow max-width"><b data-translation=won id=won-text></b></div><div id=coin-container><div id=coin-template class=coin style="opacity: 0"><img src=img/coin.png></div></div></div><div class="flex-center level-container grow"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div></div>
|
||||
<div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><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="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><div class="height-20 show-when-won center flex-center fill-me"><div class="grow max-width"><b data-translation=won id=won-text></b></div><div id=coin-container><div id=coin-template class=coin style="opacity: 0"><img src=img/coin.png></div></div></div><div class="flex-center level-container grow"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div><div class=tutorial-blanket></div></div>
|
||||
314
public/js/app.js
314
public/js/app.js
@ -4827,76 +4827,20 @@ InitPromise.addPromise(function (app) {
|
||||
app.addDeepLink("code", CodeSite);
|
||||
});
|
||||
|
||||
class WordRotatorDb extends MyDb {
|
||||
|
||||
static getInstance() {
|
||||
if (Helper.isNull(WordRotatorDb.instance)) {
|
||||
WordRotatorDb.instance = new WordRotatorDb();
|
||||
}
|
||||
return WordRotatorDb.instance;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super("wordRotator", 3);
|
||||
}
|
||||
|
||||
upgrade(db, oldVersion, newVersion, e) {
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 1 && newVersion >= 1) {
|
||||
let levelObjectStore = db.createObjectStore(WordRotatorDb.OBJECT_STORE.LEVEL, {"keyPath": "id"});
|
||||
}
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 2 && newVersion >= 2) {
|
||||
let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
levelObjectStore.createIndex("played", ["deleted", "played", "difficulty", "id"], {"unique": false});
|
||||
}
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 3 && newVersion >= 3) {
|
||||
let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
levelObjectStore.createIndex("difficulty", "difficulty", {"unique": false});
|
||||
}
|
||||
};
|
||||
|
||||
async saveManyLevels(levels) {
|
||||
return this.saveMany(levels, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
|
||||
async loadLevel(levelId) {
|
||||
return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
|
||||
async loadNextLevel(rendererTypes) {
|
||||
const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
|
||||
let wrongLevels = [];
|
||||
let newLevels = [];
|
||||
let difficulty = -1;
|
||||
for (let i = 0, n = levels.length; i < n; i++) {
|
||||
if ((difficulty < 0 || difficulty === levels[i]["difficulty"]) && !levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
|
||||
newLevels.push(levels[i]);
|
||||
difficulty = levels[i]["difficulty"];
|
||||
}
|
||||
else if (levels[i]["difficulty"] !== 0 && !levels[i]["deleted"] && !levels[i]["played"] ) {
|
||||
wrongLevels.push(levels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (newLevels.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length];
|
||||
}
|
||||
|
||||
async saveLevelPlayed(levelId) {
|
||||
const level = await this.loadLevel(levelId);
|
||||
level.played = true;
|
||||
return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
class WordRotatorBaseSite extends AbstractSite {
|
||||
// createActionBarMenu(menu) {
|
||||
// menu = super.createActionBarMenu(menu);
|
||||
// // menu.addAction(SettingsSite.settingsAction.copy());
|
||||
// // let actions = menu.actions;
|
||||
// // for (let i = 0; i < actions.length; i++) {
|
||||
// // if (actions[i].title === "login" || actions[i].title === "registration"){
|
||||
// // actions[i].setVisible(false);
|
||||
// // }
|
||||
// // }
|
||||
// return menu;
|
||||
// }
|
||||
}
|
||||
|
||||
WordRotatorDb.OBJECT_STORE = {
|
||||
LEVEL: "level",
|
||||
};
|
||||
WordRotatorDb.instance = null;
|
||||
|
||||
class TemplateContainer{
|
||||
constructor(leafTemplate, parentTemplate, rowTemplate, triangleTemplate){
|
||||
this.leafTemplate = leafTemplate;
|
||||
@ -5044,6 +4988,7 @@ class ParentSegment extends Segment {
|
||||
this.touchendListener = function (e) {
|
||||
let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
|
||||
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
|
||||
self.getLevel().segmentClickedListener(self);
|
||||
self.rotate(ParentSegment.mouseDownTarget, target);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@ -5051,6 +4996,7 @@ class ParentSegment extends Segment {
|
||||
};
|
||||
this.mouseupListener = function (e) {
|
||||
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
|
||||
self.getLevel().segmentClickedListener(self);
|
||||
self.rotate(ParentSegment.mouseDownTarget, e.target);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@ -5258,6 +5204,8 @@ class Level {
|
||||
self.wonResolver = resolve;
|
||||
self.giveUpResolver = reject;
|
||||
});
|
||||
|
||||
this.segmentClickedListener = () => {};
|
||||
}
|
||||
|
||||
saveAsCurrentLevel(){
|
||||
@ -5368,6 +5316,10 @@ class Level {
|
||||
return Level._getRotatableSegmentsFrom(this.rootSegment);
|
||||
}
|
||||
|
||||
setSegmentClickedListener(listener){
|
||||
this.segmentClickedListener = listener;
|
||||
}
|
||||
|
||||
static _getRotatableSegmentsFrom(segment){
|
||||
let rotatable = [];
|
||||
if (segment.canRotate())
|
||||
@ -5723,20 +5675,76 @@ LevelHelper.types = {
|
||||
160: FourWordsLevel12,
|
||||
};
|
||||
|
||||
class WordRotatorBaseSite extends AbstractSite {
|
||||
// createActionBarMenu(menu) {
|
||||
// menu = super.createActionBarMenu(menu);
|
||||
// // menu.addAction(SettingsSite.settingsAction.copy());
|
||||
// // let actions = menu.actions;
|
||||
// // for (let i = 0; i < actions.length; i++) {
|
||||
// // if (actions[i].title === "login" || actions[i].title === "registration"){
|
||||
// // actions[i].setVisible(false);
|
||||
// // }
|
||||
// // }
|
||||
// return menu;
|
||||
// }
|
||||
class WordRotatorDb extends MyDb {
|
||||
|
||||
static getInstance() {
|
||||
if (Helper.isNull(WordRotatorDb.instance)) {
|
||||
WordRotatorDb.instance = new WordRotatorDb();
|
||||
}
|
||||
return WordRotatorDb.instance;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super("wordRotator", 3);
|
||||
}
|
||||
|
||||
upgrade(db, oldVersion, newVersion, e) {
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 1 && newVersion >= 1) {
|
||||
let levelObjectStore = db.createObjectStore(WordRotatorDb.OBJECT_STORE.LEVEL, {"keyPath": "id"});
|
||||
}
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 2 && newVersion >= 2) {
|
||||
let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
levelObjectStore.createIndex("played", ["deleted", "played", "difficulty", "id"], {"unique": false});
|
||||
}
|
||||
if (Helper.isNull(oldVersion) || oldVersion < 3 && newVersion >= 3) {
|
||||
let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
levelObjectStore.createIndex("difficulty", "difficulty", {"unique": false});
|
||||
}
|
||||
};
|
||||
|
||||
async saveManyLevels(levels) {
|
||||
return this.saveMany(levels, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
|
||||
async loadLevel(levelId) {
|
||||
return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
|
||||
async loadNextLevel(rendererTypes) {
|
||||
const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
|
||||
let wrongLevels = [];
|
||||
let newLevels = [];
|
||||
let difficulty = -1;
|
||||
for (let i = 0, n = levels.length; i < n; i++) {
|
||||
if ((difficulty < 0 || difficulty === levels[i]["difficulty"]) && !levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
|
||||
newLevels.push(levels[i]);
|
||||
difficulty = levels[i]["difficulty"];
|
||||
}
|
||||
else if (levels[i]["difficulty"] !== 0 && !levels[i]["deleted"] && !levels[i]["played"] ) {
|
||||
wrongLevels.push(levels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (newLevels.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length];
|
||||
}
|
||||
|
||||
async saveLevelPlayed(levelId) {
|
||||
const level = await this.loadLevel(levelId);
|
||||
level.played = true;
|
||||
return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
}
|
||||
}
|
||||
|
||||
WordRotatorDb.OBJECT_STORE = {
|
||||
LEVEL: "level",
|
||||
};
|
||||
WordRotatorDb.instance = null;
|
||||
|
||||
class EndSite extends WordRotatorBaseSite{
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/end.html");
|
||||
@ -5769,11 +5777,16 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
aborted: false,
|
||||
coinCounterTimer: null,
|
||||
};
|
||||
this.coinPromise = Promise.resolve();
|
||||
|
||||
let settingsManager = SettingsManager.getInstance();
|
||||
|
||||
let soundManager = SoundManager.getInstance();
|
||||
soundManager.set({audio: "sound/single_coin_fall_on_concrete_.mp3", muted: !settingsManager.getSetting("play-sound", true), volume:0.7}, SoundManager.CHANNELS.SOUND);
|
||||
soundManager.set({
|
||||
audio: "sound/single_coin_fall_on_concrete_.mp3",
|
||||
muted: !settingsManager.getSetting("play-sound", true),
|
||||
volume: 0.7
|
||||
}, SoundManager.CHANNELS.SOUND);
|
||||
|
||||
return super.onConstruct(args);
|
||||
}
|
||||
@ -5864,7 +5877,7 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
|
||||
|
||||
this.level = level;
|
||||
return;
|
||||
return this.tutorial();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
@ -5910,6 +5923,8 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
|
||||
this.wonParams.aborted = true;
|
||||
clearTimeout(this.wonParams.coinCounterTimer);
|
||||
|
||||
return this.tutorial();
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
@ -5950,24 +5965,31 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
|
||||
this.coinContainer.removeAllChildren();
|
||||
let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5);
|
||||
let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
|
||||
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
|
||||
|
||||
let coinsBefore = 0;
|
||||
|
||||
let soundManager = SoundManager.getInstance();
|
||||
let audioOptions = soundManager.get(SoundManager.CHANNELS.SOUND);
|
||||
|
||||
let coinPromise = Promise.all([new Promise((r) => {
|
||||
this.coinPromise = Promise.all([new Promise((r) => {
|
||||
setTimeout(() => {
|
||||
r(continueButton.fadeIn());
|
||||
}, 500);
|
||||
}), audioOptions.loadedPromise.catch(e => {console.error(e);})]);
|
||||
}), audioOptions.loadedPromise.catch(e => {
|
||||
console.error(e);
|
||||
}),
|
||||
this.coinPromise.then(() => {
|
||||
coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
|
||||
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
|
||||
})
|
||||
]);
|
||||
|
||||
this.wonParams.aborted = false;
|
||||
|
||||
for (let i = 0; i < coinsPerLevel; i++) {
|
||||
let coinElem = Helper.cloneNode(this.coinTemplate);
|
||||
this.coinContainer.appendChild(coinElem);
|
||||
coinPromise = coinPromise.then(() => {
|
||||
this.coinPromise = this.coinPromise.then(() => {
|
||||
return new Promise(r => {
|
||||
let timeout = 350;
|
||||
|
||||
@ -6027,8 +6049,85 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
FlashMessenger.addMessage("not-enough-coins");
|
||||
}
|
||||
}
|
||||
|
||||
async tutorial() {
|
||||
|
||||
if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) {
|
||||
let currentStep = Helper.nonNull(localStorage.getItem("tutorial-step"), "1");
|
||||
|
||||
let scaleHelper = new ScaleHelper();
|
||||
this._siteContent.classList.add("tutorial");
|
||||
this._siteContent.classList.add("step-" + currentStep);
|
||||
this.levelScaler();
|
||||
|
||||
switch (currentStep) {
|
||||
case "1": {
|
||||
this.level.setSegmentClickedListener(() => {
|
||||
this._siteContent.classList.remove("step-1");
|
||||
localStorage.setItem("tutorial-step", "2");
|
||||
this.tutorial();
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-1");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
case "2": {
|
||||
this.level.setSegmentClickedListener(() => {
|
||||
});
|
||||
this.level.getWonPromise().then(() => {
|
||||
this._siteContent.classList.remove("tutorial");
|
||||
this._siteContent.classList.remove("step-2");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
this.coinPromise = this.coinPromise.then(() => {
|
||||
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"));
|
||||
this.coinAction.redraw();
|
||||
});
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-2");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 eventListener = () => {
|
||||
this._siteContent.classList.remove("tutorial");
|
||||
this._siteContent.classList.remove("step-2");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
this.findBy("#help-button").removeEventListener("click", eventListener);
|
||||
};
|
||||
this.findBy("#help-button").addEventListener("click", eventListener);
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-3");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LevelSite.TUTORIAL = {
|
||||
FIRST_LEVEL: 67,
|
||||
SECOND_LEVEL: 15,
|
||||
};
|
||||
|
||||
class MainMenuLevel extends FourWordsLevel{
|
||||
|
||||
constructor(templateContainer) {
|
||||
@ -6045,7 +6144,7 @@ class MainMenuLevel extends FourWordsLevel{
|
||||
class MenuSite extends WordRotatorBaseSite {
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/menu.html");
|
||||
|
||||
this.loadLevelPromise = this.loadLevels();
|
||||
this.listener = null;
|
||||
}
|
||||
|
||||
@ -6125,7 +6224,7 @@ class MenuSite extends WordRotatorBaseSite {
|
||||
|
||||
let playButton = this.findBy("#play-button");
|
||||
playButton.addEventListener("click", () => {
|
||||
this.startSite(LevelSite);
|
||||
this.startSite(LevelSite, this.loadLevelPromise);
|
||||
});
|
||||
|
||||
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
|
||||
@ -6171,9 +6270,6 @@ class MenuSite extends WordRotatorBaseSite {
|
||||
playSoundButton.addEventListener("change", () => {
|
||||
settingsManager.setSetting("play-sound", playSoundButton.checked);
|
||||
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
|
||||
// if (playSoundButton.checked){
|
||||
// soundManager.play(SoundManager.CHANNELS.MUSIC);
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
@ -6182,30 +6278,6 @@ class MenuSite extends WordRotatorBaseSite {
|
||||
window.removeEventListener("resize", this.listener);
|
||||
super.onPause(args);
|
||||
}
|
||||
}
|
||||
|
||||
MenuSite.app = null;
|
||||
InitPromise.addPromise(app => {
|
||||
MenuSite.app = app;
|
||||
});
|
||||
|
||||
class SynchronizeSite extends WordRotatorBaseSite {
|
||||
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/sync.html");
|
||||
}
|
||||
|
||||
async onConstruct(args) {
|
||||
let res = await super.onConstruct(args);
|
||||
await this.loadLevels();
|
||||
return res;
|
||||
}
|
||||
|
||||
onFirstStart() {
|
||||
super.onFirstStart();
|
||||
this.startSite(MenuSite);
|
||||
this.finish();
|
||||
}
|
||||
|
||||
async loadLevels() {
|
||||
const dateLastSync = Helper.nonNull(localStorage.getItem("date-last-sync"), 0);
|
||||
@ -6247,6 +6319,11 @@ class SynchronizeSite extends WordRotatorBaseSite {
|
||||
}
|
||||
}
|
||||
|
||||
MenuSite.app = null;
|
||||
InitPromise.addPromise(app => {
|
||||
MenuSite.app = app;
|
||||
});
|
||||
|
||||
class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
|
||||
constructor(site) {
|
||||
super(site, "html/application/fragment/settings.html");
|
||||
@ -6280,6 +6357,7 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
|
||||
localStorage.removeItem("currentLevel");
|
||||
localStorage.removeItem("date-last-sync");
|
||||
localStorage.removeItem("levelCounter");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
});
|
||||
|
||||
@ -6298,7 +6376,7 @@ if (window.location.pathname.endsWith("publicTest/"))
|
||||
}
|
||||
|
||||
SystemSettings.setBasePath(basePath);
|
||||
Translator.supportedLanguages = ["de", "en"];
|
||||
Translator.supportedLanguages = ["de"];
|
||||
Translator.markTranslations = false;
|
||||
|
||||
applyPolyfills();
|
||||
@ -6341,6 +6419,6 @@ InitPromise.resolve(app).then(function(){
|
||||
let soundManager = SoundManager.getInstance();
|
||||
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.mp3", loop: true, volume: 0.6, muted: !settingsManager.getSetting("play-music", true)});
|
||||
|
||||
app.start(SynchronizeSite);
|
||||
app.start(MenuSite);
|
||||
Translator.setLanguage("de");
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -16,14 +16,16 @@ import "./lib/pwa-assets"
|
||||
import "./lib/pwa-code-management"
|
||||
import "./lib/pwa-user-management"
|
||||
|
||||
import {SynchronizeSite} from "../module/Application/pwa/js/site/SynchronizeSite";
|
||||
import {SettingsManager, SettingsSite} from "./lib/pwa-core";
|
||||
applyPolyfills();
|
||||
|
||||
import {SoundManager} from "./lib/pwa-assets";
|
||||
import {MenuSite} from "../module/Application/pwa/js/site/MenuSite";
|
||||
import {WordRotatorSettingFragment} from "../module/Application/pwa/js/Fragment/WordRotatorSettingFragment";
|
||||
|
||||
applyPolyfills();
|
||||
|
||||
|
||||
import './settings'
|
||||
import {SoundManager} from "./lib/pwa-assets";
|
||||
|
||||
ThemeManager.addTheme(new Theme('red', ''));
|
||||
ThemeManager.addTheme(new Theme("blue", "blue"));
|
||||
@ -63,7 +65,7 @@ InitPromise.resolve(app).then(function(){
|
||||
let soundManager = SoundManager.getInstance();
|
||||
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.mp3", loop: true, volume: 0.6, muted: !settingsManager.getSetting("play-music", true)});
|
||||
|
||||
app.start(SynchronizeSite);
|
||||
app.start(MenuSite);
|
||||
Translator.setLanguage("de");
|
||||
});
|
||||
|
||||
@ -8,7 +8,7 @@ if (window.location.pathname.endsWith("publicTest/"))
|
||||
}
|
||||
|
||||
SystemSettings.setBasePath(basePath);
|
||||
Translator.supportedLanguages = ["de", "en"];
|
||||
Translator.supportedLanguages = ["de"];
|
||||
Translator.markTranslations = false;
|
||||
|
||||
const TRACKING_ID = '';
|
||||
|
||||
@ -14,10 +14,14 @@
|
||||
</div>
|
||||
<!-- Site Content -->
|
||||
<div class='max-height fill-me'>
|
||||
<!--<div class = 'max-width'>-->
|
||||
<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 = '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>
|
||||
<div class='height-20 show-when-won center flex-center fill-me'>
|
||||
<div class = 'grow max-width'>
|
||||
<b data-translation="won" id="won-text"></b>
|
||||
@ -36,4 +40,7 @@
|
||||
<button class='button max-width' id='continue-button' data-translation="continue"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = 'tutorial-blanket'></div>
|
||||
|
||||
</div>
|
||||
@ -35,6 +35,7 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
|
||||
localStorage.removeItem("currentLevel");
|
||||
localStorage.removeItem("date-last-sync");
|
||||
localStorage.removeItem("levelCounter");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL);
|
||||
});
|
||||
|
||||
|
||||
@ -33,11 +33,16 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
aborted: false,
|
||||
coinCounterTimer: null,
|
||||
};
|
||||
this.coinPromise = Promise.resolve();
|
||||
|
||||
let settingsManager = SettingsManager.getInstance();
|
||||
|
||||
let soundManager = SoundManager.getInstance();
|
||||
soundManager.set({audio: "sound/single_coin_fall_on_concrete_.mp3", muted: !settingsManager.getSetting("play-sound", true), volume:0.7}, SoundManager.CHANNELS.SOUND);
|
||||
soundManager.set({
|
||||
audio: "sound/single_coin_fall_on_concrete_.mp3",
|
||||
muted: !settingsManager.getSetting("play-sound", true),
|
||||
volume: 0.7
|
||||
}, SoundManager.CHANNELS.SOUND);
|
||||
|
||||
return super.onConstruct(args);
|
||||
}
|
||||
@ -128,7 +133,7 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
|
||||
|
||||
this.level = level;
|
||||
return;
|
||||
return this.tutorial();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
@ -174,6 +179,8 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
|
||||
this.wonParams.aborted = true;
|
||||
clearTimeout(this.wonParams.coinCounterTimer);
|
||||
|
||||
return this.tutorial();
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
@ -214,24 +221,31 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
|
||||
this.coinContainer.removeAllChildren();
|
||||
let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5);
|
||||
let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
|
||||
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
|
||||
|
||||
let coinsBefore = 0;
|
||||
|
||||
let soundManager = SoundManager.getInstance();
|
||||
let audioOptions = soundManager.get(SoundManager.CHANNELS.SOUND);
|
||||
|
||||
let coinPromise = Promise.all([new Promise((r) => {
|
||||
this.coinPromise = Promise.all([new Promise((r) => {
|
||||
setTimeout(() => {
|
||||
r(continueButton.fadeIn());
|
||||
}, 500)
|
||||
}), audioOptions.loadedPromise.catch(e => {console.error(e)})]);
|
||||
}), audioOptions.loadedPromise.catch(e => {
|
||||
console.error(e)
|
||||
}),
|
||||
this.coinPromise.then(() => {
|
||||
coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
|
||||
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
|
||||
})
|
||||
]);
|
||||
|
||||
this.wonParams.aborted = false;
|
||||
|
||||
for (let i = 0; i < coinsPerLevel; i++) {
|
||||
let coinElem = Helper.cloneNode(this.coinTemplate);
|
||||
this.coinContainer.appendChild(coinElem);
|
||||
coinPromise = coinPromise.then(() => {
|
||||
this.coinPromise = this.coinPromise.then(() => {
|
||||
return new Promise(r => {
|
||||
let timeout = 350;
|
||||
|
||||
@ -291,4 +305,81 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
FlashMessenger.addMessage("not-enough-coins");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async tutorial() {
|
||||
|
||||
if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) {
|
||||
let currentStep = Helper.nonNull(localStorage.getItem("tutorial-step"), "1");
|
||||
|
||||
let scaleHelper = new ScaleHelper();
|
||||
this._siteContent.classList.add("tutorial");
|
||||
this._siteContent.classList.add("step-" + currentStep);
|
||||
this.levelScaler();
|
||||
|
||||
switch (currentStep) {
|
||||
case "1": {
|
||||
this.level.setSegmentClickedListener(() => {
|
||||
this._siteContent.classList.remove("step-1");
|
||||
localStorage.setItem("tutorial-step", "2");
|
||||
this.tutorial();
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-1");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
case "2": {
|
||||
this.level.setSegmentClickedListener(() => {
|
||||
});
|
||||
this.level.getWonPromise().then(() => {
|
||||
this._siteContent.classList.remove("tutorial");
|
||||
this._siteContent.classList.remove("step-2");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
this.coinPromise = this.coinPromise.then(() => {
|
||||
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"));
|
||||
this.coinAction.redraw();
|
||||
});
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-2");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 eventListener = () => {
|
||||
this._siteContent.classList.remove("tutorial");
|
||||
this._siteContent.classList.remove("step-2");
|
||||
localStorage.removeItem("tutorial-step");
|
||||
this.findBy("#help-button").removeEventListener("click", eventListener);
|
||||
};
|
||||
this.findBy("#help-button").addEventListener("click", eventListener);
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-3");
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LevelSite.TUTORIAL = {
|
||||
FIRST_LEVEL: 67,
|
||||
SECOND_LEVEL: 15,
|
||||
};
|
||||
@ -3,13 +3,14 @@ import {LevelSite} from "./LevelSite";
|
||||
import {ScaleHelper, SoundManager} from "../../../../../js/lib/pwa-assets";
|
||||
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
|
||||
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
|
||||
import {Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
|
||||
import {SettingsManager} from "../../../../../js/lib/pwa-core";
|
||||
import {FlashMessenger, Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
|
||||
import {DataManager, SettingsManager} from "../../../../../js/lib/pwa-core";
|
||||
import {WordRotatorDb} from "../WordRotatorDb";
|
||||
|
||||
export class MenuSite extends WordRotatorBaseSite {
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/menu.html");
|
||||
|
||||
this.loadLevelPromise = this.loadLevels();
|
||||
this.listener = null;
|
||||
}
|
||||
|
||||
@ -89,7 +90,7 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
|
||||
let playButton = this.findBy("#play-button");
|
||||
playButton.addEventListener("click", () => {
|
||||
this.startSite(LevelSite);
|
||||
this.startSite(LevelSite, this.loadLevelPromise);
|
||||
});
|
||||
|
||||
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
|
||||
@ -135,9 +136,6 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
playSoundButton.addEventListener("change", () => {
|
||||
settingsManager.setSetting("play-sound", playSoundButton.checked);
|
||||
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
|
||||
// if (playSoundButton.checked){
|
||||
// soundManager.play(SoundManager.CHANNELS.MUSIC);
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
@ -146,6 +144,45 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
window.removeEventListener("resize", this.listener);
|
||||
super.onPause(args);
|
||||
}
|
||||
|
||||
async loadLevels() {
|
||||
const dateLastSync = Helper.nonNull(localStorage.getItem("date-last-sync"), 0);
|
||||
const db = WordRotatorDb.getInstance();
|
||||
|
||||
let newLastSync = null;
|
||||
let maxRuns = 1;
|
||||
let levelPromises = [];
|
||||
for (let run = 0; run < maxRuns; run++) {
|
||||
let res = await DataManager.load("wordRotator/levels" + DataManager.buildQuery({
|
||||
"currentRun": run,
|
||||
"dateLastSync": dateLastSync
|
||||
}));
|
||||
if (!res["success"]) {
|
||||
FlashMessenger.addMessage("sync-error", null, 6000);
|
||||
newLastSync = null;
|
||||
break;
|
||||
}
|
||||
res = res["result"];
|
||||
newLastSync = Helper.nonNull(newLastSync, res["currentSyncDate"]);
|
||||
maxRuns = res["maxRuns"];
|
||||
|
||||
let levels = res["levels"];
|
||||
for (let i = 0, n = levels.length; i < n; i++) {
|
||||
let currentLevel = levels[i];
|
||||
levelPromises.push(db.loadLevel(levels[i]["id"]).then(level => {
|
||||
currentLevel["played"] = (Helper.nonNull(Helper.nonNull(level, {}).played, false));
|
||||
return currentLevel;
|
||||
}));
|
||||
}
|
||||
}
|
||||
let levels = await Promise.all(levelPromises);
|
||||
await db.saveManyLevels(levels);
|
||||
|
||||
if (newLastSync != null && newLastSync !== "null")
|
||||
{
|
||||
localStorage.setItem("date-last-sync", newLastSync);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MenuSite.app = null;
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
import {FlashMessenger, Helper} from "../../../../../js/lib/pwa-lib";
|
||||
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 {
|
||||
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/sync.html");
|
||||
}
|
||||
|
||||
async onConstruct(args) {
|
||||
let res = await super.onConstruct(args);
|
||||
await this.loadLevels();
|
||||
return res;
|
||||
}
|
||||
|
||||
onFirstStart() {
|
||||
super.onFirstStart();
|
||||
this.startSite(MenuSite);
|
||||
this.finish();
|
||||
}
|
||||
|
||||
async loadLevels() {
|
||||
const dateLastSync = Helper.nonNull(localStorage.getItem("date-last-sync"), 0);
|
||||
const db = WordRotatorDb.getInstance();
|
||||
|
||||
let newLastSync = null;
|
||||
let maxRuns = 1;
|
||||
let levelPromises = [];
|
||||
for (let run = 0; run < maxRuns; run++) {
|
||||
let res = await DataManager.load("wordRotator/levels" + DataManager.buildQuery({
|
||||
"currentRun": run,
|
||||
"dateLastSync": dateLastSync
|
||||
}));
|
||||
if (!res["success"]) {
|
||||
FlashMessenger.addMessage("sync-error", null, 6000);
|
||||
newLastSync = null;
|
||||
break;
|
||||
}
|
||||
res = res["result"];
|
||||
newLastSync = Helper.nonNull(newLastSync, res["currentSyncDate"]);
|
||||
maxRuns = res["maxRuns"];
|
||||
|
||||
let levels = res["levels"];
|
||||
for (let i = 0, n = levels.length; i < n; i++) {
|
||||
let currentLevel = levels[i];
|
||||
levelPromises.push(db.loadLevel(levels[i]["id"]).then(level => {
|
||||
currentLevel["played"] = (Helper.nonNull(Helper.nonNull(level, {}).played, false));
|
||||
return currentLevel;
|
||||
}));
|
||||
}
|
||||
}
|
||||
let levels = await Promise.all(levelPromises);
|
||||
await db.saveManyLevels(levels);
|
||||
|
||||
if (newLastSync != null && newLastSync !== "null")
|
||||
{
|
||||
localStorage.setItem("date-last-sync", newLastSync);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -20,6 +20,8 @@ export class Level {
|
||||
self.wonResolver = resolve;
|
||||
self.giveUpResolver = reject;
|
||||
});
|
||||
|
||||
this.segmentClickedListener = () => {};
|
||||
}
|
||||
|
||||
saveAsCurrentLevel(){
|
||||
@ -130,6 +132,10 @@ export class Level {
|
||||
return Level._getRotatableSegmentsFrom(this.rootSegment);
|
||||
}
|
||||
|
||||
setSegmentClickedListener(listener){
|
||||
this.segmentClickedListener = listener;
|
||||
}
|
||||
|
||||
static _getRotatableSegmentsFrom(segment){
|
||||
let rotatable = [];
|
||||
if (segment.canRotate())
|
||||
|
||||
@ -35,6 +35,7 @@ export class ParentSegment extends Segment {
|
||||
this.touchendListener = function (e) {
|
||||
let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
|
||||
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
|
||||
self.getLevel().segmentClickedListener(self);
|
||||
self.rotate(ParentSegment.mouseDownTarget, target);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@ -42,6 +43,7 @@ export class ParentSegment extends Segment {
|
||||
};
|
||||
this.mouseupListener = function (e) {
|
||||
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
|
||||
self.getLevel().segmentClickedListener(self);
|
||||
self.rotate(ParentSegment.mouseDownTarget, e.target);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
@ -8,5 +8,10 @@
|
||||
"sync-error":"Es gab einen Fehler beim Aktualisieren der Level. Bitte stelle sicher, dass du eine aktive Internetverbindung hast und versuche es später erneut.",
|
||||
"game-ended":"<b>Oh nein!</b> <br/>Es sieht so aus, als ob du schon alle Level gespielt hast... <br/>Schau später noch einmal rein, evtl gibt es dann neue Level.",
|
||||
|
||||
"play":"Spielen!"
|
||||
"play":"Spielen!",
|
||||
|
||||
"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.",
|
||||
"extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!"
|
||||
}
|
||||
74
src/scss/_tutorial.scss
Normal file
74
src/scss/_tutorial.scss
Normal file
@ -0,0 +1,74 @@
|
||||
.tutorial-blanket {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
z-index: 9001;
|
||||
background: rgba(98, 98, 98, 0.51);
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
.tutorial-blanket {
|
||||
display: block;
|
||||
}
|
||||
.tutorial-text {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.step-1 {
|
||||
#level {
|
||||
.segment-row {
|
||||
position: inherit;
|
||||
}
|
||||
.segment-parent:nth-child(3), .segment-parent:nth-child(3).rotating {
|
||||
z-index: 9900 !important;
|
||||
}
|
||||
}
|
||||
.tutorial-text .step-1 {
|
||||
display: initial;
|
||||
z-index: 9900 !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.step-2 {
|
||||
#level {
|
||||
z-index: 9900 !important;
|
||||
}
|
||||
.tutorial-text .step-2 {
|
||||
display: initial;
|
||||
z-index: 9900 !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.step-3 {
|
||||
.tutorial-text .step-3 {
|
||||
display: initial;
|
||||
z-index: 9900 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#help-button {
|
||||
position: relative;
|
||||
z-index: 9900 !important;
|
||||
overflow: visible;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 0 10px 5px #fff;
|
||||
//&:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import "tutorial";
|
||||
|
||||
//ActionBar
|
||||
nav.top-bar.title-bar {
|
||||
padding: 0.3rem 0.6rem 0;
|
||||
@ -286,12 +288,7 @@ $animationDuration: .25s;
|
||||
//Won-screen
|
||||
#site-content > :not(.won) {
|
||||
.show-when-won {
|
||||
//visibility: hidden;
|
||||
display: none;
|
||||
//transition: none;
|
||||
//* {
|
||||
// transition: none;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ async function afterEachTest(t) {
|
||||
return await t.eval(() => indexedDB.deleteDatabase('wordRotator'));
|
||||
}
|
||||
|
||||
let isLocal = true;
|
||||
let isLocal = false;
|
||||
if (isLocal) {
|
||||
fixture`Play`
|
||||
.page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user