LineNumberSegment angepasst

This commit is contained in:
silas 2018-10-24 23:28:56 +02:00
parent 9cdd126a5d
commit b1bfeaffc1
5 changed files with 97 additions and 73 deletions

1
.idea/wordRotator.iml generated
View File

@ -3,7 +3,6 @@
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/src" isTestSource="false" packagePrefix="Application\" />
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/public" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/public/js" />
<excludeFolder url="file://$MODULE_DIR$/publicTest" />
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/event-manager" />

View File

@ -55,7 +55,7 @@
</div>
<nav class="top-bar title-bar">
<div class="row">
<div class="row relative">
<div class="top-bar-title">
<strong>
<a class="hidden-link" href=".">
@ -64,7 +64,7 @@
</a>
</strong>
</div>
<span id='level-number-container'>
<span id='level-number-container' >
<span id='level-number'></span>
</span>
<span data-responsive-toggle="responsive-menu" id="responsive-menu-toggle" class="right" data-hide-for="always"

View File

@ -5458,6 +5458,10 @@ class ParentSegment extends Segment {
ParentSegment.mouseDownTarget = e.targetTouches[0].target;
ParentSegment.clickPosition = {x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY};
}
else if (Array.isArray(e.path) && e.path.length >= 1) {
ParentSegment.mouseDownTarget = e.path[0];
ParentSegment.clickPosition = null;
}
});
window.addEventListener("touchend", (e) => {
ParentSegment.mouseDownTarget = null;
@ -5478,16 +5482,21 @@ class ParentSegment extends Segment {
let self = this;
this.touchendListener = function (e) {
console.log("touchend", e);
let target = null;
let position = null;
if (e.changedTouches.length >= 1) {
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, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
}
else if (Array.isArray(e.path) && e.path.length >= 1) {
target = e.path[0];
}
if (e.targetTouches.length === 0 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {

View File

@ -17,6 +17,10 @@ export class ParentSegment extends Segment {
ParentSegment.mouseDownTarget = e.targetTouches[0].target;
ParentSegment.clickPosition = {x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY};
}
else if (Array.isArray(e.path) && e.path.length >= 1) {
ParentSegment.mouseDownTarget = e.path[0];
ParentSegment.clickPosition = null;
}
});
window.addEventListener("touchend", (e) => {
ParentSegment.mouseDownTarget = null;
@ -37,16 +41,20 @@ export class ParentSegment extends Segment {
let self = this;
this.touchendListener = function (e) {
let target = null;
let position = null;
if (e.changedTouches.length >= 1) {
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, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
target = document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
position = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
}
else if (Array.isArray(e.path) && e.path.length >= 1) {
target = e.path[0];
}
if (e.targetTouches.length === 0 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(target)) {
self.getLevel().segmentClickedListener(self);
self.rotate(ParentSegment.mouseDownTarget, target, ParentSegment.clickPosition, position);
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function (e) {

View File

@ -2,33 +2,34 @@ import {Selector} from 'testcafe';
import {ClientFunction} from 'testcafe';
let isLocal = true;
let isMobile = true;
const checkMatrix = async (matrixString, shouldValues) => {
let values = (await matrixString).substring(7,matrixString.length -1).split(",");
const checkMatrix = async (matrixStringSelector, shouldValues, timeout) => {
let delta = 0.0001;
let step = 100;
timeout = (typeof timeout !== "undefined") ? timeout : 3000;
let matrixString = await matrixStringSelector;
let values = matrixString.substring(7, matrixString.length - 1).split(",");
for (let i = 0; i < values.length; i++) {
if (Array.isArray(shouldValues[i])){
if (shouldValues[i][0] > values[i] || shouldValues[i][1] < values[1]){
return false;
}
if (typeof shouldValues[i] === "undefined") {
shouldValues[i] = 0;
}
else {
if (shouldValues[i] != values[i]){
if (shouldValues[i] - delta > values[i] || shouldValues[i] + delta < values[i]) {
if (timeout > 0) {
await new Promise((r) => {
setTimeout(r, step);
});
return await checkMatrix(matrixStringSelector._reExecute(), shouldValues, timeout - step)
}
else {
console.error(values[i] +" not "+ shouldValues[i] + " with", values, shouldValues, i );
return false;
}
}
}
return true;
};
const convertMatrix = async (matrixString) => {
let values = (await matrixString).substring(7,matrixString.length -1).split(",");
let delta = 0.0001;
for (let i = 0; i < values.length; i++) {
if (-delta <= values[i] && values[i] <= delta){
values[i] = 0;
}
}
return "matrix("+values.join(",")+")";
};
const goBack = ClientFunction(() => window.history.back());
const testLocalStorageSet = ClientFunction((key, value) => {
@ -64,8 +65,8 @@ async function waitForMainMenu(t) {
if (isLocal) {
fixture`Play`
// .page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {
.page`https://192.168.0.51/pwa/wordRotator/publicTest/`.beforeEach(async t => {
.page`https://127.0.0.1/pwa/wordRotator/publicTest/`.beforeEach(async t => {
// .page`https://192.168.0.51/pwa/wordRotator/publicTest/`.beforeEach(async t => {
await beforeEachTest(t);
}).afterEach(async t => {
await afterEachTest(t);
@ -84,10 +85,14 @@ else {
await afterEachTest(t);
});
}
let dragDimen = 250;
if (isMobile){
dragDimen = 50;
}
const extraCoins = 50;
const coinsPerLevel = 5;
const dragDimen = 250;
const helpCost = 25;
const SEGMENT = {
@ -124,7 +129,7 @@ test.only('Play', async t => {
//firstTutorial
.expect(Selector('.tutorial-text .step-1').visible).eql(true)
.expect(Selector('.tutorial-text .step-2').visible).eql(false).debug()
.expect(Selector('.tutorial-text .step-2').visible).eql(false)
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.expect(Selector('.tutorial-text .step-2').visible).eql(true)
.expect(Selector('.tutorial-text .step-1').visible).eql(false)
@ -137,23 +142,24 @@ test.only('Play', async t => {
levelNumber++;
//first Level
await t.debug();
await t.expect(convertMatrix(Selector('.segment.segment-parent.rotate-90').nth(0).getStyleProperty('transform'))).eql("matrix(0, 1, -1, 0, 0, 0)")
.expect(Selector('.segment.segment-parent.rotate-90').nth(1).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
.expect(Selector('.segment.segment-parent.rotate-270').getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
// await t.debug();
await t.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-90').nth(0).getStyleProperty('transform'), [0, 1, -1, 0])).ok()
.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-90').nth(1).getStyleProperty('transform'), [0, 1, -1, 0])).ok()
.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-270').getStyleProperty('transform'), [0, -1, 1, 0])).ok()
.expect(Selector('#won-text').visible).eql(false)
.expect(Selector('#continue-button').visible).eql(false)
.expect(Selector('#level-number').textContent).eql("2")
.click(Selector("#help-button"))
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.expect(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
// .expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [1, 0, 0,1, 0])).ok()
.click(Selector('.segment-parent').nth(SEGMENT.ONE))
.click(Selector('.segment-parent').nth(SEGMENT.TWO))
.click(Selector('.segment-parent').nth(SEGMENT.ONE))
.click(Selector('.segment-parent').nth(SEGMENT.TWO))
.click(Selector('.segment-parent').nth(SEGMENT.ONE))
.click(Selector('.segment-parent').nth(SEGMENT.TWO))
.expect(Selector('.segment.segment-parent.rotate-360').nth(1).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform'), [1, 0, 0, 1])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform'), [1, 0, 0, 1])).ok()
.expect(Selector('#won-text').visible).eql(true)
.expect(Selector('#continue-button').visible).eql(true)
.click(Selector('#continue-button'))
@ -166,10 +172,9 @@ test.only('Play', async t => {
.expect(Selector('.segment-parent').nth(SEGMENT.TWO).textContent).eql("AUER")
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).textContent).eql("ERAP")
.expect(Selector('.segment-parent').nth(SEGMENT.FOUR).textContent).eql("EIIE")
.expect(Selector('.segment.segment-parent.rotate-270').nth(0).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(Selector('.segment.segment-parent.rotate-180').getStyleProperty('transform')).eql("matrix(-1, 0, 0, -1, 0, 0)")
.expect(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
// .expect(Selector('.segment.segment-parent.rotate-270').nth(1).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-270').nth(0).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-180').getStyleProperty('transform'), [-1, 0, 0, -1, ])).ok()
.expect(await checkMatrix(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(Selector('#continue-button').visible).eql(false)
.expect(Selector('#level-number').textContent).eql("3")
.expect(Selector('#won-text').visible).eql(false)
@ -177,9 +182,9 @@ test.only('Play', async t => {
.click(Selector('.segment-parent').nth(SEGMENT.ONE))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
.click(Selector('.segment-parent').nth(SEGMENT.TWO))
.expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.click(Selector('.segment-parent').nth(SEGMENT.TWO))
.expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(Selector('#won-text').visible).eql(true)
.expect(Selector('#continue-button').visible).eql(true)
.click(Selector('#continue-button'))
@ -204,7 +209,8 @@ test.only('Play', async t => {
.expect(Selector('.coin-counter').innerText).eql("" + (coinsPerLevel * levelNumber + extraCoins - helpCost));
levelNumber++;
// .click(Selector())
console.log("dragDimen", dragDimen);
await t.drag(Selector('.segment-parent').nth(SEGMENT.ONE), -dragDimen, 4, {
offsetX: dragDimen + 50,
offsetY: 17
@ -287,8 +293,8 @@ test.only('Play', async t => {
await t.expect(Selector('#level-number').textContent).eql("" + levelNumber)
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("BEANTOBEALBALEUM")
.expect(Selector('.segment-parent').nth(SEGMENT.SIX).textContent).eql("NUTUNGNGRGHAIEUS")
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform'), [0, 1, -1, 0, ])).ok()
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
@ -321,8 +327,8 @@ test.only('Play', async t => {
//Level 6
await t.expect(Selector('#level-number').textContent).eql("" + levelNumber)
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("FEGEHLISARBEBERE")
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.TEN).getStyleProperty('transform')).eql("matrix(-1, 0, 0, -1, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.TEN).getStyleProperty('transform'), [-1, 0, 0, -1, ])).ok()
.expect(Selector('.segment-parent').nth(SEGMENT.TEN).textContent).eql("ITITSPSCIKARAROT")
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
@ -363,7 +369,7 @@ test.only('Play', async t => {
offsetX: 22,
offsetY: 16
})
.expect(Selector('div').withText('P').nth(11).find('.segment.segment-parent.layer-2.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(await checkMatrix(Selector('div').withText('P').nth(11).find('.segment.segment-parent.layer-2.rotate-360').getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(Selector('#continue-button').visible).eql(true)
.expect(Selector('#won-text').visible).eql(true)
.click(Selector('#continue-button'))
@ -371,7 +377,7 @@ test.only('Play', async t => {
levelNumber++;
//Level 7
await t.expect(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
await t.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(Selector('.segment-row > .child-container').childElementCount).eql(3)
.drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, dragDimen, {
@ -413,9 +419,9 @@ test('LoadLastLevel', async t => {
await waitForMainMenu(t);
await t.click(Selector('#play-button')).wait(500)
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).hasClass('locked')).ok()
.expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform'), [1, 0, 0, 1, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
}).before(async t => {
await testLocalStorageSet("currentLevel", "{\"id\":15,\"rotations\":[0,0,270],\"locks\":[false,true,true]}");
});
@ -425,10 +431,10 @@ test('LevelRotation', async t => {
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
.wait(1000)
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.FOUR).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.FOUR).getStyleProperty('transform'), [0, 1, -1, 0, ])).ok()
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
@ -441,10 +447,10 @@ test('LevelRotation', async t => {
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
.wait(2000)
.expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
.expect(Selector('.segment-parent').nth(SEGMENT.FOUR).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform'), [0, -1, 1, 0, ])).ok()
.expect(await checkMatrix(Selector('.segment-parent').nth(SEGMENT.FOUR).getStyleProperty('transform'), [0, 1, -1, 0, ])).ok()
.click(Selector('.segment-parent').nth(SEGMENT.THREE))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
.click(Selector('.segment-parent').nth(SEGMENT.FOUR))
@ -494,7 +500,6 @@ test('SendUserstats', async t => {
await testLocalStorageSet("matomoShouldTrack", "1");
});
test('SendUserstatsInPrivacyPolicy', async t => {
await waitForMainMenu(t);
let matomoCheck = ClientFunction(() => {
@ -573,9 +578,11 @@ test('Sharing', async t => {
.expect(Selector(".share-icon").nth(0).exists).eql(false)
.expect(Selector(".share-icon").nth(1).exists).eql(false);
if (isLocal) {
console.log(await getLastWindowOpened());
await t.expect(await getLastWindowOpened()).eql(["https://web.whatsapp.com/send?text=" + encodeURIComponent("127.0.0.1/pwa/wordRotator/publicTest/"), "_blank", "noopener"]);
}
else {
console.log(await getLastWindowOpened());
await t.expect(await getLastWindowOpened()).eql(["https://web.whatsapp.com/send?text=" + encodeURIComponent("beta.wordrotator.silas.link/"), "_blank", "noopener"]);
}
await t
@ -585,11 +592,12 @@ test('Sharing', async t => {
.click(Selector(".share-icon").nth(1))
.expect(Selector(".share-icon").nth(0).exists).eql(false)
.expect(Selector(".share-icon").nth(1).exists).eql(false);
let res = await getLastWindowOpened();
if (isLocal) {
console.log(await getLastWindowOpened());
await t.expect(await getLastWindowOpened()).eql(["https://t.me/share/url?url=" + encodeURIComponent("127.0.0.1/pwa/wordRotator/publicTest/"), "_blank", "noopener"]);
}
else {
console.log(await getLastWindowOpened());
await t.expect(await getLastWindowOpened()).eql(["https://t.me/share/url?url=" + encodeURIComponent("beta.wordrotator.silas.link/"), "_blank", "noopener"]);
}
});