Salet 1.6, new animations, night mode

game/begin.coffee

@@ -4,11 +4,31 @@ oneOf = require('../../lib/oneOf.coffee')
 require('salet')
 
 salet.game_id = "your-game-id-here"
-salet.game_version = "1.5"
+salet.game_version = "1.6"
 $(document).ready(() ->
   window.addEventListener('popstate', (event) ->
     salet.goBack()
   )
+  $("#night").on("click", () ->
+    if (window.night)
+      styles = {
+        "-webkit-filter": ""
+        "filter": ""
+        "background-color": ""
+      }
+      $("body").css(styles)
+      $("#night").removeClass("active")
+      window.night = false
+    else
+      styles = {
+        "-webkit-filter": "invert(1)hue-rotate(180deg)"
+        "filter": "invert(1)hue-rotate(180deg)"
+        "background-color": "#000"
+      }
+      $("body").css(styles)
+      $("#night").addClass("active")
+      window.night = true
+  )
 
   salet.beginGame()
 )

package.json

@@ -1,15 +1,15 @@
 {
   "dependencies": {
-    "salet": "^1.5.3"
+    "salet": "^1.5.4"
   },
   "private": true,
   "devDependencies": {
     "bootstrap": "^4.0.0-alpha.2",
-    "browser-sync": "^2.17.6",
+    "browser-sync": "^2.18.2",
     "browserify": "^13.1.1",
     "browserify-shim": "^3.8.8",
-    "coffee-script": "^1.11.1",
-    "coffeeify": "^2.0.1",
+    "coffee-script": "^1.12.0",
+    "coffeeify": "^2.1.0",
     "gulp": "^3.8.11",
     "gulp-coffee": "^2.3.3",
     "gulp-concat": "^2.6.1",

sass/_mixins.scss

@@ -14,11 +14,3 @@
     @include make-col($xs-width);
   }
 }
-@mixin prefix($property, $value, $prefixes: ()) {
-  @each $prefix in $prefixes {
-    #{'-' + $prefix + '-' + $property}: $value;
-  }
- 
-  // Output standard non-prefixed declaration
-  #{$property}: $value;
-}

sass/main.scss

@@ -79,10 +79,10 @@ body {
   background: $body-bg;
   .ways {
     padding: 0.5em;
-    @include make-col(8);
+    @include make-col(6);
   }
   .buttons {
-    @include make-col(4);
+    @include make-col(6);
     text-align: right;
   }
   button {
@@ -198,75 +198,6 @@ hr {
   border-color: $body-color;
 }
 
-// here we redefine animate.css animation duration, see variables.scss
-#ways_hint, ul.options {
-  -moz-animation-duration: $animation_duration !important;
-  -webkit-animation-duration: $animation_duration !important;
-  -o-animation-duration: $animation_duration !important;
-  animation-duration: $animation_duration !important;
-}
-
 .center {
   text-align: center;
 }
-
-// --- ANIMATIONS ---
-/*base code*/
-.animated {
-  @include prefix(animation-duration, 1s, webkit);
-  @include prefix(animation-fill-mode, both, webkit);
-}
-@mixin fadeOut() {
-  0% {
-    display: block;
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    padding: 0;
-    margin: 0;
-    height: 0;
-    border: 0;
-    transform: scale(0);
-    display: none;
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fadeOut {
-  @include fadeOut()
-}
-@keyframes fadeOut {
-  @include fadeOut()
-}
-.fadeOut {
-  @include prefix(animation-name, fadeOut, webkit);
-}
-@mixin fadeIn() {
-  0% {
-    padding: 0;
-    margin: 0;
-    height: 0;
-    border: 0;
-    transform: scale(0);
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    padding: auto;
-    margin: auto;
-    height: auto;
-    border: auto;
-    transform: scale(1);
-    display: none;
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadeIn {
-  @include fadeIn()
-}
-@keyframes fadeIn {
-  @include fadeIn()
-}
-.fadeIn {
-  @include prefix(animation-name, fadeIn, webkit);
-}