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
Download Patch File Download Diff File Expand all files Collapse all files

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