Merge pull request #18 from danielabar/feature/15-gaze-into-darkness

Feature/15 gaze into darkness
danielabar · Dec 31, 2016 · 852f600 · 852f600
2 parents 4d16288 + 2749301
commit 852f600
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 38 deletions.
diff --git a/css/_owl.scss b/css/_owl.scss
@@ -106,6 +106,11 @@
   animation: shrink 0.5s ease 0s alternate infinite;
 }
 
+.wing {
+  transform: rotateZ(0) rotateX(0);
+  transition: transform 1s ease;
+}
+
 .left-wing {
   transform-origin: right top;
 }
@@ -124,6 +129,14 @@
   animation: flap-right 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s alternate infinite;
 }
 
+.right-wing.forward-up {
+  transform: rotateZ(-71deg) rotateX(160deg);
+}
+
+.left-wing.forward-up {
+  transform: rotateZ(66deg) rotateX(160deg);
+}
+
 .foot {
   transform-origin: center top;
 }

diff --git a/docs/bundle-58aad24c8c76be345d78.js.map b/docs/bundle-58aad24c8c76be345d78.js.map
diff --git a/docs/bundle-58aad24c8c76be345d78.js → docs/bundle-d64fe67000bcba6e6f93.js b/docs/bundle-58aad24c8c76be345d78.js → docs/bundle-d64fe67000bcba6e6f93.js
diff --git a/docs/bundle-d64fe67000bcba6e6f93.js.map b/docs/bundle-d64fe67000bcba6e6f93.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
   <link rel="shortcut icon" href="owl.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" integrity="sha256-MSeNrYhmfZbyTUAhVy7w153T7LFxQfCf/DBDjtbvZdg=" crossorigin="anonymous" />
   <!-- rev'd css bundle injected here -->
-<link href="/styles-58aad24c8c76be345d78.css" rel="stylesheet"></head>
+<link href="/styles-d64fe67000bcba6e6f93.css" rel="stylesheet"></head>
 <body>
 
   <!-- icons -->
@@ -185,14 +185,6 @@
             class="foot right-foot"
             d="M 278.77371,458.29306 c -1.99173,-0.73718 -4.84715,-2.51473 -6.34539,-3.95014 -2.67134,-2.55931 -2.77643,-2.57889 -5.42958,-1.01164 -7.46315,4.4086 -15.16181,-0.5332 -13.5313,-8.68578 0.50712,-2.53559 0.51614,-2.53812 13.01069,-3.64429 14.83858,-1.3137 29.96202,-3.92786 40.67574,-7.03099 l 7.76761,-2.24981 3.1899,6.6562 c 4.08143,8.51654 4.19261,12.23619 0.42395,14.18503 -3.62356,1.87382 -8.01364,1.81421 -11.34562,-0.15404 -2.61966,-1.54746 -2.72633,-1.52816 -4.58022,0.82869 -3.8298,4.86879 -16.8694,7.63515 -23.83578,5.05677 z"/>
 
-          <path
-            class="wing right-wing"
-            d="M 394.80557,376.54941 c -3.78303,-1.2248 -7.07722,-2.4259 -7.32042,-2.6691 -0.24318,-0.24319 1.24817,-5.44485 3.31414,-11.55925 6.38509,-18.89716 8.19201,-39.51432 5.26662,-60.09263 -0.75063,-5.28029 -3.47974,-18.35955 -6.06468,-29.065 -5.74315,-23.78509 -7.52917,-35.21033 -7.51179,-48.0532 0.0125,-9.19628 1.18665,-21.21102 2.16895,-22.19333 1.14268,-1.14268 19.14794,9.48151 29.66199,17.50237 7.87513,6.00769 20.58724,18.87873 25.00337,25.31596 4.7118,6.86822 9.69973,17.52865 11.784,25.18533 2.77309,10.18709 2.78486,28.42512 0.0255,39.5658 -3.64902,14.73282 -9.68075,28.09233 -18.83686,41.7213 -10.39347,15.47077 -22.05077,26.68989 -27.64992,26.61062 -1.62948,-0.0231 -6.0579,-1.04406 -9.84094,-2.26887 z"/>
-
-          <path
-            class="wing left-wing"
-            d="M 50.928836,372.59513 C 36.691964,360.67956 21.887503,337.86345 15.292583,317.67381 6.0295926,289.31616 9.7176526,263.61853 26.272431,241.16856 c 8.375614,-11.3582 24.721733,-25.44362 39.333355,-33.89349 l 4.36445,-2.52394 0.696792,4.02149 c 1.066608,6.15587 0.786462,30.24033 -0.455709,39.17774 -0.609148,4.38281 -2.645315,15.98437 -4.524814,25.78125 -3.316113,17.28521 -3.418466,18.46467 -3.457626,39.84375 -0.04465,24.3769 1.223901,35.19671 6.016622,51.31732 l 2.620009,8.81257 -2.468337,1.00533 c -1.357585,0.55293 -4.788649,1.18588 -7.624587,1.40655 -4.926845,0.38336 -5.364801,0.22666 -9.84375,-3.522 z"/>
-
           <path
             class="eye-liner"
             d="M 139.99134,193.12854 c -14.27462,-3.13471 -25.4951,-9.37648 -36.19675,-20.13563 -6.640753,-6.67644 -8.846604,-9.68484 -12.442518,-16.96946 C 80.129659,133.28904 82.09616,108.75622 96.791681,88.162286 116.28759,60.841223 155.4577,50.828369 186.96115,65.112723 c 14.1797,6.429379 27.4002,18.865196 33.88695,31.875648 l 3.76921,7.559929 1.59597,-4.0021 c 4.26466,-10.694245 13.49132,-22.232043 23.47705,-29.35772 13.06681,-9.324279 26.57576,-13.550623 43.31278,-13.550623 13.81681,0 21.75955,1.796754 33.9821,7.687202 8.61664,4.152645 10.84425,5.764413 18.36112,13.285031 7.18745,7.191027 9.25767,9.982505 12.95262,17.465267 16.66695,33.752753 2.86475,72.696033 -31.74511,89.569743 -13.66565,6.66255 -28.61192,9.11684 -43.125,7.08144 -6.70586,-0.94046 -19.79782,-4.54365 -19.04427,-5.24137 0.16184,-0.14986 3.24739,0.50199 6.85677,1.44857 8.53637,2.23868 26.05956,2.40867 35.43992,0.34379 3.71117,-0.81694 10.71254,-3.38805 15.55859,-5.71359 7.3855,-3.54419 10.13097,-5.54111 16.96947,-12.3428 13.95854,-13.88342 19.39774,-27.25446 18.53701,-45.56903 C 356.97805,109.30484 350.80967,96.25628 338.3476,84.616096 330.47436,77.262119 323.7178,73.219384 313.20497,69.57221 302.42671,65.832947 285.49484,64.919498 273.93673,67.453747 253.72916,71.884492 235.71985,85.547794 227.48916,102.6926 l -2.95569,6.15679 -3.30341,-6.62139 c -4.69239,-9.405464 -16.72031,-21.266259 -26.86372,-26.490454 -12.8005,-6.59268 -19.60334,-8.229602 -34.21875,-8.233825 -15.10956,-0.0044 -21.00888,1.327988 -33.47866,7.561127 -14.90719,7.451498 -26.63998,20.434688 -31.969534,35.376622 -3.138216,8.79829 -3.871927,23.36873 -1.654758,32.86107 5.662824,24.24416 27.152332,43.31666 54.101302,48.01629 13.02715,2.27181 24.66706,1.18056 39.7204,-3.72383 1.03125,-0.33598 -0.30168,0.42532 -2.96205,1.69179 -10.29968,4.90313 -30.8806,6.70366 -43.91295,3.84175 z
@@ -224,6 +216,15 @@
                 d="M 295.38254,128.05032 c 2.80524,-2.80525 -0.12345,-8.84013 -3.09375,-6.375 -2.30434,1.91242 -1.25667,7.5 1.40625,7.5 0.30937,0 1.06875,-0.50625 1.6875,-1.125 z"/>
             </g><!--//right-eye-->
           </g><!--//eyes-->
+
+          <path
+            class="wing right-wing"
+            d="M 394.80557,376.54941 c -3.78303,-1.2248 -7.07722,-2.4259 -7.32042,-2.6691 -0.24318,-0.24319 1.24817,-5.44485 3.31414,-11.55925 6.38509,-18.89716 8.19201,-39.51432 5.26662,-60.09263 -0.75063,-5.28029 -3.47974,-18.35955 -6.06468,-29.065 -5.74315,-23.78509 -7.52917,-35.21033 -7.51179,-48.0532 0.0125,-9.19628 1.18665,-21.21102 2.16895,-22.19333 1.14268,-1.14268 19.14794,9.48151 29.66199,17.50237 7.87513,6.00769 20.58724,18.87873 25.00337,25.31596 4.7118,6.86822 9.69973,17.52865 11.784,25.18533 2.77309,10.18709 2.78486,28.42512 0.0255,39.5658 -3.64902,14.73282 -9.68075,28.09233 -18.83686,41.7213 -10.39347,15.47077 -22.05077,26.68989 -27.64992,26.61062 -1.62948,-0.0231 -6.0579,-1.04406 -9.84094,-2.26887 z"/>
+
+          <path
+            class="wing left-wing"
+            d="M 50.928836,372.59513 C 36.691964,360.67956 21.887503,337.86345 15.292583,317.67381 6.0295926,289.31616 9.7176526,263.61853 26.272431,241.16856 c 8.375614,-11.3582 24.721733,-25.44362 39.333355,-33.89349 l 4.36445,-2.52394 0.696792,4.02149 c 1.066608,6.15587 0.786462,30.24033 -0.455709,39.17774 -0.609148,4.38281 -2.645315,15.98437 -4.524814,25.78125 -3.316113,17.28521 -3.418466,18.46467 -3.457626,39.84375 -0.04465,24.3769 1.223901,35.19671 6.016622,51.31732 l 2.620009,8.81257 -2.468337,1.00533 c -1.357585,0.55293 -4.788649,1.18588 -7.624587,1.40655 -4.926845,0.38336 -5.364801,0.22666 -9.84375,-3.522 z"/>
+
         </g><!--//own-graphic-->
       </g><!--//owl-container-->
     </svg><!--//owl-svg-->
@@ -286,5 +287,5 @@ <h1 class="modal-title">Welcome to Eye Hoot</h1>
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js" integrity="sha256-zZFgUYWREnXJDw3PMQASiGmzHVL+VNfcA5eaXhipwag=" crossorigin="anonymous"></script>
   <!-- rev'd js bundle injected here -->
-<script type="text/javascript" src="/bundle-58aad24c8c76be345d78.js"></script></body>
+<script type="text/javascript" src="/bundle-d64fe67000bcba6e6f93.js"></script></body>
 </html>
diff --git a/docs/styles-58aad24c8c76be345d78.css.map b/docs/styles-58aad24c8c76be345d78.css.map
diff --git a/docs/styles-58aad24c8c76be345d78.css → docs/styles-d64fe67000bcba6e6f93.css b/docs/styles-58aad24c8c76be345d78.css → docs/styles-d64fe67000bcba6e6f93.css
diff --git a/docs/styles-d64fe67000bcba6e6f93.css.map b/docs/styles-d64fe67000bcba6e6f93.css.map
diff --git a/index.template.ejs b/index.template.ejs
@@ -185,14 +185,6 @@
             class="foot right-foot"
             d="M 278.77371,458.29306 c -1.99173,-0.73718 -4.84715,-2.51473 -6.34539,-3.95014 -2.67134,-2.55931 -2.77643,-2.57889 -5.42958,-1.01164 -7.46315,4.4086 -15.16181,-0.5332 -13.5313,-8.68578 0.50712,-2.53559 0.51614,-2.53812 13.01069,-3.64429 14.83858,-1.3137 29.96202,-3.92786 40.67574,-7.03099 l 7.76761,-2.24981 3.1899,6.6562 c 4.08143,8.51654 4.19261,12.23619 0.42395,14.18503 -3.62356,1.87382 -8.01364,1.81421 -11.34562,-0.15404 -2.61966,-1.54746 -2.72633,-1.52816 -4.58022,0.82869 -3.8298,4.86879 -16.8694,7.63515 -23.83578,5.05677 z"/>
 
-          <path
-            class="wing right-wing"
-            d="M 394.80557,376.54941 c -3.78303,-1.2248 -7.07722,-2.4259 -7.32042,-2.6691 -0.24318,-0.24319 1.24817,-5.44485 3.31414,-11.55925 6.38509,-18.89716 8.19201,-39.51432 5.26662,-60.09263 -0.75063,-5.28029 -3.47974,-18.35955 -6.06468,-29.065 -5.74315,-23.78509 -7.52917,-35.21033 -7.51179,-48.0532 0.0125,-9.19628 1.18665,-21.21102 2.16895,-22.19333 1.14268,-1.14268 19.14794,9.48151 29.66199,17.50237 7.87513,6.00769 20.58724,18.87873 25.00337,25.31596 4.7118,6.86822 9.69973,17.52865 11.784,25.18533 2.77309,10.18709 2.78486,28.42512 0.0255,39.5658 -3.64902,14.73282 -9.68075,28.09233 -18.83686,41.7213 -10.39347,15.47077 -22.05077,26.68989 -27.64992,26.61062 -1.62948,-0.0231 -6.0579,-1.04406 -9.84094,-2.26887 z"/>
-
-          <path
-            class="wing left-wing"
-            d="M 50.928836,372.59513 C 36.691964,360.67956 21.887503,337.86345 15.292583,317.67381 6.0295926,289.31616 9.7176526,263.61853 26.272431,241.16856 c 8.375614,-11.3582 24.721733,-25.44362 39.333355,-33.89349 l 4.36445,-2.52394 0.696792,4.02149 c 1.066608,6.15587 0.786462,30.24033 -0.455709,39.17774 -0.609148,4.38281 -2.645315,15.98437 -4.524814,25.78125 -3.316113,17.28521 -3.418466,18.46467 -3.457626,39.84375 -0.04465,24.3769 1.223901,35.19671 6.016622,51.31732 l 2.620009,8.81257 -2.468337,1.00533 c -1.357585,0.55293 -4.788649,1.18588 -7.624587,1.40655 -4.926845,0.38336 -5.364801,0.22666 -9.84375,-3.522 z"/>
-
           <path
             class="eye-liner"
             d="M 139.99134,193.12854 c -14.27462,-3.13471 -25.4951,-9.37648 -36.19675,-20.13563 -6.640753,-6.67644 -8.846604,-9.68484 -12.442518,-16.96946 C 80.129659,133.28904 82.09616,108.75622 96.791681,88.162286 116.28759,60.841223 155.4577,50.828369 186.96115,65.112723 c 14.1797,6.429379 27.4002,18.865196 33.88695,31.875648 l 3.76921,7.559929 1.59597,-4.0021 c 4.26466,-10.694245 13.49132,-22.232043 23.47705,-29.35772 13.06681,-9.324279 26.57576,-13.550623 43.31278,-13.550623 13.81681,0 21.75955,1.796754 33.9821,7.687202 8.61664,4.152645 10.84425,5.764413 18.36112,13.285031 7.18745,7.191027 9.25767,9.982505 12.95262,17.465267 16.66695,33.752753 2.86475,72.696033 -31.74511,89.569743 -13.66565,6.66255 -28.61192,9.11684 -43.125,7.08144 -6.70586,-0.94046 -19.79782,-4.54365 -19.04427,-5.24137 0.16184,-0.14986 3.24739,0.50199 6.85677,1.44857 8.53637,2.23868 26.05956,2.40867 35.43992,0.34379 3.71117,-0.81694 10.71254,-3.38805 15.55859,-5.71359 7.3855,-3.54419 10.13097,-5.54111 16.96947,-12.3428 13.95854,-13.88342 19.39774,-27.25446 18.53701,-45.56903 C 356.97805,109.30484 350.80967,96.25628 338.3476,84.616096 330.47436,77.262119 323.7178,73.219384 313.20497,69.57221 302.42671,65.832947 285.49484,64.919498 273.93673,67.453747 253.72916,71.884492 235.71985,85.547794 227.48916,102.6926 l -2.95569,6.15679 -3.30341,-6.62139 c -4.69239,-9.405464 -16.72031,-21.266259 -26.86372,-26.490454 -12.8005,-6.59268 -19.60334,-8.229602 -34.21875,-8.233825 -15.10956,-0.0044 -21.00888,1.327988 -33.47866,7.561127 -14.90719,7.451498 -26.63998,20.434688 -31.969534,35.376622 -3.138216,8.79829 -3.871927,23.36873 -1.654758,32.86107 5.662824,24.24416 27.152332,43.31666 54.101302,48.01629 13.02715,2.27181 24.66706,1.18056 39.7204,-3.72383 1.03125,-0.33598 -0.30168,0.42532 -2.96205,1.69179 -10.29968,4.90313 -30.8806,6.70366 -43.91295,3.84175 z
@@ -224,6 +216,15 @@
                 d="M 295.38254,128.05032 c 2.80524,-2.80525 -0.12345,-8.84013 -3.09375,-6.375 -2.30434,1.91242 -1.25667,7.5 1.40625,7.5 0.30937,0 1.06875,-0.50625 1.6875,-1.125 z"/>
             </g><!--//right-eye-->
           </g><!--//eyes-->
+
+          <path
+            class="wing right-wing"
+            d="M 394.80557,376.54941 c -3.78303,-1.2248 -7.07722,-2.4259 -7.32042,-2.6691 -0.24318,-0.24319 1.24817,-5.44485 3.31414,-11.55925 6.38509,-18.89716 8.19201,-39.51432 5.26662,-60.09263 -0.75063,-5.28029 -3.47974,-18.35955 -6.06468,-29.065 -5.74315,-23.78509 -7.52917,-35.21033 -7.51179,-48.0532 0.0125,-9.19628 1.18665,-21.21102 2.16895,-22.19333 1.14268,-1.14268 19.14794,9.48151 29.66199,17.50237 7.87513,6.00769 20.58724,18.87873 25.00337,25.31596 4.7118,6.86822 9.69973,17.52865 11.784,25.18533 2.77309,10.18709 2.78486,28.42512 0.0255,39.5658 -3.64902,14.73282 -9.68075,28.09233 -18.83686,41.7213 -10.39347,15.47077 -22.05077,26.68989 -27.64992,26.61062 -1.62948,-0.0231 -6.0579,-1.04406 -9.84094,-2.26887 z"/>
+
+          <path
+            class="wing left-wing"
+            d="M 50.928836,372.59513 C 36.691964,360.67956 21.887503,337.86345 15.292583,317.67381 6.0295926,289.31616 9.7176526,263.61853 26.272431,241.16856 c 8.375614,-11.3582 24.721733,-25.44362 39.333355,-33.89349 l 4.36445,-2.52394 0.696792,4.02149 c 1.066608,6.15587 0.786462,30.24033 -0.455709,39.17774 -0.609148,4.38281 -2.645315,15.98437 -4.524814,25.78125 -3.316113,17.28521 -3.418466,18.46467 -3.457626,39.84375 -0.04465,24.3769 1.223901,35.19671 6.016622,51.31732 l 2.620009,8.81257 -2.468337,1.00533 c -1.357585,0.55293 -4.788649,1.18588 -7.624587,1.40655 -4.926845,0.38336 -5.364801,0.22666 -9.84375,-3.522 z"/>
+
         </g><!--//own-graphic-->
       </g><!--//owl-container-->
     </svg><!--//owl-svg-->

diff --git a/js/animation-control.js b/js/animation-control.js
@@ -40,6 +40,11 @@ let farFocus = function() {
   windowSvg.classList.toggle('window-visible');
 }
 
+let coverEyes = function() {
+  rightWing.classList.toggle('forward-up');
+  leftWing.classList.toggle('forward-up');
+}
+
 let longBreak = function() {
   owlGraphic.classList.toggle('wobble');
   leftWing.classList.toggle('flap-left');
@@ -51,7 +56,8 @@ let longBreak = function() {
 let EYE_ANIMATIONS = [
   sideToSide,
   aroundLeft,
-  upDown, 
+  coverEyes,
+  upDown,
   aroundRight,
   blinkEyes,
   farFocus
@@ -60,6 +66,7 @@ let EYE_ANIMATIONS = [
 let EYE_ANIMATIONS_MESSAGES = [
   'Move your eyes from side to side',
   'Move your eyes around to the left',
+  'Cover your eyes',
   'Move your eyes up and down',
   'Move your eyes around to the right',
   'Open and close your eyes',

diff --git a/js/app.js b/js/app.js
@@ -97,9 +97,9 @@ let stopBreakAnimation = function() {
   animationControl.startStopLongBreakAnimation();
 };
 
-let notify = function() {
-  let n = new Notification('Eye hoot', {
-    body: 'Time for a break!',
+let notify = function(message) {
+  let n = new Notification('Eye Hoot', {
+    body: message,
     icon: owlImage,
     requireInteraction: true
   });
@@ -131,12 +131,12 @@ let startAnimationClock = function(interval) {
     clockFace: 'MinuteCounter',
     countdown: true,
     callbacks: {
-      stop: stopClockHandler
+      stop: stopAnimationClockHandler
     }
   });
 }
 
-let stopClockHandler = function() {
+let stopAnimationClockHandler = function() {
   if (timeElapsed < settings.longBreakInterval) {
     stopAnimation();
     timeElapsed = timeElapsed + settings.eyeExerciseDuration + settings.eyeExerciseInterval;
@@ -163,13 +163,17 @@ let startWorkClock = function() {
     clockFace: 'MinuteCounter',
     countdown: true,
     callbacks: {
-      stop: function() {
-        notify();
-      }
+      stop: stopWorkClockHandler
     }
   });
 }
 
+let stopWorkClockHandler = function() {
+  let notifyBody = timeElapsed < settings.longBreakInterval ?
+    'Time for a short break' : 'Time for a long break';
+  notify(notifyBody);
+}
+
 // public api
 let app = {
   start,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eye-hoot",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A web application that regularly reminds you to take short breaks and do eye exercises for your health.",
   "main": "index.js",
   "scripts": {

diff --git a/webpack-dev.config.js b/webpack-dev.config.js
@@ -6,7 +6,7 @@ var baseConfig = require('./webpack.config.js');
 
 // environment specific config
 var definePlugin = new webpack.DefinePlugin({
-  DEFAULT_EYE_EXERCISE_DURATION: "10",
+  DEFAULT_EYE_EXERCISE_DURATION: "5",
   DEFAULT_LONG_BREAK_DURATION: "60",
   DEFAULT_EYE_EXERCISE_INTERVAL: "60",
   DEFAULT_LONG_BREAK_INTERVAL: "120"

diff --git a/webpack-production.config.js b/webpack-production.config.js
@@ -14,7 +14,7 @@ var cleanPlugin = new CleanWebpackPlugin(['docs'], {
 
 // environment specific config
 var definePlugin = new webpack.DefinePlugin({
-  DEFAULT_EYE_EXERCISE_DURATION: "10",    // 10 seconds
+  DEFAULT_EYE_EXERCISE_DURATION: "15",    // 15 seconds
   DEFAULT_LONG_BREAK_DURATION: "300",     // 5 * 60 = 5 minutes
   DEFAULT_EYE_EXERCISE_INTERVAL: "900",   // 15 * 60 = 15 minutes
   DEFAULT_LONG_BREAK_INTERVAL: "3600"     // 60 * 60 = 1 hour