new Design

src/client/html/fragment/settings.html

@@ -15,8 +15,12 @@
                     <input type="checkbox" class="setting" id="play-music" name='play-music' value="1"
                            data-default="1">
                     <span class="slider"></span>
-                </span> 
+                </span>
             </label>
+            <div class='grid-x setting-row' id='tutorial-button'>
+                <span class='columns small-6 translation'>tutorial</span>
+                <span class='columns small-6 text-right translation'>&gt;</span>
+            </div>
             <div class='grid-x setting-row' id='credits-button'>
                 <span class='columns small-6 translation' >credits</span>
                 <span class='columns small-6 text-right translation'>&gt;</span>

src/client/html/sites/tutorialSite.html

@@ -0,0 +1,39 @@
+<article id=tutorial-site>
+    <section>
+        <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-column-template' class='segment segment-column'>
+            <div class='child-container'></div>
+        </div>
+        <div id='segment-triangle-template' class='segment segment-triangle'>
+            <div class='child-container'></div>
+        </div>
+    </section>
+    <section id="tutorial-1">
+        <div class="tutorial-text translation">tutorial-1</div>
+        <div class="level-container"></div>
+    </section>
+    <section id="tutorial-2">
+        <div class="tutorial-text translation">tutorial-2</div>
+        <div class="tutorial-wrapper">
+            <button class="help-action">
+                <img src="../../img/help.png" class="action-image">
+            </button>
+            <div class="level-container"></div>
+        </div>
+    </section>
+    <section id="tutorial-3">
+        <div class="tutorial-text translation">tutorial-3</div>
+        <div class="tutorial-wrapper">
+            <div id='tutorial-pointer'></div>
+            <div class="level-container"></div>
+        </div>
+    </section>
+</article>

src/client/js/Fragment/WordRotatorSettingFragment.ts

@@ -1,3 +1,5 @@
+import {TutorialSite} from "../Sites/TutorialSite";
+
 const view = require("../../html/fragment/settings.html");
 
 import {CreditsSite} from "../Sites/CreditsSite";
@@ -65,6 +67,9 @@ export class WordRotatorSettingFragment extends AbstractFragment {
             e.preventDefault();
         });
 
+        this.findBy("#tutorial-button").addEventListener("click", () => {
+            this.getSite().startSite(TutorialSite);
+        });
         this.findBy("#credits-button").addEventListener("click", () => {
             this.getSite().startSite(CreditsSite);
         });

src/client/js/Sites/LevelSite.ts

@@ -232,8 +232,8 @@ export class LevelSite extends MenuSite {
                 return this.nextLevel();
             }
 
-            level.getWonPromise().then(() => {
+            level.getWonPromise().then(async () => {
-                this.levelWon(level);
+                await this.levelWon(level);
             });
 
             level.createSegments();

src/client/js/Sites/TutorialSite.ts

@@ -1,5 +1,132 @@
-import {MenuSite} from "cordova-sites/dist/client";
+import {Matomo, MenuSite, NativeStoragePromise, ScaleHelper, Toast} from "cordova-sites/dist/client";
+import {App} from "cordova-sites/dist/client/js/App";
+import {LevelPlayed} from "../model/LevelPlayed";
+import {Helper} from "js-helper/dist/shared/Helper";
+import {LevelHelper} from "../wordrotator/Level/LevelHelper";
+import {ViewHelper} from "js-helper/dist/client/ViewHelper";
+import {LevelData} from "../../../shared/model/LevelData";
+import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
+import {LevelSite} from "./LevelSite";
+import {SyncJob} from "cordova-sites-easy-sync/dist/client";
+import {Level} from "../wordrotator/Level/Level";
+
+const view = require("../../html/sites/tutorialSite.html");
 
 export class TutorialSite extends MenuSite {
+    private templateContainer: TemplateContainer;
 
+    constructor(siteManager: any) {
+        super(siteManager, view);
+    }
+
+    async onConstruct(constructParameters: any): Promise<any[]> {
+        const res = super.onConstruct(constructParameters);
+        await Promise.race([new SyncJob().sync([LevelData]).catch(e => console.error(e)), new Promise<void>(async resolve => {
+            let levelData = await LevelData.findById(LevelSite.TUTORIAL.FIRST_LEVEL);
+            if (levelData !== null) {
+                resolve();
+            }
+        })]);
+        return res;
+    }
+
+    async onViewLoaded(): Promise<any[]> {
+        const res = super.onViewLoaded();
+
+        let leafSegmentTemplate = this.findBy("#segment-leaf-template");
+        let parentSegmentTemplate = this.findBy("#segment-parent-template");
+        let rowSegmentTemplate = this.findBy("#segment-row-template");
+        let triangleTemplate = this.findBy("#segment-triangle-template");
+        let columnTemplate = this.findBy("#segment-column-template");
+
+        leafSegmentTemplate.removeAttribute("id");
+        parentSegmentTemplate.removeAttribute("id");
+        rowSegmentTemplate.removeAttribute("id");
+        triangleTemplate.removeAttribute("id");
+        columnTemplate.removeAttribute("id");
+
+        leafSegmentTemplate.remove();
+        parentSegmentTemplate.remove();
+        rowSegmentTemplate.remove();
+        triangleTemplate.remove();
+        columnTemplate.remove();
+
+        this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate, columnTemplate);
+
+        const tutorial1Container = this.findBy("#tutorial-1 .level-container");
+        const tutorial2Container = this.findBy("#tutorial-2 .level-container");
+        const tutorial3Container = this.findBy("#tutorial-3 .level-container");
+
+        const level1 = await this.loadLevel(LevelSite.TUTORIAL.FIRST_LEVEL);
+        const level2 = await this.loadLevel(LevelSite.TUTORIAL.SECOND_LEVEL);
+        const level3 = await this.loadLevel(LevelSite.TUTORIAL.BIG_SEGMENT_LEVEL);
+
+        level1.setSaveAsCurrentAfterCheckWon(false);
+        level2.setSaveAsCurrentAfterCheckWon(false);
+        level3.setSaveAsCurrentAfterCheckWon(false);
+
+        tutorial1Container.appendChild(level1.getRootSegment().getElement());
+        tutorial2Container.appendChild(level2.getRootSegment().getElement());
+        tutorial3Container.appendChild(level3.getRootSegment().getElement());
+
+        let pointer = this.findBy("#tutorial-pointer");
+        pointer.remove();
+
+        let rotatableSegments = level3.getRotatableSegments();
+        let pointerSegment = rotatableSegments[2];
+        pointerSegment.element.appendChild(pointer);
+
+        this.find(".help-action").addEventListener("click", () => {
+            TutorialSite.help(level2);
+        })
+
+        return res;
+    }
+
+    static async help(level: Level) {
+        let rotatables = level.getRotatableSegments();
+        rotatables = rotatables.filter((segment) => {
+            return (!segment.isSolved(false));
+        });
+
+        if (rotatables.length === 0){
+            return;
+        }
+
+        let index = Math.floor(Math.random() * rotatables.length);
+
+        let segmentToHelp = rotatables[index];
+        while (segmentToHelp.rotation !== 0) {
+            segmentToHelp.rotate();
+        }
+        segmentToHelp.setIsRotatable(false);
+    }
+
+    async loadLevel(id) {
+        try {
+            let levelData = await LevelData.findById(id);
+            const level = LevelHelper.inflateLevel(levelData, this.templateContainer);
+
+            level.getWonPromise().then(() => {
+                console.log("level won!");
+                new Toast("you solved the tutorial level!").show();
+                //TODO
+                // this.levelWon(level);
+            });
+
+            level.createSegments();
+            level.getRootSegment()._updateElement();
+
+            return level;
+        } catch (e) {
+            console.log("Fehler!");
+            console.error(e);
+            // this.startEndSite();
+            return null;
+        }
+    }
 }
+
+App.addInitialization(app => {
+    app.addDeepLink("tutorial", TutorialSite);
+})

src/client/js/model/LevelPlayed.ts

@@ -2,7 +2,7 @@ import {BaseModel} from "cordova-sites-database/dist/BaseModel";
 import {BaseDatabase} from "cordova-sites-database/dist/cordova-sites-database";
 import {LevelData} from "../../../shared/model/LevelData";
 import {Helper} from "js-helper/dist/shared/Helper";
-import {QueryBuilder, SelectQueryBuilder} from "typeorm";
+import {SelectQueryBuilder} from "typeorm";
 
 export class LevelPlayed extends BaseModel {
 
@@ -21,7 +21,7 @@ export class LevelPlayed extends BaseModel {
             target: LevelData.getSchemaName(),
             type: "one-to-one",
             joinColumn: true,
-            cascade: true,
+            // cascade: true,
         };
         return relations;
     }

src/client/js/wordrotator/Level/Level.js

@@ -16,6 +16,8 @@ export class Level {
         this.hasWon = false;
         this.id = null;
 
+        this.saveAsCurrentAfterCheckWon = true;
+
         this.wonResolver = null;
         this.giveUpResolver = null;
 
@@ -122,10 +124,16 @@ export class Level {
             });
             return true;
         }
-        this.saveAsCurrentLevel();
+        if (this.saveAsCurrentAfterCheckWon) {
+            this.saveAsCurrentLevel();
+        }
         return false;
     }
 
+    setSaveAsCurrentAfterCheckWon(shouldSave){
+        this.saveAsCurrentAfterCheckWon = (shouldSave === true);
+    }
+
     getWonPromise() {
         return this.wonPromise;
     }
@@ -182,13 +190,13 @@ export class Level {
 
             const leafs = this.getLeafSegments();
             if (leafs.length > 0) {
-                const index = Random.getIntRandom(leafs.length-1);
+                const index = Random.getIntRandom(leafs.length - 1);
                 const leaf = leafs[index];
 
                 leaf.getElement().classList.add("shake");
                 setTimeout(() => {
                     leaf.getElement().classList.remove("shake");
-                }, Random.getIntRandom(350)+650);
+                }, Random.getIntRandom(350) + 650);
             }
             this._shakeLeafsTimeout = setTimeout(() => {
                 this.shakeLeafs();
@@ -215,4 +223,4 @@ export class Level {
         }
         return leafs;
     }
-}
+}

src/client/sass/_themeBlue.scss

@@ -85,4 +85,15 @@ body.theme-blue{
     }
   }
 
+  #site > :not(.won) .segment.locked {
+    //background-color: $accentColor;
+    //background-color: $secondaryColor;
+    background-color: #00000030;
+    //background-color: #81acb5;
+  }
+
+  #tutorial-pointer{
+    background: $accentColor;
+  }
+
 }

src/client/sass/_tutorial.scss

@@ -23,11 +23,13 @@
   .tutorial-blanket {
     display: block;
   }
+
   .tutorial-text {
     color: white;
     font-size: 1.5rem;
     display: flex;
     transition: none !important;
+
     * {
       transition: none !important;
     }
@@ -38,10 +40,12 @@
       .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;
@@ -53,6 +57,7 @@
     #level {
       z-index: 9900 !important;
     }
+
     .tutorial-text .step-2 {
       display: initial;
       z-index: 9900 !important;
@@ -67,7 +72,7 @@
       position: relative;
     }
 
-    .top-bar{
+    .top-bar {
       z-index: 9900 !important;
     }
 
@@ -82,6 +87,7 @@
       box-shadow: 0 0 10px 5px #fff;
     }
   }
+
   &.step-4 {
     .tutorial-text .step-4 {
       display: initial;
@@ -92,9 +98,11 @@
     #level {
       .segment-row {
         position: inherit;
+
         > .child-container {
           .segment-parent.layer-2, > .segment-parent.layer-2.rotating {
             z-index: 9900 !important;
+
             #tutorial-pointer {
               width: 0.6em;
               height: 0.6em;
@@ -118,4 +126,39 @@
       }
     }
   }
-}
+}
+
+#tutorial-site {
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+
+  #tutorial-1, #tutorial-2, #tutorial-3{
+    text-align: center;
+    margin-top: 0.7rem;
+    margin-bottom: 0.5rem;
+  }
+
+  #tutorial-2 .help-action{
+    width: 100%;
+    margin-bottom: 0.3rem;
+  }
+  #tutorial-3 .tutorial-wrapper{
+    position: relative;
+    #tutorial-pointer {
+      width: 0.6em;
+      height: 0.6em;
+
+      border-radius: 50%;
+
+      left: 75%;
+      position: absolute;
+      top: 75%;
+      z-index: 1;
+      transform: translate(-50%, -50%);
+
+      animation: tutorialPointer 2s infinite;
+      pointer-events: none;
+    }
+  }
+}

src/client/sass/index.scss

@@ -184,6 +184,12 @@ a.hidden-link {
   overflow: auto;
   width: 100%;
 
+  > .grid-x{
+    overflow: auto;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
   #main-content {
     padding-top: 0;
     padding-bottom: 0;

src/client/translations/de.json

@@ -49,5 +49,11 @@
   "message": "Nachricht",
   "send": "Senden",
   "the message was sent": "Die Nachricht wurde gesendet.",
-  "wr": "WR"
+  "wr": "WR",
+
+  "tutorial": "Spielregeln",
+  "tutorial-1": "Klicke auf ein Feld, um dieses rotieren zu lassen! Um zu gewinnen, drehe die Segmente so, dass du zwei Wörter lesen kannst.",
+  "tutorial-2": "Die Hilfe löst ein Segment, kostet aber 25 Münzen. Du erhältst 5 Münzen pro gewonnenes Level.",
+  "tutorial-3": "Große Segmente drehst du, indem du diese ziehst.",
+  "you solved the tutorial level!": "Du hast das Tutorial-Level gelöst!"
 }