Add fancier animations

2017-10-31 17:56:18 +02:00
parent 8f74c87df5
commit 6c153e7ab0
3 changed files with 39 additions and 18 deletions
@@ -47,7 +47,7 @@ body {
  background: green;
  border-radius: 10px;
 }
-#brewtime{
+.brewtime{
  text-align:right;
  position:absolute;
  right:0px;
@@ -62,10 +62,13 @@ body {
  font-size:4vw;
  color: #333;
 }
+.layertwo{
+  display: None;
+}
 noscript{
  color:red;
 }
-#text{
+.text{
  color:green;
  position:absolute;
  top:50%;
@@ -102,9 +105,9 @@ noscript{
 }
@keyframes coffeeready {
    0% {background-color:white;}
-    25% {background-color:green;}
+    25% {background-color:rgb(100, 255, 100);}
    50% {background-color:white;}
-    75% {background-color:green;}
+    75% {background-color:rgb(100, 255, 100);}
    100% {background-color:white;}
 }
@keyframes unknown {
@@ -57,16 +57,25 @@ function updateTime(ev){
 function coffeeLowEffect(ev){
    ev.detail <= 2 ? $("#text").addClass("hurry") : $("#text").removeClass("hurry");
 }
-function coffeeReadyEffect(ev){
+function coffeeReadyEffect(){
    $("body").addClass("coffeeready");
    // autoclear animation class in 10s
-    setTimeout(() => {$("body").removeClass("coffeeready");}, 10000);
+    setTimeout(function(){$("body").removeClass("coffeeready");}, 10000);
 }
-function brewAnimStart(ev){
-    $("#text").addClass("brewing");
+function hotEffect(ev){
+  var opa = Math.max(100 - ev.detail / 90000,0);
+  $("#upper").css({opacity: opa/100});
 }
-function brewAnimEnd(ev){
-    $("#text").removeClass("brewing");
+function brewAnimStart(){
+    $(".text").addClass("brewing");
+    $(".layerone").hide();
+    $(".layertwo").show();
+
+}
+function brewAnimEnd(){
+    $(".text").removeClass("brewing");
+    $(".layertwo").hide();
+    $(".layerone").show();
 }
 function brewNotifier(ev){
    var new_brewing = parseInt(ev.detail);
@@ -80,14 +89,19 @@ function brewNotifier(ev){
 function brewTimeParser(ev){
    lastBrew = new Date(parseInt(ev.detail)*1000.0);
 }
-function updateBrewDiff(ev){
+function updateBrewDiff(){
    var now = new Date();
    var timeDiff = Math.max(now.getTime() - lastBrew.getTime(), 0);
-    var timeStr = (timeDiff < 3600000)
-      ? Math.round(timeDiff / 60000) + ' min'
-      : '~' + Math.round(timeDiff / 3600000 * 2) / 2 + ' h';
+    var eve = new CustomEvent("dtUpdate", {'detail': timeDiff});
+    window.dispatchEvent(eve);
+}
+function updateBrewTime(ev){
+  var timeDiff = ev.detail;
+  var timeStr = (timeDiff < 3600000)
+    ? Math.round(timeDiff / 60000) + ' min'
+    : '~' + Math.round(timeDiff / 3600000 * 2) / 2 + ' h';

-    $("#brewtime").html(timeStr);
+  $("#brewtime").html(timeStr);
 }

 // Helpers
@@ -105,7 +119,7 @@ function resize(){
  var h = $("#container").height();
  var s = w > h ? h : w;
  var font = s * 0.8 * 0.38/Math.sqrt(3);
-  $("#text").css({ top: s*0.16-font/2 + 'px',
+  $(".text").css({ top: s*0.16-font/2 + 'px',
                   fontSize: font + 'px',
                   marginLeft: -font*3*3/10 + 'px'});
 }
@@ -130,6 +144,8 @@ $(document).ready(function(){
 window.addEventListener("brewEnd", coffeeReadyEffect);
 window.addEventListener("tick", updateTime);
 window.addEventListener("tick", updateBrewDiff);
+ window.addEventListener("dtUpdate", updateBrewTime);
+ window.addEventListener("dtUpdate", hotEffect);

 //start time based events
 setInterval(tick, 100);
@@ -18,7 +18,8 @@

 <body>
  <div id="container">
-  <span id="brewtime"></span>
+  <span id="brewtime" class="brewtime layerone"></span>
+  <span class="brewtime layertwo">:)</span>
  <span id="address">
    ka.dy.fi
    <noscript><br>This page uses JavaScript!</noscript>
@@ -28,7 +29,8 @@
  </div>
  <!--Kahvinkeitin on rikki. Varakeittimellä keitettyä kahvia saattaa olla.-->
  <div id="lower" class="normal">
-    <div id="text"></div>
+    <div id="text" class="text layerone"></div>
+    <div class="text layertwo">&nbsp;+</div>
    <div id="scale"><div id="scale2"></div></div>
  </div>
  </div>