From 3a5087bdc8f10284e00558659978f942ba0afe76 Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Sat, 19 Aug 2017 23:39:33 +0200
Subject: [PATCH] Remove staircase effects for larger time units.

---
 src/Countdown.jsx       | 21 ++++++++++++---------
 src/DigitBlock.sass     |  2 +-
 src/ProgressCircle.sass |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/Countdown.jsx b/src/Countdown.jsx
index 65b64db..b0397e1 100644
--- a/src/Countdown.jsx
+++ b/src/Countdown.jsx
@@ -24,7 +24,7 @@ export default class Countdown extends React.Component {
 
   componentDidMount() {
     this.tick();
-    this.interval = setInterval(this.tick.bind(this), 1000);
+    this.interval = setInterval(this.tick.bind(this), 100);
   }
 
   componentWillUnmount() {
@@ -49,10 +49,13 @@ export default class Countdown extends React.Component {
 
     const durationMoment = moment.duration(duration);
 
-    const days = durationMoment.days();
-    const hours = durationMoment.hours();
-    const minutes = durationMoment.minutes();
-    const seconds = durationMoment.seconds();
+    const milliseconds = durationMoment.asMilliseconds();
+    const seconds = (milliseconds / 1000) % 60;
+    const minutes = (milliseconds / (60 * 1000)) % 60;
+    const hours = (milliseconds / (60 * 60 * 1000)) % 24;
+    const days = (milliseconds / (24 * 60 * 60 * 1000));
+
+    console.log({ days, hours, minutes, seconds });
 
     const size = 160; // @HACK
 
@@ -61,7 +64,7 @@ export default class Countdown extends React.Component {
       <div className={style.countdown}>
         <ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)">
           <DigitBlock suffix="d">
-            {days.toLocaleString(locale, {
+            {Math.floor(days).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -69,7 +72,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={24} progress={hours} stroke="rgb(60, 144, 60)">
           <DigitBlock suffix="h">
-            {hours.toLocaleString(locale, {
+            {Math.floor(hours).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -77,7 +80,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={60} progress={minutes} stroke="rgb(160, 154, 40)">
           <DigitBlock suffix="m">
-            {minutes.toLocaleString(locale, {
+            {Math.floor(minutes).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -85,7 +88,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)">
           <DigitBlock suffix="s">
-            {durationMoment.seconds().toLocaleString(locale, {
+            {Math.floor(seconds).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
diff --git a/src/DigitBlock.sass b/src/DigitBlock.sass
index 2c0ef54..1d4e74d 100644
--- a/src/DigitBlock.sass
+++ b/src/DigitBlock.sass
@@ -7,4 +7,4 @@
     font-size: 0.5em
     text-transform: uppercase
     font-weight: bold
-    color: #888
\ No newline at end of file
+    color: #888
diff --git a/src/ProgressCircle.sass b/src/ProgressCircle.sass
index 40d268f..31a46ce 100644
--- a/src/ProgressCircle.sass
+++ b/src/ProgressCircle.sass
@@ -5,7 +5,7 @@
   top: 0
 
 .progressValue
-  transition: stroke-dashoffset 1s linear
+  transition: stroke-dashoffset 0.15s linear
 
 .progressCircleContainer
   position: relative