Added simpleLevel

public/css/stories.css

@@ -1 +0,0 @@
-.author{color:#979797}.author:after{content:":";padding-right:2px}.author-image-container,.chat-img-container{width:2.4rem;position:relative}.author-image-container .author-image,.author-image-container .chat-img,.chat-img-container .author-image,.chat-img-container .chat-img{position:absolute;margin:.2em;border-radius:50%;width:1.8em}.chat{border-bottom:1px solid #ececec}.chat.overview{cursor:pointer}.chat .chat-name{font-weight:700}.chat .chat-last-message{color:#555;overflow:hidden;white-space:nowrap}.chat .chat-last-message .isWriting{color:#aa1c1d}.chat .chat-last-message-timestamp{font-size:.8rem}.chat .unread-message-counter{background-color:red;border-radius:50%;color:#fff;font-size:.7rem;border:1px solid #9b0000;width:1.2rem;height:1.2rem;line-height:1.2rem;text-align:center;vertical-align:middle}.chat .unread-message-counter:empty{display:none}#chat-title{border-bottom:none}#chat-title .chat-img{width:1.4em;position:relative}.message{margin-bottom:.1rem}.message.my-message{text-align:right}.message.my-message .author,.message.my-message .author-image-container{display:none}.message.my-message .bubble{background-color:rgba(255,0,0,.5);border-radius:5px 5px 0 5px}.message .author-image{bottom:0}.message .bubble{display:inline-block;padding:.2rem;border:1px solid #646464;border-radius:5px 5px 5px 0;max-width:80%;text-align:left}.message .bubble .author{font-size:.7rem;text-align:left;line-height:.9}.message .bubble .message-text{line-height:1}.message .bubble .time{line-height:.9;font-size:.5rem;text-align:right}#answer{text-align:center;height:100%;min-height:50px}.answer-button-container .answer-button{overflow:hidden;margin:-.1em 0 0;font-size:3rem;line-height:1;padding:0 .1em .1em;text-align:center;vertical-align:middle}#author-list .author-entry{border-bottom:1px solid #ececec}#author-list .author-entry .author-image-container .author-image{position:relative}#author-list .author-entry .user-flag{display:none}#author-list .author-entry.isUser .user-flag{display:inherit}

public/html/application/level.html

@@ -1 +1 @@
-<div><div id=segment-leaf-template class=segment><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=level></div></div>
+<div><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=level></div></div>

public/js/app.js

@@ -2766,7 +2766,7 @@ class Segment{
     }
 
     isSolved(){
-        return this.rotation === 0;
+        return (this.rotation === 0);
     }
     
     rotate(){};
@@ -2793,15 +2793,14 @@ class ParentSegment extends Segment {
     rotate() {
         this.rotation += 90;
         this.rotation %= 360;
-        
+
         this._updateRotationClass();
     }
 
-    applyRotations(rotations)
+    applyRotations(rotations) {
-    {
         // debugger;
         this.rotation = rotations[0];
-        rotations.splice(0,1);
+        rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
             rotations = this.children[i].applyRotations(rotations);
         }
@@ -2829,10 +2828,30 @@ class ParentSegment extends Segment {
         this._updateElement();
     }
 
-    _updateRotationClass(){
+    _updateRotationClass() {
+        // this.style.transform = "rotate("+this.rotation+"deg)";
         this.element.classList.remove(this.class);
         this.class = "rotate-" + this.rotation;
+        if (this.class === "rotate-0")
+        {
+            this.class = "rotate-360";
+        }
         this.element.classList.add(this.class);
+
+        // if (this.rotation === 0) {
+        //     const self = this;
+        //             self.element.classList.add("no-transition");
+        //
+        //     setTimeout(() => {
+        //         if (self.class === "rotate-0") {
+        //             requestAnimationFrame(()=>{
+        //
+        //             self.element.classList.remove("rotate-0");
+        //             self.element.classList.remove("no-transition");
+        //             });
+        //         }
+        //     }, 250);
+        // }
     }
 
     _updateElement() {
@@ -2907,7 +2926,10 @@ class Level {
 
     setWords(words)
     {
-        this.words = words;
+        this.words = [];
+        for (let i = 0, n = words.length; i < n; i++) {
+            this.words.push(words[i].toUpperCase());
+        }
     }
 
     setStartRotations(rotations)

src/module/Application/pwa/html/application/level.html

@@ -1,5 +1,5 @@
 <div>
-    <div id = 'segment-leaf-template' class = 'segment'>
+    <div id = 'segment-leaf-template' class = 'segment segment-leaf'>
         <div class = 'leaf-element'></div>
     </div>
     <div id = 'segment-parent-template' class = 'segment segment-parent'>

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

@@ -11,7 +11,10 @@ export class Level {
 
     setWords(words)
     {
-        this.words = words;
+        this.words = [];
+        for (let i = 0, n = words.length; i < n; i++) {
+            this.words.push(words[i].toUpperCase());
+        }
     }
 
     setStartRotations(rotations)

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

@@ -10,15 +10,14 @@ export class ParentSegment extends Segment {
     rotate() {
         this.rotation += 90;
         this.rotation %= 360;
-        
+
         this._updateRotationClass()
     }
 
-    applyRotations(rotations)
+    applyRotations(rotations) {
-    {
         // debugger;
         this.rotation = rotations[0];
-        rotations.splice(0,1);
+        rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
             rotations = this.children[i].applyRotations(rotations);
         }
@@ -46,22 +45,42 @@ export class ParentSegment extends Segment {
         this._updateElement();
     }
 
-    _updateRotationClass(){
+    _updateRotationClass() {
+        // this.style.transform = "rotate("+this.rotation+"deg)";
         this.element.classList.remove(this.class);
         this.class = "rotate-" + this.rotation;
+        if (this.class === "rotate-0")
+        {
+            this.class = "rotate-360";
+        }
         this.element.classList.add(this.class);
+
+        // if (this.rotation === 0) {
+        //     const self = this;
+        //             self.element.classList.add("no-transition");
+        //
+        //     setTimeout(() => {
+        //         if (self.class === "rotate-0") {
+        //             requestAnimationFrame(()=>{
+        //
+        //             self.element.classList.remove("rotate-0");
+        //             self.element.classList.remove("no-transition");
+        //             });
+        //         }
+        //     }, 250);
+        // }
     }
 
     _updateElement() {
         const childContainer = this.element.querySelector(".child-container");
         childContainer.removeAllChildren();
 
-        this._updateRotationClass()
+        this._updateRotationClass();
 
         const self = this;
         this.element.onclick = function () {
             self.rotate();
-        }
+        };
 
         for (let i = 0, n = this.children.length; i < n; i++) {
             this.children[i]._updateElement();

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

@@ -7,7 +7,7 @@ export class Segment{
     }
 
     isSolved(){
-        return this.rotation === 0;
+        return (this.rotation === 0);
     }
     
     rotate(){};

src/scss/wordRotator.scss

@@ -1,36 +1,120 @@
-.segment
+$rotationDegrees: (90 180 270 360);
-{
+
+@for $i from 1 through length($rotationDegrees) {
+  $startDegree: ((nth($rotationDegrees, $i)+270)%360);
+
+  @keyframes rotate-#{nth($rotationDegrees, $i)} {
+    0% {
+      transform: rotate(#{$startDegree}deg)
+    }
+    100% {
+      transform: rotate(#{nth($rotationDegrees, $i)}deg)
+    }
+  }
+
+  //@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
+  //  0% {
+  //    transform: rotate(#{nth($rotationDegrees, $i)}deg)
+  //  }
+  //  100% {
+  //    transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
+  //  }
+  //}
+}
+
+.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 {
+        animation-name: rotate-#{450- nth($rotationDegrees, $i)};
+        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);
+          &.rotate-#{nth($rotationDegrees, $j)} {
+            animation-name: rotate-#{$animationName};
+            animation-duration: 0.25s;
+            animation-fill-mode: forwards;
+            animation-direction: reverse;
+            animation-timing-function: linear;
+          }
+        }
+      }
+    }
+  }
+}
+
+.segment {
   cursor: pointer;
   display: inline-block;
   text-align: center;
-  &.segment-parent{
+  position: relative;
+  transition: .0s;
+
+  &.segment-row {
+    display: block;
+    width: 100%;
+    animation: none !important;
+  }
+
+  &.segment-leaf {
+    min-width: 15px;
+    height: 30px;
+  }
+
+  &.segment-parent {
     border: solid 1px #a9a9a9;
     border-radius: 3px;
-    .segment{
+    .segment {
       width: 50%;
     }
   }
-  &.rotate-90
-  {
-    transform: rotate(90deg);
-    .segment{
-      transform: rotate(-90deg);
-    }
-  }
 
-  &.rotate-180
+  //&.rotate-0 {
-  {
+  //  animation-name: rotate-360;
-    transform: rotate(180deg);
+  //  animation-duration: 0.25s;
-    .segment{
+  //  animation-fill-mode: forwards;
-      transform: rotate(-180deg);
+  //  //transform: rotate(360deg);
-    }
+  //  .segment {
-  }
+  //    transform: rotate(-360deg);
-
+  //  }
-  &.rotate-270
+  //}
-  {
+  //
-    transform: rotate(270deg);
+  //&.rotate-90 {
-    .segment{
+  //  animation-name: rotate-90;
-      transform: rotate(-270deg);
+  //  animation-duration: 0.25s;
-    }
+  //  animation-fill-mode: forwards;
-  }
+  //  //transform: rotate(90deg);
+  //  .segment {
+  //    transform: rotate(-90deg);
+  //  }
+  //}
+  //
+  //&.rotate-180 {
+  //  animation-name: rotate-180;
+  //  animation-duration: 0.25s;
+  //  animation-fill-mode: forwards;
+  //  //transform: rotate(180deg);
+  //  .segment {
+  //    transform: rotate(-180deg);
+  //  }
+  //}
+  //
+  //&.rotate-270 {
+  //  animation-name: rotate-270;
+  //  animation-duration: 0.25s;
+  //  animation-fill-mode: forwards;
+  //  //transform: rotate(270deg);
+  //  .segment {
+  //    transform: rotate(-270deg);
+  //  }
+  //}
 }