Level-number hinzugefügt

bin/build.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-npm run build 1
+npm run build

log/error.log

@@ -0,0 +1,6 @@
+2018-09-18T21:39:55+02:00 ERR (3):
+2018-09-18T22:19:51+02:00 ERR (3):
+2018-09-18T22:36:07+02:00 ERR (3):
+2018-09-18T22:37:14+02:00 ERR (3):
+2018-09-18T22:37:16+02:00 ERR (3):
+2018-09-18T23:03:24+02:00 ERR (3):

log/log.log

@@ -0,0 +1,6 @@
+2018-09-18T21:39:55+02:00 ERR (3):
+2018-09-18T22:19:51+02:00 ERR (3):
+2018-09-18T22:36:07+02:00 ERR (3):
+2018-09-18T22:37:14+02:00 ERR (3):
+2018-09-18T22:37:16+02:00 ERR (3):
+2018-09-18T23:03:24+02:00 ERR (3):

public/index.html

@@ -52,9 +52,14 @@
         <div class="top-bar-title">
             <strong>
                 <a class="hidden-link" href=".">
-                    WordRotator</a>
+                    <span class="show-for-smedium">WordRotator</span>
+                    <span class="show-for-small-only">WR</span>
+                </a>
             </strong>
         </div>
+        <span id='level-number-container'>
+            <span id='level-number'></span>
+        </span>
         <span data-responsive-toggle="responsive-menu" id="responsive-menu-toggle" class="right" data-hide-for="always"
               style="">
 				  <button class="menu-icon" type="button" data-toggle=""></button>
@@ -86,11 +91,13 @@
 <div class="mainContainer">
     <div class="row">
         <div class="columns small-12" id="main-content">
-            <div id="site-content" role="main"><div class='loader'>
+            <div id="site-content" role="main">
+                <div class='loader'>
                     <svg viewBox="0 0 32 32" width="32" height="32">
                         <circle r="14" id="spinner" cx="16" cy="16" fill="none"></circle>
                     </svg>
-                </div></div>
+                </div>
+            </div>
             <div id="flashMessageContainerAbsoulte">
                 <div id="flashMessageContainer"></div>
             </div>

src/js/init.js

@@ -36,7 +36,7 @@ ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
 let app = new App();
 // app.addDeepLink("policy", PrivatePolicySite.name);
 app.setAddThemeAction(true);
-app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
+// app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
 
 // bridge für Android
 window["ThemeManager"] = ThemeManager;

src/js/lib/pwa-assets.js

@@ -9,13 +9,13 @@ class DelayPromise extends Promise {
 }
 
 class ScaleHelper {
-    scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
+    scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) {
-        console.log("test");
 
         margin = Helper.nonNull(margin, 10);
         ignoreHeight = Helper.nonNull(ignoreHeight, false);
         ignoreWidth = Helper.nonNull(ignoreWidth, false);
         fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
+        addListener = Helper.nonNull(addListener, true);
 
         let hasNoTransitionClass = container.classList.contains("no-transition");
         container.classList.add("no-transition");
@@ -51,11 +51,15 @@ class ScaleHelper {
         }
 
         let self = this;
-        window.addEventListener("resize", function () {
+        let listener = function () {
             setTimeout(() => {
-                self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
+                self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false);
             }, 255);
-        });
+        };
+        if (addListener) {
+            window.addEventListener("resize", listener);
+        }
+        return listener;
     }
 
     scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {

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

@@ -1,6 +1,6 @@
-import {AbstractSite} from "../../../../../js/lib/pwa-lib";
+import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
 
-export class EndSite extends AbstractSite{
+export class EndSite extends WordRotatorBaseSite{
     constructor(siteManager) {
         super(siteManager, "html/application/end.html");
     }

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

@@ -1,4 +1,4 @@
-import {AbstractSite, Helper, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
+import {Helper, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
 import {ParentSegment} from "../wordrotator/Segment/ParentSegment";
 import {LeafSegment} from "../wordrotator/Segment/LeafSegment";
 import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
@@ -7,23 +7,13 @@ import {LevelHelper} from "../wordrotator/Level/LevelHelper";
 import {WordRotatorDb} from "../WordRotatorDb";
 import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
 import {EndSite} from "./EndSite";
+import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
 
-export class LevelSite extends AbstractSite {
+export class LevelSite extends WordRotatorBaseSite {
     constructor(siteManager) {
         super(siteManager, "html/application/level.html");
     }
 
-    createActionBarMenu(menu) {
-        menu = super.createActionBarMenu(menu);
-
-        this.levelCounterAction = new MenuAction("", function () {
-        }, Menu.SHOW_ALWAYS, 0);
-        this.levelCounterAction.setShouldTranslate(false);
-        menu.addAction(this.levelCounterAction);
-
-        return menu;
-    }
-
     onConstruct(args) {
         this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
         return super.onConstruct(args);
@@ -59,7 +49,11 @@ export class LevelSite extends AbstractSite {
         scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
         scaleHelper.scaleToFull(wonText, wonText.parentElement);
 
-        this.levelCounterAction.setTitle(this.levelCounter);
+        //Benutze Document, da Element außerhalb von Seite (eigentlich unschön!)
+        this.levelCounterActionContainer = document.getElementById("level-number-container");
+        this.levelCounterAction = document.getElementById("level-number");
+        this.levelCounterAction.innerText = this.levelCounter;
+        this.levelNumberScaler = scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
 
         this.loadLastLevel();
@@ -134,12 +128,29 @@ export class LevelSite extends AbstractSite {
             scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
 
             this.level = level;
+            this.levelCounterAction.innerText = this.levelCounter;
+            this.levelNumberScaler();
         }
         catch (e) {
             console.error(e);
         }
     }
 
+    onStart(args) {
+        let res = super.onStart(args);
+
+        let scaleHelper = new ScaleHelper();
+        scaleHelper.s
+        this.levelCounterAction.innerText = this.levelCounter;
+        this.levelCounterActionContainer.classList.add("visible");
+        return res;
+    }
+
+    onPause(args) {
+        super.onPause(args);
+        this.levelCounterActionContainer.classList.remove("visible");
+    }
+
     async levelWon(level) {
         try {
             const db = WordRotatorDb.getInstance();
@@ -147,8 +158,6 @@ export class LevelSite extends AbstractSite {
 
             this.levelCounter++;
             localStorage.setItem("levelCounter", this.levelCounter);
-            this.levelCounterAction.setTitle(this.levelCounter);
-            this.levelCounterAction.redraw();
 
             this._siteContent.classList.add('won');
             localStorage.removeItem("currentLevel");

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

@@ -1,9 +1,10 @@
-import {AbstractSite, Helper} from "../../../../../js/lib/pwa-lib";
+import {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";
 
-export class SynchronizeSite extends AbstractSite {
+export class SynchronizeSite extends WordRotatorBaseSite {
 
     constructor(siteManager) {
         super(siteManager, "html/application/sync.html");

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

@@ -0,0 +1,15 @@
+import {AbstractSite, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
+
+export class WordRotatorBaseSite extends AbstractSite {
+
+    createActionBarMenu(menu) {
+        menu = super.createActionBarMenu(menu);
+        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;
+    }
+}

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

@@ -1,5 +1,4 @@
 import {Segment} from "./Segment";
-import {DelayPromise} from "../../../../../../js/lib/pwa-assets";
 
 export class ParentSegment extends Segment {
     static initListener(){

src/scss/wordRotator.scss

@@ -179,9 +179,32 @@ $animationDuration: 0.25s;
   }
 }
 
-#continue-button {
+#level-number-container{
-  //width: 80%;
+  transition: none;
-  //margin-left: 10%;
+  position: absolute;
-  //margin-right: 10%;
+  left: 50%;
-  //margin-bottom: 20%
+  transform: translate(-50%);
+  border: 3px solid white;
+  border-radius: 50%;
+  visibility: hidden;
+  margin-top: -5px;
+    display: table-cell;
+
+  height: 45px;
+  width: 45px;
+  text-align: center;
+  vertical-align: middle;
+
+  &.visible{
+    visibility: visible;
+  }
+
+  #level-number{
+    transition: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    font-weight: bold;
+  }
 }