update für die Vorlesung

bin/build.sh

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

bin/test.sh

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
-testcafe firefox test/test.testcafe.js
+#testcafe firefox test/test.testcafe.js
-#testcafe remote test/test.testcafe.js --qr-code
+testcafe remote test/test.testcafe.js

package.json

@@ -23,9 +23,10 @@
     "regenerator": "^0.13.2",
     "rollup": "^0.57.1",
     "rollup-plugin-babel": "^3.0.3",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "testcafe": "^0.22.1-alpha.3"
   },
   "input": "src/js/init.js",
   "output": "public/js/app.js",
-  "namesOutput":"public/version/x/app.names.json"
+  "namesOutput": "public/version/x/app.names.json"
 }

public/html/application/menu.html

@@ -1 +1 @@
-<div class="max-height flex-center"><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="height-60 max-width flex-center"><div id=level></div><span id=level-number-container class="visible in-main-menu"><span id=level-number>1</span></span></div><div class="height-30 flex-center fill-me"><button class="button grow text-center" id=play-button><span data-translation=play></span></button><div class="max-width line-height-1 fill-me vertical"><label class=switch><div data-view=img/speaker.svg></div><input type=checkbox class=setting id=play-sound> <span class=slider></span></label><div class="grow center" id=share-button><span data-view=img/share.svg></span></div><label class="switch right"><div data-view=img/music.svg></div><input type=checkbox class=setting id=play-music> <span class=slider></span></label></div></div></div>
+<div class="max-height flex-center"><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="height-60 max-width flex-center relative"><div id=level></div><span id=level-number-container class="visible in-main-menu"><span id=level-number>1</span></span></div><div class="height-30 flex-center fill-me"><button class="button grow text-center" id=play-button><span data-translation=play></span></button><div class="max-width line-height-1 fill-me vertical"><label class=switch><div data-view=img/speaker.svg></div><input type=checkbox class=setting id=play-sound> <span class=slider></span></label><div class="grow center" id=share-button><span data-view=img/share.svg></span></div><label class="switch right"><div data-view=img/music.svg></div><input type=checkbox class=setting id=play-music> <span class=slider></span></label></div></div></div>

public/js/app.js

@@ -1,3 +1,65 @@
+class InitPromise
+{
+    static addPromise(promise)
+    {
+        if (typeof promise === 'function')
+        {
+            let func = promise;
+            promise = InitPromise.mainPromise.then(function(app){
+                return (func(app));
+            });
+        }
+        InitPromise.promises.push(promise);
+    }
+
+    static resolve(app)
+    {
+        InitPromise.mainResolver(app);
+        return InitPromise.mainPromise.then(function(){
+            return Promise.all(InitPromise.promises);
+        });
+    }
+}
+
+InitPromise.promises = [];
+InitPromise.mainPromise = new Promise(function(resolver){
+    InitPromise.mainResolver = resolver;
+});
+
+class AndroidBridge {
+
+    static addDefinition(definition, object) {
+        if (typeof definition !== "function") {
+            if (typeof definition === "string"){
+                let parts = definition.split(".");
+                for (let i = parts.length-1; i >= 1; i--) {
+                    let newObject = {};
+                    newObject[parts[i]] = object;
+                    object = newObject;
+                }
+                definition = parts[0];
+                console.log("parts for", definition, parts, object);
+            }
+            let textDefinition = definition;
+            definition = () => {
+                console.log("defining", textDefinition, object);
+                window[textDefinition] = object;
+            };
+        }
+        AndroidBridge.definitions.push(definition);
+    }
+
+    static applyDefinitions() {
+        for (let i = 0; i < AndroidBridge.definitions.length; i++) {
+            AndroidBridge.definitions[i]();
+        }
+        return Promise.resolve();
+    }
+}
+
+AndroidBridge.definitions = [];
+AndroidBridge.addDefinition("InitPromise.addPromise", InitPromise.addPromise);
+
 class MenuAction {
     constructor(title, callback, showFor, order) {
         this.title = Helper.nonNull(title, null);
@@ -840,6 +902,9 @@ Translator.languageBasePath = "js/lang/";
 Translator.currentLanguage = null;
 Translator.translations = {};
 
+
+AndroidBridge.addDefinition("Translator.setLanguage", Translator.setLanguage);
+
 class Helper {
     static init() {
         Helper.heightMmToPxFactor = null;
@@ -1367,11 +1432,21 @@ class ThemeManager {
     static addChangeListener(listener) {
         ThemeManager.changeListeners.push(listener);
     }
+
+    static getCurrentTheme(){
+        return ThemeManager.currentTheme;
+    }
 }
 
+ThemeManager.currentTheme = null;
 ThemeManager.themes = [];
 ThemeManager.changeListeners = [];
 
+AndroidBridge.addDefinition("ThemeManager", {
+    "addChangeListener": ThemeManager.addChangeListener,
+    "getCurrentTheme": ThemeManager.getCurrentTheme,
+});
+
 class CookieCompliance {
 
     static async showIfNeeded(cookieContainer) {
@@ -2626,33 +2701,6 @@ FlashMessenger.MESSAGE_TYPE_DEFAULT = 'default';
 FlashMessenger.MESSAGE_TYPE_INFO = 'info';
 FlashMessenger.MESSAGE_TYPE_WARNING = 'warning';
 
-class InitPromise
-{
-    static addPromise(promise)
-    {
-        if (typeof promise === 'function')
-        {
-            let func = promise;
-            promise = InitPromise.mainPromise.then(function(app){
-                return (func(app));
-            });
-        }
-        InitPromise.promises.push(promise);
-    }
-
-    static resolve(app)
-    {
-        InitPromise.mainResolver(app);
-        return InitPromise.mainPromise.then(function(){
-            return Promise.all(InitPromise.promises);
-        });
-    }
-}
-InitPromise.promises = [];
-InitPromise.mainPromise = new Promise(function(resolver){
-    InitPromise.mainResolver = resolver;
-});
-
 class MyDb {
     constructor(dbName, version) {
         let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
@@ -2987,6 +3035,12 @@ ShareButton.TYPE_MOBILE_LEFTOVER = 4;
 ShareButton.TYPE_MOBILE = ShareButton.TYPE_MOBILE_APPLE+ShareButton.TYPE_MOBILE_LEFTOVER;
 ShareButton.TYPE_ALL = ShareButton.TYPE_DESKTOP+ShareButton.TYPE_MOBILE;
 
+AndroidBridge.addDefinition(() => {
+    window["ShareButton"] = ShareButton;
+    window["ShareButton"]["TYPE_ALL"] = ShareButton.TYPE_ALL;
+
+});
+
 class MultipleShareButton extends ShareButton{
     constructor(deviceType, icon, callbacks, shouldLoadImg)
     {
@@ -3087,6 +3141,8 @@ class ShareManager {
 
 ShareManager.init();
 
+AndroidBridge.addDefinition("ShareManager.addShareButton", ShareManager.addShareButton);
+
 class SmsShareButton extends ShareButton
 {
     constructor(icon, shouldLoadImg) {
@@ -4888,6 +4944,8 @@ class MatomoShareButton extends MultipleShareButton{
     }
 }
 
+AndroidBridge.addDefinition("MatomoShareButton", MatomoShareButton);
+
 class ScaleHelper {
     async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) {
 
@@ -5420,14 +5478,16 @@ class ParentSegment extends Segment {
 
         let self = this;
         this.touchendListener = function (e) {
-            let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+            if (e.changedTouches.length >= 1) {
-            if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
+                let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
-                let position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
+                if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
+                    let position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
 
-                self.getLevel().segmentClickedListener(self);
+                    self.getLevel().segmentClickedListener(self);
-                self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
+                    self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
-                e.stopPropagation();
+                    e.stopPropagation();
-                e.preventDefault();
+                    e.preventDefault();
+                }
             }
         };
         this.mouseupListener = function (e) {
@@ -7071,13 +7131,14 @@ InitPromise.addPromise(function () {
 class SelectWordsSite extends UserSite{
 
     constructor(siteManager) {
-        super(siteManager, "version/1/html/selectWords.html", null, "admin");
+        super(siteManager, "version/2/html/selectWords.html", null, "select-words");
     }
 
     async onConstruct(args) {
         let res = await super.onConstruct(args);
         this.stats = (await DataManager.load("words"))["result"];
         this.words = this.stats["wordsToCheck"];
+        console.log(this.stats);
         return res;
     }
 
@@ -7087,6 +7148,7 @@ class SelectWordsSite extends UserSite{
         this.findBy("#checked").appendChild(document.createTextNode(this.stats["wordsChecked"]));
         this.findBy("#not-sure").appendChild(document.createTextNode(this.stats["wordsUnsure"]));
         this.findBy("#deleted").appendChild(document.createTextNode(this.stats["wordsDeleted"]));
+        this.findBy("#unused").appendChild(document.createTextNode(this.stats["wordsNotUsed"]));
 
         let template = this.findBy("#word-template");
         template.id = null;
@@ -7128,7 +7190,6 @@ class SelectWordsSite extends UserSite{
     }
 
     setWord(wordElement, word){
-        console.log(wordElement, word);
         wordElement.querySelector(".word").removeAllChildren().appendChild(document.createTextNode(word["word"]));
         wordElement.dataset["id"] = word["id"];
     }
@@ -7137,12 +7198,12 @@ class SelectWordsSite extends UserSite{
 InitPromise.addPromise(app => {
     app.addDefaultAction(new UserAction("select-words", () => {
         app.startSite(SelectWordsSite);
-    }, null, null, "admin"));
+    }, null, null, "select-words"));
 });
 
 class DeleteWordsSite extends UserSite {
     constructor(siteManager) {
-        super(siteManager, "version/1/html/deleteLevels.html", null, "admin");
+        super(siteManager, "version/2/html/deleteLevels.html", null, "admin");
     }
 
     async onConstruct(args) {
@@ -7223,17 +7284,17 @@ ShareManager.addShareButton(new MatomoShareButton(new TelegramShareButton('img/t
 // ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
 
 let app = new App();
-// app.addDeepLink("policy", PrivatePolicySite.name);
+
+AndroidBridge.addDefinition(() => {
+    window["app"] = app;
+    window["app"]["pause"] = app.pause;
+    window["app"]["resume"] = app.resume;
+    // window["app"]["refreshCurrentSite"] = app.refreshCurrentSite;
+});
 
 // bridge für Android
-// window["ThemeManager"] = ThemeManager;
-// window["ThemeManager"]["addChangeListener"] = ThemeManager.addChangeListener;
-// window["app"] = app;
-// window["app"]["refreshCurrentSite"] = app.refreshCurrentSite;
 // window["Translator"] = Translator;
 // window["Translator"]["setLanguage"] = Translator.setLanguage;
-// window["InitPromise"] = InitPromise;
-// window["InitPromise"]["addPromise"] = InitPromise.addPromise;
 
 
 SettingsSite.setTemplate("html/application/setting-template.html");
@@ -7256,4 +7317,6 @@ InitPromise.resolve(app).then(async function(){
     InstallManager.setCanInstallListener(e => {
         console.log("can install!", e);
     });
+
+    window["applyAndroidBridge"] = AndroidBridge.applyDefinitions;
 });

src/js/init.js

@@ -1,4 +1,5 @@
 import {
+    AndroidBridge,
     App, applyPolyfills,
     InitPromise, MenuAction,
     ShareManager,
@@ -46,17 +47,17 @@ ShareManager.addShareButton(new MatomoShareButton(new TelegramShareButton('img/t
 // ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
 
 let app = new App();
-// app.addDeepLink("policy", PrivatePolicySite.name);
+
+AndroidBridge.addDefinition(() => {
+    window["app"] = app;
+    window["app"]["pause"] = app.pause;
+    window["app"]["resume"] = app.resume;
+    // window["app"]["refreshCurrentSite"] = app.refreshCurrentSite;
+});
 
 // bridge für Android
-// window["ThemeManager"] = ThemeManager;
-// window["ThemeManager"]["addChangeListener"] = ThemeManager.addChangeListener;
-// window["app"] = app;
-// window["app"]["refreshCurrentSite"] = app.refreshCurrentSite;
 // window["Translator"] = Translator;
 // window["Translator"]["setLanguage"] = Translator.setLanguage;
-// window["InitPromise"] = InitPromise;
-// window["InitPromise"]["addPromise"] = InitPromise.addPromise;
 
 
 SettingsSite.setTemplate("html/application/setting-template.html");
@@ -79,4 +80,6 @@ InitPromise.resolve(app).then(async function(){
     InstallManager.setCanInstallListener(e => {
         console.log("can install!", e);
     });
+
+    window["applyAndroidBridge"] = AndroidBridge.applyDefinitions;
 });

src/js/lib/pwa-assets.js

@@ -1,4 +1,4 @@
-import { Helper, InitPromise, MultipleShareButton, Fragment, Translator } from './pwa-lib.js';
+import { Helper, InitPromise, MultipleShareButton, AndroidBridge, Fragment, Translator } from './pwa-lib.js';
 
 class DelayPromise extends Promise {
     static async delay(delay) {
@@ -174,6 +174,8 @@ class MatomoShareButton extends MultipleShareButton{
     }
 }
 
+AndroidBridge.addDefinition("MatomoShareButton", MatomoShareButton);
+
 class RotateHelper {
     rotate(element, degrees){
         let rotateText = element.innerText;

src/js/lib/pwa-lib.js

@@ -1,3 +1,65 @@
+class InitPromise
+{
+    static addPromise(promise)
+    {
+        if (typeof promise === 'function')
+        {
+            let func = promise;
+            promise = InitPromise.mainPromise.then(function(app){
+                return (func(app));
+            });
+        }
+        InitPromise.promises.push(promise);
+    }
+
+    static resolve(app)
+    {
+        InitPromise.mainResolver(app);
+        return InitPromise.mainPromise.then(function(){
+            return Promise.all(InitPromise.promises);
+        });
+    }
+}
+
+InitPromise.promises = [];
+InitPromise.mainPromise = new Promise(function(resolver){
+    InitPromise.mainResolver = resolver;
+});
+
+class AndroidBridge {
+
+    static addDefinition(definition, object) {
+        if (typeof definition !== "function") {
+            if (typeof definition === "string"){
+                let parts = definition.split(".");
+                for (let i = parts.length-1; i >= 1; i--) {
+                    let newObject = {};
+                    newObject[parts[i]] = object;
+                    object = newObject;
+                }
+                definition = parts[0];
+                console.log("parts for", definition, parts, object);
+            }
+            let textDefinition = definition;
+            definition = () => {
+                console.log("defining", textDefinition, object);
+                window[textDefinition] = object;
+            };
+        }
+        AndroidBridge.definitions.push(definition);
+    }
+
+    static applyDefinitions() {
+        for (let i = 0; i < AndroidBridge.definitions.length; i++) {
+            AndroidBridge.definitions[i]();
+        }
+        return Promise.resolve();
+    }
+}
+
+AndroidBridge.definitions = [];
+AndroidBridge.addDefinition("InitPromise.addPromise", InitPromise.addPromise);
+
 class MenuAction {
     constructor(title, callback, showFor, order) {
         this.title = Helper.nonNull(title, null);
@@ -840,6 +902,9 @@ Translator.languageBasePath = "js/lang/";
 Translator.currentLanguage = null;
 Translator.translations = {};
 
+
+AndroidBridge.addDefinition("Translator.setLanguage", Translator.setLanguage);
+
 class Helper {
     static init() {
         Helper.heightMmToPxFactor = null;
@@ -1367,11 +1432,21 @@ class ThemeManager {
     static addChangeListener(listener) {
         ThemeManager.changeListeners.push(listener);
     }
+
+    static getCurrentTheme(){
+        return ThemeManager.currentTheme;
+    }
 }
 
+ThemeManager.currentTheme = null;
 ThemeManager.themes = [];
 ThemeManager.changeListeners = [];
 
+AndroidBridge.addDefinition("ThemeManager", {
+    "addChangeListener": ThemeManager.addChangeListener,
+    "getCurrentTheme": ThemeManager.getCurrentTheme,
+});
+
 class CookieCompliance {
 
     static async showIfNeeded(cookieContainer) {
@@ -3291,33 +3366,6 @@ class GapiHandler {
     }
 }
 
-class InitPromise
-{
-    static addPromise(promise)
-    {
-        if (typeof promise === 'function')
-        {
-            let func = promise;
-            promise = InitPromise.mainPromise.then(function(app){
-                return (func(app));
-            });
-        }
-        InitPromise.promises.push(promise);
-    }
-
-    static resolve(app)
-    {
-        InitPromise.mainResolver(app);
-        return InitPromise.mainPromise.then(function(){
-            return Promise.all(InitPromise.promises);
-        });
-    }
-}
-InitPromise.promises = [];
-InitPromise.mainPromise = new Promise(function(resolver){
-    InitPromise.mainResolver = resolver;
-});
-
 class MyDb {
     constructor(dbName, version) {
         let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
@@ -3716,6 +3764,12 @@ ShareButton.TYPE_MOBILE_LEFTOVER = 4;
 ShareButton.TYPE_MOBILE = ShareButton.TYPE_MOBILE_APPLE+ShareButton.TYPE_MOBILE_LEFTOVER;
 ShareButton.TYPE_ALL = ShareButton.TYPE_DESKTOP+ShareButton.TYPE_MOBILE;
 
+AndroidBridge.addDefinition(() => {
+    window["ShareButton"] = ShareButton;
+    window["ShareButton"]["TYPE_ALL"] = ShareButton.TYPE_ALL;
+
+});
+
 class CopyShareButton extends ShareButton
 {
     constructor(icon, shouldLoadImg) {
@@ -3847,6 +3901,8 @@ class ShareManager {
 
 ShareManager.init();
 
+AndroidBridge.addDefinition("ShareManager.addShareButton", ShareManager.addShareButton);
+
 class SmsShareButton extends ShareButton
 {
     constructor(icon, shouldLoadImg) {
@@ -4379,4 +4435,4 @@ function applyPolyfills() {
     });
 }
 
-export { App, ChainAble, CookieCompliance, ConfirmDialog, Dialog, FlashMessenger, AbstractService, AbstractGapiResponse, Achievement, AchievementList, GameService, GapiPlayer, Leaderboard, Score, GapiHandler, Helper, InitPromise, ActionBarMenu, Menu, MenuAction, OpenSubmenuAction, Submenu, MyDb, Prioritised, ScriptLoader, CopyShareButton, MultipleShareButton, ShareButton, ShareManager, SmsShareButton, TelegramShareButton, WhatsappShareButton, SimpleWS, AbstractSite, Context, Fragment, PauseSite, SiteContainer, SiteManager, SystemSettings, Theme, ThemeManager, DBTranslator, Translator, TranslatorDB, ViewInflater, applyPolyfills };
+export { AndroidBridge, App, ChainAble, CookieCompliance, ConfirmDialog, Dialog, FlashMessenger, AbstractService, AbstractGapiResponse, Achievement, AchievementList, GameService, GapiPlayer, Leaderboard, Score, GapiHandler, Helper, InitPromise, ActionBarMenu, Menu, MenuAction, OpenSubmenuAction, Submenu, MyDb, Prioritised, ScriptLoader, CopyShareButton, MultipleShareButton, ShareButton, ShareManager, SmsShareButton, TelegramShareButton, WhatsappShareButton, SimpleWS, AbstractSite, Context, Fragment, PauseSite, SiteContainer, SiteManager, SystemSettings, Theme, ThemeManager, DBTranslator, Translator, TranslatorDB, ViewInflater, applyPolyfills };

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

@@ -37,14 +37,16 @@ export class ParentSegment extends Segment {
 
         let self = this;
         this.touchendListener = function (e) {
-            let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+            if (e.changedTouches.length >= 1) {
-            if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
+                let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
-                let position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
+                if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
+                    let position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
 
-                self.getLevel().segmentClickedListener(self);
+                    self.getLevel().segmentClickedListener(self);
-                self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
+                    self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
-                e.stopPropagation();
+                    e.stopPropagation();
-                e.preventDefault();
+                    e.preventDefault();
+                }
             }
         };
         this.mouseupListener = function (e) {

src/module/Application/pwa/public/html/application/menu.html

@@ -14,7 +14,7 @@
         <div class='child-container'></div>
     </div>
 
-    <div class='height-60 max-width flex-center'>
+    <div class='height-60 max-width flex-center relative'>
         <div id='level'></div>
         <span id='level-number-container' class='visible in-main-menu'>
             <span id='level-number'>1</span>

src/scss/_settings.scss

@@ -1,6 +1,6 @@
 @import "defaultSettings";
 
-$themes: map-merge($themes,(dark: (
+$themes: map-merge($themes, (dark: (
         class: dark,
         themeColor: #373737,
         lightThemeColor: #4b4b4b,
@@ -17,4 +17,24 @@ $themes: map-merge($themes,(dark: (
 )));
 
 $rotationDegrees: (90 180 270 360);
-$animationDuration: .25s;
+$animationDuration: .25s;
+
+//$degreeMatrix: (
+//        //0:matrix(1, 0, 0, 1, 0, 0),
+//        0:rotate(0deg),
+//        90:matrix(0, 1, -1, 0, 0, 0),
+//        180:matrix(-1, 0, 0, -1, 0, 0),
+//        270:matrix(0, -1, 1, 0, 0, 0),
+//        //360:matrix(0.99999, 0, 0, 0.99999, 0, 0),
+//        //450:matrix(0, 1, -1, 0, 0, 0),
+//          360:rotate(360deg),
+//          450:rotate(450deg),
+//);
+$degreeMatrix: (
+        0:rotate(0deg),
+        90:rotate(90deg),
+        180:rotate(180deg),
+        270:rotate(270deg),
+        360:rotate(360deg),
+        450:rotate(450deg),
+);

src/scss/_wordRotator.scss

@@ -0,0 +1,379 @@
+@import "imports";
+@import "tutorial";
+@import "wordrotatorTheme";
+
+//ActionBar
+nav.top-bar.title-bar {
+  padding: 0.3rem 0.6rem 0;
+}
+
+#logo {
+  max-width: 2rem;
+  transition: none;
+}
+
+#action-bar .top-bar-right .menu .action.img a {
+  padding-bottom: 0;
+  img {
+    max-height: 1.8rem;
+  }
+}
+
+.menu, .dropdown.menu {
+  a {
+    padding: 0.2rem 0.5rem;
+  }
+}
+
+#level-number-container {
+  z-index: 1;
+  transition: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 3px solid white;
+  border-radius: 50%;
+  visibility: hidden;
+  display: table-cell;
+
+  height: 35px;
+  width: 35px;
+  text-align: center;
+  vertical-align: middle;
+
+  &.visible {
+    visibility: visible;
+  }
+  &.in-main-menu {
+    background: white;
+    border-color: black;
+
+    height: 1em;
+    width: 1em;
+    min-height: 1em;
+    min-width: 1em;
+    max-height: 1em;
+    max-width: 1em;
+  }
+
+  #level-number {
+    transition: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+  }
+}
+
+$coinTowerDimension: 28px;
+//coin element
+.coin-counter {
+  display: inline-block;
+  position: relative;
+  font-size: 1.6rem;
+  @include breakpoint(small down) {
+    font-size: 1rem;
+  }
+
+  :after {
+    background-image: url('../img/coinTower.png');
+    background-size: $coinTowerDimension $coinTowerDimension;
+    width: $coinTowerDimension;
+    height: $coinTowerDimension;
+    display: inline-block;
+    content: "";
+  }
+}
+
+#coin-container {
+  line-height: 1;
+  .coin {
+    margin-left: 3px;
+    margin-right: 3px;
+    max-width: 20px;
+    display: inline-block;
+    @include breakpoint(smedium) {
+      max-width: 25px;
+    }
+    @include breakpoint(medium) {
+      max-width: 30px;
+    }
+  }
+}
+
+//Segments
+
+@for $i from 1 through length($rotationDegrees) {
+  $startDegree: ((nth($rotationDegrees, $i)+270)%360);
+
+  @keyframes rotate-#{nth($rotationDegrees, $i)} {
+    0% {
+      //transform: rotate(#{$startDegree}deg);
+      transform: #{map-get($degreeMatrix, $startDegree)};
+    }
+    100% {
+      //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
+    }
+  }
+  @keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
+    0% {
+      //transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i)+90)}
+    }
+    100% {
+      //transform: rotate(#{$startDegree+90}deg);
+      transform: #{map-get($degreeMatrix, $startDegree+90)};
+    }
+  }
+}
+
+.segment:not(.segment-row):not(.segment-triangle) {
+  &.rotating {
+    z-index: 10 !important;
+    overflow: hidden;
+
+    @for $i from 1 through length($rotationDegrees) {
+      &.rotate-#{nth($rotationDegrees, $i)} {
+        animation-name: rotate-#{nth($rotationDegrees, $i)};
+        animation-duration: $animationDuration;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+
+        > .child-container {
+          > .segment {
+            animation-name: rotate-#{450- nth($rotationDegrees, $i)};
+            animation-duration: $animationDuration;
+            animation-fill-mode: forwards;
+            animation-direction: reverse;
+            animation-timing-function: linear;
+
+            @for $j from 1 through length($rotationDegrees) {
+              $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
+              &.rotate-#{nth($rotationDegrees, $j)} {
+                animation-name: rotate-#{$animationName};
+              }
+            }
+          }
+        }
+
+        &.reverse {
+          //animation-name: rotate-reverse-#{(nth($rotationDegrees, $i))%360+90};
+          animation-name: rotate-reverse-#{nth($rotationDegrees, $i)};
+          > .child-container {
+            > .segment {
+              //animation-name: rotate-reverse-#{360- (nth($rotationDegrees, $i)%360)};
+              animation-name: rotate-reverse-#{(540- nth($rotationDegrees, $i))%360+90};
+              @for $j from 1 through length($rotationDegrees) {
+                $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
+                &.rotate-#{nth($rotationDegrees, $j)} {
+                  animation-name: rotate-reverse-#{($animationName+90)%360+90};
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.rotating) {
+    @for $i from 1 through length($rotationDegrees) {
+      &.rotate-#{nth($rotationDegrees, $i)} {
+        transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        background-color: inherit;
+        z-index: 1;
+        > .child-container {
+          > .segment {
+            transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            background-color: inherit;
+            z-index: 1;
+
+            @for $j from 1 through length($rotationDegrees) {
+              $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
+              @if $animationName==0 {
+                $animationName: 360;
+              }
+
+              &.rotate-#{nth($rotationDegrees, $j)} {
+                transform: rotate(#{$animationName}deg);
+                background-color: inherit;
+                z-index: 1;
+
+                &.rotating {
+                  animation-name: rotate-#{$animationName};
+                  animation-duration: $animationDuration;
+                  animation-fill-mode: forwards;
+                  animation-timing-function: linear;
+
+                  &.reverse {
+                    animation-name: rotate-reverse-#{$animationName};
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+#level {
+  user-select: none;
+  white-space: nowrap;
+  transition: none;
+  max-width: 100%;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  //width: 100%;
+
+  * {
+    transition: none;
+  }
+  overflow-y: visible;
+}
+
+.segment {
+  vertical-align: top;
+  white-space: initial;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  transition: none;
+  user-select: none;
+  z-index: 1;
+  background-color: inherit;
+  line-height: 0;
+
+  &.segment-row {
+    display: block;
+    width: 100%;
+    animation: none !important;
+    white-space: nowrap;
+  }
+
+  &.segment-leaf {
+    background-color: transparent !important;
+    min-width: 1em;
+    padding: 0.8em;
+    &:before {
+      content: " ";
+      display: block;
+      padding-top: 100%;
+    }
+    .leaf-element {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      line-height: 1.5em;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &.segment-parent {
+    border: solid 1px #a9a9a9;
+    border-radius: 3px;
+    padding: 1px;
+
+    &.layer-2 {
+      border: solid 3px #000000;
+    }
+  }
+
+  &.segment-triangle {
+    > .child-container {
+      > .segment-parent {
+        //border: solid 3px #000000;
+        //position: relative;
+      }
+    }
+  }
+}
+
+//Won-screen
+#site-content > :not(.won) {
+  .show-when-won {
+    display: none;
+  }
+}
+
+.level-container {
+  //flex: 1;
+  transition: none;
+}
+
+.won {
+  .level-container {
+    //height: 60%;
+  }
+  .show-when-won {
+    //visibility: initial;
+  }
+  .show-while-playing {
+    display: none;
+  }
+}
+
+.text-right {
+  text-align: right;
+}
+
+#continue-button {
+  margin-bottom: 2px;
+  @include breakpoint(small down) {
+    margin-bottom: 0;
+    padding: 0.3em .6em;
+  }
+}
+
+#play-button {
+  @include breakpoint(small down) {
+    margin-bottom: 2px;
+  }
+}
+
+#help-button {
+  margin: 0;
+  padding: 0.4em 0.4em;
+  max-width: 3em;
+  @include breakpoint(smedium down) {
+    padding: 0.2em 0.2em;
+    max-width: 2em;
+  }
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+
+body {
+  overscroll-behavior: contain;
+  user-select: none;
+}
+
+#site-content {
+  overflow: visible;
+}
+div.mainContainer{
+  overflow-x: hidden;
+
+}
+
+//#img-sound:before {
+//  content: "";
+//  max-width: 1.4em;
+//  background: url('../img/speaker.svg')
+//}
+
+.clickable{
+  cursor: pointer;
+}
+
+#share-button svg{
+  cursor: pointer;
+  max-width: 1.5rem;
+}

src/scss/wordRotator.scss

@@ -30,7 +30,8 @@ nav.top-bar.title-bar {
   transition: none;
   position: absolute;
   left: 50%;
-  transform: translate(-50%);
+  top: 50%;
+  transform: translate(-50%, -50%);
   border: 3px solid white;
   border-radius: 50%;
   visibility: hidden;
@@ -109,21 +110,24 @@ $coinTowerDimension: 28px;
 
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
-      transform: rotate(#{$startDegree}deg);
+      //transform: rotate(#{$startDegree}deg);
+      transform: #{map-get($degreeMatrix, $startDegree)};
     }
     100% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
     }
   }
   @keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
     0% {
-      transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      //transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i)+90)}
     }
     100% {
-      transform: rotate(#{$startDegree+90}deg);
+      //transform: rotate(#{$startDegree+90}deg);
+      transform: #{map-get($degreeMatrix, $startDegree+90)};
     }
   }
-
 }
 
 .segment:not(.segment-row):not(.segment-triangle) {
@@ -178,12 +182,14 @@ $coinTowerDimension: 28px;
   &:not(.rotating) {
     @for $i from 1 through length($rotationDegrees) {
       &.rotate-#{nth($rotationDegrees, $i)} {
-        transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
         background-color: inherit;
         z-index: 1;
         > .child-container {
           > .segment {
-            transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            //transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            transform:  #{map-get($degreeMatrix, 360- nth($rotationDegrees, $i))};
             background-color: inherit;
             z-index: 1;
 
@@ -194,7 +200,8 @@ $coinTowerDimension: 28px;
               }
 
               &.rotate-#{nth($rotationDegrees, $j)} {
-                transform: rotate(#{$animationName}deg);
+                //transform: rotate(#{$animationName}deg);
+                transform: #{map-get($degreeMatrix, $animationName)};
                 background-color: inherit;
                 z-index: 1;
 

test/test.testcafe.js

@@ -1,7 +1,24 @@
 import {Selector} from 'testcafe';
 import {ClientFunction} from 'testcafe';
 
-let isLocal = false;
+let isLocal = true;
+
+const checkMatrix = async (matrixString, shouldValues) => {
+    let values = (await matrixString).substring(7,matrixString.length -1).split(",");
+    for (let i = 0; i < values.length; i++) {
+        if (Array.isArray(shouldValues[i])){
+            if (shouldValues[i][0] > values[i] || shouldValues[i][1] < values[1]){
+                return false;
+            }
+        }
+        else {
+            if (shouldValues[i] != values[i]){
+                return false;
+            }
+        }
+    }
+    return true;
+};
 
 const goBack = ClientFunction(() => window.history.back());
 const testLocalStorageSet = ClientFunction((key, value) => {
@@ -37,7 +54,8 @@ async function waitForMainMenu(t) {
 
 if (isLocal) {
     fixture`Play`
-        .page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {
+        // .page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {
+        .page`https://192.168.0.51/pwa/wordRotator/publicTest/`.beforeEach(async t => {
         await beforeEachTest(t);
     }).afterEach(async t => {
         await afterEachTest(t);
@@ -86,7 +104,7 @@ const SEGMENT = {
     TWENTYONE: 20
 };
 
-test('Play', async t => {
+test.only('Play', async t => {
     let levelNumber = 1;
 
     await waitForMainMenu(t);
@@ -96,7 +114,7 @@ test('Play', async t => {
 
         //firstTutorial
         .expect(Selector('.tutorial-text .step-1').visible).eql(true)
-        .expect(Selector('.tutorial-text .step-2').visible).eql(false)
+        .expect(Selector('.tutorial-text .step-2').visible).eql(false).debug()
         .click(Selector('.segment-parent').nth(SEGMENT.THREE))
         .expect(Selector('.tutorial-text .step-2').visible).eql(true)
         .expect(Selector('.tutorial-text .step-1').visible).eql(false)
@@ -109,6 +127,7 @@ test('Play', async t => {
 
     levelNumber++;
     //first Level
+    await t.debug();
     await t.expect(Selector('.segment.segment-parent.rotate-90').nth(0).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
         .expect(Selector('.segment.segment-parent.rotate-90').nth(1).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
         .expect(Selector('.segment.segment-parent.rotate-270').getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")