diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js
index fe3488e..1da3625 100755
--- a/src/module/Application/pwa/js/site/LevelSite.js
+++ b/src/module/Application/pwa/js/site/LevelSite.js
@@ -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;
}
diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
index 3c9cc51..21de209 100755
--- a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
+++ b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
@@ -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");
}
diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss
index eeda627..d981a8b 100755
--- a/src/scss/wordRotator.scss
+++ b/src/scss/wordRotator.scss
@@ -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;
+}
\ No newline at end of file
