update to pc

.idea/php.xml

@@ -73,6 +73,7 @@
       <path value="$PROJECT_DIR$/vendor/zendframework/zend-di" />
       <path value="$PROJECT_DIR$/vendor/zendframework/zend-mvc-plugin-prg" />
       <path value="$PROJECT_DIR$/vendor/zendframework/zend-permissions-acl" />
+      <path value="$PROJECT_DIR$/vendor/true/punycode" />
     </include_path>
   </component>
 </project>

.idea/watcherTasks.xml

@@ -78,7 +78,7 @@
       <option name="runOnExternalChanges" value="true" />
       <option name="scopeName" value="translator" />
       <option name="trackOnlyRoot" value="false" />
-      <option name="workingDir" value="$PROJECT_DIR$/../stories" />
+      <option name="workingDir" value="$PROJECT_DIR$" />
       <envs />
     </TaskOptions>
     <TaskOptions isEnabled="false">

.idea/wordRotator.iml

@@ -3,6 +3,8 @@
   <component name="NewModuleRootManager">
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/src/module/Application/src" isTestSource="false" packagePrefix="Application\" />
+      <sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/html" isTestSource="false" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/true/punycode" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

bin/afterUpdate.sh

@@ -15,4 +15,6 @@ for d in "vendor/ainias/pwa"*/; do
 done
 #bin/jsConcat.sh src/js public/js/app 1
 
-node bin/concatTranslator.js
+node bin/concatTranslator.js
+
+bin/build.sh

bin/concatTranslator.js

@@ -37,6 +37,7 @@ for (var i = 0, n = moduleDirs.length; i < n; i++) {
 
 for (var lang in translations)
 {
+    console.log(translations[lang]);
     var langTranslations = JSON.stringify(translations[lang]);
     fs.writeFile(outputDir+"/"+lang+".json", langTranslations, err => {
         if (err){

bin/localLink.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
-rm -rf /var/www/pwa/stories/vendor/ainias/$2
+rm -rf /var/www/pwa/wordRotator/vendor/ainias/$2
-ln -s $1 /var/www/pwa/stories/vendor/ainias/$2
+ln -s $1 /var/www/pwa/wordRotator/vendor/ainias/$2

public/html/application/clock.html

@@ -1 +0,0 @@
-<div class=row><div class="small-12 smedium-6 columns" data-translation=current-time>Current time:</div><div class="small-12 smedium-6 columns" id=current-time>???</div></div>

public/html/application/level.html

@@ -1 +1 @@
-<div><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=level></div></div>
+<div class=max-height><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 class=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60 overflow-hidden"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>

public/index.html

@@ -86,13 +86,11 @@
 <div class="mainContainer">
     <div class="row">
         <div class="columns small-12" id="main-content">
-            <div id="site-content" role="main">
+            <div id="site-content" role="main"><div class='loader'>
-                <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>

public/js/app.js

@@ -3037,12 +3037,57 @@ class Segment{
     }
 }
 
-class DelayPromise extends Promise{
+class ScaleHelper {
-    constructor(delay) {
+    scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
-        super((resolve) => {
+        margin = Helper.nonNull(margin, 10);
-            setTimeout(resolve, delay);
+        ignoreHeight = Helper.nonNull(ignoreHeight, false);
+        ignoreWidth = Helper.nonNull(ignoreWidth, false);
+        fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
+
+        let hasNoTransitionClass = container.classList.contains("no-transition");
+        container.classList.add("no-transition");
+
+        let currentFontSize = 1;
+        let diff = 0;
+        let widthDiff = 0;
+        let heightDiff = 0;
+        let containerWidth = 0;
+        let containerHeight = 0;
+        do {
+            currentFontSize += diff / (fontWeight + 1);
+            fontElement.style.fontSize = currentFontSize + 'px';
+
+            let containerStyle = window.getComputedStyle(container);
+
+            containerWidth = containerStyle.getPropertyValue("width").replace('px', '');
+            containerHeight = containerStyle.getPropertyValue("height").replace('px', '');
+
+            widthDiff = containerWidth - fontElement.offsetWidth;
+            heightDiff = containerHeight - fontElement.offsetHeight;
+
+            let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff)));
+            if (newDiff === diff) {
+                break;
+            }
+            diff = newDiff;
+        } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
+        fontElement.style.fontSize = (currentFontSize - margin) + 'px';
+
+        if (!hasNoTransitionClass) {
+            container.classList.remove("no-transition");
+        }
+
+        let self = this;
+        window.addEventListener("resize", function () {
+            setTimeout(() => {
+                self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
+            }, 255);
         });
     }
+
+    scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
+        return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
+    }
 }
 
 class ParentSegment extends Segment {
@@ -3061,7 +3106,10 @@ class ParentSegment extends Segment {
             this.getLevel().checkHasWon(new Promise((resolve, reject)=>{
                 this.element.addEventListener("animationend", resolve);
             }));
-            return new DelayPromise(250);
+            // return new DelayPromise(250);
+            return new Promise(function(resolve) {
+                setTimeout(resolve, 250);
+            });
         }
     }
 
@@ -3177,6 +3225,7 @@ class Level {
         this.templateContainer = templateContainer;
 
         this.hasWon = false;
+        this.id = null;
 
         this.wonResolver = null;
         this.giveUpResolver = null;
@@ -3188,6 +3237,16 @@ class Level {
         });
     }
 
+    setId(id)
+    {
+        this.id = id;
+    }
+
+    getId()
+    {
+        return this.id;
+    }
+
     getLevel()
     {
         return this;
@@ -3197,6 +3256,10 @@ class Level {
     {
         this.rootSegment = rootSegment;
         this.rootSegment.setParent(this);
+        if (this.startRotations)
+        {
+            this.applyRotations();
+        }
     }
 
     setWords(words)
@@ -3212,6 +3275,15 @@ class Level {
         this.startRotations = rotations;
     }
 
+    applyRotations(rotations)
+    {
+        if (this.rootSegment)
+        {
+            rotations = Helper.nonNull(rotations, this.startRotations);
+            this.rootSegment.applyRotations(rotations);
+        }
+    }
+
     getHasWon()
     {
         return this.hasWon;
@@ -3281,29 +3353,32 @@ class RowLevel extends Level {
                 parent.addChild(leafsWordTwo[2 * i + 1]);
                 rootSegment.addChild(parent);
             }
-
+            // rootSegment.applyRotations(this.startRotations);
-            rootSegment.applyRotations(this.startRotations);
-
             this.setRootSegment(rootSegment);
         }
     }
 }
 
-class LevelHelper{
+class LevelHelper {
-    static setLevelType(typeId, level)
+    static setLevelType(typeId, level) {
-    {
         LevelHelper.types[typeId] = level;
     }
 
-    static getLevelClass(type)
+    static getLevelClass(type) {
-    {
         return LevelHelper.types[type];
     }
 
-    static inflateLevel(jsonLevel, templateContainer)
+    static inflateLevel(jsonLevel, templateContainer) {
-    {
         let level = new (LevelHelper.types[jsonLevel["rendererType"]])(templateContainer);
         level.setWords(jsonLevel["words"]);
+        level.setId(jsonLevel["id"]);
+
+        for (let i = 0, n = jsonLevel["rotations"].length; i < n; i++) {
+            if (jsonLevel["rotations"][i] <= 4) {
+                jsonLevel["rotations"][i] = 90 * jsonLevel["rotations"][i];
+            }
+        }
+
         level.setStartRotations(jsonLevel["rotations"]);
         return level;
     }
@@ -3355,12 +3430,12 @@ class WordRotatorDb extends MyDb {
         return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
     }
 
-    async loadNextLevel() {
+    async loadNextLevel(rendererTypes) {
         const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
 
         let newLevels = [];
         for (let i = 0, n = levels.length; i < n; i++) {
-            if (!levels[i].deleted && !levels[i].played) {
+            if (!levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
                 newLevels.push(levels[i]);
             }
         }
@@ -3371,6 +3446,13 @@ class WordRotatorDb extends MyDb {
 
         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 = {
@@ -3383,8 +3465,21 @@ class LevelSite extends AbstractSite$1 {
         super(siteManager, "html/application/level.html", "level");
     }
 
+    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.setTitle("Level");
+
+        this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
+
         return super.onConstruct(args);
     }
 
@@ -3403,24 +3498,43 @@ class LevelSite extends AbstractSite$1 {
         parentSegmentTemplate.remove();
         rowSegmentTemplate.remove();
 
+        let self = this;
+        let continueButton = this.findBy("#continue-button");
+        continueButton.addEventListener("click", ()=> {
+            self.nextLevel();
+        });
+
+        let wonText = this.findBy("#won-text");
+
+        let scaleHelper = new ScaleHelper();
+        scaleHelper.scaleToFull(continueButton, continueButton.parentElement);
+        scaleHelper.scaleToFull(wonText, wonText.parentElement);
+
+        this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
         this.nextLevel();
     }
 
     async nextLevel() {
         try {
+            this._siteContent.classList.remove('won');
+
             const db = WordRotatorDb.getInstance();
-            const nextLevelJson = await db.loadNextLevel();
+            const nextLevelJson = await db.loadNextLevel([20]);
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
 
             const self = this;
             level.getWonPromise().then(() => {
-                self.nextLevel();
+                self.levelWon(level);
             });
 
             level.createSegments();
             level.getRootSegment()._updateElement();
-            this.findBy("#level").appendChild(level.getRootSegment().getElement());
+
+            let levelSegment = this.findBy("#level");
+            levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+            let scaleHelper = new ScaleHelper();
+            scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2,level.words[0].length * 2);
 
             this.level = level;
         }
@@ -3428,6 +3542,18 @@ class LevelSite extends AbstractSite$1 {
             console.error(e);
         }
     }
+
+    async levelWon(level){
+        const db = WordRotatorDb.getInstance();
+        // db.saveLevelPlayed(level);
+
+        this.levelCounter++;
+        localStorage.setItem("levelCounter", this.levelCounter);
+        this.levelCounterAction.setTitle(this.levelCounter);
+        this.levelCounterAction.redraw();
+
+        this._siteContent.classList.add('won');
+    }
 }
 
 class DataManager {

src/js/lib/pwa-assets.js

@@ -1,13 +1,66 @@
-import { Fragment, Helper, Translator } from './pwa-lib.js';
+import { Helper, Fragment, Translator } from './pwa-lib.js';
 
-class DelayPromise extends Promise{
+class DelayPromise extends Promise {
-    constructor(delay) {
+    static async delay(delay) {
-        super((resolve) => {
+        return new Promise((resolve) => {
             setTimeout(resolve, delay);
         });
     }
 }
 
+class ScaleHelper {
+    scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
+        margin = Helper.nonNull(margin, 10);
+        ignoreHeight = Helper.nonNull(ignoreHeight, false);
+        ignoreWidth = Helper.nonNull(ignoreWidth, false);
+        fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
+
+        let hasNoTransitionClass = container.classList.contains("no-transition");
+        container.classList.add("no-transition");
+
+        let currentFontSize = 1;
+        let diff = 0;
+        let widthDiff = 0;
+        let heightDiff = 0;
+        let containerWidth = 0;
+        let containerHeight = 0;
+        do {
+            currentFontSize += diff / (fontWeight + 1);
+            fontElement.style.fontSize = currentFontSize + 'px';
+
+            let containerStyle = window.getComputedStyle(container);
+
+            containerWidth = containerStyle.getPropertyValue("width").replace('px', '');
+            containerHeight = containerStyle.getPropertyValue("height").replace('px', '');
+
+            widthDiff = containerWidth - fontElement.offsetWidth;
+            heightDiff = containerHeight - fontElement.offsetHeight;
+
+            let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff)));
+            if (newDiff === diff) {
+                break;
+            }
+            diff = newDiff;
+        } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
+        fontElement.style.fontSize = (currentFontSize - margin) + 'px';
+
+        if (!hasNoTransitionClass) {
+            container.classList.remove("no-transition");
+        }
+
+        let self = this;
+        window.addEventListener("resize", function () {
+            setTimeout(() => {
+                self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
+            }, 255);
+        });
+    }
+
+    scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
+        return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
+    }
+}
+
 class TabbedFragment extends Fragment {
     constructor(site) {
         super(site, 'pwaAssets/html/fragment/tabbedFragment.html');
@@ -73,4 +126,4 @@ class TabbedFragment extends Fragment {
     }
 }
 
-export { DelayPromise, TabbedFragment };
+export { DelayPromise, ScaleHelper, TabbedFragment };

src/js/lib/pwa-lib.js

@@ -2419,8 +2419,9 @@ class Dialog {
         return this;
     }
 
-    setContent(content) {
+    async setContent(content) {
-        this.content = content;
+        this.contentPromise = Promise.resolve(content);
+        this.content = await this.contentPromise;
         return this;
     }
 
@@ -2465,70 +2466,71 @@ class Dialog {
         this.buttons.push(button);
     }
 
-    show() {
+    async show() {
+
+        let titleElement = document.createElement("span");
+        titleElement.classList.add("title");
+        if (this.translatable && this.title !== "") {
+            titleElement.appendChild(Translator.makePersistentTranslation(this.title));
+        }
+        else {
+            titleElement.innerHTML = this.title;
+        }
+
+        let titleBar = document.createElement("div");
+        titleBar.appendChild(titleElement);
+
+        let contentContainer = document.createElement("div");
+        contentContainer.classList.add("content-container");
+
+        let modalDialog = document.createElement("div");
+        modalDialog.className = this.additionalClasses;
+        modalDialog.classList.add("modal");
+        modalDialog.appendChild(titleBar);
+        modalDialog.appendChild(contentContainer);
+
+        let buttonBar = document.createElement("div");
+        buttonBar.classList.add("modal-button-container");
+
+        for (let i = 0, n = this.buttons.length; i < n; i++) {
+            buttonBar.appendChild(this.buttons[i]);
+        }
+
+        await this.contentPromise;
+        if (!(this.content instanceof Node)) {
+            this.content = (this.translatable) ? Translator.makePersistentTranslation(this.content) : document.createTextNode(this.content);
+        }
+        contentContainer.appendChild(this.content);
+
+        this.backgroundElement = document.createElement("div");
+        this.backgroundElement.classList.add("background");
+        this.backgroundElement.appendChild(modalDialog);
+
+        this.backgroundElement.querySelector(".modal").appendChild(buttonBar);
+        this.backgroundElement.style.display = "block";
+
         let self = this;
-        return new Promise(function (resolve) {
+        if (this.cancelable) {
-
-            if (!(self.content instanceof Node)) {
-                self.content = (self.translatable) ? Translator.makePersistentTranslation(self.content) : document.createTextNode(self.content);
-            }
-
             let closeButton = document.createElement("span");
             closeButton.classList.add("close");
             closeButton.innerHTML = "&times;";
 
-            let titleElement = document.createElement("span");
+            titleBar.appendChild(closeButton);
-            titleElement.classList.add("title");
+            closeButton.addEventListener("click", function () {
-            if (self.translatable && self.title !== "") {
+                self.close();
-                titleElement.appendChild(Translator.makePersistentTranslation(self.title));
+            });
-            }
+            window.addEventListener("click", function (e) {
-            else {
+                if (e.target === self.backgroundElement) {
-                titleElement.innerHTML = self.title;
-            }
-
-            let titlteBar = document.createElement("div");
-            titlteBar.appendChild(titleElement);
-
-            let contentContainer = document.createElement("div");
-            contentContainer.classList.add("content-container");
-            contentContainer.appendChild(self.content);
-
-            let modalDialog = document.createElement("div");
-            modalDialog.className = self.additionalClasses;
-            modalDialog.classList.add("modal");
-            modalDialog.appendChild(titlteBar);
-            modalDialog.appendChild(contentContainer);
-
-            self.backgroundElement = document.createElement("div");
-            self.backgroundElement.classList.add("background");
-            self.backgroundElement.appendChild(modalDialog);
-
-            if (self.cancelable) {
-                titlteBar.appendChild(closeButton);
-                closeButton.addEventListener("click", function () {
                     self.close();
-                });
+                }
-                window.addEventListener("click", function (e) {
+            });
-                    if (e.target === self.backgroundElement) {
+        }
-                        self.close();
-                    }
-                });
-            }
 
-            let buttonBar = document.createElement("div");
+        document.body.appendChild(this.backgroundElement);
-            buttonBar.classList.add("modal-button-container");
+        Translator.getInstance().updateTranslations();
 
-            for (let i = 0, n = self.buttons.length; i < n; i++) {
+        return new Promise(function (resolve) {
-                buttonBar.appendChild(self.buttons[i]);
-            }
-
-            self.backgroundElement.querySelector(".modal").appendChild(buttonBar);
-
-            self.backgroundElement.style.display = "block";
-            document.body.appendChild(self.backgroundElement);
             self.resolver = resolve;
-
-            Translator.getInstance().updateTranslations();
         });
     }
 
@@ -2539,7 +2541,7 @@ class Dialog {
             this.backgroundElement = null;
         }
         if (Helper.isNotNull(this.resolver)) {
-            this.resolver();
+            this.resolver(this.result);
         }
     }
 
@@ -2551,52 +2553,13 @@ class Dialog {
 class ConfirmDialog extends Dialog {
     constructor(content, title) {
         super(content, title);
-        this.result = null;
     }
 
-    show() {
+    async show() {
-
         this.addButton("confirm-button", true);
         this.addButton("cancel-button", false);
 
-        let showPromise = super.show();
+        return super.show();
-        let self = this;
-
-        //Sorgt dafür, dass eine mögliche Exception im Promise geworfen wird
-        return new Promise(function (resolve) {
-            // let confirmButton = document.createElement("button");
-            // confirmButton.classList.add("button");
-            // confirmButton.classList.add("right");
-            // confirmButton.appendChild(Translator.makePersistentTranslation("confirm-button"));
-
-            // let cancelButton = document.createElement("button");
-            // cancelButton.classList.add("button");
-            // cancelButton.classList.add("right");
-            // cancelButton.appendChild(Translator.makePersistentTranslation("cancel-button"));
-
-            // let buttonBar = document.createElement("div");
-            // buttonBar.classList.add("modal-button-container");
-
-            // buttonBar.appendChild(confirmButton);
-            // buttonBar.appendChild(cancelButton);
-
-
-
-            // confirmButton.addEventListener("click", function(){
-            //     self.result = true;
-            //     self.close();
-            // });
-
-            // cancelButton.addEventListener("click", function(){
-            //     self.result = false;
-            //     self.close();
-            // });
-
-            // self.backgroundElement.querySelector(".modal").appendChild(buttonBar);
-            resolve(showPromise.then(function(){
-                return self.result;
-            }));
-        });
     }
 
 

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

@@ -1,14 +1,25 @@
-<div>
+<div class='max-height'>
-    <div id = 'segment-leaf-template' class = 'segment segment-leaf'>
+    <!-- Templates for segments-->
-        <div class = 'leaf-element'></div>
+    <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 id='segment-parent-template' class='segment segment-parent'>
-        <div class = 'child-container'></div>
+        <div class='child-container'></div>
     </div>
-    <div id = 'segment-row-template' class = 'segment segment-row'>
+    <div id='segment-row-template' class='segment segment-row'>
-        <div class = 'child-container'></div>
+        <div class='child-container'></div>
     </div>
-
+    <!-- Site Content -->
-    <div id = 'level'>
+    <div class='max-height'>
+        <div class = 'show-when-won height-20 center flex-center'>
+            <b data-translation="won" id = "won-text"></b>
+        </div>
+        <div class="flex-center height-60 overflow-hidden">
+            <div id='level'>
+            </div>
+        </div>
+        <div class='show-when-won flex-center height-20'>
+            <button class='button' id='continue-button' data-translation="continue"></button>
+        </div>
     </div>
 </div>

src/module/Application/pwa/js/WordRotatorDb.js

@@ -35,12 +35,12 @@ export class WordRotatorDb extends MyDb {
         return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
     }
 
-    async loadNextLevel() {
+    async loadNextLevel(rendererTypes) {
         const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
 
         let newLevels = [];
         for (let i = 0, n = levels.length; i < n; i++) {
-            if (!levels[i].deleted && !levels[i].played) {
+            if (!levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
                 newLevels.push(levels[i]);
             }
         }
@@ -51,6 +51,13 @@ export class WordRotatorDb extends MyDb {
 
         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 = {

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

@@ -1,18 +1,32 @@
-import {AbstractSite, Helper} from "../../../../../js/lib/pwa-lib";
+import {AbstractSite, 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";
 import {SimpleLevel} from "../wordrotator/Level/SimpleLevel";
 import {LevelHelper} from "../wordrotator/Level/LevelHelper";
 import {WordRotatorDb} from "../WordRotatorDb";
+import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
 
 export class LevelSite extends AbstractSite {
     constructor(siteManager) {
         super(siteManager, "html/application/level.html", "level");
     }
 
+    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.setTitle("Level");
+
+        this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
+
         return super.onConstruct(args);
     }
 
@@ -31,24 +45,43 @@ export class LevelSite extends AbstractSite {
         parentSegmentTemplate.remove();
         rowSegmentTemplate.remove();
 
+        let self = this;
+        let continueButton = this.findBy("#continue-button");
+        continueButton.addEventListener("click", ()=> {
+            self.nextLevel();
+        });
+
+        let wonText = this.findBy("#won-text");
+
+        let scaleHelper = new ScaleHelper();
+        scaleHelper.scaleToFull(continueButton, continueButton.parentElement);
+        scaleHelper.scaleToFull(wonText, wonText.parentElement);
+
+        this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
         this.nextLevel();
     }
 
     async nextLevel() {
         try {
+            this._siteContent.classList.remove('won');
+
             const db = WordRotatorDb.getInstance();
-            const nextLevelJson = await db.loadNextLevel();
+            const nextLevelJson = await db.loadNextLevel([20]);
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
 
             const self = this;
             level.getWonPromise().then(() => {
-                self.nextLevel();
+                self.levelWon(level);
             });
 
             level.createSegments();
             level.getRootSegment()._updateElement();
-            this.findBy("#level").appendChild(level.getRootSegment().getElement());
+
+            let levelSegment = this.findBy("#level");
+            levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+            let scaleHelper = new ScaleHelper();
+            scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2,level.words[0].length * 2);
 
             this.level = level;
         }
@@ -56,4 +89,16 @@ export class LevelSite extends AbstractSite {
             console.error(e);
         }
     }
+
+    async levelWon(level){
+        const db = WordRotatorDb.getInstance();
+        // db.saveLevelPlayed(level);
+
+        this.levelCounter++;
+        localStorage.setItem("levelCounter", this.levelCounter);
+        this.levelCounterAction.setTitle(this.levelCounter);
+        this.levelCounterAction.redraw();
+
+        this._siteContent.classList.add('won');
+    }
 }

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

@@ -9,6 +9,7 @@ export class Level {
         this.templateContainer = templateContainer;
 
         this.hasWon = false;
+        this.id = null;
 
         this.wonResolver = null;
         this.giveUpResolver = null;
@@ -20,6 +21,16 @@ export class Level {
         });
     }
 
+    setId(id)
+    {
+        this.id = id;
+    }
+
+    getId()
+    {
+        return this.id;
+    }
+
     getLevel()
     {
         return this;
@@ -29,6 +40,10 @@ export class Level {
     {
         this.rootSegment = rootSegment;
         this.rootSegment.setParent(this);
+        if (this.startRotations)
+        {
+            this.applyRotations();
+        }
     }
 
     setWords(words)
@@ -44,6 +59,15 @@ export class Level {
         this.startRotations = rotations;
     }
 
+    applyRotations(rotations)
+    {
+        if (this.rootSegment)
+        {
+            rotations = Helper.nonNull(rotations, this.startRotations);
+            this.rootSegment.applyRotations(rotations);
+        }
+    }
+
     getHasWon()
     {
         return this.hasWon;

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

@@ -1,18 +1,23 @@
-export class LevelHelper{
+export class LevelHelper {
-    static setLevelType(typeId, level)
+    static setLevelType(typeId, level) {
-    {
         LevelHelper.types[typeId] = level;
     }
 
-    static getLevelClass(type)
+    static getLevelClass(type) {
-    {
         return LevelHelper.types[type];
     }
 
-    static inflateLevel(jsonLevel, templateContainer)
+    static inflateLevel(jsonLevel, templateContainer) {
-    {
         let level = new (LevelHelper.types[jsonLevel["rendererType"]])(templateContainer);
         level.setWords(jsonLevel["words"]);
+        level.setId(jsonLevel["id"]);
+
+        for (let i = 0, n = jsonLevel["rotations"].length; i < n; i++) {
+            if (jsonLevel["rotations"][i] <= 4) {
+                jsonLevel["rotations"][i] = 90 * jsonLevel["rotations"][i];
+            }
+        }
+
         level.setStartRotations(jsonLevel["rotations"]);
         return level;
     }

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

@@ -22,9 +22,7 @@ export class RowLevel extends Level {
                 parent.addChild(leafsWordTwo[2 * i + 1]);
                 rootSegment.addChild(parent);
             }
-
+            // rootSegment.applyRotations(this.startRotations);
-            rootSegment.applyRotations(this.startRotations);
-
             this.setRootSegment(rootSegment)
         }
     }

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

@@ -17,7 +17,10 @@ export class ParentSegment extends Segment {
             this.getLevel().checkHasWon(new Promise((resolve, reject)=>{
                 this.element.addEventListener("animationend", resolve);
             }));
-            return new DelayPromise(250);
+            // return new DelayPromise(250);
+            return new Promise(function(resolve) {
+                setTimeout(resolve, 250);
+            });
         }
     }
 

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

@@ -1,6 +1,4 @@
 {
-  "is-writing":"{0} schreibt...",
+  "won":"Gewonnen!",
-  "restart":"Story neustarten...",
+  "continue":"Weiter"
-  "should-restart-title":"Wirklich neustarten?",
-  "should-restart-question":"Willst du wirklich neu starten? Dein bisheriger Fortschritt geht dabei verloren!"
 }

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

@@ -1,3 +1,4 @@
 {
-  "is-writing":"{0} is writing..."
+  "won":"Won!",
+  "continue":"Continue"
 }

src/scss/wordRotator.scss

@@ -1,25 +1,35 @@
 $rotationDegrees: (90 180 270 360);
 
+@for $i from 1 through 10 {
+  $value: percentage($i/10);
+  .height-#{$i}0 {
+    height: $value;
+  }
+  .width-#{$i}0 {
+    width: $value;
+  }
+}
+
 @for $i from 1 through length($rotationDegrees) {
   $startDegree: ((nth($rotationDegrees, $i)+270)%360);
 
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
-      transform: rotate(#{$startDegree}deg)
+      transform: rotate(#{$startDegree}deg);
+      background-color: transparent;
+      z-index: 0;
+    }
+    99% {
+      transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      background-color: transparent;
+      z-index: 0;
     }
     100% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg)
+      transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      background-color: white;
+      z-index: 1;
     }
   }
-
-  //@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
-  //  0% {
-  //    transform: rotate(#{nth($rotationDegrees, $i)}deg)
-  //  }
-  //  100% {
-  //    transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
-  //  }
-  //}
 }
 
 .segment:not(.segment-row) {
@@ -52,24 +62,39 @@ $rotationDegrees: (90 180 270 360);
   }
 }
 
+#level {
+  white-space: nowrap;
+  transition: none;
+  max-width: 100%;
+
+  * {
+    transition: none;
+  }
+  overflow-y: visible;
+}
+
 .segment {
+  white-space: initial;
   cursor: pointer;
   display: inline-block;
   text-align: center;
   position: relative;
-  transition: .0s;
+  transition: none;
   user-select: none;
+  z-index: 1;
+  background-color: white;
 
   &.segment-row {
     display: block;
     width: 100%;
     animation: none !important;
+    white-space: nowrap;
   }
 
   &.segment-leaf {
-    min-width: 17px;
+    min-width: 1em;
-    height: 34px;
+    height: 2em;
-    line-height: 34px;
+    line-height: 2em;
   }
 
   &.segment-parent {
@@ -79,44 +104,26 @@ $rotationDegrees: (90 180 270 360);
       width: 50%;
     }
   }
+}
 
-  //&.rotate-0 {
+//Won-screen
-  //  animation-name: rotate-360;
+.show-when-won {
-  //  animation-duration: 0.25s;
+  visibility: hidden;
-  //  animation-fill-mode: forwards;
+  transition: none;
-  //  //transform: rotate(360deg);
+  * {
-  //  .segment {
+    transition: none;
-  //    transform: rotate(-360deg);
+  }
-  //  }
+}
-  //}
+
-  //
+.won {
-  //&.rotate-90 {
+  .show-when-won {
-  //  animation-name: rotate-90;
+    visibility: initial;
-  //  animation-duration: 0.25s;
+  }
-  //  animation-fill-mode: forwards;
+}
-  //  //transform: rotate(90deg);
+
-  //  .segment {
+#continue-button {
-  //    transform: rotate(-90deg);
+  //width: 80%;
-  //  }
+  //margin-left: 10%;
-  //}
+  //margin-right: 10%;
-  //
+  //margin-bottom: 20%
-  //&.rotate-180 {
+}
-  //  animation-name: rotate-180;
-  //  animation-duration: 0.25s;
-  //  animation-fill-mode: forwards;
-  //  //transform: rotate(180deg);
-  //  .segment {
-  //    transform: rotate(-180deg);
-  //  }
-  //}
-  //
-  //&.rotate-270 {
-  //  animation-name: rotate-270;
-  //  animation-duration: 0.25s;
-  //  animation-fill-mode: forwards;
-  //  //transform: rotate(270deg);
-  //  .segment {
-  //    transform: rotate(-270deg);
-  //  }
-  //}
-}