From 6c153e7ab0ad7927acbe16282e8386956876e80e Mon Sep 17 00:00:00 2001
From: Ilkka Oksanen <ilkka.oks4nen@gmail.com>
Date: Tue, 31 Oct 2017 17:56:18 +0200
Subject: [PATCH] Add fancier animations

---
 coffee_scale/static/css/coffee.css | 11 +++++---
 coffee_scale/static/js/coffee.js   | 40 +++++++++++++++++++++---------
 coffee_scale/templates/coffee.html |  6 +++--
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/coffee_scale/static/css/coffee.css b/coffee_scale/static/css/coffee.css
index 2594006..de6d2be 100644
--- a/coffee_scale/static/css/coffee.css
+++ b/coffee_scale/static/css/coffee.css
@@ -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 {
diff --git a/coffee_scale/static/js/coffee.js b/coffee_scale/static/js/coffee.js
index 95f338b..a0f3269 100644
--- a/coffee_scale/static/js/coffee.js
+++ b/coffee_scale/static/js/coffee.js
@@ -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);
diff --git a/coffee_scale/templates/coffee.html b/coffee_scale/templates/coffee.html
index faf215c..5484f97 100644
--- a/coffee_scale/templates/coffee.html
+++ b/coffee_scale/templates/coffee.html
@@ -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>