update to laptop

public/js/app.js

@@ -3107,13 +3107,16 @@ class ParentSegment extends Segment {
             this.rotation %= 360;
 
             this._updateRotationClass();
-            this.getLevel().checkHasWon(new Promise((resolve, reject) => {
+            this.element.classList.add("rotating");
-                this.element.addEventListener("animationend", resolve);
+
-            }));
+            let self = this;
-            // return new DelayPromise(250);
+            let delayPromise = new Promise(function (resolve) {
-            return 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[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
-            leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
-            leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
-            leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate());
-            leafsWords[5] = Level._createLeafsForWord(this.words[0], 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([20,40,60, 100]);
-            // const nextLevelJson = await db.loadNextLevel([100]);
+            const nextLevelJson = await db.loadNextLevel([140]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;

src/module/Application/pwa/js/WordRotatorDb.js

@@ -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;
         }

src/module/Application/pwa/js/site/LevelSite.js

@@ -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([20,40,60, 100]);
-            // const nextLevelJson = await db.loadNextLevel([100]);
+            const nextLevelJson = await db.loadNextLevel([140]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;

src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js

@@ -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,
 };

src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js

@@ -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[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
-            leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
-            leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
-            leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate());
-            leafsWords[5] = Level._createLeafsForWord(this.words[0], 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]);

src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js

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

src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel8.js

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

src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js

@@ -14,13 +14,16 @@ export class ParentSegment extends Segment {
             this.rotation %= 360;
 
             this._updateRotationClass();
-            this.getLevel().checkHasWon(new Promise((resolve, reject) => {
+            this.element.classList.add("rotating");
-                this.element.addEventListener("animationend", resolve);
+
-            }));
+            let self = this;
-            // return new DelayPromise(250);
+            let delayPromise = new Promise(function (resolve) {
-            return 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"));
+            }
         }
     }
 }

src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js

@@ -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());
+        }
+    }
 }

src/scss/wordRotator.scss

@@ -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) {
+.segment:not(.segment-row):not(.segment-triangle) {
-  @for $i from 1 through length($rotationDegrees) {
+  &.rotating {
-    &.rotate-#{nth($rotationDegrees, $i)} {
+    overflow: hidden;
-      animation-name: rotate-#{nth($rotationDegrees, $i)};
-      animation-duration: 0.25s;
-      animation-fill-mode: forwards;
-      animation-timing-function: linear;
 
-      .segment {
+    @for $i from 1 through length($rotationDegrees) {
-        animation-name: rotate-#{450- nth($rotationDegrees, $i)};
+      &.rotate-#{nth($rotationDegrees, $i)} {
-        animation-duration: 0.25s;
+        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) {
+        > .child-container {
-          $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
+          > .segment {
-          &.rotate-#{nth($rotationDegrees, $j)} {
+            animation-name: rotate-#{450- nth($rotationDegrees, $i)};
-            animation-name: rotate-#{$animationName};
+            animation-duration: $animationDuration;
-            animation-duration: 0.25s;
             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;
+    padding: 0.8em;
-    line-height: 2em;
+    &: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{
+    padding: 1px;
-      > .segment {
-        width: 50%;
-      }
-    }
-    .segment {
-      //width: 50%;
-      //height: 50%;
-    }
   }
 
   &.segment-triangle {
-    //display: inline-block;
+      > .child-container {
-    //width: 100%;
+      > .segment-parent {
-    //animation: none !important;
+        border: solid 3px #000000;
-
+        position: relative;
-    //&.type-1 {
+      }
-    //  > .child-container {
+    }
-    //    > .segment-parent:first-child {
-    //      //width: 100%;
-    //    }
-    //    > .segment-parent:not(:first-child) {
-    //      //width: 50%;
-    //    }
-    //  }
-    //}
   }
 }