Use sveltekit

build/configure/src/web.rs

@@ -229,18 +229,6 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
             ":sveltekit"
         ],
     )?;
-    build_page(
-        "reviewer-bottom",
-        true,
-        inputs![
-            //
-            ":ts:lib",
-            ":ts:components",
-            ":sass",
-            ":sveltekit"
-        ],
-    )?;
-
     Ok(())
 }
 

qt/aqt/mediasrv.py

@@ -334,6 +334,7 @@ def is_sveltekit_page(path: str) -> bool:
         "import-csv",
         "import-page",
         "image-occlusion",
+        "reviewer-bottom"
     ]
 
 

qt/aqt/reviewer.py

@@ -355,7 +355,7 @@ class Reviewer:
         self.web.allow_drops = True
         self.web.eval("_blockDefaultDragDropBehavior();")
         # show answer / ease buttons
-        self.bottom.web.load_ts_page("reviewer-bottom")
+        self.bottom.web.load_sveltekit_page("reviewer-bottom")
 
     # Showing the question
     ##########################################################################
@@ -848,7 +848,7 @@ timerStopped = false;
         else:
             maxTime = 0
         self.bottom.web.eval(
-            "anki.showQuestion(%s,%d);" % (json.dumps(middle), maxTime)
+            "_showQuestion(%s,%d);" % (json.dumps(middle), maxTime)
         )
 
     def _showEaseButtons(self) -> None:
@@ -858,7 +858,7 @@ timerStopped = false;
         middle = self._answerButtons()
         conf = self.mw.col.decks.config_dict_for_deck_id(self.card.current_deck_id())
         self.bottom.web.eval(
-            f"anki.showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
+            f"_showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
         )
 
     def _remaining(self) -> str:

ts/routes/reviewer-bottom/+page.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+    import ReviewerBottom from "./ReviewerBottom.svelte";
+    import "./index.scss"
+
+    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;
+    let answerButtons = writable<AnswerButtonInfo[]>([])
+
+    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;
+    }
+
+    globalThis._showQuestion = _showQuestion;
+    globalThis._showAnswer = _showAnswer;
+
+    function selectedAnswerButton(): string | undefined {
+        const node = document.activeElement as HTMLElement;
+        if (!node) {
+            return;
+        }
+        return node.dataset.ease;
+    }
+
+</script>
+
+<ReviewerBottom {answerButtons}></ReviewerBottom>

ts/routes/reviewer-bottom/index.ts

@@ -1,74 +0,0 @@
-/* Copyright: Ankitects Pty Ltd and contributors
- * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-
-/* eslint
-@typescript-eslint/no-unused-vars: "off",
-*/
-
-import { mount } from "svelte";
-import "./index.scss";
-import ReviewerBottom from "./index.svelte";
-import { writable } from "svelte/store";
-
-let time: number; // set in python code
-let timerStopped = false;
-
-let maxTime = 0;
-
-function updateTime(): void {
-    const timeNode = document.getElementById("time");
-    if (maxTime === 0) {
-        timeNode.textContent = "";
-        return;
-    }
-    time = Math.min(maxTime, time);
-    const m = Math.floor(time / 60);
-    const s = 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;
-let answerButtons = writable<AnswerButtonInfo[]>([])
-
-export function showQuestion(txt: string, maxTime_: number): void {
-    showAnswer([]);
-    time = 0;
-    maxTime = maxTime_;
-    updateTime();
-
-    if (intervalId !== undefined) {
-        clearInterval(intervalId);
-    }
-
-    intervalId = setInterval(function() {
-        if (!timerStopped) {
-            time += 1;
-            updateTime();
-        }
-    }, 1000);
-}
-
-export function showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
-    answerButtons.set(info);
-    timerStopped = stopTimer;
-}
-
-function selectedAnswerButton(): string {
-    const node = document.activeElement as HTMLElement;
-    if (!node) {
-        return;
-    }
-    return node.dataset.ease;
-}
-
-mount(
-    ReviewerBottom,
-    { target: document.body, props: {answerButtons} },
-);