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

Rotationsrichtung in beide Richtungen möglich

Browse Source
This commit is contained in:
silas 2018-09-25 14:48:12 +02:00
parent 35b2f61d00
commit 895cb36fea
10 changed files with 122 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin/test.sh
View File

@ -1,4 +1,3 @@
#!/usr/bin/env bash
testcafe firefox test/test.testcafe.js
#testcafe chrome test/betaplay.testcafe.js

25
log/error.log
View File

@ -1,24 +1 @@
2018-09-20T20:09:20+02:00 ERR (3):
2018-09-21T17:17:37+02:00 ERR (3):
2018-09-21T17:18:04+02:00 ERR (3):
2018-09-21T17:33:11+02:00 ERR (3):
2018-09-21T17:34:08+02:00 ERR (3):
2018-09-22T00:43:23+02:00 ERR (3):
2018-09-22T00:58:27+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T00:58:53+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T01:00:24+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T01:01:25+02:00 ERR (3):
2018-09-22T12:55:44+02:00 ERR (3):
2018-09-23T00:22:31+02:00 ERR (3):
2018-09-23T20:42:28+02:00 ERR (3):
2018-09-23T20:45:07+02:00 ERR (3):
2018-09-24T12:26:01+02:00 ERR (3):
2018-09-24T12:26:07+02:00 ERR (3):
2018-09-24T12:46:47+02:00 ERR (3):
2018-09-24T18:00:03+02:00 ERR (3):
2018-09-24T18:08:09+02:00 ERR (3):
2018-09-24T18:15:13+02:00 ERR (3):
2018-09-24T18:48:11+02:00 ERR (3):
2018-09-24T18:48:21+02:00 ERR (3):
2018-09-24T19:08:22+02:00 ERR (3):
2018-09-24T19:47:41+02:00 ERR (3):
2018-09-25T13:32:08+02:00 ERR (3):

25
log/log.log
View File

@ -1,24 +1 @@
2018-09-20T20:09:20+02:00 ERR (3):
2018-09-21T17:17:37+02:00 ERR (3):
2018-09-21T17:18:04+02:00 ERR (3):
2018-09-21T17:33:11+02:00 ERR (3):
2018-09-21T17:34:08+02:00 ERR (3):
2018-09-22T00:43:23+02:00 ERR (3):
2018-09-22T00:58:27+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T00:58:53+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T01:00:24+02:00 ERR (3): syntax error, unexpected '$request' (T_VARIABLE) - ErrorCode: 0 File: /var/www/pwa/wordRotator/src/module/Application/src/Controller/SyncController.php Line: 108
2018-09-22T01:01:25+02:00 ERR (3):
2018-09-22T12:55:44+02:00 ERR (3):
2018-09-23T00:22:31+02:00 ERR (3):
2018-09-23T20:42:28+02:00 ERR (3):
2018-09-23T20:45:07+02:00 ERR (3):
2018-09-24T12:26:01+02:00 ERR (3):
2018-09-24T12:26:07+02:00 ERR (3):
2018-09-24T12:46:47+02:00 ERR (3):
2018-09-24T18:00:03+02:00 ERR (3):
2018-09-24T18:08:09+02:00 ERR (3):
2018-09-24T18:15:13+02:00 ERR (3):
2018-09-24T18:48:11+02:00 ERR (3):
2018-09-24T18:48:21+02:00 ERR (3):
2018-09-24T19:08:22+02:00 ERR (3):
2018-09-24T19:47:41+02:00 ERR (3):
2018-09-25T13:32:08+02:00 ERR (3):

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

56
public/js/app.js
View File

@ -5022,7 +5022,7 @@ class ParentSegment extends Segment {
});
}
setIsRotatable(rotatable){
setIsRotatable(rotatable) {
this.rotatable = rotatable;
this._updateElement();
}
@ -5035,18 +5035,18 @@ class ParentSegment extends Segment {
let self = this;
this.touchendListener = function (e) {
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY))) {
self.rotate();
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()) {
self.rotate(ParentSegment.mouseDownTarget, target);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
self.rotate();
self.rotate(ParentSegment.mouseDownTarget, e.target);
e.stopPropagation();
e.preventDefault();
console.log("mouseup", e);
}
};
}
@ -5055,23 +5055,52 @@ class ParentSegment extends Segment {
return (this.rotatable && !this.getLevel().getHasWon());
}
async rotate() {
async rotate(firstElem, secondElem) {
let timeout = 250;
let rotationDirection = 1;
if (Helper.isNotNull(firstElem) && Helper.isNotNull(secondElem)) {
let firstIndex = -1;
let secondIndex = -1;
let rotationIndexes = [0,1,3,2];
for (let i = 0; i < this.children.length; i++) {
if (this.children[rotationIndexes[i]].element === firstElem || this.children[rotationIndexes[i]].element.contains(firstElem)) {
firstIndex = (i+this.rotation/90)%4;
}
if (this.children[rotationIndexes[i]].element === secondElem || this.children[rotationIndexes[i]].element.contains(secondElem)) {
secondIndex = (i+this.rotation/90)%4;
}
}
if (firstIndex >= 0 && secondIndex >= 0) {
if (firstIndex === 2 && (secondIndex === 0 || secondIndex === 1)
|| firstIndex === 1 && (secondIndex === 0 || secondIndex === 3)
|| (firstIndex === 0 && secondIndex === 3)
|| (firstIndex === 3 && secondIndex === 2)) {
rotationDirection = -1;
}
}
}
if (this.canRotate()) {
this.rotation += 90;
this.rotation += 360 + 90 * rotationDirection;
this.rotation %= 360;
let currentRotation = this.rotation;
this._updateRotationClass();
this.element.classList.add("rotating");
if (rotationDirection === -1){
this.element.classList.add("reverse");
}
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, timeout);
}).then(() => {
if (self.rotation === currentRotation) {
self.element.classList.remove("rotating");
if (this.rotation === currentRotation) {
this.element.classList.remove("rotating");
this.element.classList.remove("reverse");
}
});
this.getLevel().checkHasWon(delayPromise);
@ -5094,7 +5123,7 @@ class ParentSegment extends Segment {
applyRotations(rotations) {
this.rotation = rotations[0];
if (isNaN(this.rotation)){
if (isNaN(this.rotation)) {
this.rotation = 0;
}
@ -5170,7 +5199,7 @@ class ParentSegment extends Segment {
this.element.classList.add("layer-" + layer);
}
if (!this.rotatable){
if (!this.rotatable) {
this.element.classList.add("locked");
}
@ -6032,7 +6061,7 @@ class MenuSite extends WordRotatorBaseSite {
let randomRotationFunction = () => {
let timeout = Math.random() * 4500 + 1500;
setTimeout(() => {
this.randomRotateTimeout = setTimeout(() => {
let indexBlocked = -1;
let indexesNotRight = [];
for (let i = 0; i < rotationsSegments.length; i++) {
@ -6117,6 +6146,7 @@ class MenuSite extends WordRotatorBaseSite {
}
onPause(args) {
clearTimeout(this.randomRotateTimeout);
window.removeEventListener("resize", this.listener);
super.onPause(args);
}

3
src/module/Application/pwa/js/site/MenuSite.js
View File

@ -33,7 +33,7 @@ export class MenuSite extends WordRotatorBaseSite {
let randomRotationFunction = () => {
let timeout = Math.random() * 4500 + 1500;
setTimeout(() => {
this.randomRotateTimeout = setTimeout(() => {
let indexBlocked = -1;
let indexesNotRight = [];
for (let i = 0; i < rotationsSegments.length; i++) {
@ -118,6 +118,7 @@ export class MenuSite extends WordRotatorBaseSite {
}
onPause(args) {
clearTimeout(this.randomRotateTimeout);
window.removeEventListener("resize", this.listener);
super.onPause(args);
}

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

@ -1,10 +1,10 @@
import {Segment} from "./Segment";
import {Helper} from "../../../../../../js/lib/pwa-lib";
export class ParentSegment extends Segment {
static initListener() {
window.addEventListener("mousedown", (e) => {
ParentSegment.mouseDownTarget = e.target;
ParentSegment.clickPosition = {x: e.clientX, y: e.clientY};
});
window.addEventListener("mouseup", (e) => {
ParentSegment.mouseDownTarget = null;
@ -13,7 +13,6 @@ export class ParentSegment extends Segment {
window.addEventListener("touchstart", (e) => {
if (e.targetTouches.length === 1) {
ParentSegment.mouseDownTarget = e.targetTouches[0].target;
ParentSegment.clickPosition = {x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY};
}
});
window.addEventListener("touchend", (e) => {
@ -21,7 +20,7 @@ export class ParentSegment extends Segment {
});
}
setIsRotatable(rotatable){
setIsRotatable(rotatable) {
this.rotatable = rotatable;
this._updateElement();
}
@ -34,18 +33,18 @@ export class ParentSegment extends Segment {
let self = this;
this.touchendListener = function (e) {
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY))) {
self.rotate();
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()) {
self.rotate(ParentSegment.mouseDownTarget, target);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
self.rotate();
self.rotate(ParentSegment.mouseDownTarget, e.target);
e.stopPropagation();
e.preventDefault();
console.log("mouseup", e);
}
};
}
@ -54,23 +53,52 @@ export class ParentSegment extends Segment {
return (this.rotatable && !this.getLevel().getHasWon());
}
async rotate() {
async rotate(firstElem, secondElem) {
let timeout = 250;
let rotationDirection = 1;
if (Helper.isNotNull(firstElem) && Helper.isNotNull(secondElem)) {
let firstIndex = -1;
let secondIndex = -1;
let rotationIndexes = [0,1,3,2];
for (let i = 0; i < this.children.length; i++) {
if (this.children[rotationIndexes[i]].element === firstElem || this.children[rotationIndexes[i]].element.contains(firstElem)) {
firstIndex = (i+this.rotation/90)%4;
}
if (this.children[rotationIndexes[i]].element === secondElem || this.children[rotationIndexes[i]].element.contains(secondElem)) {
secondIndex = (i+this.rotation/90)%4;
}
}
if (firstIndex >= 0 && secondIndex >= 0) {
if (firstIndex === 2 && (secondIndex === 0 || secondIndex === 1)
|| firstIndex === 1 && (secondIndex === 0 || secondIndex === 3)
|| (firstIndex === 0 && secondIndex === 3)
|| (firstIndex === 3 && secondIndex === 2)) {
rotationDirection = -1;
}
}
}
if (this.canRotate()) {
this.rotation += 90;
this.rotation += 360 + 90 * rotationDirection;
this.rotation %= 360;
let currentRotation = this.rotation;
this._updateRotationClass();
this.element.classList.add("rotating");
if (rotationDirection === -1){
this.element.classList.add("reverse");
}
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, timeout);
}).then(() => {
if (self.rotation === currentRotation) {
self.element.classList.remove("rotating");
if (this.rotation === currentRotation) {
this.element.classList.remove("rotating");
this.element.classList.remove("reverse");
}
});
this.getLevel().checkHasWon(delayPromise);
@ -93,7 +121,7 @@ export class ParentSegment extends Segment {
applyRotations(rotations) {
this.rotation = rotations[0];
if (isNaN(this.rotation)){
if (isNaN(this.rotation)) {
this.rotation = 0;
}
@ -169,7 +197,7 @@ export class ParentSegment extends Segment {
this.element.classList.add("layer-" + layer);
}
if (!this.rotatable){
if (!this.rotatable) {
this.element.classList.add("locked");
}

1
src/module/Application/src/Controller/SyncController.php
View File

@ -104,7 +104,6 @@ class SyncController extends JsonController
public function getLevelsAction()
{
// fdhsdh
$request = $this->getRequest();
$currentRun = (int)$request->getQuery("currentRun", null);

32
src/scss/wordRotator.scss
View File

@ -86,7 +86,7 @@ $coinTowerDimension: 28px;
//Segments
$rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s;
$animationDuration: .25s;
@for $i from 1 through 10 {
$value: percentage($i/10);
@ -109,6 +109,15 @@ $animationDuration: 0.25s;
transform: rotate(#{nth($rotationDegrees, $i)}deg);
}
}
@keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
}
100% {
transform: rotate(#{$startDegree+90}deg);
}
}
}
.segment:not(.segment-row):not(.segment-triangle) {
@ -139,6 +148,23 @@ $animationDuration: 0.25s;
}
}
}
&.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};
}
}
}
}
}
}
}
}
@ -171,6 +197,10 @@ $animationDuration: 0.25s;
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-timing-function: linear;
&.reverse{
animation-name: rotate-reverse-#{$animationName};
}
}
}
}

2
test/test.testcafe.js
View File

@ -17,7 +17,7 @@ async function beforeEachTest(t){
// await replaceRandom();
}
let isLocal = true;
let isLocal = false;
if (isLocal) {
fixture`Play`
.page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {