Dunkles Theme hinzugefügt

src/js/init.js

@@ -32,6 +32,7 @@ ThemeManager.addTheme(new Theme("blue", "blue"));
 ThemeManager.addTheme(new Theme("black", "black"));
 ThemeManager.addTheme(new Theme("green", "green"));
 ThemeManager.addTheme(new Theme("pink", "pink"));
+ThemeManager.addTheme(new Theme("dark", "dark"));
 
 ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg'));
 ShareManager.addShareButton(new SmsShareButton('img/sms.svg'));

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

@@ -22,14 +22,14 @@
     </div>
     <div class='height-30 flex-center fill-me'>
         <button class='button grow text-center' id='play-button'><span data-translation="play"></span></button>
-        <div class = 'max-width'>
+        <div class = 'max-width line-height-1'>
             <label class="switch">
-                <img src = 'img/speaker.svg'>
+                <div data-view="img/speaker.svg"></div>
                 <input type="checkbox" class = "setting" id = "play-sound">
                 <span class="slider"></span>
             </label>
             <label class="switch right">
-                <img src = 'img/music.svg'>
+                <div data-view="img/music.svg"></div>
                 <input type="checkbox" class = "setting" id = "play-music">
                 <span class="slider"></span>
             </label>

src/module/Application/pwa/translations/de.json

@@ -14,5 +14,7 @@
   "tutorial-step-2": "Um zu gewinnen, drehe die Segmente so, dass du zwei Wörter lesen kannst.",
   "tutorial-step-3": "Durch die Hilfe kannst du ein Segment lösen lassen. Die Hilfe kostet aber 25 Münzen. Probiere jetzt die Hilfe aus.",
   "tutorial-step-4": "Große Segmente drehst du, indem du diese ziehst.",
-  "extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!"
+  "extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!",
+
+  "dark":"Dunkel"
 }

src/scss/_settings.scss

@@ -1 +1,20 @@
 @import "defaultSettings";
+
+$themes: map-merge($themes,(dark: (
+        class: dark,
+        themeColor: #373737,
+        lightThemeColor: #4b4b4b,
+        linkColor: white,
+        spinnerColor: #ffffff,
+        navBarTextColor: white,
+        textColor: #ffffff,
+        textColor2: #9b9b9b,
+        lightLinkColor: #ffffff,
+        linkBorderBottom: 1px solid #ffffff,
+        linkHoverColor: #ffffff,
+        lightLinkHoverColor: #ffffff,
+        background: #000000
+)));
+
+$rotationDegrees: (90 180 270 360);
+$animationDuration: .25s;

src/scss/_wordrotatorTheme.scss

@@ -1,12 +1,60 @@
+
+
 @mixin addThemeDefinition($theme) {
-  #tutorial-pointer{
+  #tutorial-pointer {
     background: #{map-get($theme, themeColor)};
   }
+
+  #level-number-container {
+    &.in-main-menu {
+      background: #{map-get($theme, background)};
+      border-color: #{map-get($theme, textColor)};
+    }
+  }
+  .segment.segment-parent {
+    border-color: #{map-get($theme, textColor2)};
+    &.layer-2 {
+      border-color: #{map-get($theme, textColor)};
+    }
+  }
+
+  #site-content > :not(.won) .segment.locked {
+    border-color: #{map-get($theme, lightThemeColor)};
+    background-color: #{map-get($theme, themeColor)} !important;
+    > .child-container > .segment-leaf {
+      border-color:  #{map-get($theme, lightThemeColor)};
+      background-color:#{map-get($theme, themeColor)} !important;
+    }
+  }
+  .segment:not(.segment-row):not(.segment-triangle):not(.rotating) {
+    @for $i from 1 through length($rotationDegrees) {
+      &.rotate-#{nth($rotationDegrees, $i)} {
+        background-color: #{map-get($theme, background)};;
+        > .child-container {
+          > .segment {
+            background-color: #{map-get($theme, background)};;
+
+            @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)} {
+                background-color: #{map-get($theme, background)};;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
+
 body {
   @each $theme, $values in $themes {
-    @if (#{map-get($values, class)} == '') {
+    @if (map-get($values, class) == '') {
       @include addThemeDefinition($values)
     } @else {
       &.#{map-get($values, class)} {
@@ -14,4 +62,28 @@ body {
       }
     }
   }
+
+  &.dark{
+    .switch {
+      input:checked + .slider{
+        border-color:black;
+      }
+      .slider {
+        border: solid 1px white;
+        background-color: inherit;
+        padding: 1px;
+      }
+    }
+    #site-content > :not(.won) .segment.locked.layer-2 {
+      border-color: #565656;
+    }
+  }
+  &.black{
+    #site-content > :not(.won) .segment.locked {
+      background-color: #9d9d9d;
+      > .child-container > .segment-leaf {
+        background-color: #9d9d9d !important;
+      }
+    }
+  }
 }

src/scss/wordRotator.scss

@@ -98,8 +98,7 @@ $coinTowerDimension: 28px;
 }
 
 //Segments
-$rotationDegrees: (90 180 270 360);
-$animationDuration: .25s;
+
 
 @for $i from 1 through length($rotationDegrees) {
   $startDegree: ((nth($rotationDegrees, $i)+270)%360);
@@ -176,12 +175,12 @@ $animationDuration: .25s;
     @for $i from 1 through length($rotationDegrees) {
       &.rotate-#{nth($rotationDegrees, $i)} {
         transform: rotate(#{nth($rotationDegrees, $i)}deg);
-        background-color: white;
+        background-color: inherit;
         z-index: 1;
         > .child-container {
           > .segment {
             transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
-            background-color: white;
+            background-color: inherit;
             z-index: 1;
 
             @for $j from 1 through length($rotationDegrees) {
@@ -192,7 +191,7 @@ $animationDuration: .25s;
 
               &.rotate-#{nth($rotationDegrees, $j)} {
                 transform: rotate(#{$animationName}deg);
-                background-color: white;
+                background-color: inherit;
                 z-index: 1;
 
                 &.rotating {
@@ -238,7 +237,7 @@ $animationDuration: .25s;
   transition: none;
   user-select: none;
   z-index: 1;
-  background-color: white;
+  background-color: inherit;
   line-height: 0;
 
   &.segment-row {
@@ -287,15 +286,6 @@ $animationDuration: .25s;
   }
 }
 
-#site-content > :not(.won) .segment.locked {
-  border-color: #3adb76;
-  background-color: #9ffbb5 !important;
-  > .child-container > .segment-leaf {
-    border-color: #3adb76;
-    background-color: #9ffbb5 !important;
-  }
-}
-
 //Won-screen
 #site-content > :not(.won) {
   .show-when-won {
@@ -327,10 +317,15 @@ $animationDuration: .25s;
 #continue-button {
   margin-bottom: 2px;
   @include breakpoint(small down) {
-    margin-bottom: 0;
+  margin-bottom: 0;
     padding: 0.3em .6em;
   }
 }
+#play-button{
+  @include breakpoint(small down){
+    margin-bottom: 2px;
+  }
+}
 
 #help-button {
   margin: 0;
@@ -338,7 +333,18 @@ $animationDuration: .25s;
     padding: 0.4em 0.6em;
   }
 }
-
+.line-height-1{
+  line-height:1;
+}
 body{
   overscroll-behavior: contain;
+}
+#site-content{
+  overflow: hidden;
+}
+
+#img-sound:before{
+  content: "";
+  max-width: 1.4em;
+  background: url('../img/speaker.svg')
 }