Adding duration time in stats data

components/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { intervalToDuration } from "date-fns";
 
 import Board from "./Board";
 import Keyboard from "./Keyboard";
@@ -48,6 +49,7 @@ export default function App(props: Props) {
       return;
     }
 
+    game.state.startedAt = game.state.startedAt ?? new Date().getTime();
     game.setState({
       ...game.state,
       answers: game.state.answers.map((answer, i) => {
@@ -214,6 +216,10 @@ export default function App(props: Props) {
           },
           currentStreak,
           maxStreak: Math.max(stats.maxStreak, currentStreak),
+          duration: intervalToDuration({
+            start: new Date(game.state.startedAt),
+            end: new Date(game.state.lastCompletedDate || new Date().getTime()),
+          }),
         });
       } else if (game.state.attempt === 5) {
         if (typeof game.submitAnswer === "function") {
@@ -241,6 +247,10 @@ export default function App(props: Props) {
           },
           currentStreak: 0,
           maxStreak: stats.maxStreak,
+          duration: intervalToDuration({
+            start: new Date(game.state.startedAt),
+            end: new Date(game.state.lastCompletedDate || new Date().getTime()),
+          }),
         });
 
         const failureMessage = getFailureMessage(

components/StatsModal.tsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { Duration } from "date-fns";
 
 import Modal from "./Modal";
 
@@ -90,6 +91,9 @@ export default function StatsModal(props: Props) {
       return text;
     }
 
+    text += `\nDurasi: ${stats.duration.hours}:${pad0(
+      stats.duration.minutes
+    )}:${pad0(stats.duration.seconds)}`;
     text += "\n" + window.location.href;
     return text;
   }
@@ -144,6 +148,13 @@ export default function StatsModal(props: Props) {
     ctx.fillStyle = resolvedTheme === "dark" ? "#ffffff" : "#111827";
     ctx.fillText(text, canvas.width / 2, 300);
     ctx.font = "32px sans-serif";
+    ctx.fillText(
+      `Durasi: ${stats.duration.hours}:${pad0(stats.duration.minutes)}:${pad0(
+        stats.duration.seconds
+      )}`,
+      canvas.width / 2,
+      canvas.height - 300
+    );
     ctx.fillText("katla.vercel.app", canvas.width / 2, canvas.height - 150);
 
     answerStates.forEach((states, y) => {
@@ -278,7 +289,10 @@ export default function StatsModal(props: Props) {
           <WordDefinition answer={answer} />
           <div className="flex items-center justify-between w-3/4 m-auto my-8 space-x-2">
             {props.remainingTime ? (
-              <TimeCounter time={props.remainingTime} />
+              <TimeCounter
+                time={props.remainingTime}
+                duration={props.stats.duration}
+              />
             ) : (
               <div />
             )}
@@ -413,17 +427,33 @@ function WordDefinition({ answer }) {
   );
 }
 
-function TimeCounter({ time }: { time: ReturnType<typeof useRemainingTime> }) {
+function TimeCounter({
+  time,
+  duration,
+}: {
+  time: ReturnType<typeof useRemainingTime>;
+  duration: Duration;
+}) {
   const remainingTime = `${time.hours}:${pad0(time.minutes)}:${pad0(
     time.seconds
   )}`;
 
+  const finishedTime = `${duration.hours}:${pad0(duration.minutes)}:${pad0(
+    duration.seconds
+  )}`;
+
   return (
-    <div className="text-center flex flex-1 flex-col">
-      <div className="font-semibold uppercase text-xs md:text-md">
-        Katla berikutnya
+    <div>
+      <div className="text-center flex flex-1 flex-col mb-6">
+        <div className="font-semibold uppercase text-xs md:text-md">Durasi</div>
+        <div className="text-xl md:text-4xl">{finishedTime}</div>
+      </div>
+      <div className="text-center flex flex-1 flex-col">
+        <div className="font-semibold uppercase text-xs md:text-md">
+          Katla berikutnya
+        </div>
+        <div className="text-xl md:text-4xl">{remainingTime}</div>
       </div>
-      <div className="text-xl md:text-4xl">{remainingTime}</div>
     </div>
   );
 }

pages/arsip/[num].tsx

@@ -37,6 +37,7 @@ const initialStats: GameStats = {
   },
   currentStreak: 0,
   maxStreak: 0,
+  duration: null,
 };
 
 export default function Arsip(props: Props) {

pages/index.tsx

@@ -37,6 +37,7 @@ const initialStats: GameStats = {
   },
   currentStreak: 0,
   maxStreak: 0,
+  duration: null,
 };
 
 const useStats = createStoredState<GameStats>(GAME_STATS_KEY);

pages/lawan.tsx

@@ -169,6 +169,7 @@ const initialStats: GameStats = {
   },
   currentStreak: 0,
   maxStreak: 0,
+  duration: null,
 };
 
 interface MainProps {

utils/game.ts

@@ -18,6 +18,7 @@ export const initialState: GameState = {
   enableFreeEdit: false,
   enableLiarMode: false,
   lieBoxes: [],
+  startedAt: null,
 };
 
 export const useGamePersistedState =

utils/types.ts

@@ -1,3 +1,4 @@
+import { Duration } from "date-fns";
 import { Dispatch, SetStateAction } from "react";
 
 export type AnswerState = "c" | "e" | "w";
@@ -12,6 +13,7 @@ export interface GameState {
   enableFreeEdit: boolean;
   enableLiarMode: boolean;
   lieBoxes: ForcedResult[];
+  startedAt: number | null;
 }
 
 export interface GameStats {
@@ -26,6 +28,7 @@ export interface GameStats {
   };
   currentStreak: number;
   maxStreak: number;
+  duration: Duration | null;
 }
 
 export interface Game<T = GameState> {