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

update to laptop

Browse Source
This commit is contained in:
silas 2018-07-06 18:39:42 +02:00
parent f04c9ec9b7
commit eea36bb922
11 changed files with 206 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

76
public/js/app.js
View File

@ -3107,13 +3107,16 @@ class ParentSegment extends Segment {
this.rotation %= 360;
this._updateRotationClass();
this.getLevel().checkHasWon(new Promise((resolve, reject) => {
this.element.addEventListener("animationend", resolve);
}));
// return new DelayPromise(250);
return new Promise(function (resolve) {
this.element.classList.add("rotating");
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250);
}).then(()=>{
self.element.classList.remove("rotating");
});
this.getLevel().checkHasWon(delayPromise);
return delayPromise;
}
}
@ -3180,13 +3183,18 @@ class ParentSegment extends Segment {
this._updateRotationClass();
const self = this;
this.element.onclick = function () {
this.element.onclick = function (e) {
self.rotate();
e.stopPropagation();
};
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
if (i%2 === 1 && this.children.length-1 !== i)
{
childContainer.appendChild(document.createElement("br"));
}
}
}
}
@ -3357,6 +3365,24 @@ class RowSegment extends ParentSegment{
}
return rotations;
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();
this._updateRotationClass();
const self = this;
this.element.onclick = function (e) {
self.rotate();
e.stopPropagation();
};
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
}
}
}
class RowLevel extends Level {
@ -3425,11 +3451,11 @@ class SixWordsRowLevel extends Level {
) {
let leafsWords = [];
leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[5] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate());
leafsWords[5] = Level._createLeafsForWord(this.words[5], this.templateContainer.copyLeafTemplate());
let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
for (let i = 0, n = this.wordLength / 4; i < n; i++) {
@ -3492,8 +3518,13 @@ class SixWordsRowLevel extends Level {
triangle.getElement().classList.add("type-1");
}
else {
triangle.addChild(parents[0]);
triangle.addChild(parents[1]);
let rowSegment = new RowSegment(this.templateContainer.copyRowTemplate());
rowSegment.addChild(parents[0]);
rowSegment.addChild(parents[1]);
triangle.addChild(rowSegment);
triangle.addChild(parent);
parent.addChild(parents[2]);
@ -3510,12 +3541,18 @@ class SixWordsRowLevel extends Level {
}
}
class ThreeWordsRowLevel8 extends SixWordsRowLevel {
class SixWordsRowLevel8 extends SixWordsRowLevel {
constructor(templateContainer) {
super(templateContainer, 8);
}
}
class SixWordsRowLevel12 extends SixWordsRowLevel {
constructor(templateContainer) {
super(templateContainer, 12);
}
}
class LevelHelper {
static setLevelType(typeId, level) {
LevelHelper.types[typeId] = level;
@ -3545,7 +3582,8 @@ LevelHelper.types = {
20: SimpleLevel,
40: RowLevel8,
60: RowLevel10,
100: ThreeWordsRowLevel8,
100: SixWordsRowLevel8,
140: SixWordsRowLevel12,
};
class WordRotatorDb extends MyDb {
@ -3599,10 +3637,6 @@ class WordRotatorDb extends MyDb {
}
}
console.log("levels count:", newLevels.length);
console.log("new levels:", newLevels);
console.log("wrong levels:", wrongLevels);
if (newLevels.length === 0) {
return null;
}
@ -3689,8 +3723,8 @@ class LevelSite extends AbstractSite$1 {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
const nextLevelJson = await db.loadNextLevel([20,40,60]);
// const nextLevelJson = await db.loadNextLevel([100]);
// const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
const nextLevelJson = await db.loadNextLevel([140]);
if (nextLevelJson === null) {
this.startSite(EndSite);
return;

4
src/module/Application/pwa/js/WordRotatorDb.js
View File

@ -51,10 +51,6 @@ export class WordRotatorDb extends MyDb {
}
}
console.log("levels count:", newLevels.length);
console.log("new levels:", newLevels);
console.log("wrong levels:", wrongLevels);
if (newLevels.length === 0) {
return null;
}

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

@ -69,8 +69,8 @@ export class LevelSite extends AbstractSite {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
const nextLevelJson = await db.loadNextLevel([20,40,60]);
// const nextLevelJson = await db.loadNextLevel([100]);
// const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
const nextLevelJson = await db.loadNextLevel([140]);
if (nextLevelJson === null) {
this.startSite(EndSite);
return;

6
src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
View File

@ -1,7 +1,8 @@
import {SimpleLevel} from "./SimpleLevel";
import {RowLevel8} from "./RowLevel8";
import {RowLevel10} from "./RowLevel10";
import {ThreeWordsRowLevel8} from "./ThreeWordsRowLevel8";
import {SixWordsRowLevel8} from "./SixWordsRowLevel8";
import {SixWordsRowLevel12} from "./SixWordsRowLevel12";
export class LevelHelper {
static setLevelType(typeId, level) {
@ -32,5 +33,6 @@ LevelHelper.types = {
20: SimpleLevel,
40: RowLevel8,
60: RowLevel10,
100: ThreeWordsRowLevel8,
100: SixWordsRowLevel8,
140: SixWordsRowLevel12,
};

19
src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js
View File

@ -21,11 +21,11 @@ export class SixWordsRowLevel extends Level {
) {
let leafsWords = [];
leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[5] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate());
leafsWords[5] = Level._createLeafsForWord(this.words[5], this.templateContainer.copyLeafTemplate());
let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
for (let i = 0, n = this.wordLength / 4; i < n; i++) {
@ -88,8 +88,13 @@ export class SixWordsRowLevel extends Level {
triangle.getElement().classList.add("type-1");
}
else {
triangle.addChild(parents[0]);
triangle.addChild(parents[1]);
let rowSegment = new RowSegment(this.templateContainer.copyRowTemplate());
rowSegment.addChild(parents[0]);
rowSegment.addChild(parents[1]);
triangle.addChild(rowSegment);
triangle.addChild(parent);
parent.addChild(parents[2]);

7
src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js Normal file
View File

@ -0,0 +1,7 @@
import {SixWordsRowLevel} from "./SixWordsRowLevel";
export class SixWordsRowLevel12 extends SixWordsRowLevel {
constructor(templateContainer) {
super(templateContainer, 12);
}
}

2
src/module/Application/pwa/js/wordrotator/Level/ThreeWordsRowLevel8.js → src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel8.js
View File

@ -1,6 +1,6 @@
import {SixWordsRowLevel} from "./SixWordsRowLevel";
export class ThreeWordsRowLevel8 extends SixWordsRowLevel {
export class SixWordsRowLevel8 extends SixWordsRowLevel {
constructor(templateContainer) {
super(templateContainer, 8);
}

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

@ -14,13 +14,16 @@ export class ParentSegment extends Segment {
this.rotation %= 360;
this._updateRotationClass();
this.getLevel().checkHasWon(new Promise((resolve, reject) => {
this.element.addEventListener("animationend", resolve);
}));
// return new DelayPromise(250);
return new Promise(function (resolve) {
this.element.classList.add("rotating");
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250);
}).then(()=>{
self.element.classList.remove("rotating");
});
this.getLevel().checkHasWon(delayPromise);
return delayPromise;
}
}
@ -87,13 +90,18 @@ export class ParentSegment extends Segment {
this._updateRotationClass();
const self = this;
this.element.onclick = function () {
this.element.onclick = function (e) {
self.rotate();
e.stopPropagation();
};
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
if (i%2 === 1 && this.children.length-1 !== i)
{
childContainer.appendChild(document.createElement("br"));
}
}
}
}

18
src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js
View File

@ -10,4 +10,22 @@ export class RowSegment extends ParentSegment{
}
return rotations;
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();
this._updateRotationClass();
const self = this;
this.element.onclick = function (e) {
self.rotate();
e.stopPropagation();
};
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
}
}
}

133
src/scss/wordRotator.scss
View File

@ -1,4 +1,5 @@
$rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s;
@for $i from 1 through 10 {
$value: percentage($i/10);
@ -32,29 +33,81 @@ $rotationDegrees: (90 180 270 360);
}
}
.segment:not(.segment-row) {
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
animation-name: rotate-#{nth($rotationDegrees, $i)};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: linear;
.segment:not(.segment-row):not(.segment-triangle) {
&.rotating {
overflow: hidden;
.segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: 0.25s;
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
animation-name: rotate-#{nth($rotationDegrees, $i)};
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
animation-duration: 0.25s;
> .child-container {
> .segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
}
}
}
}
}
}
}
&:not(.rotating) {
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
> .child-container {
> .segment {
transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
@if $animationName==0 {
$animationName: 360;
}
&.rotate-#{nth($rotationDegrees, $j)} {
transform: rotate(#{$animationName}deg);
background-color: white;
z-index: 1;
&.rotating {
animation-name: rotate-#{$animationName};
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-timing-function: linear;
> .child-container {
> .segment {
@if $animationName==360 {
$animationName: 0;
}
//animation-name: rotate-#{90+ $animationName};
//animation-duration: 2.5s;
//animation-fill-mode: forwards;
//animation-direction: reverse;
//animation-timing-function: linear;
}
}
}
}
}
}
}
}
@ -66,6 +119,7 @@ $rotationDegrees: (90 180 270 360);
white-space: nowrap;
transition: none;
max-width: 100%;
//width: 100%;
* {
transition: none;
@ -83,6 +137,7 @@ $rotationDegrees: (90 180 270 360);
user-select: none;
z-index: 1;
background-color: white;
line-height: 0;
&.segment-row {
display: block;
@ -93,39 +148,35 @@ $rotationDegrees: (90 180 270 360);
&.segment-leaf {
min-width: 1em;
height: 2em;
line-height: 2em;
padding: 0.8em;
&:before {
content: " ";
display: block;
padding-top: 100%;
}
.leaf-element {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateY(50%);
}
}
&.segment-parent {
border: solid 1px #a9a9a9;
border-radius: 3px;
> .child-container{
> .segment {
width: 50%;
}
}
.segment {
//width: 50%;
//height: 50%;
}
padding: 1px;
}
&.segment-triangle {
//display: inline-block;
//width: 100%;
//animation: none !important;
//&.type-1 {
// > .child-container {
// > .segment-parent:first-child {
// //width: 100%;
// }
// > .segment-parent:not(:first-child) {
// //width: 50%;
// }
// }
//}
> .child-container {
> .segment-parent {
border: solid 3px #000000;
position: relative;
}
}
}
}