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 {
- {days.toLocaleString(locale, { + {Math.floor(days).toLocaleString(locale, { minimumIntegerDigits, useGrouping, })} @@ -69,7 +72,7 @@ export default class Countdown extends React.Component { - {hours.toLocaleString(locale, { + {Math.floor(hours).toLocaleString(locale, { minimumIntegerDigits, useGrouping, })} @@ -77,7 +80,7 @@ export default class Countdown extends React.Component { - {minutes.toLocaleString(locale, { + {Math.floor(minutes).toLocaleString(locale, { minimumIntegerDigits, useGrouping, })} @@ -85,7 +88,7 @@ export default class Countdown extends React.Component { - {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