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 #!/usr/bin/env bash
testcafe firefox test/test.testcafe.js 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-25T13:32:08+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):

25
log/log.log
View File

@ -1,24 +1 @@
2018-09-20T20:09:20+02:00 ERR (3): 2018-09-25T13:32:08+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):

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

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

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

32
src/scss/wordRotator.scss
View File

@ -86,7 +86,7 @@ $coinTowerDimension: 28px;
//Segments //Segments
$rotationDegrees: (90 180 270 360); $rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s; $animationDuration: .25s;
@for $i from 1 through 10 { @for $i from 1 through 10 {
$value: percentage($i/10); $value: percentage($i/10);
@ -109,6 +109,15 @@ $animationDuration: 0.25s;
transform: rotate(#{nth($rotationDegrees, $i)}deg); 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) { .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-duration: $animationDuration;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: linear; 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(); // await replaceRandom();
} }
let isLocal = true; let isLocal = false;
if (isLocal) { if (isLocal) {
fixture`Play` 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 => {