Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update für die Vorlesung

Browse Source
This commit is contained in:
silas 2018-10-22 23:07:57 +02:00
parent 50526bc1ca
commit cd2105a747
16 changed files with 663 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin/build.sh
View File

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

4
bin/test.sh
View File

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

5
package.json
View File

@ -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"
}

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

2
public/html/application/menu.html
View File

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

153
public/js/app.js
View File

@ -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.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};
if (e.changedTouches.length >= 1) {
let target = document.elementFromPoint(e.changedTouches[0].pageX, 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.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
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;
});

2
public/version/x/app.names.json
View File

File diff suppressed because one or more lines are too long

17
src/js/init.js
View File

@ -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;
});

4
src/js/lib/pwa-assets.js
View File

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

112
src/js/lib/pwa-lib.js
View File

@ -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 };

16
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -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.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};
if (e.changedTouches.length >= 1) {
let target = document.elementFromPoint(e.changedTouches[0].pageX, 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.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
}
};
this.mouseupListener = function (e) {

2
src/module/Application/pwa/public/html/application/menu.html
View File

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

24
src/scss/_settings.scss
View File

@ -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),
);

379
src/scss/_wordRotator.scss Executable file
View File

@ -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;
}

25
src/scss/wordRotator.scss
View File

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

27
test/test.testcafe.js
View File

@ -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)")