Added Coins

.idea/wordRotator.iml

@@ -3,7 +3,6 @@
   <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/doctrine/event-manager" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/persistence" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/reflection" />

log/error.log

@@ -32,3 +32,6 @@
 2018-09-19T12:21:19+02:00 ERR (3):
 2018-09-19T12:21:44+02:00 ERR (3):
 2018-09-19T12:21:59+02:00 ERR (3):
+2018-09-19T13:33:57+02:00 ERR (3):
+2018-09-19T13:34:11+02:00 ERR (3):
+2018-09-20T10:32:44+02:00 ERR (3):

log/log.log

@@ -32,3 +32,6 @@
 2018-09-19T12:21:19+02:00 ERR (3):
 2018-09-19T12:21:44+02:00 ERR (3):
 2018-09-19T12:21:59+02:00 ERR (3):
+2018-09-19T13:33:57+02:00 ERR (3):
+2018-09-19T13:34:11+02:00 ERR (3):
+2018-09-20T10:32:44+02:00 ERR (3):

public/html/application/level.html

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

public/js/app.js

@@ -1,21 +1,10 @@
-class SystemSettings {
-    static setBasePath(basePath)
-    {
-        SystemSettings._basePath = basePath;
-    }
-    static getBasePath()
-    {
-        return SystemSettings._basePath;
-    }
-}
-SystemSettings.setBasePath("/");
-
 class MenuAction {
     constructor(title, callback, showFor, order) {
         this.title = Helper.nonNull(title, null);
         this.callback = callback;
         this.showFor = Helper.nonNull(showFor, MenuAction.SHOW_FOR_MEDIUM);
         this.order = Helper.nonNull(order, 1000);
+        this._liClass = "";
 
         this._menu = null;
         this._activated = true;
@@ -112,6 +101,7 @@ class MenuAction {
         copy.callback = this.callback;
         copy.showFor = this.showFor;
         copy.order = this.order;
+        copy._liClass = this._liClass;
 
         copy._activated = this._activated;
         copy._visible = this._visible;
@@ -174,8 +164,7 @@ class Menu {
         }
     }
 
-    copy(instance)
+    copy(instance) {
-    {
         instance = Helper.nonNull(instance, new Menu([]));
 
         instance.actions = [];
@@ -261,19 +250,16 @@ class Menu {
             let iconElement = document.createElement("img");
             iconElement.src = action.getIcon();
             iconElement.classList.add('action-image');
-            if (action.getShouldTranslate())
+            if (action.getShouldTranslate()) {
-            {
                 iconElement.dataset["translationTitle"] = action.title;
             }
             aElement.appendChild(iconElement);
         }
         let title = action.getTitle();
-        if (action.getShouldTranslate())
+        if (action.getShouldTranslate()) {
-        {
             title = Translator.makePersistentTranslation(title);
         }
-        else
+        else {
-        {
             title = document.createTextNode(title);
         }
         aElement.appendChild(title);
@@ -285,14 +271,16 @@ class Menu {
     renderLiElement(aElement, action) {
         let liElement = document.createElement("li");
         liElement.classList.add('action');
+        if (action._liClass.trim() !== "") {
+            liElement.classList.add(action._liClass);
+        }
         liElement.appendChild(aElement);
         liElement.dataset["id"] = action.id;
         if (Helper.isNotNull(action.getIcon())) {
             liElement.classList.add("img");
         }
 
-        if (!action.getVisible())
+        if (!action.getVisible()) {
-        {
             liElement.classList.add("hidden");
         }
 
@@ -312,21 +300,18 @@ class Menu {
         });
     }
 
-    _getElementsForAction(action){
+    _getElementsForAction(action) {
         let elements = [];
         for (let i = 0; i < this.parentElements.length; i++) {
-            let elem = this.parentElements[i].querySelector("[data-id=\""+action.getId()+"\"]");
+            let elem = this.parentElements[i].querySelector("[data-id=\"" + action.getId() + "\"]");
             Helper.isNull(elem) || elements.push(elem);
         }
         return elements
     }
 
-    updateAction(action)
+    updateAction(action) {
-    {
-        console.log("update action here!");
         let oldElements = this._getElementsForAction(action);
-        if (oldElements.length === 0)
+        if (oldElements.length === 0) {
-        {
             return;
         }
 
@@ -338,11 +323,9 @@ class Menu {
         }
     }
 
-    removeAction(action)
+    removeAction(action) {
-    {
         let index = this.actions.indexOf(action);
-        if (index > 0)
+        if (index > 0) {
-        {
             this.actions.splice(index, 1);
             let oldElements = this._getElementsForAction(action);
             for (let i = 0, n = oldElements.length; i < n; i++) {
@@ -1291,6 +1274,31 @@ class Helper {
 }
 Helper.init();
 
+class SystemSettings {
+    static setBasePath(basePath) {
+        SystemSettings._basePath = basePath;
+    }
+
+    static getBasePath() {
+        return SystemSettings._basePath;
+    }
+
+    static set(key, value) {
+        SystemSettings._settings[key] = value;
+    }
+
+    static get(key, defaultValue) {
+        return Helper.nonNull(SystemSettings._settings[key], defaultValue);
+    }
+
+    static has(key){
+        return Helper.nonNull(SystemSettings._settings[key]);
+    }
+}
+
+SystemSettings.setBasePath("/");
+SystemSettings._settings = {};
+
 class ThemeManager {
     static init() {
         ThemeManager.loadCurrentTheme();
@@ -5495,7 +5503,20 @@ class EndSite extends WordRotatorBaseSite{
 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) {
@@ -5540,6 +5561,12 @@ 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();
     }
 
@@ -5614,6 +5641,9 @@ 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);
@@ -5644,6 +5674,15 @@ 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) {

src/js/lib/pwa-lib.js

@@ -1,21 +1,10 @@
-class SystemSettings {
-    static setBasePath(basePath)
-    {
-        SystemSettings._basePath = basePath;
-    }
-    static getBasePath()
-    {
-        return SystemSettings._basePath;
-    }
-}
-SystemSettings.setBasePath("/");
-
 class MenuAction {
     constructor(title, callback, showFor, order) {
         this.title = Helper.nonNull(title, null);
         this.callback = callback;
         this.showFor = Helper.nonNull(showFor, MenuAction.SHOW_FOR_MEDIUM);
         this.order = Helper.nonNull(order, 1000);
+        this._liClass = "";
 
         this._menu = null;
         this._activated = true;
@@ -112,6 +101,7 @@ class MenuAction {
         copy.callback = this.callback;
         copy.showFor = this.showFor;
         copy.order = this.order;
+        copy._liClass = this._liClass;
 
         copy._activated = this._activated;
         copy._visible = this._visible;
@@ -174,8 +164,7 @@ class Menu {
         }
     }
 
-    copy(instance)
+    copy(instance) {
-    {
         instance = Helper.nonNull(instance, new Menu([]));
 
         instance.actions = [];
@@ -261,19 +250,16 @@ class Menu {
             let iconElement = document.createElement("img");
             iconElement.src = action.getIcon();
             iconElement.classList.add('action-image');
-            if (action.getShouldTranslate())
+            if (action.getShouldTranslate()) {
-            {
                 iconElement.dataset["translationTitle"] = action.title;
             }
             aElement.appendChild(iconElement);
         }
         let title = action.getTitle();
-        if (action.getShouldTranslate())
+        if (action.getShouldTranslate()) {
-        {
             title = Translator.makePersistentTranslation(title);
         }
-        else
+        else {
-        {
             title = document.createTextNode(title);
         }
         aElement.appendChild(title);
@@ -285,14 +271,16 @@ class Menu {
     renderLiElement(aElement, action) {
         let liElement = document.createElement("li");
         liElement.classList.add('action');
+        if (action._liClass.trim() !== "") {
+            liElement.classList.add(action._liClass);
+        }
         liElement.appendChild(aElement);
         liElement.dataset["id"] = action.id;
         if (Helper.isNotNull(action.getIcon())) {
             liElement.classList.add("img");
         }
 
-        if (!action.getVisible())
+        if (!action.getVisible()) {
-        {
             liElement.classList.add("hidden");
         }
 
@@ -312,21 +300,18 @@ class Menu {
         });
     }
 
-    _getElementsForAction(action){
+    _getElementsForAction(action) {
         let elements = [];
         for (let i = 0; i < this.parentElements.length; i++) {
-            let elem = this.parentElements[i].querySelector("[data-id=\""+action.getId()+"\"]");
+            let elem = this.parentElements[i].querySelector("[data-id=\"" + action.getId() + "\"]");
             Helper.isNull(elem) || elements.push(elem);
         }
         return elements
     }
 
-    updateAction(action)
+    updateAction(action) {
-    {
-        console.log("update action here!");
         let oldElements = this._getElementsForAction(action);
-        if (oldElements.length === 0)
+        if (oldElements.length === 0) {
-        {
             return;
         }
 
@@ -338,11 +323,9 @@ class Menu {
         }
     }
 
-    removeAction(action)
+    removeAction(action) {
-    {
         let index = this.actions.indexOf(action);
-        if (index > 0)
+        if (index > 0) {
-        {
             this.actions.splice(index, 1);
             let oldElements = this._getElementsForAction(action);
             for (let i = 0, n = oldElements.length; i < n; i++) {
@@ -1291,6 +1274,31 @@ class Helper {
 }
 Helper.init();
 
+class SystemSettings {
+    static setBasePath(basePath) {
+        SystemSettings._basePath = basePath;
+    }
+
+    static getBasePath() {
+        return SystemSettings._basePath;
+    }
+
+    static set(key, value) {
+        SystemSettings._settings[key] = value;
+    }
+
+    static get(key, defaultValue) {
+        return Helper.nonNull(SystemSettings._settings[key], defaultValue);
+    }
+
+    static has(key){
+        return Helper.nonNull(SystemSettings._settings[key]);
+    }
+}
+
+SystemSettings.setBasePath("/");
+SystemSettings._settings = {};
+
 class ThemeManager {
     static init() {
         ThemeManager.loadCurrentTheme();

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

src/scss/wordRotator.scss

@@ -207,4 +207,24 @@ $animationDuration: 0.25s;
     transform: translate(-50%,-50%);
     font-weight: bold;
   }
+}
+
+//coin element
+.coin-counter{
+  display: inline-block;
+  position: relative;
+  :after{
+    background-image: url('../img/coinTower.png');
+    background-size: 20px 20px;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    content:"";
+  }
+}
+
+#coin-container .coin{
+  margin: 3px;
+  max-width: 30px;
+  display: inline-block;
 }