feat: negative timers

This commit is contained in:
cv
2021-05-03 22:02:04 +02:00
parent 9715e13152
commit 2b568aa7c6
5 changed files with 98 additions and 36 deletions
@@ -2,7 +2,7 @@ import { memo, useEffect, useState } from 'react';
import { formatDisplay } from '../../dateConfig';
import styles from './Countdown.module.css';
const Countdown = ({ time, small, hideZeroHours }) => {
const Countdown = ({ time, small, negative, hideZeroHours }) => {
const [clock, setClock] = useState(time);
let display = '-- : -- : --';
@@ -12,10 +12,13 @@ const Countdown = ({ time, small, hideZeroHours }) => {
// prepare display string
if (clock != null && !isNaN(clock))
display = formatDisplay(clock, hideZeroHours);
display = formatDisplay(Math.abs(clock), hideZeroHours);
const colour = negative ? '#ff7597' : '#fffffa';
return (
<div className={small ? styles.countdownClockSmall : styles.countdownClock}>
<div
className={small ? styles.countdownClockSmall : styles.countdownClock}
style={{ color: colour }}
>
{display}
</div>
);
@@ -4,9 +4,8 @@ import styles from './MyProgressBar.module.css';
export default function MyProgressBar(props) {
const { now, complete, showElapsed } = props;
const percentComplete = showElapsed
? clamp((100 - (now * 100) / complete + 2), 0, 100)
: clamp((now * 100) / complete - 2, 0, 100)
? clamp((100 - (now * 100) / complete), 0, 100)
: clamp((now * 100) / complete, 0, 100)
return (
<div className={styles.progress}>