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

Added StartSite

Browse Source
This commit is contained in:
silas 2018-09-23 21:02:06 +02:00
parent 3247c7e9fc
commit b881242a9b
14 changed files with 281 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
log/error.log
View File

@ -10,3 +10,5 @@
2018-09-22T01:01:25+02:00 ERR (3):
2018-09-22T12:55:44+02:00 ERR (3):
2018-09-23T00:22:31+02:00 ERR (3):
2018-09-23T20:42:28+02:00 ERR (3):
2018-09-23T20:45:07+02:00 ERR (3):

2
log/log.log
View File

@ -10,3 +10,5 @@
2018-09-22T01:01:25+02:00 ERR (3):
2018-09-22T12:55:44+02:00 ERR (3):
2018-09-23T00:22:31+02:00 ERR (3):
2018-09-23T20:42:28+02:00 ERR (3):
2018-09-23T20:45:07+02:00 ERR (3):

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

@ -1 +1 @@
<div class="max-height flex-center"><div class="height-60 max-width flex-center"><div id=level><div class="segment segment-parent layer-2 rotate-360"><div class=child-container><div class="segment segment-parent rotate-360"><div class=child-container><div class="segment segment-leaf"><div class=leaf-element>W</div></div><div class="segment segment-leaf"><div class=leaf-element>O</div></div><br><div class="segment segment-leaf"><div class=leaf-element>R</div></div><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</div></div></div></div><div class="segment segment-parent rotate-360"><div class=child-container><div class="segment segment-leaf"><div class=leaf-element>R</div></div><div class="segment segment-leaf"><div class=leaf-element>D</div></div><br><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</div></div><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</div></div></div></div><br><div class="segment segment-parent rotate-360"><div class=child-container><div class="segment segment-leaf"><div class=leaf-element>O</div></div><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</div></div><br><div class="segment segment-leaf"><div class=leaf-element>T</div></div><div class="segment segment-leaf"><div class=leaf-element>A</div></div></div></div><div class="segment segment-parent rotate-360"><div class=child-container><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</div></div><div class="segment segment-leaf"><div class=leaf-element>R</div></div><br><div class="segment segment-leaf"><div class=leaf-element>T</div></div><div class="segment segment-leaf"><div class=leaf-element>O</div></div></div></div></div></div></div><span id=level-number-container class="visible in-main-menu"><span id=level-number style="font-size: 1em;">999</span></span></div><div class="height-20 max-width flex-center"><button class="button max-height text-center" id=play-button><span data-translation=play></span></button></div></div>
<div class="max-height flex-center"><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 class="height-60 max-width flex-center"><div id=level></div><span id=level-number-container class="visible in-main-menu"><span id=level-number>1</span></span></div><div class="height-20 max-width flex-center"><button class="button max-height text-center" id=play-button><span data-translation=play></span></button></div></div>

88
public/js/app.js
View File

@ -2643,7 +2643,7 @@ class MyDb {
transactionMode = "read";
}
this.queryPromise.then(function () {
return this.queryPromise.then(function () {
let res = null;
try {
res = myDb._conn.result.transaction(name, transactionMode);
@ -2661,7 +2661,7 @@ class MyDb {
callback = transactionMode;
transactionMode = "readonly";
}
this.openTransaction(name, transactionMode, function (t) {
return this.openTransaction(name, transactionMode, function (t) {
callback(t.objectStore(name));
});
}
@ -2706,7 +2706,7 @@ class MyDb {
load(key, objectStore) {
let self = this;
return new Promise(function (resolve) {
return new Promise( (resolve, reject) => {
self.openStore(objectStore, function (store) {
let request = store.get(key);
request.onsuccess = function (e) {
@ -2719,6 +2719,9 @@ class MyDb {
"event": e
}
};
}).catch(e => {
console.warn(e);
reject(e);
});
});
}
@ -2726,7 +2729,7 @@ class MyDb {
loadAll(objectStore, query, count)
{
let self = this;
return new Promise(function (resolve) {
return new Promise((resolve, reject) => {
self.openStore(objectStore, function (store) {
let request = store.getAll(query, count);
request.onsuccess = function (e) {
@ -2739,6 +2742,9 @@ class MyDb {
"event": e
}
};
}).catch(e => {
console.warn(e);
reject(e);
});
});
}
@ -4939,6 +4945,11 @@ class ParentSegment extends Segment {
applyRotations(rotations) {
this.rotation = rotations[0];
if (isNaN(this.rotation)){
this.rotation = 0;
}
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].applyRotations(rotations);
@ -5700,6 +5711,7 @@ class LevelSite extends WordRotatorBaseSite {
const db = WordRotatorDb.getInstance();
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
if (levelJson === null) {
return this.nextLevel();
}
@ -5838,8 +5850,10 @@ class LevelSite extends WordRotatorBaseSite {
}
this.wonParams.coinCounterTimer = setTimeout(() => {
this.coinAction.setTitle(coinsBefore++);
this.coinAction.redraw();
if (!this.wonParams.aborted) {
this.coinAction.setTitle(++coinsBefore);
this.coinAction.redraw();
}
}, timeout / 2);
}
//Always do the next promise for garbage collection
@ -5852,9 +5866,6 @@ class LevelSite extends WordRotatorBaseSite {
this.continueButtonScaler();
this.levelScaler();
// coinPromise.then(() => {
// continueButton.fadeIn();
// });
await savePromise;
}
catch (e) {
@ -5892,6 +5903,19 @@ class LevelSite extends WordRotatorBaseSite {
}
}
class MainMenuLevel extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 4);
}
saveAsCurrentLevel() {
}
checkHasWon(delayPromise) {
}
}
class MenuSite extends WordRotatorBaseSite {
constructor(siteManager) {
super(siteManager, "html/application/menu.html");
@ -5902,16 +5926,46 @@ class MenuSite extends WordRotatorBaseSite {
async onFirstStart() {
super.onFirstStart();
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
let parentSegmentTemplate = this.findBy("#segment-parent-template");
let rowSegmentTemplate = this.findBy("#segment-row-template");
let triangleTemplate = this.findBy("#segment-triangle-template");
leafSegmentTemplate.id = null;
parentSegmentTemplate.id = null;
rowSegmentTemplate.id = null;
triangleTemplate.id = null;
leafSegmentTemplate.remove();
parentSegmentTemplate.remove();
rowSegmentTemplate.remove();
triangleTemplate.remove();
let templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
let level = new MainMenuLevel(templateContainer);
level.setWords(["WORD", "ROTA", "TORW", "ORDR"]);
level.createSegments();
level.getWonPromise().then(() => {
console.log("won!");
});
let segment = level.getRootSegment();
segment._updateElement();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(segment.getElement());
let playButton = this.findBy("#play-button");
playButton.addEventListener("click", () => {
this.startSite(LevelSite);
});
this.listener = async () => {
let levelNumber = this.findBy("#level-number");
levelNumber.innerText = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
let levelSegment = this.findBy("#level");
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, 8, null, false);
@ -5919,12 +5973,24 @@ class MenuSite extends WordRotatorBaseSite {
playButton.style.width = levelStyle.getPropertyValue("width");
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null ,null ,false);
await scaleHelper.scaleTo(0.4, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 1 ,null ,false);
await scaleHelper.scaleTo(0.15, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10 ,null ,false);
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
};
this.listener();
window.addEventListener("resize", this.listener);
let rotationsSegments = level.getRotatableSegments();
let randomRotationFunction = () => {
let timeout = Math.random()*6000+1500;
setTimeout(() => {
let index = Math.floor(Math.random()*rotationsSegments.length);
rotationsSegments[index].rotate();
randomRotationFunction();
},timeout);
};
randomRotationFunction();
}
onDestroy() {

9
public/pwaAssets/css/pwaAssets.css
View File

@ -9,6 +9,15 @@
border-bottom: 0;
background-color: #FFF; }
.rotated {
transform-origin: bottom center;
height: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.no-transition {
transition: none !important; }
.no-transition * {

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

@ -8,6 +8,22 @@ class DelayPromise extends Promise {
}
}
class RotateHelper {
rotate(element, degrees){
let rotateText = element.innerText;
element.removeAllChildren();
let partDegree = degrees/rotateText.length;
for(let i = 0; i < rotateText.length; i++){
let child = document.createElement("span");
child.innerText = rotateText.charAt(i);
child.style.transform ="rotate("+(partDegree*i)+"deg)";
child.classList.add("rotated");
element.appendChild(child);
}
}
}
class ScaleHelper {
async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) {
@ -158,4 +174,4 @@ class TabbedFragment extends Fragment {
}
}
export { DelayPromise, ScaleHelper, TabbedFragment };
export { DelayPromise, RotateHelper, ScaleHelper, TabbedFragment };

14
src/js/lib/pwa-lib.js
View File

@ -3308,7 +3308,7 @@ class MyDb {
transactionMode = "read";
}
this.queryPromise.then(function () {
return this.queryPromise.then(function () {
let res = null;
try {
res = myDb._conn.result.transaction(name, transactionMode);
@ -3326,7 +3326,7 @@ class MyDb {
callback = transactionMode;
transactionMode = "readonly";
}
this.openTransaction(name, transactionMode, function (t) {
return this.openTransaction(name, transactionMode, function (t) {
callback(t.objectStore(name));
});
}
@ -3371,7 +3371,7 @@ class MyDb {
load(key, objectStore) {
let self = this;
return new Promise(function (resolve) {
return new Promise( (resolve, reject) => {
self.openStore(objectStore, function (store) {
let request = store.get(key);
request.onsuccess = function (e) {
@ -3384,6 +3384,9 @@ class MyDb {
"event": e
}
};
}).catch(e => {
console.warn(e);
reject(e);
});
});
}
@ -3391,7 +3394,7 @@ class MyDb {
loadAll(objectStore, query, count)
{
let self = this;
return new Promise(function (resolve) {
return new Promise((resolve, reject) => {
self.openStore(objectStore, function (store) {
let request = store.getAll(query, count);
request.onsuccess = function (e) {
@ -3404,6 +3407,9 @@ class MyDb {
"event": e
}
};
}).catch(e => {
console.warn(e);
reject(e);
});
});
}

168
src/module/Application/pwa/html/application/menu.html
View File

@ -1,83 +1,99 @@
<div class='max-height flex-center'>
<!--<b>WordRotator</b>-->
<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 class='height-60 max-width flex-center'>
<div id='level'>
<div class="segment segment-parent layer-2 rotate-360">
<div class="child-container">
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">W</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
</div>
</div>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">D</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
</div>
</div>
<br>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">T</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">A</div>
</div>
</div>
</div>
<div class="segment segment-parent rotate-360">
<div class="child-container">
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">R</div>
</div>
<br>
<div class="segment segment-leaf">
<div class="leaf-element">T</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">O</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id = 'level'></div>
<!--<div id='level'>-->
<!--<div class="segment segment-parent layer-2 rotate-360">-->
<!--<div class="child-container">-->
<!--<div class="segment segment-parent rotate-360">-->
<!--<div class="child-container">-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">W</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">O</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">O</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">&nbsp;</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="segment segment-parent rotate-360">-->
<!--<div class="child-container">-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">R</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">D</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">&nbsp;</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">R</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-parent rotate-360">-->
<!--<div class="child-container">-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">R</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">&nbsp;</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">D</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">R</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="segment segment-parent rotate-360">-->
<!--<div class="child-container">-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">&nbsp;</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">O</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">O</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">W</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<span id='level-number-container' class = 'visible in-main-menu'>
<span id='level-number' style="font-size: 1em;">999</span>
<span id='level-number'>1</span>
</span>
</div>
<div class='height-20 max-width flex-center'>

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

@ -109,6 +109,7 @@ export class LevelSite extends WordRotatorBaseSite {
const db = WordRotatorDb.getInstance();
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
if (levelJson === null) {
return this.nextLevel();
}
@ -247,8 +248,10 @@ export class LevelSite extends WordRotatorBaseSite {
}
this.wonParams.coinCounterTimer = setTimeout(() => {
this.coinAction.setTitle(coinsBefore++);
this.coinAction.redraw();
if (!this.wonParams.aborted) {
this.coinAction.setTitle(++coinsBefore);
this.coinAction.redraw();
}
}, timeout / 2);
}
//Always do the next promise for garbage collection
@ -261,9 +264,6 @@ export class LevelSite extends WordRotatorBaseSite {
this.continueButtonScaler();
this.levelScaler();
// coinPromise.then(() => {
// continueButton.fadeIn();
// });
await savePromise;
}
catch (e) {

48
src/module/Application/pwa/js/site/MenuSite.js
View File

@ -1,6 +1,8 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {LevelSite} from "./LevelSite";
import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
import {Helper} from "../../../../../js/lib/pwa-lib";
export class MenuSite extends WordRotatorBaseSite {
@ -13,16 +15,46 @@ export class MenuSite extends WordRotatorBaseSite {
async onFirstStart() {
super.onFirstStart();
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
let parentSegmentTemplate = this.findBy("#segment-parent-template");
let rowSegmentTemplate = this.findBy("#segment-row-template");
let triangleTemplate = this.findBy("#segment-triangle-template");
leafSegmentTemplate.id = null;
parentSegmentTemplate.id = null;
rowSegmentTemplate.id = null;
triangleTemplate.id = null;
leafSegmentTemplate.remove();
parentSegmentTemplate.remove();
rowSegmentTemplate.remove();
triangleTemplate.remove();
let templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
let level = new MainMenuLevel(templateContainer);
level.setWords(["WORD", "ROTA", "TORW", "ORDR"]);
level.createSegments();
level.getWonPromise().then(() => {
console.log("won!");
});
let segment = level.getRootSegment();
segment._updateElement();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(segment.getElement());
let playButton = this.findBy("#play-button");
playButton.addEventListener("click", () => {
this.startSite(LevelSite);
});
this.listener = async () => {
let levelNumber = this.findBy("#level-number");
levelNumber.innerText = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
let levelSegment = this.findBy("#level");
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, 8, null, false);
@ -30,12 +62,24 @@ export class MenuSite extends WordRotatorBaseSite {
playButton.style.width = levelStyle.getPropertyValue("width");
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null ,null ,false);
await scaleHelper.scaleTo(0.4, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 1 ,null ,false);
await scaleHelper.scaleTo(0.15, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10 ,null ,false);
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
};
this.listener();
window.addEventListener("resize", this.listener);
let rotationsSegments = level.getRotatableSegments();
let randomRotationFunction = () => {
let timeout = Math.random()*6000+1500;
setTimeout(() => {
let index = Math.floor(Math.random()*rotationsSegments.length);
rotationsSegments[index].rotate();
randomRotationFunction();
},timeout);
};
randomRotationFunction();
}
onDestroy() {

14
src/module/Application/pwa/js/wordrotator/Level/MainMenuLevel.js Normal file
View File

@ -0,0 +1,14 @@
import {FourWordsLevel} from "./FourWordsLevel";
export class MainMenuLevel extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 4);
}
saveAsCurrentLevel() {
}
checkHasWon(delayPromise) {
}
}

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

@ -92,6 +92,11 @@ export class ParentSegment extends Segment {
applyRotations(rotations) {
this.rotation = rotations[0];
if (isNaN(this.rotation)){
this.rotation = 0;
}
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].applyRotations(rotations);

270
test/betaplay.testcafe.js
View File

@ -13,274 +13,4 @@ test('Play', async t => {
await t.wait(20000);
await mainTest(t);
// const SEGMENT = {
// ONE: 0,
// TWO: 1,
// THREE: 2,
// FOUR: 3,
// FIVE: 4,
// SIX : 5,
// SEVEN: 6,
// EIGHT : 7,
// NINE: 8,
// TEN: 9,
// ELEVEN: 10,
// TWELVE: 11,
// THIRTEEN: 12,
// FOURTEEN: 13,
// FIFTEEN: 14,
// SIXTEEN: 15,
// SEVENTEEN: 16,
// EIGHTEEN:17,
// NINETEEN: 18,
// TWENTY:19,
// TWENTYONE:20
// };
//
// await t
// //first Level
// .expect(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)")
// .expect(Selector('#won-text').getStyleProperty('visibility')).eql("hidden")
// .expect(Selector('#continue-button').getStyleProperty('visibility')).eql("hidden")
// .expect(Selector('#level-number').textContent).eql("1")
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .expect(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
// .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(Selector('#won-text').visible).eql(true)
// .expect(Selector('#continue-button').visible).eql(true)
// .click(Selector('#continue-button'))
//
// //TWOLevel
// .expect(Selector('.segment.segment-parent.rotate-270').nth(0).textContent).eql("BOAL")
// .expect(Selector('.segment.segment-parent.rotate-180').textContent).eql("DEAR")
// .expect(Selector('.segment.segment-parent.rotate-360').textContent).eql("NSMR")
// .expect(Selector('.segment.segment-parent.rotate-270').nth(1).textContent).eql("EEUF")
// .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(Selector('#continue-button').getStyleProperty('visibility')).eql("hidden")
// .expect(Selector('#level-number').textContent).eql("2")
// .expect(Selector('#won-text').getStyleProperty('visibility')).eql("hidden")
// .click(Selector('.segment-parent').nth(SEGMENT.TWO))
// .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)")
// .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(Selector('#won-text').visible).eql(true)
// .expect(Selector('#continue-button').visible).eql(true)
// .click(Selector('#continue-button'))
//
// //THREE Level
// .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("ZEHO")
// .expect(Selector('.segment-parent').nth(SEGMENT.TWO).textContent).eql("ITCH")
// .expect(Selector('.segment-parent').nth(SEGMENT.THREE).textContent).eql("STSA")
// .expect(Selector('.segment-parent').nth(SEGMENT.FOUR).textContent).eql("RAIS")
// .expect(Selector('.segment-parent').nth(SEGMENT.FIVE).textContent).eql("FEON")
// .click(Selector('.segment-parent').nth(SEGMENT.ONE))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.ONE))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('.segment-parent').nth(SEGMENT.ONE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('#continue-button'))
//
// //4. Level
// .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("FERÜINCKPHREYSSI")
// .expect(Selector('.segment-parent').nth(SEGMENT.TWO).textContent).eql("FERÜ")
// .expect(Selector('.segment-parent').nth(SEGMENT.THREE).textContent).eql("INCK")
// .expect(Selector('.segment-parent').nth(SEGMENT.FOUR).textContent).eql("PHRE")
// .expect(Selector('.segment-parent').nth(SEGMENT.FIVE).textContent).eql("YSSI")
// .expect(Selector('.segment-parent').nth(SEGMENT.SIX).textContent).eql("BEHE")
// .expect(Selector('.segment-parent').nth(SEGMENT.SEVEN).textContent).eql("RARZ")
// .expect(Selector('.segment-parent').nth(SEGMENT.EIGHT).textContent).eql("GUFA")
// .expect(Selector('.segment-parent').nth(SEGMENT.NINE).textContent).eql("SSLL")
// .expect(Selector('.segment-parent').nth(SEGMENT.TEN).textContent).eql("IKDEERNZTULANGND")
// .expect(Selector('.segment-parent').nth(SEGMENT.ELEVEN).textContent).eql("IKDE")
// .expect(Selector('.segment-parent').nth(SEGMENT.TWELVE).textContent).eql("ERNZ")
// .expect(Selector('.segment-parent').nth(SEGMENT.THIRTEEN).textContent).eql("TULA")
// .expect(Selector('.segment-parent').nth(SEGMENT.FOURTEEN).textContent).eql("NGND")
// .drag(Selector('.segment-parent').nth(SEGMENT.TEN), 128, 4, {
// offsetX: 54,
// offsetY: 17
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 128, 3, {
// offsetX: 54,
// offsetY: 17
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('I'), 128, 4, {
// offsetX: 27,
// offsetY: 41
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.ONE).find('div').withText('S'), 10, 144, {
// offsetX: 64,
// offsetY: 32
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.TEN), 128, 4, {
// offsetX: 27,
// offsetY: 41
// })
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('.segment-parent').nth(SEGMENT.SIX))
// .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.SIX))
// .expect(Selector('#continue-button').visible).eql(true)
// .expect(Selector('#won-text').visible).eql(true)
// .click(Selector('#continue-button'))
//
// //5. Level
// .expect(Selector('#level-number').textContent).eql("5")
// .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)")
//
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.TWO))
// .drag(Selector('.segment-parent').nth(SEGMENT.SIX).find('div').withText('U'), 3, 159, {
// offsetX: 69,
// offsetY: 150
// })
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .drag(Selector('.segment-parent').nth(SEGMENT.SIX), 3, 123, {
// offsetX: 86,
// offsetY: 133
// })
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .drag(Selector('.segment-parent').nth(SEGMENT.SIX), 10, 123, {
// offsetX: 60,
// offsetY: 137
// })
// .expect(Selector('#won-text').visible).eql(true)
// .expect(Selector('#continue-button').visible).eql(true)
// .click(Selector('#continue-button'))
//
//
// //Level 6
// .expect(Selector('#level-number').textContent).eql("6")
// .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(Selector('.segment-parent').nth(SEGMENT.TEN).textContent).eql("ITITSPSCIKARAROT")
//
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('A'), 106, -4, {
// offsetX: 33,
// offsetY: 18
// })
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.SIX))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
// .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
// .click(Selector('.segment-parent').nth(SEGMENT.TWO))
// .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
// .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.FOURTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.SIXTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
// .click(Selector('.segment-parent').nth(SEGMENT.NINETEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
// .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVENTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.SIXTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.FOURTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.NINETEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
// .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('P'), 169, -3, {
// 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(Selector('#continue-button').visible).eql(true)
// .expect(Selector('#won-text').visible).eql(true)
// .click(Selector('#continue-button'))
//
//
// //Level 7
// .expect(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
// .expect(Selector('.segment-row > .child-container').childElementCount).eql(3)
//
// .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, 177, {
// offsetX: 50,
// offsetY: 73
// })
//
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.TWO))
// .drag(Selector('.segment-parent').nth(SEGMENT.ELEVEN), 14, 195, {
// offsetX: 55,
// offsetY: 57
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, 177, {
// offsetX: 50,
// offsetY: 73
// })
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
// .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
// .click(Selector('.segment-parent').nth(SEGMENT.THREE))
// .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
// .click(Selector('.segment-parent').nth(SEGMENT.NINE))
// .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
// .drag(Selector('.segment-parent').nth(SEGMENT.ELEVEN), 14, 195, {
// offsetX: 55,
// offsetY: 57
// })
// .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, 177, {
// offsetX: 50,
// offsetY: 73
// })
// .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
//
// .expect(Selector('#won-text').visible).eql(true)
// .expect(Selector('#continue-button').visible).eql(true)
// .click(Selector('#continue-button'))
// .expect(Selector('#site-content').childElementCount).eql(1);
});

1
test/test.js
View File

@ -278,6 +278,7 @@ export async function mainTest(t){
offsetY: 73
})
.click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
.wait(5000)
.expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*7)
.expect(Selector('#won-text').visible).eql(true)