New Level type inserted

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

@@ -438,12 +438,14 @@ export class LevelSite extends WordRotatorBaseSite {
 
                     let rotatableSegments = this.level.getRotatableSegments();
                     let firstSegment = rotatableSegments[2];
+                    console.log(firstSegment);
 
                     let pointer = this.findBy("#tutorial-pointer");
                     pointer.remove();
                     firstSegment.element.appendChild(pointer);
 
                     this.level.setSegmentClickedListener((segment) => {
+                        console.log("clicked Segment", segment);
                         if (firstSegment === segment) {
                             this._siteContent.classList.remove("tutorial");
                             this._siteContent.classList.remove("step-4");
@@ -470,5 +472,5 @@ LevelSite.RENDERER_TYPES = [20, 40, 60, 80, 81, 82, 83, 100, 120, 140, 160];
 LevelSite.TUTORIAL = {
     FIRST_LEVEL: 67,
     SECOND_LEVEL: 15,
-    BIG_SEGMENT_LEVEL: 1386
+    BIG_SEGMENT_LEVEL: 1921
 };

src/module/Application/src/Model/Manager/LevelManager.php

@@ -254,7 +254,7 @@ class LevelManager extends StandardManager
                 array_splice($levelsToGenerate, $currentIndex, 1);
             }
 
-        } while (count($levelsToGenerate) > 0);
+        } while (count($levelsToGenerate) > 0 && $levelGenerated < 500);
 
         $this->emFlush();
         $this->wordManager->emFlush();

src/scss/_tutorial.scss

@@ -1,9 +1,9 @@
 @keyframes tutorialPointer {
   0% {
-    top: 75%;
+    top: 25%;
   }
   100% {
-    top: 25%;
+    top: 75%;
   }
 }
 
@@ -96,11 +96,11 @@
 
               border-radius: 50%;
 
-              left: 25%;
-              right: 50%;
+              left: 75%;
+              //right: 50%;
               position: absolute;
               top: 75%;
-              bottom: 50%;
+              //bottom: 50%;
               z-index: 1;
               transform: translate(-50%, -50%);
 

src/scss/wordRotator.scss

@@ -25,7 +25,7 @@ nav.top-bar.title-bar {
   }
 }
 
-.relative-level-number{
+.relative-level-number {
   position: relative;
   #level-number-container {
     top: 50%;
@@ -197,7 +197,7 @@ $coinTowerDimension: 28px;
         > .child-container {
           > .segment {
             //transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
-            transform:  #{map-get($degreeMatrix, 360- nth($rotationDegrees, $i))};
+            transform: #{map-get($degreeMatrix, 360- nth($rotationDegrees, $i))};
             background-color: inherit;
             z-index: 1;
 
@@ -247,6 +247,7 @@ $coinTowerDimension: 28px;
 }
 
 .segment {
+
   vertical-align: top;
   white-space: initial;
   cursor: pointer;
@@ -267,7 +268,8 @@ $coinTowerDimension: 28px;
   }
 
   &.segment-column {
-    > .child-container > .segment{
+    padding-top: 4px;
+    > .child-container > .segment {
       display: block;
       width: 100%;
     }
@@ -376,7 +378,8 @@ body {
 #site-content {
   overflow: visible;
 }
-div.mainContainer{
+
+div.mainContainer {
   overflow-x: hidden;
 
 }
@@ -387,13 +390,13 @@ div.mainContainer{
 //  background: url('../img/speaker.svg')
 //}
 
-.clickable{
+.clickable {
   cursor: pointer;
 }
 
 #share-button {
   overflow: hidden;
-  svg{
+  svg {
     cursor: pointer;
     max-width: 1.5rem;
   }