Answer buttons

qt/aqt/reviewer.py

@@ -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"showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
+            f"anki.showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
         )
 
     def _remaining(self) -> str:
@@ -912,31 +912,25 @@ timerStopped = false;
 
         def but(i: int, label: str) -> str:
             if i == default:
-                extra = """id="defease" """
+                id = "defease"
             else:
-                extra = ""
+                id = ""
             due = self._buttonTime(i, v3_labels=labels)
             key = (
                 tr.actions_shortcut_key(val=aqt.mw.pm.get_answer_key(i))
                 if aqt.mw.pm.get_answer_key(i)
                 else ""
             )
-            return """
-<td align=center><button %s title="%s" data-ease="%s" onclick='pycmd("ease%d");'>\
-%s%s</button></td>""" % (
-                extra,
-                key,
-                i,
-                i,
-                label,
-                due,
-            )
+            return {
+                "id": id,
+                "key": key,
+                "i": i,
+                "label": label,
+                "due": due,
+            }
 
-        buf = "<center><table cellpadding=0 cellspacing=0><tr>"
-        for ease, label in self._answerButtonList():
-            buf += but(ease, label)
-        buf += "</tr></table>"
-        return buf
+        return [but(ease, label) for ease, label in self._answerButtonList()]
+         
 
     def _buttonTime(self, i: int, v3_labels: Sequence[str]) -> str:
         if self.mw.col.conf["estTimes"]:

ts/routes/reviewer-bottom/AnswerButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { bridgeCommand } from "@tslib/bridgecommand";
+
+    export let info: AnswerButtonInfo
+</script>
+
+<button on:click={()=>bridgeCommand(`ease${info.i}`)}>
+    {info.label}
+</button>

ts/routes/reviewer-bottom/index.svelte

@@ -1,10 +1,25 @@
+<script lang="ts">
+    import type { Writable } from "svelte/store";
+    import AnswerButton from "./AnswerButton.svelte";
+    import { bridgeCommand } from "@tslib/bridgecommand";
+
+    export let answerButtons: Writable<AnswerButtonInfo[]>
+    $: console.log($answerButtons)
+</script>
+
 <div id="outer fancy">
     <div id="tableinner">
         <div>
             <button>Edit</button>
         </div>
         <div>
-            <button>Review Buttons</button>
+            {#if $answerButtons.length}
+                {#each $answerButtons as answerButton}
+                    <AnswerButton info={answerButton}></AnswerButton>
+                {/each}
+            {:else}
+                <button on:click={()=>bridgeCommand("ans")}>Review Buttons</button>
+            {/if}
         </div>
         <div>
             <button>More</button>

ts/routes/reviewer-bottom/index.ts

@@ -8,6 +8,7 @@
 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;
@@ -34,9 +35,10 @@ function updateTime(): void {
 }
 
 let intervalId: number | undefined;
+let answerButtons = writable<AnswerButtonInfo[]>([])
 
 export function showQuestion(txt: string, maxTime_: number): void {
-    showAnswer(txt);
+    showAnswer([]);
     time = 0;
     maxTime = maxTime_;
     updateTime();
@@ -53,8 +55,8 @@ export function showQuestion(txt: string, maxTime_: number): void {
     }, 1000);
 }
 
-function showAnswer(txt: string, stopTimer = false): void {
-    document.getElementById("middle").innerHTML = txt;
+export function showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
+    answerButtons.set(info);
     timerStopped = stopTimer;
 }
 
@@ -68,5 +70,5 @@ function selectedAnswerButton(): string {
 
 mount(
     ReviewerBottom,
-    { target: document.body },
+    { target: document.body, props: {answerButtons} },
 );

ts/routes/reviewer-bottom/types.ts

@@ -0,0 +1,7 @@
+interface AnswerButtonInfo {
+    "extra": string,
+    "key": string,
+    "i": number,
+    "label": string,
+    "due": string,
+}