update to pc

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

public/js/app.js

@@ -3037,12 +3037,57 @@ class Segment{
     }
 }
 
-class DelayPromise extends Promise{
-    constructor(delay) {
-        super((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 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{
-    static setLevelType(typeId, level)
-    {
+class LevelHelper {
+    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 {