Tutorial angefangen

log/error.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):

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):

orga/test.sql

@@ -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);

prod.settings.js

@@ -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;

public/html/application/level.html

@@ -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>

public/js/app.js

@@ -4827,76 +4827,20 @@ InitPromise.addPromise(function (app) {
     app.addDeepLink("code", CodeSite);
 });
 
-class WordRotatorDb extends MyDb {
+class WordRotatorBaseSite extends AbstractSite {
-
+    // createActionBarMenu(menu) {
-    static getInstance() {
+    //     menu = super.createActionBarMenu(menu);
-        if (Helper.isNull(WordRotatorDb.instance)) {
+    //     // menu.addAction(SettingsSite.settingsAction.copy());
-            WordRotatorDb.instance = new WordRotatorDb();
+    //     // let actions = menu.actions;
-        }
+    //     // for (let i = 0; i < actions.length; i++) {
-        return WordRotatorDb.instance;
+    //     //     if (actions[i].title === "login" || actions[i].title === "registration"){
-    }
+    //     //         actions[i].setVisible(false);
-
+    //     //     }
-    constructor() {
+    //     // }
-        super("wordRotator", 3);
+    //     return menu;
-    }
+    // }
-
-    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 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 {
+class WordRotatorDb extends MyDb {
-    // createActionBarMenu(menu) {
+
-    //     menu = super.createActionBarMenu(menu);
+    static getInstance() {
-    //     // menu.addAction(SettingsSite.settingsAction.copy());
+        if (Helper.isNull(WordRotatorDb.instance)) {
-    //     // let actions = menu.actions;
+            WordRotatorDb.instance = new WordRotatorDb();
-    //     // for (let i = 0; i < actions.length; i++) {
+        }
-    //     //     if (actions[i].title === "login" || actions[i].title === "registration"){
+        return WordRotatorDb.instance;
-    //     //         actions[i].setVisible(false);
+    }
-    //     //     }
+
-    //     // }
+    constructor() {
-    //     return menu;
+        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");
 });

src/js/init.js

@@ -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");
 });
  

src/js/settings.js

@@ -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 = '';

src/module/Application/pwa/html/application/level.html

@@ -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>

src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js

@@ -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);
         });
 

src/module/Application/pwa/js/site/LevelSite.js

@@ -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,
+};

src/module/Application/pwa/js/site/MenuSite.js

@@ -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 {FlashMessenger, Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
-import {SettingsManager} from "../../../../../js/lib/pwa-core";
+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;

src/module/Application/pwa/js/site/SynchronizeSite.js

@@ -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);
-        }
-    }
-}

src/module/Application/pwa/js/wordrotator/Level/Level.js

@@ -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())

src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js

@@ -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();

src/module/Application/pwa/translations/de.json

@@ -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!"
 }

src/scss/_tutorial.scss

@@ -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;
+      //}
+    }
+  }
+}

src/scss/wordRotator.scss

@@ -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;
-    //}
   }
 }
 

test/test.testcafe.js

@@ -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 => {