Alle Levelarten implementiert

.idea/wordRotator.iml

@@ -3,6 +3,7 @@
   <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/html" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/true/punycode" />
     </content>
     <orderEntry type="inheritedJdk" />

public/html/application/level.html

@@ -1 +1 @@
-<div class=max-height><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=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60 overflow-hidden"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>
+<div class=max-height><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=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>

public/js/app.js

@@ -3004,6 +3004,10 @@ class Segment{
         this.parent = null;
     }
 
+    getCurrentRotations(rotations){
+        return rotations;
+    }
+
     sameAs(otherSegment){
         return false;
     }
@@ -3106,14 +3110,18 @@ class ParentSegment extends Segment {
             this.rotation += 90;
             this.rotation %= 360;
 
+            let currentRotation = this.rotation;
+
             this._updateRotationClass();
             this.element.classList.add("rotating");
 
             let self = this;
             let delayPromise = new Promise(function (resolve) {
                 setTimeout(resolve, 250);
-            }).then(()=>{
+            }).then(() => {
-                self.element.classList.remove("rotating");
+                if (self.rotation === currentRotation) {
+                    self.element.classList.remove("rotating");
+                }
             });
             this.getLevel().checkHasWon(delayPromise);
             return delayPromise;
@@ -3133,7 +3141,6 @@ class ParentSegment extends Segment {
     }
 
     applyRotations(rotations) {
-        // debugger;
         this.rotation = rotations[0];
         rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
@@ -3142,6 +3149,15 @@ class ParentSegment extends Segment {
         return rotations;
     }
 
+    getCurrentRotations(rotations)
+    {
+        rotations.push(this.rotation);
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     isSolved() {
         for (let i = 0, n = this.children.length; i < n; i++) {
             if (!this.children[i].isSolved()) {
@@ -3150,7 +3166,7 @@ class ParentSegment extends Segment {
         }
         return (this.rotation === 0 || (
             this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
-                this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
+            this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
     }
 
     setChildren(children) {
@@ -3191,8 +3207,7 @@ class ParentSegment extends Segment {
         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)
+            if (i % 2 === 1 && this.children.length - 1 !== i) {
-            {
                 childContainer.appendChild(document.createElement("br"));
             }
         }
@@ -3271,6 +3286,19 @@ class Level {
         });
     }
 
+    saveAsCurrentLevel(){
+        let rotations = this.getCurrentRotations();
+        localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
+    }
+
+    getCurrentRotations(){
+        if (this.rootSegment !== null)
+        {
+            return this.rootSegment.getCurrentRotations([]);
+        }
+        return [];
+    }
+
     setId(id)
     {
         this.id = id;
@@ -3332,6 +3360,7 @@ class Level {
             });
             return true;
         }
+        this.saveAsCurrentLevel();
         return false;
     }
 
@@ -3366,6 +3395,13 @@ class RowSegment extends ParentSegment{
         return rotations;
     }
 
+    getCurrentRotations(rotations){
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     _updateElement() {
         const childContainer = this.element.querySelector(".child-container");
         childContainer.removeAllChildren();
@@ -3553,6 +3589,80 @@ class SixWordsRowLevel12 extends SixWordsRowLevel {
     }
 }
 
+class FourWordsLevel extends Level {
+
+    constructor(templateContainer, wordLength) {
+        super(templateContainer);
+        this.wordLength = wordLength;
+    }
+
+    createSegments() {
+        if (this.words.length >= 4 &&
+            this.words[0].length >= this.wordLength &&
+            this.words[1].length >= this.wordLength &&
+            this.words[2].length >= this.wordLength &&
+            this.words[3].length >= this.wordLength
+        ) {
+            let leafsWords = [];
+            leafsWords[0] = 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());
+
+            let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
+            for (let i = 0, n = this.wordLength / 4; i < n; i++) {
+
+                let parents = [];
+                parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
+
+                parents[0].addChild(leafsWords[0][4 * i]);
+                parents[0].addChild(leafsWords[0][4 * i + 1]);
+                parents[0].addChild(leafsWords[1][4 * i]);
+                parents[0].addChild(leafsWords[1][4 * i + 1]);
+
+                parents[1].addChild(leafsWords[0][4 * i + 2]);
+                parents[1].addChild(leafsWords[0][4 * i + 3]);
+                parents[1].addChild(leafsWords[1][4 * i + 2]);
+                parents[1].addChild(leafsWords[1][4 * i + 3]);
+
+                parents[2].addChild(leafsWords[2][4 * i]);
+                parents[2].addChild(leafsWords[2][4 * i + 1]);
+                parents[2].addChild(leafsWords[3][4 * i]);
+                parents[2].addChild(leafsWords[3][4 * i + 1]);
+
+                parents[3].addChild(leafsWords[2][4 * i + 2]);
+                parents[3].addChild(leafsWords[2][4 * i + 3]);
+                parents[3].addChild(leafsWords[3][4 * i + 2]);
+                parents[3].addChild(leafsWords[3][4 * i + 3]);
+
+                let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parent.addChild(parents[0]);
+                parent.addChild(parents[1]);
+                parent.addChild(parents[2]);
+                parent.addChild(parents[3]);
+
+                rootSegment.addChild(parent);
+            }
+            this.setRootSegment(rootSegment);
+        }
+    }
+}
+
+class FourWordsLevel8 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 8);
+    }
+}
+
+class FourWordsLevel12 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 12);
+    }
+}
+
 class LevelHelper {
     static setLevelType(typeId, level) {
         LevelHelper.types[typeId] = level;
@@ -3583,7 +3693,9 @@ LevelHelper.types = {
     40: RowLevel8,
     60: RowLevel10,
     100: SixWordsRowLevel8,
+    120: FourWordsLevel8,
     140: SixWordsRowLevel12,
+    160: FourWordsLevel12,
 };
 
 class WordRotatorDb extends MyDb {
@@ -3715,7 +3827,48 @@ class LevelSite extends AbstractSite$1 {
 
         this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
-        this.nextLevel();
+
+        this.loadLastLevel();
+    }
+
+    async loadLastLevel() {
+        try {
+            let currentLevelInfo = localStorage.getItem("currentLevel");
+            if (currentLevelInfo !== null) {
+                currentLevelInfo = JSON.parse(currentLevelInfo);
+
+                const db = WordRotatorDb.getInstance();
+                const levelJson = await db.loadLevel(currentLevelInfo["id"]);
+                if (levelJson === null) {
+                    return this.nextLevel();
+                }
+
+                const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
+                level.setStartRotations(currentLevelInfo["rotations"]);
+
+                const self = this;
+                level.getWonPromise().then(() => {
+                    self.levelWon(level);
+                });
+
+                level.createSegments();
+                level.getRootSegment()._updateElement();
+
+                level.saveAsCurrentLevel();
+
+                let levelSegment = this.findBy("#level");
+                levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+                let scaleHelper = new ScaleHelper();
+                scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+
+                this.level = level;
+                return;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return this.nextLevel();
     }
 
     async nextLevel() {
@@ -3723,14 +3876,13 @@ class LevelSite extends AbstractSite$1 {
             this._siteContent.classList.remove('won');
 
             const db = WordRotatorDb.getInstance();
-            // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
+            const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
-            const nextLevelJson = await db.loadNextLevel([140]);
+            // const nextLevelJson = await db.loadNextLevel([120]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;
             }
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
-
             const self = this;
             level.getWonPromise().then(() => {
                 self.levelWon(level);
@@ -3739,6 +3891,8 @@ class LevelSite extends AbstractSite$1 {
             level.createSegments();
             level.getRootSegment()._updateElement();
 
+            level.saveAsCurrentLevel();
+
             let levelSegment = this.findBy("#level");
             levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
             let scaleHelper = new ScaleHelper();
@@ -3762,6 +3916,7 @@ class LevelSite extends AbstractSite$1 {
             this.levelCounterAction.redraw();
 
             this._siteContent.classList.add('won');
+            localStorage.removeItem("currentLevel");
             await savePromise;
         }
         catch (e) {

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

@@ -17,7 +17,7 @@
         <div class = 'show-when-won height-20 center flex-center'>
             <b data-translation="won" id = "won-text"></b>
         </div>
-        <div class="flex-center height-60 overflow-hidden">
+        <div class="flex-center height-60">
             <div id='level'>
             </div>
         </div>

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

@@ -61,7 +61,48 @@ export class LevelSite extends AbstractSite {
 
         this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
-        this.nextLevel();
+
+        this.loadLastLevel();
+    }
+
+    async loadLastLevel() {
+        try {
+            let currentLevelInfo = localStorage.getItem("currentLevel");
+            if (currentLevelInfo !== null) {
+                currentLevelInfo = JSON.parse(currentLevelInfo);
+
+                const db = WordRotatorDb.getInstance();
+                const levelJson = await db.loadLevel(currentLevelInfo["id"]);
+                if (levelJson === null) {
+                    return this.nextLevel();
+                }
+
+                const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
+                level.setStartRotations(currentLevelInfo["rotations"]);
+
+                const self = this;
+                level.getWonPromise().then(() => {
+                    self.levelWon(level);
+                });
+
+                level.createSegments();
+                level.getRootSegment()._updateElement();
+
+                level.saveAsCurrentLevel();
+
+                let levelSegment = this.findBy("#level");
+                levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+                let scaleHelper = new ScaleHelper();
+                scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+
+                this.level = level;
+                return;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return this.nextLevel();
     }
 
     async nextLevel() {
@@ -69,14 +110,13 @@ export class LevelSite extends AbstractSite {
             this._siteContent.classList.remove('won');
 
             const db = WordRotatorDb.getInstance();
-            // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
+            const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
-            const nextLevelJson = await db.loadNextLevel([140]);
+            // const nextLevelJson = await db.loadNextLevel([120]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;
             }
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
-
             const self = this;
             level.getWonPromise().then(() => {
                 self.levelWon(level);
@@ -85,6 +125,8 @@ export class LevelSite extends AbstractSite {
             level.createSegments();
             level.getRootSegment()._updateElement();
 
+            level.saveAsCurrentLevel();
+
             let levelSegment = this.findBy("#level");
             levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
             let scaleHelper = new ScaleHelper();
@@ -108,6 +150,7 @@ export class LevelSite extends AbstractSite {
             this.levelCounterAction.redraw();
 
             this._siteContent.classList.add('won');
+            localStorage.removeItem("currentLevel");
             await savePromise;
         }
         catch (e) {

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

@@ -0,0 +1,66 @@
+import {Level} from "./Level";
+import {RowSegment} from "../Segment/RowSegment";
+import {TriangleSegment} from "../Segment/TriangleSegment";
+import {ParentSegment} from "../Segment/ParentSegment";
+
+export class FourWordsLevel extends Level {
+
+    constructor(templateContainer, wordLength) {
+        super(templateContainer);
+        this.wordLength = wordLength;
+    }
+
+    createSegments() {
+        if (this.words.length >= 4 &&
+            this.words[0].length >= this.wordLength &&
+            this.words[1].length >= this.wordLength &&
+            this.words[2].length >= this.wordLength &&
+            this.words[3].length >= this.wordLength
+        ) {
+            let leafsWords = [];
+            leafsWords[0] = 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());
+
+            let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
+            for (let i = 0, n = this.wordLength / 4; i < n; i++) {
+
+                let parents = [];
+                parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
+
+                parents[0].addChild(leafsWords[0][4 * i]);
+                parents[0].addChild(leafsWords[0][4 * i + 1]);
+                parents[0].addChild(leafsWords[1][4 * i]);
+                parents[0].addChild(leafsWords[1][4 * i + 1]);
+
+                parents[1].addChild(leafsWords[0][4 * i + 2]);
+                parents[1].addChild(leafsWords[0][4 * i + 3]);
+                parents[1].addChild(leafsWords[1][4 * i + 2]);
+                parents[1].addChild(leafsWords[1][4 * i + 3]);
+
+                parents[2].addChild(leafsWords[2][4 * i]);
+                parents[2].addChild(leafsWords[2][4 * i + 1]);
+                parents[2].addChild(leafsWords[3][4 * i]);
+                parents[2].addChild(leafsWords[3][4 * i + 1]);
+
+                parents[3].addChild(leafsWords[2][4 * i + 2]);
+                parents[3].addChild(leafsWords[2][4 * i + 3]);
+                parents[3].addChild(leafsWords[3][4 * i + 2]);
+                parents[3].addChild(leafsWords[3][4 * i + 3]);
+
+                let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parent.addChild(parents[0]);
+                parent.addChild(parents[1]);
+                parent.addChild(parents[2]);
+                parent.addChild(parents[3]);
+
+                rootSegment.addChild(parent);
+            }
+            this.setRootSegment(rootSegment)
+        }
+    }
+}

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

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

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

@@ -0,0 +1,7 @@
+import {FourWordsLevel} from "./FourWordsLevel";
+
+export class FourWordsLevel8 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 8);
+    }
+}

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

@@ -21,6 +21,19 @@ export class Level {
         });
     }
 
+    saveAsCurrentLevel(){
+        let rotations = this.getCurrentRotations();
+        localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
+    }
+
+    getCurrentRotations(){
+        if (this.rootSegment !== null)
+        {
+            return this.rootSegment.getCurrentRotations([]);
+        }
+        return [];
+    }
+
     setId(id)
     {
         this.id = id;
@@ -82,6 +95,7 @@ export class Level {
             });
             return true;
         }
+        this.saveAsCurrentLevel();
         return false;
     }
 

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

@@ -3,6 +3,8 @@ import {RowLevel8} from "./RowLevel8";
 import {RowLevel10} from "./RowLevel10";
 import {SixWordsRowLevel8} from "./SixWordsRowLevel8";
 import {SixWordsRowLevel12} from "./SixWordsRowLevel12";
+import {FourWordsLevel8} from "./FourWordsLevel8";
+import {FourWordsLevel12} from "./FourWordsLevel12";
 
 export class LevelHelper {
     static setLevelType(typeId, level) {
@@ -34,5 +36,7 @@ LevelHelper.types = {
     40: RowLevel8,
     60: RowLevel10,
     100: SixWordsRowLevel8,
+    120: FourWordsLevel8,
     140: SixWordsRowLevel12,
+    160: FourWordsLevel12,
 };

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

@@ -13,14 +13,18 @@ export class ParentSegment extends Segment {
             this.rotation += 90;
             this.rotation %= 360;
 
+            let currentRotation = this.rotation;
+
             this._updateRotationClass();
             this.element.classList.add("rotating");
 
             let self = this;
             let delayPromise = new Promise(function (resolve) {
                 setTimeout(resolve, 250);
-            }).then(()=>{
+            }).then(() => {
-                self.element.classList.remove("rotating");
+                if (self.rotation === currentRotation) {
+                    self.element.classList.remove("rotating");
+                }
             });
             this.getLevel().checkHasWon(delayPromise);
             return delayPromise;
@@ -40,7 +44,6 @@ export class ParentSegment extends Segment {
     }
 
     applyRotations(rotations) {
-        // debugger;
         this.rotation = rotations[0];
         rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
@@ -49,6 +52,15 @@ export class ParentSegment extends Segment {
         return rotations;
     }
 
+    getCurrentRotations(rotations)
+    {
+        rotations.push(this.rotation);
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     isSolved() {
         for (let i = 0, n = this.children.length; i < n; i++) {
             if (!this.children[i].isSolved()) {
@@ -57,7 +69,7 @@ export class ParentSegment extends Segment {
         }
         return (this.rotation === 0 || (
             this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
-                this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
+            this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
     }
 
     setChildren(children) {
@@ -98,8 +110,7 @@ export class ParentSegment extends Segment {
         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)
+            if (i % 2 === 1 && this.children.length - 1 !== i) {
-            {
                 childContainer.appendChild(document.createElement("br"));
             }
         }

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

@@ -11,6 +11,13 @@ export class RowSegment extends ParentSegment{
         return rotations;
     }
 
+    getCurrentRotations(rotations){
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     _updateElement() {
         const childContainer = this.element.querySelector(".child-container");
         childContainer.removeAllChildren();

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

@@ -7,6 +7,10 @@ export class Segment{
         this.parent = null;
     }
 
+    getCurrentRotations(rotations){
+        return rotations;
+    }
+
     sameAs(otherSegment){
         return false;
     }

src/scss/wordRotator.scss

@@ -17,24 +17,16 @@ $animationDuration: 0.25s;
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
       transform: rotate(#{$startDegree}deg);
-      background-color: transparent;
-      z-index: 0;
-    }
-    99% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: transparent;
-      z-index: 0;
     }
     100% {
       transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: white;
-      z-index: 1;
     }
   }
 }
 
 .segment:not(.segment-row):not(.segment-triangle) {
   &.rotating {
+    z-index: 10 !important;
     overflow: hidden;
 
     @for $i from 1 through length($rotationDegrees) {
@@ -56,7 +48,6 @@ $animationDuration: 0.25s;
               $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
               &.rotate-#{nth($rotationDegrees, $j)} {
                 animation-name: rotate-#{$animationName};
-
               }
             }
           }
@@ -91,20 +82,6 @@ $animationDuration: 0.25s;
                   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;
-
-                    }
-                  }
                 }
               }
             }
@@ -147,6 +124,7 @@ $animationDuration: 0.25s;
   }
 
   &.segment-leaf {
+    background-color: transparent;
     min-width: 1em;
     padding: 0.8em;
     &:before {
@@ -156,11 +134,11 @@ $animationDuration: 0.25s;
     }
     .leaf-element {
       position: absolute;
+      width: 100%;
+      height: 100%;
+      line-height: 1.5em;
       top: 0;
       left: 0;
-      right: 0;
-      bottom: 0;
-      transform: translateY(50%);
     }
   }