update für die Vorlesung

src/scss/_settings.scss

@@ -1,6 +1,6 @@
 @import "defaultSettings";
 
-$themes: map-merge($themes,(dark: (
+$themes: map-merge($themes, (dark: (
         class: dark,
         themeColor: #373737,
         lightThemeColor: #4b4b4b,
@@ -17,4 +17,24 @@ $themes: map-merge($themes,(dark: (
 )));
 
 $rotationDegrees: (90 180 270 360);
-$animationDuration: .25s;
+$animationDuration: .25s;
+
+//$degreeMatrix: (
+//        //0:matrix(1, 0, 0, 1, 0, 0),
+//        0:rotate(0deg),
+//        90:matrix(0, 1, -1, 0, 0, 0),
+//        180:matrix(-1, 0, 0, -1, 0, 0),
+//        270:matrix(0, -1, 1, 0, 0, 0),
+//        //360:matrix(0.99999, 0, 0, 0.99999, 0, 0),
+//        //450:matrix(0, 1, -1, 0, 0, 0),
+//          360:rotate(360deg),
+//          450:rotate(450deg),
+//);
+$degreeMatrix: (
+        0:rotate(0deg),
+        90:rotate(90deg),
+        180:rotate(180deg),
+        270:rotate(270deg),
+        360:rotate(360deg),
+        450:rotate(450deg),
+);

src/scss/_wordRotator.scss

@@ -0,0 +1,379 @@
+@import "imports";
+@import "tutorial";
+@import "wordrotatorTheme";
+
+//ActionBar
+nav.top-bar.title-bar {
+  padding: 0.3rem 0.6rem 0;
+}
+
+#logo {
+  max-width: 2rem;
+  transition: none;
+}
+
+#action-bar .top-bar-right .menu .action.img a {
+  padding-bottom: 0;
+  img {
+    max-height: 1.8rem;
+  }
+}
+
+.menu, .dropdown.menu {
+  a {
+    padding: 0.2rem 0.5rem;
+  }
+}
+
+#level-number-container {
+  z-index: 1;
+  transition: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 3px solid white;
+  border-radius: 50%;
+  visibility: hidden;
+  display: table-cell;
+
+  height: 35px;
+  width: 35px;
+  text-align: center;
+  vertical-align: middle;
+
+  &.visible {
+    visibility: visible;
+  }
+  &.in-main-menu {
+    background: white;
+    border-color: black;
+
+    height: 1em;
+    width: 1em;
+    min-height: 1em;
+    min-width: 1em;
+    max-height: 1em;
+    max-width: 1em;
+  }
+
+  #level-number {
+    transition: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+  }
+}
+
+$coinTowerDimension: 28px;
+//coin element
+.coin-counter {
+  display: inline-block;
+  position: relative;
+  font-size: 1.6rem;
+  @include breakpoint(small down) {
+    font-size: 1rem;
+  }
+
+  :after {
+    background-image: url('../img/coinTower.png');
+    background-size: $coinTowerDimension $coinTowerDimension;
+    width: $coinTowerDimension;
+    height: $coinTowerDimension;
+    display: inline-block;
+    content: "";
+  }
+}
+
+#coin-container {
+  line-height: 1;
+  .coin {
+    margin-left: 3px;
+    margin-right: 3px;
+    max-width: 20px;
+    display: inline-block;
+    @include breakpoint(smedium) {
+      max-width: 25px;
+    }
+    @include breakpoint(medium) {
+      max-width: 30px;
+    }
+  }
+}
+
+//Segments
+
+@for $i from 1 through length($rotationDegrees) {
+  $startDegree: ((nth($rotationDegrees, $i)+270)%360);
+
+  @keyframes rotate-#{nth($rotationDegrees, $i)} {
+    0% {
+      //transform: rotate(#{$startDegree}deg);
+      transform: #{map-get($degreeMatrix, $startDegree)};
+    }
+    100% {
+      //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
+    }
+  }
+  @keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
+    0% {
+      //transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i)+90)}
+    }
+    100% {
+      //transform: rotate(#{$startDegree+90}deg);
+      transform: #{map-get($degreeMatrix, $startDegree+90)};
+    }
+  }
+}
+
+.segment:not(.segment-row):not(.segment-triangle) {
+  &.rotating {
+    z-index: 10 !important;
+    overflow: hidden;
+
+    @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-timing-function: linear;
+
+        > .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};
+              }
+            }
+          }
+        }
+
+        &.reverse {
+          //animation-name: rotate-reverse-#{(nth($rotationDegrees, $i))%360+90};
+          animation-name: rotate-reverse-#{nth($rotationDegrees, $i)};
+          > .child-container {
+            > .segment {
+              //animation-name: rotate-reverse-#{360- (nth($rotationDegrees, $i)%360)};
+              animation-name: rotate-reverse-#{(540- nth($rotationDegrees, $i))%360+90};
+              @for $j from 1 through length($rotationDegrees) {
+                $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
+                &.rotate-#{nth($rotationDegrees, $j)} {
+                  animation-name: rotate-reverse-#{($animationName+90)%360+90};
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.rotating) {
+    @for $i from 1 through length($rotationDegrees) {
+      &.rotate-#{nth($rotationDegrees, $i)} {
+        transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        background-color: inherit;
+        z-index: 1;
+        > .child-container {
+          > .segment {
+            transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            background-color: inherit;
+            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: inherit;
+                z-index: 1;
+
+                &.rotating {
+                  animation-name: rotate-#{$animationName};
+                  animation-duration: $animationDuration;
+                  animation-fill-mode: forwards;
+                  animation-timing-function: linear;
+
+                  &.reverse {
+                    animation-name: rotate-reverse-#{$animationName};
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+#level {
+  user-select: none;
+  white-space: nowrap;
+  transition: none;
+  max-width: 100%;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  //width: 100%;
+
+  * {
+    transition: none;
+  }
+  overflow-y: visible;
+}
+
+.segment {
+  vertical-align: top;
+  white-space: initial;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  transition: none;
+  user-select: none;
+  z-index: 1;
+  background-color: inherit;
+  line-height: 0;
+
+  &.segment-row {
+    display: block;
+    width: 100%;
+    animation: none !important;
+    white-space: nowrap;
+  }
+
+  &.segment-leaf {
+    background-color: transparent !important;
+    min-width: 1em;
+    padding: 0.8em;
+    &:before {
+      content: " ";
+      display: block;
+      padding-top: 100%;
+    }
+    .leaf-element {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      line-height: 1.5em;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &.segment-parent {
+    border: solid 1px #a9a9a9;
+    border-radius: 3px;
+    padding: 1px;
+
+    &.layer-2 {
+      border: solid 3px #000000;
+    }
+  }
+
+  &.segment-triangle {
+    > .child-container {
+      > .segment-parent {
+        //border: solid 3px #000000;
+        //position: relative;
+      }
+    }
+  }
+}
+
+//Won-screen
+#site-content > :not(.won) {
+  .show-when-won {
+    display: none;
+  }
+}
+
+.level-container {
+  //flex: 1;
+  transition: none;
+}
+
+.won {
+  .level-container {
+    //height: 60%;
+  }
+  .show-when-won {
+    //visibility: initial;
+  }
+  .show-while-playing {
+    display: none;
+  }
+}
+
+.text-right {
+  text-align: right;
+}
+
+#continue-button {
+  margin-bottom: 2px;
+  @include breakpoint(small down) {
+    margin-bottom: 0;
+    padding: 0.3em .6em;
+  }
+}
+
+#play-button {
+  @include breakpoint(small down) {
+    margin-bottom: 2px;
+  }
+}
+
+#help-button {
+  margin: 0;
+  padding: 0.4em 0.4em;
+  max-width: 3em;
+  @include breakpoint(smedium down) {
+    padding: 0.2em 0.2em;
+    max-width: 2em;
+  }
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+
+body {
+  overscroll-behavior: contain;
+  user-select: none;
+}
+
+#site-content {
+  overflow: visible;
+}
+div.mainContainer{
+  overflow-x: hidden;
+
+}
+
+//#img-sound:before {
+//  content: "";
+//  max-width: 1.4em;
+//  background: url('../img/speaker.svg')
+//}
+
+.clickable{
+  cursor: pointer;
+}
+
+#share-button svg{
+  cursor: pointer;
+  max-width: 1.5rem;
+}

src/scss/wordRotator.scss

@@ -30,7 +30,8 @@ nav.top-bar.title-bar {
   transition: none;
   position: absolute;
   left: 50%;
-  transform: translate(-50%);
+  top: 50%;
+  transform: translate(-50%, -50%);
   border: 3px solid white;
   border-radius: 50%;
   visibility: hidden;
@@ -109,21 +110,24 @@ $coinTowerDimension: 28px;
 
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
-      transform: rotate(#{$startDegree}deg);
+      //transform: rotate(#{$startDegree}deg);
+      transform: #{map-get($degreeMatrix, $startDegree)};
     }
     100% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
     }
   }
   @keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
     0% {
-      transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      //transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
+      transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i)+90)}
     }
     100% {
-      transform: rotate(#{$startDegree+90}deg);
+      //transform: rotate(#{$startDegree+90}deg);
+      transform: #{map-get($degreeMatrix, $startDegree+90)};
     }
   }
-
 }
 
 .segment:not(.segment-row):not(.segment-triangle) {
@@ -178,12 +182,14 @@ $coinTowerDimension: 28px;
   &:not(.rotating) {
     @for $i from 1 through length($rotationDegrees) {
       &.rotate-#{nth($rotationDegrees, $i)} {
-        transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        //transform: rotate(#{nth($rotationDegrees, $i)}deg);
+        transform: #{map-get($degreeMatrix, nth($rotationDegrees, $i))};
         background-color: inherit;
         z-index: 1;
         > .child-container {
           > .segment {
-            transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            //transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
+            transform:  #{map-get($degreeMatrix, 360- nth($rotationDegrees, $i))};
             background-color: inherit;
             z-index: 1;
 
@@ -194,7 +200,8 @@ $coinTowerDimension: 28px;
               }
 
               &.rotate-#{nth($rotationDegrees, $j)} {
-                transform: rotate(#{$animationName}deg);
+                //transform: rotate(#{$animationName}deg);
+                transform: #{map-get($degreeMatrix, $animationName)};
                 background-color: inherit;
                 z-index: 1;