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

Anpassung für kleine Bildschirme, Bugfixes

Browse Source
This commit is contained in:
silas
2018-09-28 13:10:59 +02:00
parent e34a3e865f
commit 49f2496eea
11 changed files with 129 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
public/js/app.js
View File

@@ -4616,10 +4616,12 @@ class ScaleHelper {
let self = this;
let listener = function () {
let timeout = (typeof addListener === 'number')?addListener:255;
setTimeout(() => {
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false);
}, timeout);
return new Promise(resolve => {
let timeout = (typeof addListener === 'number') ? addListener : 255;
setTimeout(() => {
resolve(self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false));
}, timeout);
});
};
if (addListener !== false) {
window.addEventListener("resize", listener);
@@ -4969,18 +4971,22 @@ class ParentSegment extends Segment {
static initListener() {
window.addEventListener("mousedown", (e) => {
ParentSegment.mouseDownTarget = e.target;
ParentSegment.clickPosition = {x: e.pageX, y: e.pageY};
});
window.addEventListener("mouseup", (e) => {
ParentSegment.mouseDownTarget = null;
ParentSegment.clickPosition = {};
});
window.addEventListener("touchstart", (e) => {
if (e.targetTouches.length === 1) {
ParentSegment.mouseDownTarget = e.targetTouches[0].target;
ParentSegment.clickPosition = {x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY};
}
});
window.addEventListener("touchend", (e) => {
ParentSegment.mouseDownTarget = null;
ParentSegment.clickPosition = {};
});
}
@@ -4999,16 +5005,20 @@ class ParentSegment extends Segment {
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};
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target);
self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
let position = {x: e.pageX, y: e.pageY};
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, e.target);
self.rotate(ParentSegment.mouseDownTarget, e.target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
@@ -5019,21 +5029,25 @@ class ParentSegment extends Segment {
return (this.rotatable && !this.getLevel().getHasWon());
}
async rotate(firstElem, secondElem) {
let timeout = 250;
async rotate(firstElem, secondElem, firstPosition, secondPosition) {
const timeout = 250;
const clickTolerance = 5;
let rotationDirection = 1;
if (Helper.isNotNull(firstElem) && Helper.isNotNull(secondElem)) {
if (Helper.isNotNull(secondElem) && Helper.isNotNull(firstElem) &&
(Helper.isNull(firstPosition) || Helper.isNull(secondPosition) ||
Math.abs(firstPosition.x - secondPosition.x) > clickTolerance ||
Math.abs(firstPosition.y - secondPosition.y) > clickTolerance)) {
let firstIndex = -1;
let secondIndex = -1;
let rotationIndexes = [0,1,3,2];
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;
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;
secondIndex = (i + this.rotation / 90) % 4;
}
}
@@ -5055,7 +5069,7 @@ class ParentSegment extends Segment {
this._updateRotationClass();
this.element.classList.add("rotating");
if (rotationDirection === -1){
if (rotationDirection === -1) {
this.element.classList.add("reverse");
}
@@ -5828,8 +5842,8 @@ class LevelSite extends WordRotatorBaseSite {
let wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper();
this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 10, null, 5);
this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true, 2);
this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 2, null, 5);
this.wonText = wonText;
this.wonText.style.fontSize = "0";
@@ -5885,7 +5899,7 @@ class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length*1.5 , null, 0);
this.level = level;
return this.tutorial();
@@ -5924,7 +5938,7 @@ class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0);
this.level = level;
this.levelCounterAction.innerText = this.levelCounter;
@@ -6082,7 +6096,6 @@ class LevelSite extends WordRotatorBaseSite {
let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
switch (currentStep) {
case "1": {
@@ -6093,7 +6106,9 @@ class LevelSite extends WordRotatorBaseSite {
});
let textElem = this.findBy(".tutorial-text .step-1");
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
break;
}
@@ -6112,10 +6127,13 @@ class LevelSite extends WordRotatorBaseSite {
this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0"));
this.coinAction.redraw();
});
// this.levelScaler();
});
let textElem = this.findBy(".tutorial-text .step-2");
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
break;
}
@@ -6130,18 +6148,20 @@ class LevelSite extends WordRotatorBaseSite {
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let eventListener = () => {
this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-3");
localStorage.setItem("tutorial-step", "4");
this.findBy("#help-button").removeEventListener("click", eventListener);
this.levelScaler();
};
this.findBy("#help-button").addEventListener("click", eventListener);
let textElem = this.findBy(".tutorial-text .step-3");
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
break;
}
}
@@ -6155,7 +6175,6 @@ class LevelSite extends WordRotatorBaseSite {
let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let rotatableSegments = this.level.getRotatableSegments();
let firstSegment = rotatableSegments[0];
@@ -6165,16 +6184,18 @@ class LevelSite extends WordRotatorBaseSite {
firstSegment.element.appendChild(pointer);
this.level.setSegmentClickedListener((segment) => {
if (firstSegment === segment) {
this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-4");
localStorage.setItem("tutorial-step", "5");
this.levelScaler();
}
});
let textElem = this.findBy(".tutorial-text .step-4");
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, null, 2);
await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
break;
}