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

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

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

2
src/module/Application/pwa/html/application/level.html
View File

@@ -25,7 +25,7 @@
<div class = 'step-3 hidden' data-translation="tutorial-step-3"></div>
<div class = 'step-4 hidden' data-translation="tutorial-step-4"></div>
</div>
<div class='height-20 show-when-won center flex-center fill-me'>
<div class='height-20 show-when-won center flex-center fill-me' style = 'min-height: 45px'>
<div class = 'grow max-width'>
<b data-translation="won" id="won-text"></b>
</div>

31
src/module/Application/pwa/js/site/LevelSite.js
View File

@@ -73,8 +73,8 @@ export 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";
@@ -130,7 +130,7 @@ export 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();
@@ -169,7 +169,7 @@ export 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;
@@ -327,7 +327,6 @@ export 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": {
@@ -338,7 +337,9 @@ export 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;
}
@@ -357,10 +358,13 @@ export 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;
}
@@ -375,18 +379,20 @@ export 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;
}
}
@@ -400,7 +406,6 @@ export 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];
@@ -410,16 +415,18 @@ export 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;
}

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

@@ -5,18 +5,22 @@ export 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 = {};
});
}
@@ -35,16 +39,20 @@ export 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();
}
@@ -55,21 +63,25 @@ export 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;
}
}
@@ -91,7 +103,7 @@ export class ParentSegment extends Segment {
this._updateRotationClass();
this.element.classList.add("rotating");
if (rotationDirection === -1){
if (rotationDirection === -1) {
this.element.classList.add("reverse");
}

30
src/scss/wordRotator.scss
View File

@@ -67,6 +67,10 @@ $coinTowerDimension: 28px;
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;
@@ -78,13 +82,18 @@ $coinTowerDimension: 28px;
}
#coin-container {
height: 30px;
line-height: 1;
.coin {
margin-left: 3px;
margin-right: 3px;
//height: 30px;
max-width: 30px;
max-width: 20px;
display: inline-block;
@include breakpoint(smedium) {
max-width: 25px;
}
@include breakpoint(medium) {
max-width: 30px;
}
}
}
@@ -317,4 +326,19 @@ $animationDuration: .25s;
#continue-button {
margin-bottom: 2px;
@include breakpoint(small down) {
margin-bottom: 0;
padding: 0.3em .6em;
}
}
#help-button {
margin: 0;
@include breakpoint(smedium down) {
padding: 0.4em 0.6em;
}
}
body{
overscroll-behavior: contain;
}