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

2
.idea/watcherTasks.xml generated
View File

@ -5,7 +5,7 @@
<option name="arguments" value="--sourcemap=none --update $FileName$:$FileNameWithoutExtension$.css" /> <option name="arguments" value="--sourcemap=none --update $FileName$:$FileNameWithoutExtension$.css" />
<option name="checkSyntaxErrors" value="true" /> <option name="checkSyntaxErrors" value="true" />
<option name="description" /> <option name="description" />
<option name="exitCodeBehavior" value="ERROR" /> <option name="exitCodeBehavior" value="NEVER" />
<option name="fileExtension" value="scss" /> <option name="fileExtension" value="scss" />
<option name="immediateSync" value="true" /> <option name="immediateSync" value="true" />
<option name="name" value="SCSS" /> <option name="name" value="SCSS" />

3
log/error.log
View File

@ -11,3 +11,6 @@
2018-09-27T22:03:57+02:00 ERR (3): 2018-09-27T22:03:57+02:00 ERR (3):
2018-09-27T22:04:27+02:00 ERR (3): 2018-09-27T22:04:27+02:00 ERR (3):
2018-09-27T22:05:07+02:00 ERR (3): 2018-09-27T22:05:07+02:00 ERR (3):
2018-09-28T11:59:07+02:00 ERR (3):
2018-09-28T12:16:47+02:00 ERR (3):
2018-09-28T12:18:10+02:00 ERR (3):

3
log/log.log
View File

@ -11,3 +11,6 @@
2018-09-27T22:03:57+02:00 ERR (3): 2018-09-27T22:03:57+02:00 ERR (3):
2018-09-27T22:04:27+02:00 ERR (3): 2018-09-27T22:04:27+02:00 ERR (3):
2018-09-27T22:05:07+02:00 ERR (3): 2018-09-27T22:05:07+02:00 ERR (3):
2018-09-28T11:59:07+02:00 ERR (3):
2018-09-28T12:16:47+02:00 ERR (3):
2018-09-28T12:18:10+02:00 ERR (3):

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

2
public/html/application/level.html
View File

@ -1 +1 @@
<div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div id=tutorial-pointer></div><div class="max-height fill-me"><div class="text-right max-width"><button class="button show-while-playing" id=help-button data-translation=help></button></div><div class="height-20 no-transition tutorial-text center flex-center hidden"><div class="step-1 hidden" data-translation=tutorial-step-1></div><div class="step-2 hidden" data-translation=tutorial-step-2></div><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="grow max-width"><b data-translation=won id=won-text></b></div><div id=coin-container><div id=coin-template class=coin style="opacity: 0"><img src=img/coin.png></div></div></div><div class="flex-center level-container grow"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div><div class=tutorial-blanket></div></div> <div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div id=tutorial-pointer></div><div class="max-height fill-me"><div class="text-right max-width"><button class="button show-while-playing" id=help-button data-translation=help></button></div><div class="height-20 no-transition tutorial-text center flex-center hidden"><div class="step-1 hidden" data-translation=tutorial-step-1></div><div class="step-2 hidden" data-translation=tutorial-step-2></div><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" style="min-height: 45px"><div class="grow max-width"><b data-translation=won id=won-text></b></div><div id=coin-container><div id=coin-template class=coin style="opacity: 0"><img src=img/coin.png></div></div></div><div class="flex-center level-container grow"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div><div class=tutorial-blanket></div></div>

71
public/js/app.js
View File

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

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

@ -41,10 +41,12 @@ class ScaleHelper {
let self = this; let self = this;
let listener = function () { let listener = function () {
let timeout = (typeof addListener === 'number')?addListener:255; return new Promise(resolve => {
setTimeout(() => { let timeout = (typeof addListener === 'number') ? addListener : 255;
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false); setTimeout(() => {
}, timeout); resolve(self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false));
}, timeout);
});
}; };
if (addListener !== false) { if (addListener !== false) {
window.addEventListener("resize", listener); 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-3 hidden' data-translation="tutorial-step-3"></div>
<div class = 'step-4 hidden' data-translation="tutorial-step-4"></div> <div class = 'step-4 hidden' data-translation="tutorial-step-4"></div>
</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'> <div class = 'grow max-width'>
<b data-translation="won" id="won-text"></b> <b data-translation="won" id="won-text"></b>
</div> </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 wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper(); let scaleHelper = new ScaleHelper();
this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true); this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true, 2);
this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 10, null, 5); this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 2, null, 5);
this.wonText = wonText; this.wonText = wonText;
this.wonText.style.fontSize = "0"; this.wonText.style.fontSize = "0";
@ -130,7 +130,7 @@ export class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level"); let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper(); 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.level = level;
return this.tutorial(); return this.tutorial();
@ -169,7 +169,7 @@ export class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level"); let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper(); 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.level = level;
this.levelCounterAction.innerText = this.levelCounter; this.levelCounterAction.innerText = this.levelCounter;
@ -327,7 +327,6 @@ export class LevelSite extends WordRotatorBaseSite {
let scaleHelper = new ScaleHelper(); let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial"); this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep); this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
switch (currentStep) { switch (currentStep) {
case "1": { case "1": {
@ -338,7 +337,9 @@ export class LevelSite extends WordRotatorBaseSite {
}); });
let textElem = this.findBy(".tutorial-text .step-1"); 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; break;
} }
@ -357,10 +358,13 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0")); this.coinAction.setTitle(Helper.nonNull(localStorage.getItem("coins"), "0"));
this.coinAction.redraw(); this.coinAction.redraw();
}); });
// this.levelScaler();
}); });
let textElem = this.findBy(".tutorial-text .step-2"); 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; break;
} }
@ -375,18 +379,20 @@ export class LevelSite extends WordRotatorBaseSite {
this._siteContent.classList.add("tutorial"); this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep); this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let eventListener = () => { let eventListener = () => {
this._siteContent.classList.remove("tutorial"); this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-3"); this._siteContent.classList.remove("step-3");
localStorage.setItem("tutorial-step", "4"); localStorage.setItem("tutorial-step", "4");
this.findBy("#help-button").removeEventListener("click", eventListener); this.findBy("#help-button").removeEventListener("click", eventListener);
this.levelScaler();
}; };
this.findBy("#help-button").addEventListener("click", eventListener); this.findBy("#help-button").addEventListener("click", eventListener);
let textElem = this.findBy(".tutorial-text .step-3"); 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; break;
} }
} }
@ -400,7 +406,6 @@ export class LevelSite extends WordRotatorBaseSite {
let scaleHelper = new ScaleHelper(); let scaleHelper = new ScaleHelper();
this._siteContent.classList.add("tutorial"); this._siteContent.classList.add("tutorial");
this._siteContent.classList.add("step-" + currentStep); this._siteContent.classList.add("step-" + currentStep);
this.levelScaler();
let rotatableSegments = this.level.getRotatableSegments(); let rotatableSegments = this.level.getRotatableSegments();
let firstSegment = rotatableSegments[0]; let firstSegment = rotatableSegments[0];
@ -410,16 +415,18 @@ export class LevelSite extends WordRotatorBaseSite {
firstSegment.element.appendChild(pointer); firstSegment.element.appendChild(pointer);
this.level.setSegmentClickedListener((segment) => { this.level.setSegmentClickedListener((segment) => {
if (firstSegment === segment) { if (firstSegment === segment) {
this._siteContent.classList.remove("tutorial"); this._siteContent.classList.remove("tutorial");
this._siteContent.classList.remove("step-4"); this._siteContent.classList.remove("step-4");
localStorage.setItem("tutorial-step", "5"); localStorage.setItem("tutorial-step", "5");
this.levelScaler();
} }
}); });
let textElem = this.findBy(".tutorial-text .step-4"); 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; break;
} }

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

@ -5,18 +5,22 @@ 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.pageX, y: e.pageY};
}); });
window.addEventListener("mouseup", (e) => { window.addEventListener("mouseup", (e) => {
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
ParentSegment.clickPosition = {};
}); });
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].pageX, y: e.targetTouches[0].pageY};
} }
}); });
window.addEventListener("touchend", (e) => { window.addEventListener("touchend", (e) => {
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
ParentSegment.clickPosition = {};
}); });
} }
@ -35,16 +39,20 @@ export class ParentSegment extends Segment {
this.touchendListener = function (e) { this.touchendListener = function (e) {
let target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY); 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)) { 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.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target); self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
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)) {
let position = {x: e.pageX, y: e.pageY};
self.getLevel().segmentClickedListener(self); self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, e.target); self.rotate(ParentSegment.mouseDownTarget, e.target, ParentSegment.clickPosition, position);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
@ -55,21 +63,25 @@ export class ParentSegment extends Segment {
return (this.rotatable && !this.getLevel().getHasWon()); return (this.rotatable && !this.getLevel().getHasWon());
} }
async rotate(firstElem, secondElem) { async rotate(firstElem, secondElem, firstPosition, secondPosition) {
let timeout = 250; const timeout = 250;
const clickTolerance = 5;
let rotationDirection = 1; 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 firstIndex = -1;
let secondIndex = -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++) { for (let i = 0; i < this.children.length; i++) {
if (this.children[rotationIndexes[i]].element === firstElem || this.children[rotationIndexes[i]].element.contains(firstElem)) { 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)) { 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._updateRotationClass();
this.element.classList.add("rotating"); this.element.classList.add("rotating");
if (rotationDirection === -1){ if (rotationDirection === -1) {
this.element.classList.add("reverse"); this.element.classList.add("reverse");
} }

30
src/scss/wordRotator.scss
View File

@ -67,6 +67,10 @@ $coinTowerDimension: 28px;
display: inline-block; display: inline-block;
position: relative; position: relative;
font-size: 1.6rem; font-size: 1.6rem;
@include breakpoint(small down) {
font-size: 1rem;
}
:after { :after {
background-image: url('../img/coinTower.png'); background-image: url('../img/coinTower.png');
background-size: $coinTowerDimension $coinTowerDimension; background-size: $coinTowerDimension $coinTowerDimension;
@ -78,13 +82,18 @@ $coinTowerDimension: 28px;
} }
#coin-container { #coin-container {
height: 30px; line-height: 1;
.coin { .coin {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
//height: 30px; max-width: 20px;
max-width: 30px;
display: inline-block; display: inline-block;
@include breakpoint(smedium) {
max-width: 25px;
}
@include breakpoint(medium) {
max-width: 30px;
}
} }
} }
@ -317,4 +326,19 @@ $animationDuration: .25s;
#continue-button { #continue-button {
margin-bottom: 2px; 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;
}