Neaten bottom code

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

@@ -4,88 +4,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { onMount } from "svelte";
-    import { writable } from "svelte/store";
-    import { bridgeCommand } from "@tslib/bridgecommand";
     import ReviewerBottom from "./ReviewerBottom.svelte";
-    import type { AnswerButtonInfo } from "./types";
     import "./index.scss";
+    import { setupBottomBar } from "./reviewer";
 
-    const answerButtons = writable<AnswerButtonInfo[]>([]);
+    let reviewerInfo: null | ReturnType<typeof setupBottomBar> = null;
-    const remaining = writable<[number, number, number]>([0, 0, 0]);
-    const remainingIndex = writable<number>(-1);
 
     onMount(() => {
-        /*
+        reviewerInfo = setupBottomBar()
-        let timerStopped = false;
-
-        let maxTime = 0;
-
-        function updateTime(): void {
-            const timeNode = document.getElementById("time");
-            if (maxTime === 0) {
-                timeNode.textContent = "";
-                return;
-            }
-            globalThis.time = Math.min(maxTime, globalThis.time);
-            const m = Math.floor(globalThis.time / 60);
-            const s = globalThis.time % 60;
-            const sStr = String(s).padStart(2, "0");
-            const timeString = `${m}:${sStr}`;
-
-            if (maxTime === time) {
-                timeNode.innerHTML = `<font color=red>${timeString}</font>`;
-            } else {
-                timeNode.textContent = timeString;
-            }
-        }*/
-
-        let intervalId: number | undefined;
-
-        function _showQuestion(_txt: string, _maxTime_: number): void {
-            _showAnswer([]);
-            globalThis.time = 0;
-            // maxTime = maxTime_;
-            // updateTime();
-
-            if (intervalId !== undefined) {
-                clearInterval(intervalId);
-            }
-
-            /*
-            intervalId = setInterval(function() {
-                if (!timerStopped) {
-                    globalThis.time += 1;
-                    //updateTime();
-                }
-            }, 1000);*/
-        }
-
-        function _showAnswer(info: AnswerButtonInfo[], _stopTimer = false): void {
-            console.log(info);
-            answerButtons.set(info);
-            // timerStopped = stopTimer;
-        }
-
-        function _updateRemaining(counts: [number, number, number], idx: number) {
-            remaining.set(counts);
-            remainingIndex.set(idx);
-        }
-
-        globalThis._showQuestion = _showQuestion;
-        globalThis._showAnswer = _showAnswer;
-        globalThis._updateRemaining = _updateRemaining;
-
-        /*
-        function selectedAnswerButton(): string | undefined {
-            const node = document.activeElement as HTMLElement;
-            if (!node) {
-                return;
-            }
-            return node.dataset.ease;
-        }
-        */
-        bridgeCommand("bottomReady");
     });
 </script>
 
-<ReviewerBottom {answerButtons} {remaining} {remainingIndex}></ReviewerBottom>
+{#if reviewerInfo}
+    <ReviewerBottom {...reviewerInfo}></ReviewerBottom>
+{/if}

ts/routes/reviewer/reviewer-bottom/reviewer.ts

@@ -0,0 +1,86 @@
+import { writable } from "svelte/store";
+import type { AnswerButtonInfo } from "./types";
+import { bridgeCommand } from "@tslib/bridgecommand";
+
+export function setupBottomBar() {
+    /*
+    let timerStopped = false;
+
+    let maxTime = 0;
+
+    function updateTime(): void {
+        const timeNode = document.getElementById("time");
+        if (maxTime === 0) {
+            timeNode.textContent = "";
+            return;
+        }
+        globalThis.time = Math.min(maxTime, globalThis.time);
+        const m = Math.floor(globalThis.time / 60);
+        const s = globalThis.time % 60;
+        const sStr = String(s).padStart(2, "0");
+        const timeString = `${m}:${sStr}`;
+
+        if (maxTime === time) {
+            timeNode.innerHTML = `<font color=red>${timeString}</font>`;
+        } else {
+            timeNode.textContent = timeString;
+        }
+    }*/
+
+    const answerButtons = writable<AnswerButtonInfo[]>([]);
+    const remaining = writable<[number, number, number]>([0, 0, 0]);
+    const remainingIndex = writable<number>(-1);
+
+    let intervalId: number | undefined;
+
+    function _showQuestion(_txt: string, _maxTime_: number): void {
+        _showAnswer([]);
+        globalThis.time = 0;
+        // maxTime = maxTime_;
+        // updateTime();
+
+        if (intervalId !== undefined) {
+            clearInterval(intervalId);
+        }
+
+        /*
+        intervalId = setInterval(function() {
+            if (!timerStopped) {
+                globalThis.time += 1;
+                //updateTime();
+            }
+        }, 1000);*/
+    }
+
+    function _showAnswer(info: AnswerButtonInfo[], _stopTimer = false): void {
+        console.log(info);
+        answerButtons.set(info);
+        // timerStopped = stopTimer;
+    }
+
+    function _updateRemaining(counts: [number, number, number], idx: number) {
+        remaining.set(counts);
+        remainingIndex.set(idx);
+    }
+
+    globalThis._showQuestion = _showQuestion;
+    globalThis._showAnswer = _showAnswer;
+    globalThis._updateRemaining = _updateRemaining;
+
+    /*
+    function selectedAnswerButton(): string | undefined {
+        const node = document.activeElement as HTMLElement;
+        if (!node) {
+            return;
+        }
+        return node.dataset.ease;
+    }
+    */
+    bridgeCommand("bottomReady");
+
+    return {
+        answerButtons,
+        remaining,
+        remainingIndex,
+    };
+}