Added: Timer

ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { ReviewerState } from "../reviewer";
     import Remaining from "./Remaining.svelte";
     import More from "./More.svelte";
+    import Timer from "./Timer.svelte";
 
     export let state: ReviewerState;
 
@@ -50,7 +51,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {tr.studyingShowAnswer()}
             </button>
         {/if}
-        <span class="disappearing"></span>
+        <div class="disappearing more">
+            <Timer {state}></Timer>
+        </div>
         <div class="disappearing more">
             <More {state}></More>
         </div>
@@ -79,7 +82,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .more {
-        text-align: right;
+        // text-align: right;
+        direction: rtl;
     }
 
     @media (max-width: 583px) {

ts/routes/reviewer/reviewer-bottom/Timer.svelte

@@ -0,0 +1,44 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import type { ReviewerState } from "../reviewer";
+    import { onMount } from "svelte";
+
+    export let state: ReviewerState;
+
+    let text = "";
+
+    function step() {
+        text = formatTime(Date.now() - state.beginAnsweringMs);
+    }
+
+    onMount(() => {
+        const interval = setInterval(step, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    });
+    step();
+
+    function formatTime(time: number) {
+        const seconds = time / 1000;
+        return `${Math.floor(seconds / 60)
+            .toFixed(0)
+            .padStart(2, "0")}:${(seconds % 60).toFixed(0).padStart(2, "0")}`;
+    }
+</script>
+
+<span>
+    <div>
+        {text}
+    </div>
+</span>
+
+<style>
+    div {
+        width: 88px;
+        text-align: center;
+    }
+</style>