Added Coins

src/module/Application/pwa/html/application/fragment/settings.html

@@ -8,6 +8,13 @@
                 </span>
             </div>
 
+            <!--<div class='row'>-->
+                <!--<span class='columns small-6' data-translation="language"></span>-->
+                <!--<span class='columns small-6'>-->
+                    <!--<label id = 'language-radio-template'><input type="radio" class='setting' name='language'></label>-->
+                <!--</span>-->
+            <!--</div>-->
+
 
             <button id = 'reset-levels' class = "button" data-translation="reset-levels"></button>
 

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

@@ -16,6 +16,11 @@
     <div class='max-height'>
         <div class = 'show-when-won height-20 center flex-center'>
             <b data-translation="won" id = "won-text"></b>
+            <div id = 'coin-container'>
+                <div id = 'coin-template' class='coin'>
+                    <img src = 'img/coin.png'/>
+                </div>
+            </div>
         </div>
         <div class="flex-center height-60">
             <div id='level'>

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

@@ -1,4 +1,4 @@
-import {Helper, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
+import {Helper, Menu, MenuAction, SystemSettings} from "../../../../../js/lib/pwa-lib";
 import {ParentSegment} from "../wordrotator/Segment/ParentSegment";
 import {LeafSegment} from "../wordrotator/Segment/LeafSegment";
 import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
@@ -12,7 +12,20 @@ import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
 export class LevelSite extends WordRotatorBaseSite {
     constructor(siteManager) {
         super(siteManager, "html/application/level.html");
-        this.levelScaler = ()=>{};
+        this.levelScaler = () => {
+        };
+    }
+
+    createActionBarMenu(menu) {
+        menu = super.createActionBarMenu(menu);
+
+        let coinAction = new MenuAction(Helper.nonNull(localStorage.getItem("coins"), "0"), ()=>{}, MenuAction.SHOW_ALWAYS, 900);
+        coinAction.setShouldTranslate(false);
+        coinAction._liClass = "coin-counter";
+        menu.addAction(coinAction);
+        this.coinAction = coinAction;
+
+        return menu;
     }
 
     onConstruct(args) {
@@ -57,6 +70,12 @@ export class LevelSite extends WordRotatorBaseSite {
         this.levelNumberScaler = scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
 
+        this.coinTemplate = this.findBy("#coin-template");
+        this.coinContainer = this.findBy("#coin-container");
+
+        this.coinTemplate.id = null;
+        this.coinContainer.removeAllChildren();
+
         this.loadLastLevel();
     }
 
@@ -131,6 +150,9 @@ export class LevelSite extends WordRotatorBaseSite {
             this.level = level;
             this.levelCounterAction.innerText = this.levelCounter;
             this.levelNumberScaler();
+
+            this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0"));
+            this.coinAction.redraw();
         }
         catch (e) {
             console.error(e);
@@ -161,6 +183,15 @@ export class LevelSite extends WordRotatorBaseSite {
 
             this._siteContent.classList.add('won');
             localStorage.removeItem("currentLevel");
+
+            this.coinContainer.removeAllChildren();
+            let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5);
+            for (let i = 0; i < coinsPerLevel; i++) {
+                let coinElem = Helper.cloneNode(this.coinTemplate);
+                this.coinContainer.appendChild(coinElem);
+            }
+            localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"))+parseInt(coinsPerLevel));
+
             await savePromise;
         }
         catch (e) {