Evaluate arc progress

Author: Pascal Wegner

packages/pwa/src/components/Arc/Arc.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 
-export function Arc(props: React.SVGProps<SVGSVGElement>) {
+type ArcProps = React.SVGProps<SVGSVGElement> & {
+  factor: number;
+};
+
+export function Arc({ factor, ...restProps }: ArcProps) {
   return (
     <svg
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 282 282"
-      {...props}
+      {...restProps}
     >
       <circle
         cx={141}
@@ -20,6 +24,8 @@ export function Arc(props: React.SVGProps<SVGSVGElement>) {
         d="M280 141a138.998 138.998 0 01-237.288 98.288A139.01 139.01 0 012 141 138.997 138.997 0 01141 2a138.997 138.997 0 01139 139h0z"
         stroke="#0057FF"
         strokeWidth={4}
+        className="origin-center -rotate-90"
+        style={{ strokeDasharray: 877, strokeDashoffset: factor * 877 }}
       />
     </svg>
   );

packages/pwa/src/components/Counter/Counter.tsx

@@ -2,14 +2,26 @@ import * as React from 'react';
 
 import { DurationInput } from '../DurationInput/DurationInput';
 import { Arc } from '../Arc/Arc';
+import { getMinutes, getSeconds } from 'date-fns';
 
 type CounterProps = {
   timeLeft: Date;
   roundsLeft: number;
   rounds: number;
+  timeTotal: Date;
 };
 
-export function Counter({ timeLeft, roundsLeft, rounds }: CounterProps) {
+export function Counter({
+  timeTotal,
+  timeLeft,
+  roundsLeft,
+  rounds,
+}: CounterProps) {
+  const factor =
+    1 -
+    (getSeconds(timeLeft) + getMinutes(timeLeft)) /
+      (getSeconds(timeTotal) + getMinutes(timeTotal));
+
   return (
     <div>
       <div className="flex flex-col items-center mb-20 z-[1]">
@@ -19,7 +31,7 @@ export function Counter({ timeLeft, roundsLeft, rounds }: CounterProps) {
         }/${rounds}`}</span>
       </div>
       <div className="flex flex-col justify-center items-center relative w-72 h-72">
-        <Arc className="absolute" />
+        <Arc className="absolute origin-center" factor={factor} />
         <div className="z-[1]">
           <DurationInput value={timeLeft} readOnly dataTestId={'time-left'} />
         </div>

packages/pwa/src/pages/index.tsx

@@ -4,6 +4,29 @@ import { useMachine } from '@xstate/react';
 import * as React from 'react';
 import { Counter } from '../components/Counter/Counter';
 import { useBeep } from '../hooks/useBeep';
+import { StateValue } from 'xstate';
+
+const getActiveTimeTotal = ({
+  breakInterval,
+  prepareTime,
+  value,
+  workInterval,
+}: {
+  value: StateValue;
+  breakInterval: Date;
+  workInterval: Date;
+  prepareTime: Date;
+}) => {
+  if (value === timerStates.WORK) {
+    return workInterval;
+  }
+
+  if (value === timerStates.BREAK) {
+    return breakInterval;
+  }
+
+  return prepareTime;
+};
 
 export default function Home() {
   const { beepBreak, beepBreakLong, beepWork, beepWorkLong } = useBeep();
@@ -72,8 +95,14 @@ export default function Home() {
     });
   };
 
-  const { breakInterval, rounds, workInterval, timeLeft, roundsLeft } =
-    state.context;
+  const {
+    breakInterval,
+    rounds,
+    workInterval,
+    timeLeft,
+    roundsLeft,
+    prepareTime,
+  } = state.context;
 
   return (
     <>
@@ -92,6 +121,12 @@ export default function Home() {
               ></FormFields>
             ) : (
               <Counter
+                timeTotal={getActiveTimeTotal({
+                  breakInterval,
+                  prepareTime,
+                  value: state.value,
+                  workInterval,
+                })}
                 timeLeft={timeLeft}
                 roundsLeft={roundsLeft}
                 rounds={rounds}