Tutorial angefangen
This commit is contained in:
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
Reference in New Issue
Block a user